Hero

Hero section patterns for landing pages.

Basic Hero

<section class="py-24 md:py-32">
  <div class="container text-center">
    <h1 class="text-4xl md:text-6xl font-bold tracking-tight">
      Build something amazing
    </h1>
    <p class="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
      A brief description of your product or service that
      explains the value proposition clearly.
    </p>
    <div class="mt-10 flex justify-center gap-4">
      <a href="#" class="btn-primary">Get Started</a>
      <a href="#" class="btn-secondary">Learn More</a>
    </div>
  </div>
</section>

Hero Variants

With Image

Add a product screenshot or illustration below the CTA.

With Background

Use a gradient or image background for visual impact.

Split Layout

Text on one side, image on the other.

Best Practices

Clear headline - State your value proposition
Subheadline - Expand on the headline briefly
Single CTA - One primary action (secondary optional)
Social proof - Logos, testimonials, or stats
Visual hierarchy - Guide the eye down the page