hero-section

name	hero-section
description	Build modern landing page hero sections with animations. Use for homepage designs.

Hero Section Design

Instructions

1. Layout structure

   • Full viewport height
   • Centered content
   • Eye-catching headline

2. Visual elements

   • Gradient background
   • Animated elements
   • CTA button

3. 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>