File: src/blocks/hero/Hero01.astro
Split hero: copy and CTAs on one side, optional image on the other. Eyebrow chip above the heading. Can embed a StatsGrid below the CTAs.
Config (blocks.ts → hero)
hero: {
eyebrow: "Available for freelance",
heading: "I build fast marketing sites",
subheading: "Astro, Tailwind, and performance-first delivery.",
primaryCta: "View work",
primaryCtaUrl: "/work/",
secondaryCta: "Contact",
secondaryCtaUrl: "/contact/",
showStats: true,
image: "/images/hero.svg",
imageAlt: "Workspace preview",
imageAspectRatio: "4/3",
imagePosition: "right",
},Stats reuse siteConfig.stats.items unless you pass a stats prop.
Add to a page
---
import Hero01 from "@/blocks/hero/Hero01.astro";
---
<Hero01 /><Hero01
heading="Custom headline"
showStats={false}
imagePosition="left"
image=""
/>Props
| Prop | Config key | Notes |
|---|---|---|
eyebrow |
hero.eyebrow |
Chip above heading |
heading |
hero.heading |
Main title |
subheading |
hero.subheading |
Supporting paragraph |
primaryCta / primaryCtaUrl |
hero.primaryCta* |
Primary button |
secondaryCta / secondaryCtaUrl |
hero.secondaryCta* |
Outline button |
showStats |
hero.showStats |
Show stats row |
stats |
— | Override stat items |
image |
hero.image |
Empty string hides image |
imageAlt |
hero.imageAlt |
|
imageAspectRatio |
hero.imageAspectRatio |
CSS aspect-ratio |
imagePosition |
hero.imagePosition |
left | right (desktop). Mobile stacks image above copy. |