{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-details",
  "type": "registry:component",
  "title": "Product Details",
  "author": "Toby Belhome",
  "description": "Showcase detailed product information with Tailwind CSS e-commerce product detail sections. These layouts highlight images, descriptions, specifications, pricing, and calls-to-action for a seamless shopping experience. Perfect for online stores and marketplaces aiming for modern, engaging, and conversion-focused product pages.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/product-details/01/page.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Star, HeartIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function ProductDetailPage() {\n  const [selectedImage, setSelectedImage] = useState(0);\n\n  const images = [\n    \"/images/products/list1.png\",\n    \"/images/products/list5.png\",\n    \"/images/products/list3.png\",\n    \"/images/products/list4.png\"\n  ];\n\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <div className=\"grid gap-8 lg:grid-cols-3\">\n          {/* Image Gallery */}\n          <div className=\"col-span-2 flex flex-col-reverse gap-4 md:flex-row\">\n            {/* Thumbnails */}\n            <div className=\"flex flex-row gap-2 md:flex-col md:gap-4\">\n              {images.map((image, index) => (\n                <button\n                  key={index}\n                  onClick={() => setSelectedImage(index)}\n                  className={cn(\n                    \"relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all md:h-24 md:w-24\",\n                    selectedImage === index\n                      ? \"border-foreground\"\n                      : \"border-border hover:border-muted-foreground\"\n                  )}>\n                  <img\n                    src={image}\n                    alt={`Product view ${index + 1}`}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </button>\n              ))}\n            </div>\n\n            {/* Main Image */}\n            <figure className=\"aspect-square flex-1 overflow-hidden rounded-lg border lg:max-h-4/5\">\n              <img\n                src={images[selectedImage]}\n                alt=\"Nike Pegasus 41 shoes\"\n                className=\"h-full w-full object-cover\"\n              />\n            </figure>\n          </div>\n\n          {/* Product Info */}\n          <div className=\"flex flex-col space-y-4 lg:space-y-6\">\n            <div>\n              <h1 className=\"text-foreground font-heading text-3xl md:text-4xl\">\n                Nike Pegasus 41 shoes\n              </h1>\n\n              {/* Rating */}\n              <div className=\"mt-4 flex items-center gap-2\">\n                <div className=\"flex gap-1\">\n                  {[1, 2, 3, 4].map((star) => (\n                    <Star key={star} className=\"size-4 fill-amber-500 text-amber-500\" />\n                  ))}\n                  <Star className=\"text-muted-foreground size-4\" />\n                </div>\n                <span className=\"text-muted-foreground text-sm\">(4)</span>\n              </div>\n            </div>\n\n            {/* Pricing */}\n            <div>\n              <p className=\"text-muted-foreground text-lg line-through\">$189</p>\n              <p className=\"text-foreground text-3xl font-bold md:text-4xl\">$159</p>\n              <p className=\"text-muted-foreground mt-1 text-sm\">(inclusive of all taxes)</p>\n            </div>\n\n            {/* About Product */}\n            <div className=\"text-sm\">\n              <h2 className=\"text-foreground text-base font-semibold\">About Product</h2>\n              <ul className=\"mt-4 space-y-3\">\n                <li className=\"text-muted-foreground flex items-start gap-3\">\n                  <span className=\"bg-muted-foreground mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full\" />\n                  <span>High-quality material</span>\n                </li>\n                <li className=\"text-muted-foreground flex items-start gap-3\">\n                  <span className=\"bg-muted-foreground mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full\" />\n                  <span>Comfortable for everyday use</span>\n                </li>\n                <li className=\"text-muted-foreground flex items-start gap-3\">\n                  <span className=\"bg-muted-foreground mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full\" />\n                  <span>Available in different sizes</span>\n                </li>\n              </ul>\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"flex gap-3\">\n              <Button variant=\"outline\" size=\"lg\">\n                <HeartIcon />\n                Add to Favorites\n              </Button>\n              <Button size=\"lg\">Add to Cart</Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/product-details.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}