From e6ff7378e88b56729d613078f43cbac7668cd74c Mon Sep 17 00:00:00 2001
From: codebanditssss <diwankhushi428@gmail.com>
Date: Mon, 6 Jul 2026 05:47:23 +0530
Subject: [PATCH] fix: tune landing mobile spacing

---
 .../landing/components/LandingFeaturesScroll.tsx  |  4 ++--
 frontend/src/landing/components/LandingFooter.tsx |  2 +-
 frontend/src/landing/components/LandingNav.tsx    | 15 +++++++++++++--
 .../src/landing/components/LandingSocialProof.tsx |  6 +++---
 frontend/src/landing/components/LandingVideo.tsx  |  2 +-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/landing/components/LandingFeaturesScroll.tsx b/frontend/src/landing/components/LandingFeaturesScroll.tsx
index 62011452d..b9e990f13 100644
--- a/frontend/src/landing/components/LandingFeaturesScroll.tsx
+++ b/frontend/src/landing/components/LandingFeaturesScroll.tsx
@@ -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
diff --git a/frontend/src/landing/components/LandingFooter.tsx b/frontend/src/landing/components/LandingFooter.tsx
index 87540f3fb..24d8cdc2f 100644
--- a/frontend/src/landing/components/LandingFooter.tsx
+++ b/frontend/src/landing/components/LandingFooter.tsx
@@ -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">
diff --git a/frontend/src/landing/components/LandingNav.tsx b/frontend/src/landing/components/LandingNav.tsx
index f25824fc9..4a0617243 100644
--- a/frontend/src/landing/components/LandingNav.tsx
+++ b/frontend/src/landing/components/LandingNav.tsx
@@ -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(() => {
diff --git a/frontend/src/landing/components/LandingSocialProof.tsx b/frontend/src/landing/components/LandingSocialProof.tsx
index d04210e72..0656a11b2 100644
--- a/frontend/src/landing/components/LandingSocialProof.tsx
+++ b/frontend/src/landing/components/LandingSocialProof.tsx
@@ -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>
diff --git a/frontend/src/landing/components/LandingVideo.tsx b/frontend/src/landing/components/LandingVideo.tsx
index 95886c181..7550ad170 100644
--- a/frontend/src/landing/components/LandingVideo.tsx
+++ b/frontend/src/landing/components/LandingVideo.tsx
@@ -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">