{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-list-02",
  "type": "registry:component",
  "title": "Product List",
  "author": "Toby Belhome",
  "description": "Display products in clean and engaging Tailwind CSS product list sections. These layouts feature images, titles, prices, and brief descriptions, making browsing effortless. Perfect for online stores, marketplaces, and e-commerce platforms aiming for modern, visually appealing, and conversion-focused product displays.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/product-list/02/page.tsx",
      "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ChevronRight } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nconst products = [\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list1.png\",\n    price: \"$129.00\",\n    badge: \"New Season\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list2.png\",\n    price: \"$49.00\",\n    badge: \"Best Seller\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list3.png\",\n    price: \"$39.00\",\n    badge: \"New Season\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list4.png\",\n    price: \"$19.00\",\n    badge: \"Best Seller\"\n  }\n];\n\nexport type Product = (typeof products)[number];\n\nexport default function Page() {\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <header className=\"mb-4 flex items-end justify-between space-y-2\">\n          <h2 className=\"font-heading text-xl md:text-2xl\">Trending Products</h2>\n          <Button variant=\"link\" size=\"sm\" className=\"px-0!\" asChild>\n            <Link href=\"#\">\n              Shop the collection\n              <ChevronRight className=\"size-3.5\" />\n            </Link>\n          </Button>\n        </header>\n\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-6\">\n          {products.map((product, i) => (\n            <Product key={i} product={product} />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst Product = ({ product }: { product: Product }) => (\n  <Link href=\"#\" className=\"group\">\n    <figure className=\"relative aspect-square w-full overflow-hidden rounded-md object-cover\">\n      <Image\n        fill\n        className=\"object-cover transition-all duration-300 group-hover:scale-105 group-hover:opacity-80\"\n        src={product.image}\n        alt={product.title}\n      />\n      <Badge variant=\"secondary\" className=\"absolute end-2 top-2 bg-white/30 dark:bg-black/30\">\n        {product.badge}\n      </Badge>\n    </figure>\n    <div className=\"mt-3 space-y-0.5\">\n      <p className=\"font-medium\">{product.title}</p>\n      <p className=\"text-muted-foreground\">{product.price}</p>\n    </div>\n  </Link>\n);\n",
      "type": "registry:component",
      "target": "components/product-list-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}