Cta

---
import CallToActionBlock from "@/components/blocks/cta-1.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
---

<CallToActionBlock
  title="Give every launch page a decisive close"
  description="Use a centered CTA when the rest of the page already did the explaining and the final section needs one clear invitation."
  buttons={[
    { label: "Start project", href: "/docs/" },
    {
      label: "Browse components",
      href: "/components/",
      variant: "secondary",
    },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "Loved by 2,000+ developers",
  }}
/>

---
import Cta2Block from "@/components/blocks/cta-2.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.webp"
---

<Cta2Block
  title="Turn your component inventory into complete pages"
  description="A split CTA works well when the message needs a little more narrative and the actions should stay visually distinct."
  buttons={[
    { label: "See block library", href: "/blocks/" },
    {
      label: "Install primitives",
      href: "/docs/installation/",
      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: "Trusted by agencies worldwide",
  }}
  image={{ src: placeholderImage, alt: "CTA preview" }}
/>

---
import Cta3Block from "@/components/blocks/cta-3.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
---

<Cta3Block
  title="Build one block language for docs and marketing"
  description="This spread CTA is useful at the end of feature sections or product comparisons where the surface should feel contained yet spacious."
  buttons={[
    { label: "Use Section", href: "/components/section/" },
    {
      label: "Inspect Card",
      href: "/components/card/",
      variant: "secondary",
    },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "Built for modern teams",
  }}
/>

---
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" }}
/>

---
import Cta5Block from "@/components/blocks/cta-5.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Cta5Block
  title="A CTA with supporting proof points"
  description="Great for pages that need a little more reassurance before the final decision. The checklist reinforces the value proposition."
  features={[
    "Reusable hero sections",
    "Editorial article layouts",
    "Contact and pricing flows",
  ]}
  buttons={[
    { label: "Read the docs", href: "/docs/" },
    {
      label: "Feature examples",
      href: "/blocks/features/",
      variant: "outline",
    },
  ]}
  image={{ src: placeholderImage, alt: "Proof point preview" }}
/>

---
import Cta6Block from "@/components/blocks/cta-6.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.webp"
---

<Cta6Block
  title="A reversed layout for visual variety"
  description="Use this version when the page needs a different rhythm. The image leads, giving the text a supporting role."
  buttons={[
    { label: "Browse blocks", href: "/blocks/" },
    {
      label: "Component docs",
      href: "/components/",
      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: "No long pitch required",
  }}
  image={{ src: placeholderImage, alt: "Reversed CTA preview" }}
/>

---
import Cta7Block from "@/components/blocks/cta-7.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
---

<Cta7Block
  title="Create launch sections everyone can reuse"
  description="This centered CTA with a tinted background works when the section needs to feel distinct from the surrounding content without being too bold."
  buttons={[
    { label: "Layout docs", href: "/components/layout/" },
    {
      label: "Sidebar docs",
      href: "/components/sidebar/",
      variant: "secondary",
    },
  ]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
    ],
    rating: 5,
    text: "Best for design teams",
  }}
/>

---
import Cta8Block from "@/components/blocks/cta-8.astro"
---

<Cta8Block
  title="Choose a CTA pattern that matches the weight of the decision"
  description="Some pages need a bold final section. Others only need a quiet nudge. This minimal version with a subtle glow works for the latter."
  buttons={[
    { label: "Hero variants", href: "/blocks/hero/" },
    {
      label: "Pricing variants",
      href: "/blocks/pricing/",
      variant: "outline",
    },
  ]}
/>