Hero Section — 3 Variants

Three distinct hero section designs: centered with gradient, split with image, and dark with animation.

Landing Pages landing-pages hero animated gradient intermediate

Prompt

Create 3 hero section variants:

Variant 1 — Centered Gradient:
- Centered text, eyebrow label, large gradient headline, subheadline, two CTAs, social proof, animated gradient background

Variant 2 — Split with Image:
- Left: text content with headline, sub, CTAs / Right: product screenshot in browser mockup frame

Variant 3 — Dark with Animation:
- Dark background, centered text, animated particle/grid background, glowing CTA, dashboard preview below with gradient fade

Use Tailwind CSS, shadcn/ui, framer-motion

Share:Share on X