Products 4

---
import Products4Block from "@/components/blocks/products-4.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Products4Block
  title="A product row with room for a collection-wide action"
  description="Each card can link to a deeper product page or serve as a compact collection overview."
  buttons={[
    {
      label: "View all products",
      href: "/blocks/product/",
      variant: "default",
    },
    {
      label: "Compare plans",
      href: "/blocks/pricing/",
      variant: "outline",
    },
  ]}
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "Launch page bundle image placeholder",
      },
      title: "Launch page bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Editorial bundle image placeholder",
      },
      title: "Editorial bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Onboarding bundle image placeholder",
      },
      title: "Onboarding bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>