Layout herolayoutlanding

Feature Hero Section

Impactful header section with large typography and CTA buttons.

Experience the Next Dimension of Design

Build stunning interfaces faster than ever with our premium component ecosystem.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FeatureHeroSection } from 'astro-component-kit';
---

<FeatureHero>Content</FeatureHero>
--- import { FeatureHeroSection } from 'astro-component-kit'; --- <FeatureHero>Content</FeatureHero>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FeatureHeroSection.astro and paste the following code:

astro 
---
---
<section class="f-hero">
  <div class="f-inner">
    <h1>Experience the <span>Next Dimension</span> of Design</h1>
    <p>Build stunning interfaces faster than ever with our premium component ecosystem.</p>
    <div class="f-actions"><slot /></div>
  </div>
</section>
<style>
  .f-hero { padding: 8rem 2rem; text-align: center; background: radial-gradient(circle at top, rgba(99,102,241,0.15) 0%, transparent 70%); }
  .f-inner { max-width: 800px; margin: 0 auto; }
  h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: #fff; }
  h1 span { background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  p { font-size: 1.25rem; color: #94a3b8; line-height: 1.6; margin-bottom: 2.5rem; }
  .f-actions { display: flex; justify-content: center; gap: 1rem; }
</style>
--- --- <section class="f-hero"> <div class="f-inner"> <h1>Experience the <span>Next Dimension</span> of Design</h1> <p>Build stunning interfaces faster than ever with our premium component ecosystem.</p> <div class="f-actions"><slot /></div> </div> </section> <style> .f-hero { padding: 8rem 2rem; text-align: center; background: radial-gradient(circle at top, rgba(99,102,241,0.15) 0%, transparent 70%); } .f-inner { max-width: 800px; margin: 0 auto; } h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: #fff; } h1 span { background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } p { font-size: 1.25rem; color: #94a3b8; line-height: 1.6; margin-bottom: 2.5rem; } .f-actions { display: flex; justify-content: center; gap: 1rem; } </style>

Quick Info

Category
Layout
Filename
FeatureHeroSection.astro
Dependencies
None — pure Astro + CSS
Tags
herolayoutlanding