{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "digital-product-overview-01",
  "type": "registry:block",
  "description": "Digital product with plan options",
  "registryDependencies": [
    "button",
    "label",
    "radio-group",
    "badge"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/digital-product-overview-01/page.tsx",
      "content": "\"use client\"\n\nimport { Eye, Lock, ShoppingCart, Star } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/components/ui/radio-group\"\n\nconst data = [\n  {\n    name: \"HTML Version\",\n    desc: \"Pure HTML/CSS with Tailwind, perfect for static websites.\",\n    price: \"$39\",\n    popular: false,\n  },\n  {\n    name: \"React Version\",\n    desc: \"React components with TypeScript support included.\",\n    price: \"$49\",\n    popular: true,\n  },\n  {\n    name: \"Angular Version\",\n    desc: \"Angular components with full type definitions.\",\n    price: \"$99\",\n    popular: false,\n  },\n]\n\nexport default function DigitalProductOverview01() {\n  return (\n    <section className=\"container mx-auto py-16\">\n      <nav className=\"mb-8 flex items-center gap-2 text-sm\">\n        <a\n          href=\"#\"\n          className=\"text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          Home\n        </a>\n        <span className=\"text-muted-foreground\">/</span>\n        <a\n          href=\"#\"\n          className=\"text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          Templates\n        </a>\n        <span className=\"text-muted-foreground\">/</span>\n        <span className=\"text-foreground font-medium\">Digital Product</span>\n      </nav>\n\n      <div className=\"mt-8 grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16\">\n        <div className=\"group bg-muted/30 relative overflow-hidden rounded-2xl border p-4 shadow-xl transition-all hover:shadow-2xl\">\n          <img\n            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/headers-thumbnail.jpg\"\n            alt=\"Digital product preview\"\n            className=\"h-full w-full object-contain 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\n        <div className=\"flex flex-col\">\n          <div className=\"mb-6\">\n            <div className=\"mb-3 flex items-center gap-3\">\n              <h2 className=\"text-3xl font-bold tracking-tight\">\n                Premium UI Kit\n              </h2>\n              <Badge\n                variant=\"secondary\"\n                className=\"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\"\n              >\n                Best Seller\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-base leading-relaxed\">\n              A comprehensive collection of beautifully crafted components and\n              templates. Built with modern web technologies and best practices\n              for seamless integration.\n            </p>\n          </div>\n\n          <div className=\"bg-muted/50 mb-6 flex items-center gap-6 rounded-lg p-4\">\n            <div className=\"flex items-center gap-2\">\n              <Star className=\"h-5 w-5 fill-yellow-400 text-yellow-400\" />\n              <span className=\"text-sm font-semibold\">4.9/5</span>\n              <span className=\"text-muted-foreground text-sm\">\n                (127 reviews)\n              </span>\n            </div>\n            <div className=\"bg-border h-4 w-px\" />\n            <div className=\"flex items-center gap-2 text-sm\">\n              <Lock className=\"text-muted-foreground h-4 w-4\" />\n              <span className=\"font-semibold\">1,234</span>\n              <span className=\"text-muted-foreground\">sales</span>\n            </div>\n          </div>\n\n          <div className=\"mb-6\">\n            <p className=\"mb-4 text-lg font-semibold\">Choose your version</p>\n            <RadioGroup defaultValue=\"React Version\" className=\"gap-3\">\n              {data.map(({ name, desc, price, popular }) => (\n                <div\n                  key={name}\n                  className=\"group/item bg-card hover:border-primary rounded-lg border transition-all hover:shadow-md\"\n                >\n                  <Label\n                    htmlFor={name}\n                    className=\"flex cursor-pointer items-start gap-4 p-4\"\n                  >\n                    <RadioGroupItem value={name} id={name} className=\"mt-1\" />\n                    <div className=\"flex flex-1 items-center justify-between gap-4\">\n                      <div className=\"flex-1\">\n                        <div className=\"mb-1 flex items-center gap-2\">\n                          <p className=\"font-semibold\">{name}</p>\n                          {popular && (\n                            <Badge className=\"bg-primary text-primary-foreground\">\n                              Popular\n                            </Badge>\n                          )}\n                        </div>\n                        <p className=\"text-muted-foreground text-sm\">{desc}</p>\n                      </div>\n                      <div className=\"text-right\">\n                        <p className=\"text-2xl font-bold\">{price}</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          one-time\n                        </p>\n                      </div>\n                    </div>\n                  </Label>\n                </div>\n              ))}\n            </RadioGroup>\n          </div>\n\n          <div className=\"mt-auto flex flex-col gap-3 sm:flex-row\">\n            <Button size=\"lg\" className=\"flex-1 gap-2\">\n              <ShoppingCart className=\"h-4 w-4\" />\n              Buy Now\n            </Button>\n            <Button size=\"lg\" variant=\"outline\" className=\"flex-1 gap-2\">\n              <Eye className=\"h-4 w-4\" />\n              Live Preview\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/digital-product-overview/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1000px",
    "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"
  ]
}