{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-cards-06",
  "type": "registry:component",
  "title": "Product Cards",
  "author": "Toby Belhome",
  "description": "Showcase products elegantly with Tailwind CSS product card sections. These layouts combine images, titles, prices, and brief descriptions in visually appealing cards, making browsing intuitive and engaging. Perfect for online stores, marketplaces, and e-commerce platforms aiming for modern, organized, and conversion-friendly displays.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/product-cards/06/page.tsx",
      "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { HeartIcon, Star } from \"lucide-react\";\n\nconst product = {\n  title: \"White T-Shirt\",\n  image: \"/images/products/list1.png\",\n  price: \"$29.00\",\n  badge: \"New Season\",\n  rating: 4,\n  colors: [\"rgb(119 119 218)\", \"rgb(218 119 163)\", \"rgb(125 376 306)\", \"rgb(255 255 255)\"]\n};\n\nexport type Product = typeof product;\n\nexport default function Page() {\n  return (\n    <div className=\"mx-auto max-w-150 py-10\">\n      <Product product={product} />\n    </div>\n  );\n}\n\nconst Product = ({ product }: { product: Product }) => (\n  <Link href=\"#\" className=\"group grid rounded-md border md:grid-cols-2\">\n    <figure className=\"relative aspect-square w-full overflow-hidden rounded-tl-md rounded-bl-md object-cover\">\n      <Image\n        fill\n        className=\"object-cover transition-all duration-300 group-hover:opacity-80\"\n        src={product.image}\n        alt={product.title}\n      />\n    </figure>\n    <div className=\"flex flex-col justify-between space-y-2 p-4\">\n      <div className=\"space-y-2\">\n        <Badge variant=\"secondary\">{product.badge}</Badge>\n        <p className=\"text-xl font-semibold\">{product.title}</p>\n        <div className=\"flex items-center gap-1\">\n          {Array(5)\n            .fill(\"\")\n            .map((_, i) =>\n              i < product.rating ? (\n                <Star key={i} className=\"size-4 fill-amber-500 text-amber-500\" />\n              ) : (\n                <Star key={i} className=\"text-muted-foreground size-4\" />\n              )\n            )}\n          <span className=\"text-muted-foreground ms-1 text-xs\">(4.5 out of 5)</span>\n        </div>\n        <p className=\"text-muted-foreground lg:text-lg\">{product.price}</p>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        {product.colors.map((color, i) => (\n          <span\n            key={i}\n            className=\"block size-3 rounded-full\"\n            style={{ backgroundColor: color }}></span>\n        ))}\n      </div>\n      <div className=\"flex gap-2 space-y-2\">\n        <Button className=\"grow\">Add to Cart</Button>\n        <Button variant=\"outline\">\n          <HeartIcon />\n        </Button>\n      </div>\n    </div>\n  </Link>\n);\n",
      "type": "registry:component",
      "target": "components/product-cards-06.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}