{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-cards-05",
  "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/05/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 { 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-80 py-10\">\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-transform duration-300 group-hover:scale-105 group-hover:rotate-2\"\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          <div className=\"absolute start-3 bottom-3 flex items-center justify-between 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        </figure>\n        <div className=\"mt-3 space-y-2\">\n          <div className=\"flex items-center justify-between gap-1\">\n            <p className=\"font-medium\">{product.title}</p>\n            <p className=\"text-muted-foreground\">{product.price}</p>\n          </div>\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        </div>\n        <Button variant=\"secondary\" className=\"mt-4 w-full\">\n          Add to Cart\n        </Button>\n      </Link>\n    </div>\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-transform duration-300 group-hover:scale-105 group-hover:rotate-2\"\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      <div className=\"absolute start-3 bottom-3 flex items-center justify-between 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    </figure>\n    <div className=\"mt-3 space-y-2\">\n      <div className=\"flex items-center justify-between gap-1\">\n        <p className=\"font-medium\">{product.title}</p>\n        <p className=\"text-muted-foreground\">{product.price}</p>\n      </div>\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    </div>\n    <Button variant=\"secondary\" className=\"mt-4 w-full\">\n      Add to Cart\n    </Button>\n  </Link>\n);\n",
      "type": "registry:component",
      "target": "components/product-cards-05.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}