| name | hero-section |
| description | Build modern landing page hero sections with animations. Use for homepage designs. |
Hero Section Design
Instructions
-
Layout structure
- Full viewport height
- Centered content
- Eye-catching headline
-
Visual elements
- Gradient background
- Animated elements
- CTA button
-
Animations
- Fade in on load
- Parallax effects
- Smooth scrolling
Best Practices
- Keep headline under 10 words
- Use high-contrast text
- Single clear call-to-action
- Mobile-first approach
Example Structure
<section class="hero">
<div class="hero-content">
<h1 class="animate-fade-in">Your Headline</h1>
<p class="animate-fade-in-delay">Supporting text</p>
<button class="cta-button">Get Started</button>
</div>
</section>