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

---
type: block
category: hero
title: Hero 5
description: A split hero with a feature checklist, action buttons, and social proof on the left — and a product image on the right.
---

```astro live props={{ name: 'hero-5' }}
---
import Hero5Block from "@/components/blocks/hero-5.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.webp"
---

<Hero5Block
  title="Everything you need to build with Astro"
  description="A split hero with a feature checklist, action buttons, and social proof on the left — and a product image on the right."
  features={[
    "Zero-JS components by default",
    "shadcn-compatible installation",
    "Astro-first primitives",
    "Fully accessible and keyboard-navigable",
  ]}
  buttons={[
    { label: "Get started", href: "/docs/", variant: "default" },
    { label: "Components", href: "/components/", variant: "secondary" },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "4.9 from product teams",
  }}
  image={{ src: placeholderImage, alt: "Product screenshot" }}
/>
```