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

---
type: block
category: hero
title: Hero 6
description: Split layout with features, social proof, and a side-by-side image. Works for product pages and SaaS landing pages.
---

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

<Hero6Block
  title="Components and blocks built for Astro"
  description="Split layout with features, social proof, and a side-by-side image. Works for product pages and SaaS landing pages."
  features={[
    "Ship pages faster with blocks",
    "Consistent design system tokens",
    "Dark mode included",
  ]}
  buttons={[
    { label: "Browse blocks", href: "/blocks/", variant: "default" },
    { label: "Documentation", href: "/docs/", variant: "secondary" },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "FD", name: "Sil Veltman" },
      { image: avatarSil, initials: "AV", name: "Sil Veltman" },
      { image: avatarSil, initials: "UI", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "Loved by Astro developers",
  }}
  image={{ src: placeholderImage, alt: "Product screenshot" }}
/>
```