Build a dark, premium, single-page landing page for an AI-powered Modern SEO agency using React + Vite + Tailwind CSS + shadcn/ui + Framer Motion (motion/react). The page has a luxury editorial aesthetic black backgrounds, white text, liquid glass (glassmorphism) effects, and cinematic video backgrounds.
## VISUAL HIERARCHY (global eye flow)
Hero heading → Hero CTA → Start section heading → Feature rows → Stats numbers → Testimonial quotes → Final CTA
## ANTI-PATTERNS (do NOT add)
* No decorative gradient blobs, mesh gradients, or aurora effects
* No dark/light mode toggle dark only
* No hamburger menu hide nav links on mobile, show only logo + "Get Started" CTA
* No parallax or scroll-hijacking
* No particle effects, cursor trails, or ambient canvas animations
* No React.lazy, code splitting, or lazy loading for components single bundle
* No skeleton screens or loading spinners
* No additional box-shadows beyond what liquid-glass and liquid-glass-strong provide
* No border-radius beyond what is explicitly specified
* No emoji in any UI text
* No React Router pages single page, all sections in one file or imported components
---
## FONTS
Import URL:
```
https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap
```
Role assignments:
* Headings: `Instrument Serif` (italic) → Tailwind class `font-heading`
* Body: `Barlow` (weights 300, 400, 500, 600) → Tailwind class `font-body`
Tailwind config:
```js
fontFamily: {
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
}
```
`font-display: swap` on all families. Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`.
---
## COLOR THEME (:root, HSL format)
```css
:root {
--background: 213 45% 67%;
--foreground: 0 0% 100%;
--card: 213 45% 62%;
--card-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--secondary: 213 45% 72%;
--secondary-foreground: 0 0% 100%;
--muted: 213 35% 60%;
--muted-foreground: 0 0% 100% / 0.7;
--accent: 213 45% 72%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--border: 0 0% 100% / 0.2;
--input: 0 0% 100% / 0.2;
--ring: 0 0% 100% / 0.3;
--radius: 9999px;
--glass-bg: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.25);
--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
--glass-blur: 16px;
}
```
All component colors use `hsl(var(--token))` no raw hex in JSX.
---
## SPACING RHYTHM
```
Section vertical padding: py-24 md:py-32 lg:py-40 (all inner sections)
Section horizontal padding: px-6 md:px-8 lg:px-16
Content max-width: max-w-6xl mx-auto
Badge to heading: mb-4
Heading to body text: mt-4 md:mt-6
Body text to CTA: mt-6 md:mt-8
Card internal padding: p-6 md:p-8
Card grid gap: gap-6
Dividers between sections: none (video bg sections create natural breaks)
```
---
## Z-INDEX STACK
```
z-0 background videos, poster images
z-[1] gradient overlays on videos (top/bottom fades)
z-10 all section content (text, cards, buttons, badges)
z-50 fixed navbar
```
---
## EASING CURVES
```css
:root {
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}
```
All Framer Motion entrance animations use `ease: [0.16, 1, 0.3, 1]`.
All CSS hover transitions use `transition-all duration-200` unless specified otherwise.
---
## LIQUID GLASS CSS (index.css, @layer components)
### .liquid-glass (subtle, used on nav pills, badges, cards):
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.45) 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.15) 80%,
rgba(255, 255, 255, 0.45) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
### .liquid-glass-strong (prominent, used on CTA buttons):
```css
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),
inset 0 1px 1px rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.liquid-glass-strong::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.2) 80%,
rgba(255, 255, 255, 0.5) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
The `::before` pseudo-element creates a gradient border effect using the mask-composite trick (thin glowing border that fades in the middle).
---
## ASSETS & MEDIA
Hero background video (MP4, CloudFront):
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
```
Poster image: `/images/hero_bg.jpeg` (local file in `public/images/`)
Attributes: `autoPlay, loop, muted, playsInline, preload="auto"`
StartSection video (HLS via Mux):
```
https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8
```
Stats section video (HLS via Mux, displayed desaturated):
```
https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8
```
CTA/Footer section video (HLS via Mux):
```
https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
```
Feature GIFs (imported from `src/assets/`):
* `feature-1.gif` used in FeaturesChess row 1 (right side)
* `feature-2.gif` used in FeaturesChess row 2 (left side)
Logo icon: `src/assets/logo-icon.png` (h-12 w-12)
All HLS videos: use `hls.js` library for playback. `autoPlay, loop, muted, playsInline`.
All below-fold videos: `preload="none"`, play/pause via IntersectionObserver (play when >50% visible, pause when <10% visible).
---
## SECTION-BY-SECTION BREAKDOWN
---
### SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`)
Visual hierarchy: Logo → Nav links pill → "Get Started" CTA
Container: `fixed top-4 left-0 right-0 z-50 px-8 lg:px-16 py-3`
**Left Logo:**
`<a href="#hero">`
Logo image: `src/assets/logo-icon.png`, `h-12 w-12`
Hover: `hover:opacity-80 transition-opacity duration-200`
**Center Links** (desktop only: `hidden md:flex`):
Wrapped in `liquid-glass rounded-full px-1.5 py-1` pill container, `flex items-center`
Links (`<a>` elements): "Home", "Services", "Work", "Process", "Pricing"
Each link: `px-3 py-2 text-sm font-medium text-foreground/90 font-body rounded-full`
Hover: `hover:text-foreground hover:bg-white/[0.04] transition-all duration-200`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none`
Last item is NOT a link it's the "Get Started" button:
**"Get Started" button** (inside the pill):
`<a href="#cta">` styled as button
Text: "Get Started" with ArrowUpRight icon (14px) from lucide-react
Styling: `bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-body font-medium flex items-center gap-1`
Hover: `hover:bg-white/90 transition-colors duration-200`
Active: `active:scale-[0.97]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/30 ring-offset-2 ring-offset-black outline-none`
---
### SECTION 2: HERO (`<section id="hero">`, `aria-label="Hero"`)
Visual hierarchy: Heading → CTA buttons → Badge pill → Partners bar → Subtext
Container: `relative overflow-visible` with fixed `height: 1000px`
**Background video layer (z-0):**
`<video>` tag with hero CloudFront MP4 URL
Positioned: `absolute left-0 w-full h-auto object-contain z-0` with `top: 20%`
Poster: `/images/hero_bg.jpeg`
Attributes: `autoPlay, loop, muted, playsInline, preload="auto"`
Dark overlay: `absolute inset-0 bg-black/5 z-0`
Bottom gradient fade: `absolute bottom-0 left-0 right-0` with `height: 300px`, `background: linear-gradient(to bottom, transparent, black)`, `pointer-events-none z-[1]`
**Content** (`relative z-10`, centered, `paddingTop: 150px`):
**Badge pill:**
Framer Motion: `{ opacity: 0, y: 12 } → { opacity: 1, y: 0 }, duration: 0.5, ease: [0.16, 1, 0.3, 1]`
`liquid-glass rounded-full px-1 py-1 inline-flex items-center gap-2`
Inner white badge: `bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body` "New"
Adjacent text: `text-xs font-body text-white/80 pr-3` "Introducing AI-powered web design."
**Heading** (`<h1>`, only h1 on the page uses BlurText component):
Text: "The Website Your Brand Deserves"
Styling: `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl tracking-[-4px]`
Animation: word-by-word stagger from bottom with gaussian blur dissolve, triggered by IntersectionObserver, delay 100ms between words
**BlurText component internals:**
Splits text by words (or letters, configurable)
Uses IntersectionObserver (`threshold: 0.1`) to trigger on scroll, fires once
Each word is a `<motion.span>` with 3-step keyframe animation:
Step 1: `{ filter: 'blur(10px)', opacity: 0, y: 50 }`
Step 2: `{ filter: 'blur(5px)', opacity: 0.5, y: -5 }`
Step 3: `{ filter: 'blur(0px)', opacity: 1, y: 0 }`
Staggered by index with configurable delay (default 200ms per element)
Step duration: 0.35s per keyframe step
Easing: `[0.16, 1, 0.3, 1]` per step
**Subtext** (`<p>`):
Framer Motion: `{ filter: 'blur(10px)', opacity: 0, y: 20 } → { filter: 'blur(0px)', opacity: 1, y: 0 }, duration: 0.6, delay: 0.8, ease: [0.16, 1, 0.3, 1]`
Text: "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined."
Styling: `text-sm md:text-base text-white font-body font-light leading-tight max-w-md`
**CTA buttons** (`<div>`):
Framer Motion: same blur-in pattern, `delay: 1.1s`
Flex row, `gap-4 mt-8`
Primary "Get Started":
`<a href="#cta">` styled as button
`liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-body text-white flex items-center gap-2`
ArrowUpRight icon (14px)
Hover: `hover:scale-[1.03] transition-transform duration-200`
Active: `active:scale-[0.98]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none`
Secondary "Watch the Film":
`<button>` text-only style
`text-sm font-body text-white flex items-center gap-2`
Play icon (14px, `fill-white`) from lucide-react
Hover: `hover:opacity-70 transition-opacity duration-200`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 rounded-full outline-none`
**Partners bar** (`mt-auto pb-8 pt-16`):
"Trusted by the teams behind" `liquid-glass rounded-full px-3.5 py-1 text-xs font-body text-white/60`
5 partner names in a flex row (`gap-12 md:gap-16 mt-6`):
Each: `text-2xl md:text-3xl font-heading italic text-white` "Stripe", "Vercel", "Linear", "Notion", "Figma"
---
### SECTION 3: START SECTION / "How It Works" (`<section>`, `aria-labelledby="start-heading"`)
Visual hierarchy: Heading → Subtext → CTA
Container: `relative overflow-hidden`
**Background:** HLS video via hls.js library
`<video>` with StartSection Mux URL
`absolute inset-0 w-full h-full object-cover z-0`
Attributes: `autoPlay, loop, muted, playsInline`
Top gradient fade: `absolute top-0 left-0 right-0 h-[200px] bg-gradient-to-b from-black to-transparent pointer-events-none z-[1]`
Bottom gradient fade: `absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-black to-transparent pointer-events-none z-[1]`
**Content** (`relative z-10, flex flex-col items-center justify-center text-center, minHeight: 500px, py-24 md:py-32 px-6`):
Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "How It Works"
Heading (`<h2 id="start-heading">`): "You dream it. We ship it."
Styling: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]`
Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.7, ease: [0.16, 1, 0.3, 1]`
Subtext (`<p>`): "Share your vision. Our AI handles the rest wireframes, design, code, launch. All in days, not quarters."
Styling: `text-white/60 font-body font-light text-sm md:text-base max-w-lg mt-5 leading-relaxed`
Framer Motion: `{ opacity: 0, y: 20 } → { opacity: 1, y: 0 }, duration: 0.6, delay: 0.15`
CTA: `<a>` "Get Started"
`liquid-glass-strong rounded-full px-6 py-3 text-sm font-body text-white flex items-center gap-2 mt-8`
ArrowUpRight icon (14px)
Hover: `hover:scale-[1.03] transition-transform duration-200`
Active: `active:scale-[0.98]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none`
---
### SECTION 4: FEATURES CHESS / Alternating Rows (`<section>`, `aria-labelledby="capabilities-heading"`)
Visual hierarchy: Feature GIF/image → Feature title → Body text → "Learn more" button
Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black`
Inner: `max-w-6xl mx-auto`
**Section header:**
Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "Capabilities"
Heading (`<h2 id="capabilities-heading">`): "Pro features. Zero complexity."
Styling: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]`
Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.7`
**Row 1** (`flex flex-col md:flex-row gap-8 md:gap-12 items-center mt-16 md:mt-20`):
Framer Motion: `{ opacity: 0, y: 50 } → { opacity: 1, y: 0 }, duration: 0.8`
Left Content (`md:w-1/2`):
Title (`<h3>`): "Designed to convert. Built to perform." `text-2xl md:text-3xl font-heading italic text-white tracking-tight leading-[1]`
Body (`<p>`): "Every pixel is intentional. Our AI studies what works across thousands of top sites then builds yours to outperform them all." `text-sm text-white/60 font-body font-light leading-relaxed mt-4`
Button: `<a>` "Learn more"
`liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-body text-white inline-flex items-center gap-2 mt-6`
ArrowUpRight icon (14px)
Hover: `hover:scale-[1.03] transition-transform duration-200`
Active: `active:scale-[0.98]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none`
Right Image (`md:w-1/2`):
`liquid-glass rounded-2xl overflow-hidden`
`<img src={feature1Gif} alt="AI-powered conversion optimization" className="w-full h-auto object-cover" loading="lazy" />`
GIF URL for download: `https://motionsites.ai/assets/hero-finlytic-preview-CV9g0FHP.gif`
**Row 2** (`flex flex-col md:flex-row-reverse gap-8 md:gap-12 items-center mt-16 md:mt-20`):
Framer Motion: `{ opacity: 0, y: 50 } → { opacity: 1, y: 0 }, duration: 0.8, delay: 0.1`
Same structure but reversed layout (content right, image left).
Right Content:
Title: "It gets smarter. Automatically." same styling
Body: "Your site evolves on its own. AI monitors every click, scroll, and conversion then optimizes in real time. No manual updates. Ever."
Button: "See how it works" same styling
Left Image:
GIF URL for download: `https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif`
Same liquid-glass container, `loading="lazy"`
---
### SECTION 5: FEATURES GRID / "Why Us" (`<section>`, `aria-labelledby="why-us-heading"`)
Visual hierarchy: Icon → Card title → Card description
Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black`
Inner: `max-w-6xl mx-auto`
**Section header:**
Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "Why Us"
Heading (`<h2 id="why-us-heading">`): "The difference is everything."
Same heading styling.
**Grid** (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-14`):
Framer Motion stagger: 0.08s per card, `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.6`
Each card: `liquid-glass rounded-2xl p-6`
Card contents:
Icon container: `liquid-glass-strong rounded-full w-10 h-10 flex items-center justify-center mb-4`
Icon: lucide-react icon, 18px, `text-white`
Title (`<h3>`): `text-base font-body font-medium text-white mt-0`
Description (`<p>`): `text-sm text-white/60 font-body font-light leading-relaxed mt-2`
4 cards:
1. Icon: `Zap` "Days, Not Months" "Concept to launch at a pace that redefines fast. Because waiting isn't a strategy."
2. Icon: `Palette` "Obsessively Crafted" "Every detail considered. Every element refined. Design so precise, it feels inevitable."
3. Icon: `BarChart3` "Built to Convert" "Layouts informed by data. Decisions backed by performance. Results you can measure."
4. Icon: `Shield` "Secure by Default" "Enterprise-grade protection comes standard. SSL, DDoS mitigation, compliance. All included."
---
### SECTION 6: STATS (`<section>`, `aria-label="Statistics"`)
Visual hierarchy: Stat numbers → Stat labels → Background video
Container: `relative overflow-hidden py-24 md:py-32`
**Background:** HLS video via hls.js
`<video>` with Stats Mux URL
`absolute inset-0 w-full h-full object-cover z-0`
CSS filter: `filter: saturate(0)` (desaturated / B&W)
Attributes: `autoPlay, loop, muted, playsInline`
Top gradient: `h-[200px] bg-gradient-to-b from-black to-transparent z-[1]`
Bottom gradient: `h-[200px] bg-gradient-to-t from-black to-transparent z-[1]`
**Content** (`relative z-10 px-6 md:px-8 lg:px-16`):
Inner: `max-w-6xl mx-auto`
Card: `liquid-glass rounded-3xl p-12 md:p-16`
Framer Motion: `{ opacity: 0, y: 40 } → { opacity: 1, y: 0 }, duration: 0.8`
Grid inside card: `grid grid-cols-2 lg:grid-cols-4 gap-8`
4 stats:
Each stat:
Value: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white`
Label: `text-white/60 font-body font-light text-sm mt-1`
1. "200+" / "Sites launched"
2. "98%" / "Client satisfaction"
3. "3.2x" / "More conversions"
4. "5 days" / "Average delivery"
---
### SECTION 7: TESTIMONIALS (`<section>`, `aria-labelledby="testimonials-heading"`)
Visual hierarchy: Quote text → Reviewer name → Role
Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black`
Inner: `max-w-6xl mx-auto`
**Section header:**
Badge: "What They Say"
Heading (`<h2 id="testimonials-heading">`): "Don't take our word for it."
**Grid** (`grid grid-cols-1 md:grid-cols-3 gap-6 mt-14`):
Framer Motion stagger: 0.1s per card, `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.6`
Each card: `liquid-glass rounded-2xl p-8`
Card contents:
Quote (`<blockquote>`): `text-white/80 font-body font-light text-sm italic leading-relaxed`
Name: `text-white font-body font-medium text-sm mt-5`
Role: `text-white/50 font-body font-light text-xs`
3 cards:
1. "A complete rebuild in five days. The result outperformed everything we'd spent months building before." "Sarah Chen" / "CEO, Luminary"
2. "Conversions up 4x. That's not a typo. The design just works differently when it's built on real data." "Marcus Webb" / "Head of Growth, Arcline"
3. "They didn't just design our site. They defined our brand. World-class doesn't begin to cover it." "Elena Voss" / "Brand Director, Helix"
---
### SECTION 8: CTA + FOOTER (`<section id="cta">` + `<footer>`)
Visual hierarchy: CTA heading → CTA buttons → Footer links
Container: `relative overflow-hidden`
**Background:** HLS video via hls.js
`<video>` with CTA/Footer Mux URL
`absolute inset-0 w-full h-full object-cover z-0`
Top gradient: `h-[200px] bg-gradient-to-b from-black to-transparent z-[1]`
Bottom gradient: `h-[200px] bg-gradient-to-t from-black to-transparent z-[1]`
**CTA Content** (`relative z-10 flex flex-col items-center text-center py-24 md:py-32 px-6`):
Heading (`<h2>`): "Your next website starts here."
Styling: `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white leading-[0.85] tracking-tight`
Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.8`
Subtext (`<p>`): "Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities."
`text-white/60 font-body font-light text-sm md:text-base max-w-lg mt-5 leading-relaxed`
Buttons (`flex items-center gap-4 mt-8`):
Primary "Book a Call":
`liquid-glass-strong rounded-full px-6 py-3 text-sm font-body text-white flex items-center gap-2`
ArrowUpRight icon (14px)
Hover: `hover:scale-[1.03] transition-transform duration-200`
Active: `active:scale-[0.98]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none`
Secondary "View Pricing":
`bg-white text-black rounded-full px-6 py-3 text-sm font-body font-medium`
Hover: `hover:bg-white/90 transition-colors duration-200`
Active: `active:scale-[0.97]`
Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none`
**Footer** (`<footer>` inside the same section wrapper):
`mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4`
Left: `text-white/40 text-xs font-body` "© 2026 Studio. All rights reserved."
Right: `flex items-center gap-6`
Links (`<a>`): "Privacy", "Terms", "Contact" `text-white/40 text-xs font-body`
Hover: `hover:text-white/70 transition-colors duration-200`
---
## DESIGN PATTERNS USED THROUGHOUT
```
Every section badge: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body
Every section heading: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]
Every body text: text-white/60 or text-white/70, font-body font-light text-sm md:text-base
Primary CTA: liquid-glass-strong rounded-full with ArrowUpRight icon
Secondary CTA: bg-white text-black rounded-full
Card containers: liquid-glass rounded-2xl
Video overlay fades: always linear-gradient(to bottom/top, black, transparent) with pointer-events-none
```
---
## RESPONSIVE BEHAVIOR
| Element | Mobile (<768px) | Tablet (768-1023px) | Desktop (1024px+) |
|------------------|----------------------------|-------------------------|----------------------------|
| Navbar links | Hidden | Visible in pill | Visible in pill |
| Navbar CTA | Hidden (inside pill) | Visible | Visible |
| Hero heading | text-6xl | text-7xl | text-[5.5rem] |
| Hero badge | Visible | Visible | Visible |
| Partners bar | Scrollable horizontal | Visible, gap-12 | Visible, gap-16 |
| Feature chess | Stacked vertically | Side-by-side | Side-by-side |
| Features grid | 1 column | 2 columns | 4 columns |
| Stats grid | 2x2 grid | 4 columns | 4 columns |
| Testimonials | 1 column | 3 columns | 3 columns |
| CTA buttons | Stacked | Row | Row |
| Footer | Stacked, centered | Row, space-between | Row, space-between |
| HLS videos | Autoplay (muted OK) | Autoplay | Autoplay |
---
## PERFORMANCE
* Hero video: `preload="auto"` (above fold, critical)
* All HLS videos: `preload="none"`, initialized via hls.js only when IntersectionObserver fires (>50% visible)
* Feature GIFs: `loading="lazy"` on `<img>` tags
* Fonts: `font-display: swap`, preconnect to Google Fonts
* Backdrop-filter: limit to visible-viewport elements. Off-screen liquid-glass cards should not trigger composite layers
* Reduced motion:
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
Framer Motion: check `useReducedMotion()`, set initial states to final values
* Stats video `filter: saturate(0)` this is a CSS filter, not a canvas operation, so GPU-accelerated
---
## OVERALL PAGE STRUCTURE
```
<div className="bg-black">
<div className="relative z-10">
<Navbar /> ← fixed floating nav, z-50
<Hero /> ← 1000px tall, CloudFront MP4 video bg
<div className="bg-black">
<StartSection /> ← HLS video bg, "How It Works"
<FeaturesChess /> ← alternating text/gif rows
<FeaturesGrid /> ← 4-card grid
<Stats /> ← HLS video bg (desaturated), stats card
<Testimonials /> ← 3-card grid
<CtaFooter /> ← HLS video bg, CTA + footer
</div>
</div>
</div>
```
---
## KEY DEPENDENCIES
```json
{
"motion": "^12.35.0",
"hls.js": "^1.6.15",
"lucide-react": "^0.462.0",
"react-router-dom": "^6.30.1"
}
```
Icons from lucide-react: `ArrowUpRight, Play, Zap, Palette, BarChart3, Shield`
---
## ACCEPTANCE CRITERIA
```
[ ] Hero video autoplays on Chrome, Safari, Firefox desktop without user interaction
[ ] Hero video poster image shows before video loads
[ ] Liquid-glass ::before gradient border is visible on all nav pills, badges, cards, and CTA buttons
[ ] Liquid-glass-strong has noticeably stronger blur (50px vs 4px) than liquid-glass
[ ] Navbar stays fixed on scroll, always above all content at z-50
[ ] All 5 partner names visible in hero without horizontal scroll on 375px mobile
[ ] Font-heading italic renders as Instrument Serif Italic, not faux italic
[ ] BlurText animation triggers only once on first scroll-into-view
[ ] HLS videos load and play on Safari (webkit) hls.js handles this
[ ] Stats video renders fully desaturated (B&W) via CSS filter
[ ] Feature GIFs load lazily (network tab confirms no load until scrolled)
[ ] No horizontal scrollbar on any viewport width between 320px and 2560px
[ ] All text is readable (WCAG AA contrast) against its background
[ ] Tab navigation reaches all interactive elements in logical order
[ ] prefers-reduced-motion disables blur + translate animations, shows all content immediately
[ ] All ::before pseudo-elements on glass components have pointer-events: none
```
---
---
---
Prompts
