{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dark-product-overview-01",
  "type": "registry:block",
  "description": "Dark themed product overview",
  "registryDependencies": [
    "button",
    "tabs",
    "badge"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/dark-product-overview-01/page.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart, Package, Shield, ShoppingCart, Star, Truck } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nconst DATA = [\n  {\n    title: \"Features\",\n    icon: Package,\n    desc: `Premium cashmere blend with cable-knit pattern. Features a classic V-neck design, \n    ribbed cuffs and hem for a perfect fit. Made with sustainable materials and ethically sourced \n    fibers. Temperature-regulating properties keep you comfortable in any season.`,\n  },\n  {\n    title: \"Product Care\",\n    icon: Shield,\n    desc: `Hand wash in cold water with mild detergent or dry clean for best results. \n    Lay flat to dry, do not wring or twist. Store folded in a cool, dry place. \n    Use a fabric shaver to remove any pilling. Steam gently to refresh between wears.`,\n  },\n  {\n    title: \"Shipping\",\n    icon: Truck,\n    desc: `Free standard shipping on all orders over $100. Express shipping available at checkout. \n    Orders are processed within 1-2 business days. International shipping available to select countries. \n    30-day hassle-free returns and exchanges.`,\n  },\n]\n\nexport default function DarkProductOverview01() {\n  const [isFavorite, setIsFavorite] = useState(false)\n\n  return (\n    <section className=\"bg-primary container mx-auto rounded-2xl\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 md:px-12\">\n        <div className=\"mb-16 text-center\">\n          <Badge\n            variant=\"outline\"\n            className=\"mb-4 border-white/30 bg-white/10 text-white\"\n          >\n            Shop Previewer\n          </Badge>\n          <h2 className=\"my-4 text-4xl font-bold tracking-tight text-white\">\n            New Collection\n          </h2>\n          <p className=\"mx-auto max-w-3xl text-lg leading-relaxed text-white/80\">\n            Easily preview furniture, decor, and more in your space, ensuring\n            everything fits perfectly and looks just right. It&apos;s the\n            ultimate tool for hassle-free home customization and design!\n          </p>\n        </div>\n\n        <div className=\"flex flex-col items-center justify-between gap-x-12 gap-y-12 lg:flex-row\">\n          <div className=\"flex-1\">\n            <div className=\"mb-4 flex items-center gap-3\">\n              <h3 className=\"text-2xl font-bold text-white\">Elegant Suite</h3>\n              <Badge className=\"bg-green-500 text-white\">New Arrival</Badge>\n            </div>\n\n            <div className=\"mb-4 flex items-center gap-2\">\n              <div className=\"flex items-center gap-1\">\n                {[1, 2, 3, 4, 5].map((star) => (\n                  <Star\n                    key={star}\n                    className=\"h-5 w-5 fill-yellow-400 text-yellow-400\"\n                  />\n                ))}\n              </div>\n              <span className=\"text-sm text-white/70\">(127 reviews)</span>\n            </div>\n\n            <div className=\"mb-6 flex items-baseline gap-3\">\n              <p className=\"text-4xl font-bold text-white\">$449.90</p>\n              <span className=\"text-lg text-white/50 line-through\">\n                $599.90\n              </span>\n              <Badge\n                variant=\"outline\"\n                className=\"border-green-500/30 bg-green-500/10 text-green-400\"\n              >\n                25% OFF\n              </Badge>\n            </div>\n\n            <p className=\"mb-8 max-w-xl text-lg leading-relaxed text-white/80\">\n              Add a touch of sophistication to your home with our handcrafted\n              ceramic vase. Each piece is uniquely made, blending seamlessly\n              into both modern and classic decors.\n            </p>\n\n            <div className=\"mb-8 flex items-center gap-2 rounded-lg bg-white/10 p-4\">\n              <Truck className=\"h-5 w-5 shrink-0 text-white\" />\n              <span className=\"text-sm text-white\">\n                Free shipping on orders over $100\n              </span>\n            </div>\n\n            <div className=\"mb-4 flex w-full items-center gap-3\">\n              <Button\n                size=\"lg\"\n                className=\"flex-1 gap-2 bg-white text-black hover:bg-white/90 sm:w-64 sm:flex-none\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                Add to Cart\n              </Button>\n              <Button\n                size=\"lg\"\n                variant=\"ghost\"\n                className={`shrink-0 ${\n                  isFavorite\n                    ? \"text-red-500 hover:text-red-600\"\n                    : \"text-white/80 hover:text-red-500\"\n                }`}\n                onClick={() => setIsFavorite(!isFavorite)}\n              >\n                <Heart\n                  className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n                />\n              </Button>\n            </div>\n\n            <div className=\"mt-12 max-w-2xl\">\n              <Tabs defaultValue=\"Features\" className=\"w-full\">\n                <TabsList className=\"h-auto w-full justify-start rounded-none border-b border-white/20 bg-transparent p-0\">\n                  {DATA.map(({ title, icon: Icon }) => (\n                    <TabsTrigger\n                      key={title}\n                      value={title}\n                      className=\"gap-2 rounded-none px-4 py-3 text-white data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:shadow-none\"\n                    >\n                      <Icon className=\"h-4 w-4\" />\n                      {title}\n                    </TabsTrigger>\n                  ))}\n                </TabsList>\n                {DATA.map(({ title, desc }) => (\n                  <TabsContent\n                    key={title}\n                    value={title}\n                    className=\"mt-6 text-white/80\"\n                  >\n                    <p className=\"leading-relaxed\">{desc}</p>\n                  </TabsContent>\n                ))}\n              </Tabs>\n            </div>\n          </div>\n\n          <div className=\"w-full lg:w-auto lg:max-w-lg\">\n            <div className=\"group relative overflow-hidden rounded-2xl border-2 border-white/20 bg-white/5 p-4 shadow-2xl backdrop-blur-sm\">\n              <img\n                src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973\"\n                alt=\"Elegant Suite\"\n                className=\"w-full rounded-xl transition-transform duration-500 group-hover:scale-105\"\n              />\n              <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dark-product-overview/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1100px",
    "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"
  ]
}