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

---
type: block
category: hero
title: Hero 7
description: 2:3 split with a larger image area that bleeds to the right edge. Ideal for showcasing dashboards, apps, or creative work.
---

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

<Hero7Block
  title="A wider image for visual-heavy products"
  description="2:3 split with a larger image area that bleeds to the right edge. Ideal for showcasing dashboards, apps, or creative work."
  features={[
    "Large image area for product screenshots",
    "Content stays readable at all sizes",
    "Image bleeds to the edge on desktop",
  ]}
  buttons={[
    { label: "View demo", href: "#", variant: "default" },
    { label: "Documentation", href: "/docs/", 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: "Used by design teams",
  }}
  image={{ src: placeholderImage, alt: "Dashboard preview" }}
/>
```