{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce-sections-02",
  "type": "registry:block",
  "description": "Luxury product detail page with image gallery",
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/ecommerce-sections-02/page.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  ChevronDown,\n  MapPin,\n  Package,\n  Ruler,\n  ShoppingBag,\n  Star,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function EcommerceSections02() {\n  const [selectedImage, setSelectedImage] = useState(0)\n  const [selectedColor, setSelectedColor] = useState(1)\n  const [isInfoOpen, setIsInfoOpen] = useState(false)\n\n  const thumbnails = [\n    \"/placeholder.svg?height=80&width=80&text=Bag+1\",\n    \"/placeholder.svg?height=80&width=80&text=Bag+2\",\n    \"/placeholder.svg?height=80&width=80&text=Detail\",\n    \"/placeholder.svg?height=80&width=80&text=Inside\",\n    \"/placeholder.svg?height=80&width=80&text=Model\",\n    \"/placeholder.svg?height=80&width=80&text=Lifestyle\",\n  ]\n\n  const colors = [\n    { name: \"Black\", hex: \"#1a1a1a\" },\n    { name: \"Cream\", hex: \"#f5f0e8\" },\n    { name: \"Forest Green\", hex: \"#7d9488\" },\n    { name: \"Gray\", hex: \"#9ca3af\" },\n    { name: \"Navy Blue\", hex: \"#0f172a\" },\n    { name: \"Brown\", hex: \"#a0522d\" },\n  ]\n\n  const features = [\n    { icon: ShoppingBag, text: \"Crossbody style\" },\n    { icon: Package, text: \"Premium leather\" },\n    { icon: Ruler, text: \"Adjustable strap\" },\n    { icon: MapPin, text: \"Crafted in France\" },\n  ]\n\n  return (\n    <div className=\"min-h-screen bg-neutral-50 p-4 sm:p-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid gap-8 lg:grid-cols-[auto_1fr_1fr] lg:gap-12\">\n          <div className=\"hidden lg:flex lg:flex-col lg:gap-3\">\n            {thumbnails.map((thumb, index) => (\n              <button\n                key={index}\n                onClick={() => setSelectedImage(index)}\n                className={`h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${\n                  selectedImage === index\n                    ? \"border-neutral-900\"\n                    : \"border-neutral-200 hover:border-neutral-400\"\n                }`}\n              >\n                <img\n                  src={thumb}\n                  alt={`Product view ${index + 1}`}\n                  className=\"h-full w-full object-cover\"\n                />\n              </button>\n            ))}\n          </div>\n\n          <div className=\"flex items-start justify-center\">\n            <div className=\"w-full max-w-lg\">\n              <div className=\"aspect-square overflow-hidden rounded-2xl bg-white\">\n                <img\n                  src={thumbnails[selectedImage]}\n                  alt=\"Product main view\"\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n              <div className=\"mt-4 flex gap-2 lg:hidden\">\n                {thumbnails.slice(0, 4).map((thumb, index) => (\n                  <button\n                    key={index}\n                    onClick={() => setSelectedImage(index)}\n                    className={`h-16 w-16 overflow-hidden rounded-lg border-2 ${\n                      selectedImage === index\n                        ? \"border-neutral-900\"\n                        : \"border-neutral-200\"\n                    }`}\n                  >\n                    <img\n                      src={thumb}\n                      alt={`Thumbnail ${index + 1}`}\n                      className=\"h-full w-full object-cover\"\n                    />\n                  </button>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col\">\n            <Badge\n              variant=\"outline\"\n              className=\"mb-4 w-fit border-neutral-300 text-xs font-medium text-neutral-600\"\n            >\n              Trending Now\n            </Badge>\n\n            <h1 className=\"mb-2 text-3xl font-light tracking-tight text-neutral-900 sm:text-4xl\">\n              Artisan Leather Crossbody\n            </h1>\n\n            <div className=\"mb-6 flex items-center gap-4\">\n              <span className=\"text-2xl font-normal text-neutral-900\">\n                $385.00\n              </span>\n              <div className=\"flex items-center gap-1\">\n                <div className=\"flex\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star\n                      key={i}\n                      className={`h-4 w-4 ${\n                        i < 4\n                          ? \"fill-neutral-900 text-neutral-900\"\n                          : \"fill-neutral-900 text-neutral-900\"\n                      }`}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-sm text-neutral-500\">(4.7)</span>\n              </div>\n            </div>\n\n            <div className=\"mb-6\">\n              <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n                Color:{\" \"}\n                <span className=\"font-normal\">\n                  {colors[selectedColor].name}\n                </span>\n              </p>\n              <div className=\"flex gap-2\">\n                {colors.map((color, index) => (\n                  <button\n                    key={index}\n                    onClick={() => setSelectedColor(index)}\n                    className={`h-10 w-10 rounded-md border-2 transition-all ${\n                      selectedColor === index\n                        ? \"border-neutral-900 ring-2 ring-neutral-900 ring-offset-2\"\n                        : \"border-neutral-200 hover:border-neutral-400\"\n                    }`}\n                    style={{ backgroundColor: color.hex }}\n                    title={color.name}\n                  />\n                ))}\n              </div>\n            </div>\n\n            <p className=\"mb-4 text-sm leading-relaxed text-neutral-600\">\n              Elegant crossbody bag crafted from premium vegetable-tanned\n              leather with a minimalist silhouette. Features a secure magnetic\n              clasp closure, interior zip compartment, and an adjustable\n              shoulder strap for versatile wear.\n            </p>\n\n            <p className=\"mb-6 text-sm text-neutral-600\">\n              This is a demo store. To buy this product, visit{\" \"}\n              <a\n                href=\"#\"\n                className=\"font-medium text-neutral-900 underline underline-offset-2 hover:text-neutral-700\"\n              >\n                Maison Atelier\n              </a>{\" \"}\n              official store.\n            </p>\n\n            <div className=\"mb-6 flex flex-col gap-3 sm:flex-row\">\n              <Button\n                variant=\"outline\"\n                size=\"lg\"\n                className=\"flex-1 border-neutral-900 text-neutral-900 hover:bg-neutral-900 hover:text-white\"\n              >\n                Add to Cart\n              </Button>\n              <Button\n                size=\"lg\"\n                className=\"flex-1 bg-neutral-900 text-white hover:bg-neutral-800\"\n              >\n                Buy it Now\n              </Button>\n            </div>\n\n            <div className=\"mb-6 grid grid-cols-2 gap-3\">\n              {features.map((feature, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-2 text-sm text-neutral-600\"\n                >\n                  <feature.icon className=\"h-4 w-4\" />\n                  <span>{feature.text}</span>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"border-t border-neutral-200\">\n              <button\n                onClick={() => setIsInfoOpen(!isInfoOpen)}\n                className=\"flex w-full items-center justify-between py-4 text-sm font-medium text-neutral-900 hover:text-neutral-600\"\n              >\n                More Information\n                <ChevronDown\n                  className={`h-4 w-4 transition-transform ${\n                    isInfoOpen ? \"rotate-180\" : \"\"\n                  }`}\n                />\n              </button>\n              {isInfoOpen && (\n                <div className=\"pb-4 text-sm leading-relaxed text-neutral-600\">\n                  <p className=\"mb-3\">\n                    <strong>Materials & Care:</strong> This bag is made from\n                    100% full-grain vegetable-tanned leather that develops a\n                    beautiful patina over time. Clean with a soft, dry cloth and\n                    condition regularly with leather cream.\n                  </p>\n                  <p className=\"mb-3\">\n                    <strong>Dimensions:</strong> 9.5\" W x 7\" H x 3\" D. Strap\n                    drop adjustable from 20\" to 24\". Weight: 1.2 lbs.\n                  </p>\n                  <p>\n                    <strong>Shipping & Returns:</strong> Free standard shipping\n                    on orders over $200. 30-day return policy with original\n                    receipt and tags attached.\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/ecommerce-sections/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "900px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "ecommerce"
  ]
}