Sections
Hero
High-impact entry point for your landing page.
The Hero component is designed to grab attention immediately. It features an animated entrance, background blur effects, and clear calls to action.
Usage
<Hero
badge="✨ New Release 2.0"
title="Build Faster with"
highlight="Astro Components"
description="The ultimate boilerplate for your next project."
primaryCta={{ text: "Get Started", href: "/docs" }}
secondaryCta={{ text: "View GitHub", href: "https://github.com" }}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
badge | string | "✨ ..." | Top label badge text. |
title | string | "Build Faster with" | Main headline text. |
highlight | string | "Premium Design" | Text to be highlighted (gradient/color). |
description | string | "A production-ready..." | Subtitle text description. |
primaryCta | { text: string, href: string } | { text: "Get Started", ... } | Primary button configuration. |
secondaryCta | { text: string, href: string } | { text: "View on GitHub", ... } | Secondary button configuration. |