{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-cards-04",
  "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/04/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};\n\nexport type Product = typeof product;\n\nexport default function Page() {\n  return (\n    <div className=\"mx-auto max-w-80 py-10\">\n      <Product product={product} />\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    </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-04.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}