Products

---
import Products1Block from "@/components/blocks/products-1.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Products1Block
  badge="Product grid"
  title="A simple product grid that works well after a features section"
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "Landing page kit image placeholder",
      },
      title: "Landing page kit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Docs launch kit image placeholder",
      },
      title: "Docs launch kit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Section starter pack image placeholder",
      },
      title: "Section starter pack",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Conversion toolkit image placeholder",
      },
      title: "Conversion toolkit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>

---
import Products2Block from "@/components/blocks/products-2.astro"
---

<Products2Block
  badge="Collection"
  title="A compact list layout for product overviews"
  products={[
    {
      title: "Marketing pages",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Documentation templates",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Conversion flows",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Onboarding bundle",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>

---
import Products3Block from "@/components/blocks/products-3.astro"
---

<Products3Block
  badge="Pricing"
  title="Minimal cards with prominent pricing"
  products={[
    {
      title: "Hero set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 49, currency: "USD" },
    },
    {
      title: "Article set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 79, currency: "USD" },
    },
    {
      title: "Pricing set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 99, currency: "USD" },
    },
  ]}
/>

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

---
import Products5Block from "@/components/blocks/products-5.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Products5Block
  badge="Featured"
  title="Image-centric product grid with hover effects"
  buttons={[
    {
      label: "Featured product",
      href: "/blocks/product/",
      variant: "default",
    },
  ]}
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "Landing page kit image placeholder",
      },
      title: "Landing page kit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Docs launch kit image placeholder",
      },
      title: "Docs launch kit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Section starter pack image placeholder",
      },
      title: "Section starter pack",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "Conversion toolkit image placeholder",
      },
      title: "Conversion toolkit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>