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.