fix: tune landing mobile spacing
This commit is contained in:
parent
7727a022aa
commit
e6ff7378e8
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue