Hero
The Hero component is designed to grab attention immediately. It features an animated entrance, background blur effects, and clear calls to action.
Usage
import Hero from '~/components/sections/Hero.astro';
<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
Next Gen Landing Pages
This is how the Hero component looks when rendered. It automatically handles responsiveness and animations.
Is the product available in large size?
Yes available! Price is 299 SAR
Perfect! When will it arrive?
Delivery in 2-3 days π
Free shipping over 200 SAR
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. |