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

---
type: block
category: "products"
title: "Products 5"
description: "Products 5 block example."
---

```astro live props={{ name: 'products-5' }}
---
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" },
    },
  ]}
/>
```