Buzzentic Agency
Project Requirements: Build a high-impact, full-screen React hero section using Tailwind CSS v4 and custom typography.
- Background & Layout:
Full-Screen Video: Implement a background video that covers the entire viewport (object-cover).
Video Settings: Auto-play, loop, muted, and playsInline with no color overlays or filters.
Content Spacing: The main content block should have 250px of bottom padding to create breathing room above the fold.
- Typography & Colors:
Primary Font: "Barlow" (sans-serif) for general UI and body text.
Accent Font: "Instrument Serif" (italic) for poetic emphasis.
Color Palette: Primary text is pure white (#FFFFFF) or white at 75% opacity. CTA buttons and badges use a neutral off-white (#f8f8f8).
- Specific UI Elements:
Transparent Navigation: A floating navbar with no background fill and no border strokes. All navigation links and the brand logo must be white.
Featured Badge: A "Featured in Fortune" badge centered at the top. It features a "liquid glass" effect using a white/10 background with backdrop-blur-sm on the outer ring and white/90 with backdrop-blur-md on the inner pill.
Dynamic Headline:
Line 1: "Agency that makes your" (Barlow, font-light, text-white, 64px).
Line 2: "videos & reels viral" (Instrument Serif, italic, text-white, 64px).
Sub-headline: A max-width paragraph in Barlow font, white at 75% opacity, explaining the agency's value proposition.
Button Styling: Rectangular buttons with a very sharp 2px border radius, #f8f8f8 background, and #171717 medium Barlow text.
Corner Accents: Four 7px x 7px solid white squares positioned exactly at the four corners of the central hero content container.
- Interactions & Animations:
All buttons and interactive badges should have smooth transition-colors on hover.
Buttons should shift from #f8f8f8 to pure white on hover.
Navigation items should have a subtle white/10 background highlight on hover.