Build a modern SaaS hero section using React, TypeScript, Tailwind CSS and Framer Motion.
LAYOUT
- Full viewport height (min-h-screen) section with dark background (#0a0a14)
- Centered content, max-width 1200px, padding 96px top / 48px bottom
- Full-bleed background video (object-cover) at 30% opacity, with a radial gradient overlay fading to background color at edges
CONTENT
- Top eyebrow badge (rounded-full pill, glass effect, 11px font, letter-spacing 0.15em, uppercase): 'New: Version 2.0 is here'
- H1: Large serif heading (Instrument Serif from Google Fonts, 400 weight italic accent), font-size clamp(48px, 8vw, 96px), line-height 1, tracking-tight. Text: 'Ship your idea, faster than ever.' with 'faster' wrapped in <em> for italic serif accent.
- Subhead: max-w-xl, 18px, line-height 1.6, color rgba(255,255,255,0.7). Text: 'A platform built for makers who don't have time for boilerplate. Launch in hours, not weeks.'
- CTA row: primary button (white bg, dark text, rounded-full, px-7 py-3, 'Get started free') + ghost link ('See how it works →') with arrow that translates right on hover.
- Trust strip below CTAs: 'Trusted by 10,000+ teams' followed by 5 grayscale logo placeholders.
ANIMATIONS
- Stagger entrance: badge (delay 0), heading (delay 0.1), subhead (delay 0.25), CTAs (delay 0.4), trust strip (delay 0.55). All from { opacity: 0, y: 20 } to { opacity: 1, y: 0 }, duration 0.7, ease 'easeOut'.
- Heading: italic word gets a slow shimmer animation on the gradient text fill.
- Buttons: scale 1.03 on hover, scale 0.97 on tap.
DETAILS
- All text white; muted text uses rgba(255,255,255,0.6).
- Use Inter font for body, Instrument Serif for headings.
- Mobile: heading drops to clamp(36px, 10vw, 56px), CTAs stack vertically with gap-3.
- Add a subtle scroll indicator at the bottom: small chevron that bounces gently.