AI Designer Agency

Prompt to recreate this 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 (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 }}

SECTION 3: ABOUT (scroll-reveal text)

bg-background py-32 px-8, max-w-4xl mx-auto text-center Uses a ScrollRevealText component: splits text into individual words, each wrapped in a motion.span. Uses useScroll with offset: ["start 0.9", "start 0.3"] and useTransform to animate each word's opacity from 0.15 to 1 as user scrolls through Text: "We blend artificial intelligence with human creativity to craft digital experiences that captivate, convert, and scale — building ambitious brands that truly thrive and lead in the modern web." Typography: text-3xl md:text-4xl lg:text-5xl font-medium tracking-[-1px] leading-relaxed font-body

SECTION 4: SELECTED WORK (2×2 project grid)

bg-background py-32 pb-16 px-8, max-w-6xl mx-auto Header: "Selected " + italic accent "Work" — text-4xl md:text-5xl font-medium tracking-[-2px] text-center mb-4 Subtitle: "A curated collection of projects where bold design meets intelligent technology." — text-muted-foreground text-lg text-center max-w-2xl mx-auto mb-16 Grid: grid-cols-1 md:grid-cols-2 gap-6 4 project cards, each with framer-motion fade-up (y: 40→0, staggered by i * 0.1): Image container: aspect-[4/3] liquid-glass rounded-2xl overflow-hidden Project title: text-xl font-medium text-foreground font-body Category: text-sm text-muted-foreground font-body mt-1 Projects data: "Nova Finance" / "Brand & Web Design" / https://motionsites.ai/assets/hero-grow-ai-preview-BlQ8tAQ-.gif "Pulse Health" / "AI Web Development" / https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif "Drift Studios" / "Website Optimization" / https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif "Arc Commerce" / "Brand & Development" / https://motionsites.ai/assets/hero-neuralyn-preview-Br4FRDQA.gif

SECTION 5: VIDEO SHOWCASE (parallax overlap)

h-[650px] overflow-hidden -mt-[325px] z-0 — overlaps upward into the previous section Full-bleed autoplay video: https://media.cleanshot.cloud/media/21620/nKosRonaEKSufJVJ4VtouFhOPkqgJ3dPoQ8ZP52S.mp4 Top & bottom gradient fades: h-32 bg-gradient-to-b/t from-background to-transparent z-10

SECTION 6: CTA (full-screen with HLS video background)

w-full h-screen overflow-hidden flex items-center justify-center z-10 HLS video background using hls.js: Stream URL https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8 (with Safari native HLS fallback) Top/bottom gradient fades: h-40, plus a bg-black/30 overlay Content (z-10, centered, max-w-3xl): Heading: "Ready to " + italic accent "Transform" + " Your Brand?" — text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-6 Subtitle: "Let's build something extraordinary together." — text-lg text-muted-foreground mb-10 Two buttons side by side: "START A PROJECT" (solid bg-foreground text-background rounded-full px-10 py-4) and "BOOK A CALL" (liquid-glass-strong rounded-full px-10 py-4) All elements animate in with framer-motion y: 30/20→0 staggered

SECTION 7: FOOTER

bg-background border-t border-border px-8 py-16, max-w-6xl mx-auto 4-column grid (md:grid-cols-4): Logo "VIRALMEDIA" + description "AI-powered web design agency crafting digital experiences that convert." Services: Brand Design, AI Web Design, AI Web Development, Optimization Company: About, Work, Blog, Careers Connect: Twitter, LinkedIn, Instagram, Dribbble Bottom bar: copyright "© 2026 VIRALMEDIA. All rights reserved." + Privacy/Terms links All links: text-muted-foreground text-sm hover:text-foreground transition-colors

KEY DEPENDENCIES

framer-motion (animations) hls.js (HLS video streaming in CTA) Google Fonts: Barlow (400, 500, 600) and Instrument Serif (400 italic) — load via <link> in index.html