VIRALMEDIA AI Agency Dark Landing Page

Build a dark-themed, single-page landing page for an AI web design agency called VIRALMEDIA. The design uses a pure black background (#000) with white text, a signature liquid glass glassmorphism effect, and two Google Fonts: Barlow (body/UI) and Instrument Serif (italic accent text). Use React, Tailwind CSS, Framer Motion, and hls.js. All buttons are rounded-full. DESIGN SYSTEM (index.css) Color tokens (all HSL, dark-only — no light mode): --background: 0 0% 0% (pure black) --foreground: 0 0% 100% (pure white) --card: 0 0% 9%, --card-foreground: 0 0% 100% --primary: 0 0% 97%, --primary-foreground: 0 0% 9% --secondary: 0 0% 15%, --secondary-foreground: 0 0% 100% --muted: 0 0% 15%, --muted-foreground: 0 0% 75% --accent: 0 0% 15%, --accent-foreground: 0 0% 100% --border: 0 0% 20%, --input: 0 0% 20%, --ring: 0 0% 100% --radius: 2px --font-body: Barlow, sans-serif --font-accent: Instrument Serif, serif Liquid Glass CSS classes: .liquid-glass — subtle glassmorphism: background: rgba(255,255,255,0.01), background-blend-mode: luminosity, backdrop-filter: blur(4px), no border, box-shadow: inset 0 1px 1px rgba(255,255,255,0.1). Has a ::before pseudo-element for a gradient border effect using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with mask-composite: exclude and padding: 1.4px. .liquid-glass-strong — stronger variant: same as above but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity values (0.5/0.2 instead of 0.45/0.15). Tailwind config: Set fontFamily: body: Barlow, sans-serif, accent: Instrument Serif, serif at the theme root level (not in extend). SECTION 1: NAVBAR (fixed) Fixed top, full-width, z-50, px-8 py-6, flex row with space-between Left: Logo text VIRALMEDIA — text-xl font-semibold tracking-tight font-body text-foreground Center (hidden on mobile): Nav links Work, Services, About, Blog, Contact — each px-4 py-2 text-sm font-medium text-foreground rounded-sm hover:bg-white/10 Right: Get Started button — liquid-glass-strong rounded-full px-6 py-2.5 text-sm font-medium text-foreground SECTION 2: HERO (full viewport height) Container: relative w-full h-screen overflow-hidden Background video (behind everything): Absolutely positioned, object-cover object-bottom. On mobile: -translate-y-100px, on md+: no translate. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260326_073936_8dd07fdb-4f6b-4220-a3f0-9dedfaab0c88.mp4 (autoPlay, loop, muted, playsInline) Bottom gradient overlay: absolute inset-x-0 bottom-0 h-60 bg-gradient-to-t from-background to-transparent Content (z-10, flex column, justify-end, pb-10 md:pb-20): Avatar row: 3 overlapping circular avatars (http://pravatar.cc, w-8 h-8 rounded-full border-2 border-background, -space-x-2) + text 7,000+ brands already transformed in text-muted-foreground text-sm Heading: text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking--1px md:tracking--2px — Build Stunning with + <span className=font-accent italic font-normal>AI Magic</span> Subtitle: text-sm md:text-lg text-muted-foreground whitespace-normal md:whitespace-nowrap — AI-powered websites crafted for beauty, speed, and lasting performance. Email form: liquid-glass rounded-full p-1.5 md:p-2 max-w-lg w-full with transparent input and a solid white bg-foreground text-background rounded-full SUBSCRIBE button. Button uses motion.button with whileHover= scale: 1.03 and whileTap= scale: 0.98