Creative Agency

Prompt:

Build a full-viewport hero section in React + TypeScript with Tailwind CSS. Use lucide-react for the Instagram and Send icons. The section must match these specs exactly.

Fonts (load in index.css):

@import url('https://db.onlinewebfonts.com/c/38c9851a552c219fba7878035cef1a1c?family=Britanica-Black');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

Also use Geist, sans-serif for the giant headline (fallback to sans-serif if Geist isn't loaded).

Background video asset (verbatim URL):

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_213626_db1bde2b-521c-4b22-91f3-35c072eb8771.mp4

Two inline SVG logo components (verbatim path data):

LogoWhite — width 30, height 22, viewBox 0 0 30 22, fill none:

• <path d="M2 4C2 4 8 1 15 6C22 11 28 8 28 8" stroke="white" strokeWidth="3.5" strokeLinecap="round"/>
• <path d="M2 16C2 16 8 13 15 18C22 23 28 20 28 20" stroke="white" strokeWidth="3.5" strokeLinecap="round"/>

LogoRed — width 26, height 20, viewBox 0 0 30 22, fill none, same two paths but stroke="#e02b10".

Structure — one root <div> with classes relative w-full min-h-screen overflow-hidden and inline style backgroundColor: '#e02b10'. It contains, in order:

1. Background <video> — classes absolute inset-0 w-full h-full object-cover, attributes autoPlay muted loop playsInline, src equal to the URL above.

2. Navbar <nav> — classes absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-4 sm:px-6 md:px-10 py-4 md:py-5 gap-2.

   • Left cluster: flex items-center gap-3 sm:gap-6 containing <LogoWhite /> and a hidden-on-mobile group hidden sm:flex items-center gap-2 with:
     • HOME button: bg-white text-black text-xs px-5 py-2 rounded-full, inline style fontFamily: 'Inter, sans-serif', fontWeight: 700.
     • RITUALS and RATES buttons mapped from array: text-white text-xs px-5 py-2 rounded-full border border-white/60 hover:border-white transition-all, inline style fontFamily: 'Inter, sans-serif', fontWeight: 400.
   • Right cluster: flex items-center gap-3 sm:gap-4:
     • Instagram icon button: text-white hover:opacity-70 transition-opacity, icon <Instagram size={18} strokeWidth={1.5} />.
     • Send icon button: same classes plus hidden sm:block, icon <Send size={16} strokeWidth={1.5} />.
     • Reservations button: border border-white text-white text-xs px-3 sm:px-5 py-2 rounded-full hover:bg-white hover:text-red-600 transition-all whitespace-nowrap, inline style fontFamily: 'Inter, sans-serif'.

3. Content wrapper <div> with relative z-20 min-h-screen flex flex-col px-4 sm:px-6 md:px-10, containing three rows:

   Row 1 (navbar spacer): <div className="h-[72px] shrink-0" />

   Row 2 (middle): <div> with flex-1 flex flex-col md:flex-row md:items-center md:justify-between mx-auto gap-10 md:gap-32 py-8 md:py-0, inline style maxWidth: '1100px', width: '100%'.

   • Left block max-w-[260px]:
     • <p> classes text-white text-[13px] tracking-[0.22em] uppercase leading-snug mb-2, style fontFamily: 'Inter, sans-serif', fontWeight: 700, text MARKETING<br />COLLECTIVE.
     • <p> classes text-white text-[13px] leading-relaxed, style fontFamily: 'Inter, sans-serif', opacity: 0.8, text Creative growth blueprints<br />for bold brands in Web3 era.
   • Right block max-w-[260px] text-left:
     • Row flex justify-start mb-2 containing <LogoRed />.
     • <p> classes text-white text-[14px] leading-relaxed mb-3, style fontFamily: 'Inter, sans-serif', text: MetricX is the essential growth dashboard for bold agencies. Monitor reach, refine spend, steer campaigns, surface insights, delight your clients every day.
     • <p> classes text-white text-[13px] leading-loose, style fontFamily: 'Inter, sans-serif', opacity: 0.7, text Audiences Dashboards Spend<br />Performance Channels Growth.

   Row 3 (bottom): <div> with pb-8 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 lg:gap-6 shrink-0.

   • Column 1 flex-1 min-w-0:
     • <h1> classes text-white select-none mb-6 md:mb-10, inline style fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 'clamp(56px, 13vw, 155px)', letterSpacing: '-0.04em', lineHeight: 0.78, width: 'fit-content', text creative<br />studio.
     • Sub-row flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6:
       • <p> classes text-white text-[14px] leading-relaxed, style fontFamily: 'Inter, sans-serif', minWidth: '160px', text Sharp ideas only. We craft<br />brands that own Web3.
       • <button> classes bg-white text-black rounded-full hover:bg-gray-100 active:scale-95 transition-all shadow-lg w-full sm:w-auto, inline style fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: '15px', whiteSpace: 'nowrap', padding: '24px 60px', text begin now.
   • Column 2 (stat cards) flex gap-4 sm:gap-6, mapping [['80%', 'Reach uplift'], ['92%', 'Client loyalty']]:
     • Card <div> classes rounded-2xl px-5 sm:px-6 py-5 flex flex-col items-start justify-between text-left flex-1 lg:flex-initial, inline style minWidth: '150px', minHeight: '150px', background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(10px)'.
       • Big number <p> classes leading-none, style fontFamily: 'Britanica-Black, sans-serif', fontSize: 'clamp(2rem, 6vw, 2.6rem)', color: '#111'.
       • Label <p> classes text-[12px] mt-auto, style fontFamily: 'Inter, sans-serif', color: '#888'.

Animations / interactions:

• Background video auto-loops muted.
• Nav link borders animate via transition-all on hover from border-white/60 to border-white.
• Icon buttons fade to opacity-70 on hover via transition-opacity.
• Reservations button swaps to white bg / red-600 text on hover via transition-all.
• begin now button has hover:bg-gray-100 and active:scale-95 via transition-all.
• Stat cards use backdrop-filter: blur(10px) over the red/video backdrop.

No other animations, keyframes, or JS state. No Supabase needed for this visual-only section.