Move from isolated examples to reusable page sections
A background-image CTA helps the final section feel like a real destination instead of just another block in the stack.
SV
JD
MK
---
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" }}
/>