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

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