fix: tune landing mobile spacing

This commit is contained in:
codebanditssss 2026-07-06 05:47:23 +05:30
parent 7727a022aa
commit e6ff7378e8
5 changed files with 20 additions and 9 deletions

View File

@ -473,8 +473,8 @@ export function LandingFeaturesScroll() {
</div>
{/* Mobile / tablet: simple stacked list, each with its own scaled mockup. */}
<div className="container-page pt-14 pb-20 lg:hidden">
<div className="gsap-reveal mx-auto mt-20 flex max-w-[1200px] items-center gap-4 px-1 text-left">
<div className="container-page pt-8 pb-16 lg:hidden">
<div className="gsap-reveal mx-auto flex max-w-[1200px] items-center gap-4 px-1 text-left">
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-[color:var(--border-strong)] to-[color:var(--border-strong)]" />
<div className="whitespace-nowrap text-[11px] font-bold uppercase tracking-[0.18em] text-[color:var(--fg-dim)]">
FEATURES

View File

@ -42,7 +42,7 @@ function GithubIcon({ className = "" }: { className?: string }) {
export function LandingFooter() {
return (
<footer data-testid="footer" className="landing-reveal border-t border-[color:var(--border)] bg-[color:var(--bg)]">
<div className="container-page py-24">
<div className="container-page py-12 sm:py-24">
<div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr]">
<div className="max-w-md">
<a href="/" className="inline-flex items-center gap-3">

View File

@ -76,7 +76,14 @@ const navLinks = [
function getPlatformLabel() {
if (typeof navigator === "undefined") return "Install AO";
const isSmallViewport = typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches;
const platform = `${navigator.platform} ${navigator.userAgent}`.toLowerCase();
const isPortableDevice =
isSmallViewport ||
/android|iphone|ipad|ipod|mobile|tablet/.test(platform) ||
(platform.includes("mac") && navigator.maxTouchPoints > 1);
if (isPortableDevice) return "Setup guide";
if (platform.includes("mac")) return "Install for macOS";
if (platform.includes("win")) return "Install for Windows";
if (platform.includes("linux") || platform.includes("x11")) return "Install for Linux";
@ -85,12 +92,16 @@ function getPlatformLabel() {
export function LandingNav() {
const [open, setOpen] = useState(false);
const [installLabel, setInstallLabel] = useState(getPlatformLabel);
const [installLabel, setInstallLabel] = useState("Install AO");
const navRef = useRef<HTMLDivElement>(null);
const innerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
setInstallLabel(getPlatformLabel());
const updatePlatformLabel = () => setInstallLabel(getPlatformLabel());
updatePlatformLabel();
window.addEventListener("resize", updatePlatformLabel);
return () => window.removeEventListener("resize", updatePlatformLabel);
}, []);
useGSAP(() => {

View File

@ -161,11 +161,11 @@ export function LandingSocialProof() {
ref={containerRef}
id="testimonials"
data-testid="social-proof"
className="landing-section relative overflow-hidden border-t border-[color:var(--border)]"
className="relative overflow-hidden border-t border-[color:var(--border)] pt-16 pb-8 sm:pt-[clamp(100px,12vw,180px)] sm:pb-[clamp(100px,12vw,180px)]"
>
<div className="container-page">
<div className="mx-auto max-w-[1320px]">
<div className="landing-section-header grid items-end gap-8 lg:grid-cols-12">
<div className="mb-8 grid items-end gap-8 sm:mb-[clamp(64px,8vw,100px)] lg:grid-cols-12">
<div className="lg:col-span-7">
<div className="landing-eyebrow mb-4">In the wild</div>
<h2 className="landing-heading">
@ -173,7 +173,7 @@ export function LandingSocialProof() {
</h2>
</div>
<div className="lg:col-span-5">
<p className="landing-body-compact pb-17">
<p className="landing-body-compact pb-0 sm:pb-17">
Real posts from builders, researchers, and early users - pulled straight from X.
</p>
</div>

View File

@ -13,7 +13,7 @@ export function LandingVideo() {
<section
id="see-it"
data-testid="video-section"
className="landing-reveal relative border-t border-white/[0.04] pt-[clamp(56px,7vw,96px)] pb-[clamp(48px,6vw,72px)]"
className="landing-reveal relative border-t border-white/[0.04] pt-16 pb-8 sm:pt-[clamp(56px,7vw,96px)] sm:pb-[clamp(48px,6vw,72px)]"
>
<div className="container-page">
<div className="landing-section-header mx-auto max-w-[1180px] text-left">