Build a premium, high-performance landing page using React, TypeScript, Tailwind CSS v4, and Motion (framer-motion). The build must be production-grade: pixel-precise, fully responsive, accessible, and animated with restraint and polish. Follow these exact specifications.
## 1. Dependencies & Setup
- **Libraries:** Install `lucide-react`, `motion`, `clsx`, `tailwind-merge`, and `react-intersection-observer`.
- **Utility:** Create a `cn()` helper in `lib/utils.ts` that merges `clsx` + `tailwind-merge` for conditional class composition. Use it everywhere classes are conditional.
- **Fonts & CSS:** In `index.css`, import Inter and Outfit from Google Fonts:
`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');`
- **Theme:** Configure the Tailwind v4 theme in CSS: `--font-sans: Inter`, `--font-display: Outfit`. Define custom CSS variables for the palette: `--ink: #0a1b33`, `--ink-deep: #0a152d`, `--muted: #64748b`, `--surface: #f9fafb`, `--hairline: rgba(148,163,184,0.15)`.
- **Global:** Body background `#f9fafb`, `font-sans`, antialiased, `text-rendering: optimizeLegibility`. Add `scroll-behavior: smooth` and a subtle noise/grain texture overlay on the body (via a fixed pseudo-element at ~3% opacity).
- **Motion accessibility:** Respect `prefers-reduced-motion` — all animations must degrade to instant/opacity-only when the user prefers reduced motion.
## 2. Layout Shell
- A single-page vertical layout: **Hero → Logo Marquee → Feature Grid → Stats Band → Testimonial → CTA → Footer**.
- Constrain content to `max-w-[1400px] mx-auto`, generous vertical rhythm (`py-20 md:py-32` between sections).
- All sections fade + slide up on scroll into view (staggered children) using `react-intersection-observer` to trigger Motion variants once.
## 3. Hero Container & Video Background
- Hero container classes: `relative w-full max-w-[1400px] mx-auto rounded-[48px] bg-white border border-slate-200/50 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.03)] overflow-hidden h-[600px] flex flex-col`.
- Background video layer: `absolute inset-0 pointer-events-none z-0 overflow-hidden select-none`.
- Video source (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260505_101331_74f9b798-3f00-4e86-8a01-377aa16ffeaa.mp4`. Attributes: `autoPlay loop muted playsInline`. Classes: `w-full h-full object-cover scale-105 transition-transform duration-1000`.
- Add a **subtle top-to-bottom white gradient scrim** (`z-10`, from `white/40` at top fading to transparent by 40%) to keep text legible without heavy overlays. Preserve the "no heavy overlay" intent.
- On load, animate the video from `scale-110` to `scale-105` over 1.2s for a slow settle.
## 4. Hero Text Content
- Content wrapper: `relative z-20 flex-1 px-8 md:px-16 pt-12 md:pt-16 flex flex-col items-start`.
- Use `motion.div` with a parent stagger container; children animate in with fade + 12px upward slide, 60ms stagger.
- **Eyebrow tag:** Small pill above the headline — `inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-50 border border-slate-200/60 text-[12px] font-medium text-slate-500`, containing a `✦` and the text "Now in public beta". Add a tiny pulsing green status dot.
- **Headline:** "Foundation of the<br />new digital epoch". Font-display, `text-[42px] md:text-[56px]`, medium weight, tight tracking (`tracking-tight`), color `#0a1b33`. Animate the two lines with a per-line reveal (clip/mask upward).
- **Subheadline:** "Designing products, powering ecosystems and laying the foundation of a decentralized web for enterprises, builders and communities alike." Font-sans, `text-[14px] md:text-[15px]`, `#64748b`, `max-w-[520px]`, `leading-relaxed`.
- **Button row:** Two buttons —
- Primary "Contact Us": `motion.button`, `bg-[#0a152d]` white text, `rounded-full px-6 py-3`, hover `scale-[1.03]`, tap `scale-[0.98]`, with a soft shadow that intensifies on hover.
- Secondary "View docs": ghost button, transparent bg, `text-[#0a1b33]`, underline-on-hover with an animated `ArrowRight` (lucide) that nudges +4px right on hover.
## 5. Floating Bottom Navbar
- Wrapper: `absolute bottom-10 left-1/2 -translate-x-1/2 z-30`.
- `motion.nav` fades in + slides up, delayed after hero text. Classes: `flex items-center gap-1 bg-white/90 backdrop-blur-2xl px-1.5 py-1.5 rounded-full shadow-[0_12px_40px_rgba(0,0,0,0.08)] border border-slate-200/40`.
- **Logo:** circular placeholder `w-9 h-9 bg-white border border-slate-100 shadow-sm rounded-full flex items-center justify-center` containing `✦`.
- **Text buttons:** "Products" and "Docs" — `text-[12px] font-semibold text-slate-500 hover:text-[#0a1b33] px-3 py-2 rounded-full transition-colors`. Add an animated underline/pill highlight that slides between the active item using Motion `layoutId`.
- **CTA:** "Get in touch" — `bg-white px-5 py-2 rounded-full text-[12px] font-semibold text-[#0a1b33] border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all`, with a trailing `ChevronRight` (lucide).
- Make the navbar `hidden` below `md` and provide a compact mobile version (logo + single CTA).
## 6. Seamless Marquee Logo Scroller
- Placed `mt-10` below the hero. Pure CSS `@keyframes` (`translateX(0)` → `translateX(-50%)`), infinite, `pause` on hover. Left/right edge fade via `maskImage: linear-gradient(...)`. No title text.
- Render the logo list **twice inline** for a seamless loop.
- **Logos (8):** src URLs from `svgl.app`, each with alt + hex gradient object:
1. Procure (`procure.svg`, blue)
2. Shopify (`shopify.svg`, yellow)
3. Blender (`blender.svg`, blue)
4. Figma (`figma.svg`, purple)
5. Spotify (`spotify.svg`, pink/red)
6. Lottielab (`lottielab.svg`, yellow/green)
7. Google Cloud (`google-cloud.svg`, light blue)
8. Bing (`bing.svg`, cyan/teal)
- **Card:** `group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden`.
- Inside, an absolute gradient div at `scale-150 opacity-0` → `scale-100 opacity-100` on `group-hover`. Image goes `group-hover:brightness-0 group-hover:invert`.
## 7. Feature Grid (new section)
- Heading block: eyebrow "Why build with us", headline "Infrastructure that gets out of your way" (font-display, `text-[32px] md:text-[44px]`, `#0a1b33`), and a 1-line subhead in `#64748b`.
- A responsive bento grid: `grid grid-cols-1 md:grid-cols-3 gap-5`. Six cards, one spanning 2 columns as a hero feature.
- Each card: `rounded-3xl bg-white border border-slate-200/50 p-8 shadow-sm hover:shadow-[0_20px_60px_-20px_rgba(0,0,0,0.08)] transition-all`, with a lucide icon in a rounded gradient tile, a bold title (`#0a1b33`), and a `#64748b` description. Cards lift `-translate-y-1` on hover.
- Suggested features: Edge deployment, Composable APIs, Type-safe SDK, Observability, Enterprise SSO, 99.99% uptime.
## 8. Stats Band (new section)
- Full-width `rounded-[40px] bg-[#0a152d]` dark panel with the noise texture. Four stats in a row (`grid grid-cols-2 md:grid-cols-4`): e.g., "10M+ requests/day", "99.99% uptime", "40ms p50 latency", "180+ regions".
- Each number in font-display, large (`text-[40px]`), white; label in `slate-400 text-[13px]`. Numbers **count up** from 0 when scrolled into view.
## 9. Testimonial (new section)
- Centered single quote, font-display `text-[24px] md:text-[32px]` `#0a1b33`, with avatar + name + role beneath. Subtle left/right quote marks in a light gradient. Fades and slides in on scroll.
## 10. Closing CTA (new section)
- Centered card `rounded-[40px] bg-gradient-to-b from-white to-slate-50 border border-slate-200/50 p-16 text-center`. Headline, subhead, primary "Contact Us" button (matching hero primary). Optional faint repeat of the hero video as a low-opacity backdrop.
## 11. Footer
- Minimal: logo `✦` + wordmark, three link columns (Product / Company / Legal), and a bottom hairline row with copyright + social icons (lucide). `text-[13px] text-slate-500`, hairline dividers `border-slate-200/60`.
## 12. Quality Bar
- **Responsive:** Flawless from 375px → 1440px. No horizontal scroll. Test hero text sizing and navbar collapse on mobile.
- **Accessibility:** Semantic landmarks (`header`, `nav`, `main`, `footer`), `alt` text on all logos, focus-visible rings on interactive elements, `aria-label` on icon-only buttons, sufficient contrast.
- **Performance:** `loading="lazy"` on non-critical media, memoize the logo array, use `will-change` sparingly, avoid layout thrash. Prefer transform/opacity animations only.
- **Code quality:** Split into clean components (`Hero`, `Navbar`, `Marquee`, `FeatureGrid`, `StatsBand`, `Testimonial`, `CTA`, `Footer`), fully typed props, no `any`. Centralize the color tokens and reuse `cn()`.