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

---
type: block
category: "cta"
title: "CTA 4"
description: "A background-image CTA helps the final section feel like a real destination instead of just another block in the stack."
---

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

<Cta4Block
  title="Move from isolated examples to reusable page sections"
  description="A background-image CTA helps the final section feel like a real destination instead of just another block in the stack."
  buttons={[
    { label: "Explore blocks", href: "/blocks/" },
    {
      label: "Button API",
      href: "/components/button/",
      variant: "outline",
    },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "Production-ready components",
  }}
  image={{ src: placeholderImage, alt: "Background CTA preview" }}
/>
```