Navigation: [/sitemap.md](/sitemap.md)

---
type: block
category: hero
title: Hero 1
description: A centered hero with badge, actions, and a product image.
---

```astro live props={{ name: 'hero-1' }}
---
import Hero1Block from "@/components/blocks/hero-1.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Hero1Block
  title="Build Astro pages from reusable content sections"
  description="Production-ready hero blocks, feature grids, and pricing layouts that drop into any Astro project."
  badge={{ label: "New in v0.9", href: "/docs/" }}
  buttons={[
    { label: "Browse docs", href: "/docs/", variant: "default" },
    {
      label: "See components",
      href: "/components/",
      variant: "secondary",
    },
  ]}
  image={{ src: placeholderImage, alt: "Product screenshot" }}
/>
```