{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-cards-07",
  "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": [
    "button",
    "button-group"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/product-cards/07/page.tsx",
      "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Button } from \"@/components/ui/button\";\nimport { HeartIcon } from \"lucide-react\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\n\nconst product = {\n  title: \"White T-Shirt\",\n  image: \"/images/products/list1.png\",\n  price: \"$29.00\",\n  badge: \"New Season\"\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      <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/30 p-2 opacity-0 transition-opacity group-hover:opacity-100 lg:p-4\">\n        <ButtonGroup className=\"w-full\">\n          <Button className=\"grow\" variant=\"outline\">\n            Add to Cart\n          </Button>\n          <Button variant=\"outline\">\n            <HeartIcon />\n          </Button>\n        </ButtonGroup>\n      </div>\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-cards-07.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}