Build a dark, premium, single-page landing page for an AI-powered web design 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. FONTS Import from Google Fonts: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap * Headings: Instrument Serif (italic) -- used via Tailwind class font-heading * Body: Barlow (weights 300, 400, 500, 600) -- used via Tailwind class font-body Tailwind config extends fontFamily: heading: ["'Instrument Serif'", "serif"] body: ["'Barlow'", "sans-serif"] COLOR THEME (CSS custom properties, HSL format) :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; } LIQUID GLASS CSS (the core visual effect) Two utility classes defined in index.css under @layer components: .liquid-glass (subtle): .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 (more prominent, used on CTA buttons): .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 URLS 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/) 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 (12x12 Tailwind = h-12 w-12) SECTION-BY-SECTION BREAKDOWN 1. NAVBAR (fixed, floating) * Fixed position: fixed top-4 left-0 right-0 z-50, horizontal padding px-8 lg:px-16, vertical py-3 * Left: Logo image (h-12 w-12) * Center (desktop only, hidden md:flex): Navigation links inside a liquid-glass rounded-full px-1.5 py-1 pill container * Links: "Home", "Services", "Work", "Process", "Pricing" * Each link: px-3 py-2 text-sm font-medium text-foreground/90 font-body * Last item: white solid button "Get Started" with ArrowUpRight icon, bg-white text-black rounded-full px-3.5 py-1.5 text-sm 2. HERO SECTION * Container: relative overflow-visible, fixed height 1000px * Background video:

Motionium

Liquid Glass Agency