Vanguard Agency Hero

Build a fullscreen hero landing page for a creative agency called VANGUARD using React, Tailwind CSS, and Vite. The page is a single viewport-height section with a looping background video and all content overlaid on top. Use a single App.tsx component with useState for the menu toggle — no routing needed.

Tech stack

• Vite + React
• Tailwind CSS
• lucide-react — ArrowUpRight, Award, Crown, X

npm create vite@latest vanguard -- --template react
npm install lucide-react

Background video

Use this exact CloudFront URL as a fullscreen <video> with autoPlay, muted, loop, and playsInline, set to object-cover to fill the viewport:

<video
  autoPlay
  muted
  loop
  playsInline
  className="absolute inset-0 w-full h-full object-cover"
>
  <source
    src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_154941_df1a96e1-a06f-450c-bd02-d863414cc1a0.mp4"
    type="video/mp4"
  />
</video>

Fonts

Load both in index.html:

1. FSP DEMO - PODIUM Sharp 4.11 — the brand name and main heading. Create a .font-podium utility and register it in tailwind.config.js as fontFamily.podium.

<link
  rel="stylesheet"
  href="https://db.onlinewebfonts.com/c/8b75d9dcff6a48c35a46656192adf019?family=FSP+DEMO+-+PODIUM+Sharp+4.11"
/>

2. Inter (weights 400, 500, 600, 700) from Google Fonts — body text, nav links, stats, CTAs. Register as fontFamily.inter.

Navbar

• Horizontal bar at the top with responsive padding (px-6 sm:px-10 lg:px-16, py-5 lg:py-7).
• Left: brand name “VANGUARD” in font-podium, white, bold, uppercase, text-2xl sm:text-3xl, tracking-wider.
• Center (hidden below md): four links — “Projects”, “Studio”, “Offerings”, “Inquire” — in font-inter text-sm text-white/80 tracking-widest uppercase, hover:text-white.
• Right (hidden below md): a “GET IN TOUCH” link with an ArrowUpRight icon, styled as a bordered button (border border-white/30 hover:border-white/60 px-6 py-3 text-xs tracking-widest uppercase, hover:bg-white/10).
• Right (visible below md): a hamburger made of three white div bars (w-6 h-0.5, w-6 h-0.5, w-4 h-0.5 with space-y-1.5).

Mobile menu overlay (below md)

• Fixed fullscreen overlay (fixed inset-0 z-50) with bg-black/95 backdrop-blur-sm.
• Toggles via useState — open: opacity-100 visible; closed: opacity-0 invisible; with transition-all duration-500.
• Header row matches the navbar: brand name left, X close icon right.
• Centered vertically: each of the 4 nav links in font-podium text-4xl sm:text-5xl white uppercase, with staggered entrance via inline style — each item gets transitionDelay: i * 80 + 100ms, with opacity and translateY(20px) driven by the open state.
• Below the links: a “GET IN TOUCH” bordered button with the same staggered pattern.
• All links call setMenuOpen(false) on click.

Hero content (vertically centered, left-aligned)

All elements use staggered animate-fade-up (each successive element adds 0.2s delay; elements start opacity: 0 with animation-fill-mode: forwards).

1. Tagline: a Crown icon (w-4 h-4 text-white/70) + “World-Class Digital Collective” in text-white/70 text-xs sm:text-sm font-inter tracking-[0.3em] uppercase. Uses animate-fade-up (no delay), mb-6 lg:mb-8.
2. Main heading: three lines in font-podium white uppercase, leading-[0.92] tracking-tight, each text-[clamp(2.8rem,8vw,7rem)] — “Design.”, “Disrupt.”, “Conquer.” Uses animate-fade-up-delay-1 (0.2s).
3. Subtext: “We build fierce brand identities” (line break) “that don’t just turn heads —” then bold white “they lead.” — text-white/70 text-sm sm:text-base font-inter leading-relaxed max-w-md. Uses animate-fade-up-delay-2 (0.4s), mt-6 lg:mt-8.
4. CTA row: animate-fade-up-delay-3 (0.6s), mt-8 lg:mt-10, flex flex-wrap items-center gap-4 sm:gap-6.
   • Black button “SEE OUR WORK” with ArrowUpRight. bg-black hover:bg-neutral-900 px-5 sm:px-7 py-3 sm:py-4 text-[11px] sm:text-xs tracking-widest uppercase. Arrow: group-hover:translate-x-0.5 group-hover:-translate-y-0.5.
   • Beside it (hidden sm:flex): an Award icon (w-8 h-8 text-white/50) with two lines “Top-Rated” / “Brand Studio” in text-white/60 text-xs tracking-wider uppercase.
5. Stats row: animate-fade-up-delay-4 (0.8s), mt-8 sm:mt-10 lg:mt-14, flex flex-wrap gap-6 sm:gap-12 lg:gap-16. Three stats — “250+” / “Brands Transformed”, “95%” / “Client Retention”, “10+” / “Years in the Game”. Values in font-inter white text-2xl sm:text-4xl lg:text-5xl bold tracking-tight; labels in text-white/50 text-[9px] sm:text-xs tracking-widest uppercase mt-1.

CSS animations

Defined in index.css under @layer utilities:

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

Classes: .animate-fade-up (0s delay), .animate-fade-up-delay-1 through .animate-fade-up-delay-4 (0.2s increments, starting opacity: 0), .animate-fade-in, .animate-fade-in-delay.

Responsive behavior

• Mobile-first with breakpoints at sm (640px), md (768px), lg (1024px).
• Nav links and “GET IN TOUCH” show at md+; hamburger shows below md.
• Award badge hides on mobile (hidden sm:flex).
• All text sizes, paddings, gaps, and margins scale up through sm: and lg: prefixes.
• Stats and CTA rows use flex-wrap to prevent overflow on small screens.