---
title: "Vanguard Agency Hero"
description: "A guide prompt for a fullscreen React hero for a creative agency, with a video background, staggered fade-up entrances, and a mobile menu overlay."
---

> Documentation Index
> Fetch the complete documentation index at: https://papers.ahmad.wtf/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`

```bash
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:

```tsx
<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`.

```html
<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`:

```css
@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.

Source: https://papers.ahmad.wtf/web-prompts/vanguard-hero/index.mdx