{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-hero-sections-3d-isometric-hero","type":"registry:block","title":"3D Isometric Hero","files":[{"path":"components/blocks/marketing/hero-sections/3d-isometric-hero.tsx","content":"/*\n * This component requires the following global CSS styles:\n *\n * .perspective {\n *   perspective: 1000px;\n * }\n *\n * .transform-style {\n *   transform-style: preserve-3d;\n * }\n *\n * .rotateX-[60deg] {\n *   transform: rotateX(60deg);\n * }\n *\n * .rotateY-90 {\n *   transform: rotateY(90deg);\n * }\n *\n * .rotateX-90 {\n *   transform: rotateX(90deg);\n * }\n *\n * .rotateZ-[45deg] {\n *   transform: rotateZ(45deg);\n * }\n *\n * .translate-z-5 {\n *   transform: translateZ(5px);\n * }\n *\n * .translate-z-6 {\n *   transform: translateZ(6px);\n * }\n *\n * .translate-z-7 {\n *   transform: translateZ(7px);\n * }\n *\n * .translate-z-8 {\n *   transform: translateZ(8px);\n * }\n *\n * .translate-z-24 {\n *   transform: translateZ(24px);\n * }\n *\n * .animate-spin-slow {\n *   animation: spin 6s linear infinite;\n * }\n *\n * .animate-bounce-slow {\n *   animation: bounce 3s ease-in-out infinite;\n * }\n *\n * .delay-100 {\n *   animation-delay: 100ms;\n * }\n *\n * .delay-200 {\n *   animation-delay: 200ms;\n * }\n *\n * .delay-300 {\n *   animation-delay: 300ms;\n * }\n *\n * @keyframes bounce {\n *   0%, 100% {\n *     transform: translateY(0);\n *   }\n *   50% {\n *     transform: translateY(-20px);\n *   }\n * }\n */\n\nimport { Button } from '@/components/ui/button';\nimport { CheckIcon, ChevronRight, Code2, FileText } from 'lucide-react';\n\nexport default function IsometricHero() {\n  return (\n    <div className=\"relative overflow-hidden\">\n      {/* Background grid */}\n      <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] bg-[size:14px_24px]\"></div>\n\n      <div className=\"relative container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"grid gap-6 pt-12 pb-8 md:pt-16 md:pb-12 lg:grid-cols-2 lg:pt-20 lg:pb-16\">\n          <div className=\"flex flex-col justify-center space-y-8\">\n            {/* Notification badge */}\n            <div className=\"border-primary/20 bg-primary/10 text-primary inline-flex max-w-fit items-center rounded-full border px-3 py-1 text-sm font-medium\">\n              <span className=\"sm:hidden\">New features available</span>\n              <span className=\"hidden sm:inline\">\n                Just released: Enhanced customization and new components\n              </span>\n            </div>\n\n            {/* Heading and description */}\n            <div>\n              <h1 className=\"from-foreground to-foreground/60 mb-4 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl md:text-6xl\">\n                Build better interfaces with modern components\n              </h1>\n              <p className=\"text-muted-foreground mb-8 max-w-[85%] text-xl\">\n                A professionally designed component library for creating\n                beautiful, responsive applications that match your brand.\n              </p>\n            </div>\n\n            {/* Features */}\n            <div className=\"grid gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <CheckIcon className=\"text-primary h-4 w-4\" />\n                <span className=\"text-muted-foreground text-sm\">\n                  Customizable components for any design system\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckIcon className=\"text-primary h-4 w-4\" />\n                <span className=\"text-muted-foreground text-sm\">\n                  Dark mode support out of the box\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckIcon className=\"text-primary h-4 w-4\" />\n                <span className=\"text-muted-foreground text-sm\">\n                  Built with TypeScript and fully accessible\n                </span>\n              </div>\n            </div>\n\n            {/* Call to action */}\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              <Button size=\"lg\" asChild>\n                <a href=\"#\">\n                  Get Started\n                  <ChevronRight className=\"ml-2 h-4 w-4\" />\n                </a>\n              </Button>\n              <Button variant=\"outline\" size=\"lg\" className=\"gap-2\" asChild>\n                <a href=\"#\">\n                  View Documentation\n                  <FileText className=\"h-4 w-4\" />\n                </a>\n              </Button>\n            </div>\n\n            {/* Trusted by */}\n            <div className=\"flex flex-col space-y-3 pt-6\">\n              <div className=\"text-muted-foreground text-sm\">\n                Trusted by developers at\n              </div>\n              <div className=\"flex items-center gap-6\">\n                <div className=\"text-muted-foreground/60\">\n                  <svg\n                    className=\"h-5 w-auto\"\n                    viewBox=\"0 0 124 34\"\n                    fill=\"currentColor\"\n                  >\n                    <path d=\"M42.1 15.1c0 3.2-2.7 5.9-7.1 5.9h-4.3v5.8h-4.5V9.4h8.8c4.3 0 7.1 2.5 7.1 5.7zm-4.7 0c0-1.3-1.2-2.2-2.7-2.2h-4v4.4h4c1.5 0 2.7-.9 2.7-2.2zM43.1 26.8V9.4h15.6v3.7h-11v3.3h9.6v3.7h-9.6v3h11v3.7H43.1zM59.5 26.8l10-17.5H76l10 17.5h-5.2L79 23.4h-7.9l-1.9 3.4h-9.7zm11.7-6.9h4.2l-2.1-3.8-2.1 3.8zM111.6 26.8l-4.5-5.7-4.5 5.7h-5.5l7.2-8.8-6.7-8.7h5.5l4.1 5.3 4.1-5.3h5.4l-6.7 8.7 7.2 8.8h-5.6zM89.8 13.5c-3.4 0-5.8 2.7-5.8 5.9 0 3.3 2.4 5.9 5.8 5.9 3.5 0 5.9-2.6 5.9-5.9 0-3.2-2.4-5.9-5.9-5.9zm0-4.1c6 0 10.5 4.3 10.5 10s-4.4 10-10.5 10c-6 0-10.4-4.3-10.4-10s4.4-10 10.4-10zM6 9.4V7l18 7.8v2.8L6 25v-2.6l14.2-5.9-14.2-7.1z\" />\n                  </svg>\n                </div>\n                <div className=\"text-muted-foreground/60\">\n                  <svg\n                    className=\"h-5 w-auto\"\n                    viewBox=\"0 0 139 34\"\n                    fill=\"currentColor\"\n                  >\n                    <path d=\"M52.1 18.4V16h5.5v8.4c-1.3.9-3.6 1.7-5.8 1.7-5.6 0-9.4-4-9.4-9.4 0-5.3 3.9-9.4 9.7-9.4 2.8 0 4.9.9 6.4 2.4l-1.9 2.8c-1.1-1.1-2.3-1.7-4.1-1.7-3.3 0-5.7 2.5-5.7 5.9 0 3.5 2.5 5.9 5.8 5.9 1 0 2.1-.2 3-1v-3.2h-3.5zM79.9 25.9h-3.9V16h-5.5v9.9h-3.9V7.6h3.9v5.1h5.5V7.6h3.9v18.3zM91.3 26c-3.2 0-5.2-1.4-5.2-4.3v-10h-2.2V9.2h2.2V6.1h3.7v3.1h3.5v2.6h-3.5v9.5c0 1.1.6 1.7 1.6 1.7.7 0 1.2-.2 1.6-.5l.9 2.9c-.9.3-1.7.6-3.6.6zM105.2 7.6h4.1L101.4 32h-4.1l7.9-24.4zM114.7 9.2h-4V5.7h4v3.5zm-.1 16.7h-3.7V11.8h3.7v14.1zM126.8 25.9V15.4c0-1.7-1-2.4-2.4-2.4-1.5 0-2.7.9-3.5 1.9v11h-3.7V11.8h3.7v1.9c1.1-1.3 2.9-2.2 5-2.2 3.1 0 4.7 1.8 4.7 4.4v10.1h-3.8z\" />\n                    <path d=\"M7.2 2.8H30l-7.4 12.8L30 28.3H7.2l3.7-12.8L7.2 2.8z\" />\n                  </svg>\n                </div>\n                <div className=\"text-muted-foreground/60\">\n                  <svg\n                    className=\"h-5 w-auto\"\n                    viewBox=\"0 0 180 34\"\n                    fill=\"currentColor\"\n                  >\n                    <path d=\"M46.1 24c-2.6 0-4.6-.8-6-2.5-1.4-1.7-2.1-3.9-2.1-6.7 0-3 .8-5.3 2.4-7 1.6-1.7 3.8-2.6 6.6-2.6 2.6 0 4.5.8 5.9 2.3 1.4 1.5 2.1 3.6 2.1 6.1v2.2H42.3c.1 1.8.5 3.1 1.4 4 .9.9 2.2 1.3 3.8 1.3 1.1 0 2.1-.1 3-.3.9-.2 1.9-.5 3-.9V23c-1.1.5-2.1.8-3 1-1 .1-2.1.2-3.4.2zm-.7-15.6c-1.2 0-2.2.4-2.9 1.1-.7.8-1.1 1.9-1.2 3.4h8.1c0-1.5-.4-2.6-1.1-3.4-.8-.7-1.7-1.1-2.9-1.1zm20.5-4.6c.9 0 1.8.1 2.4.2l-.5 3.8c-.7-.1-1.3-.2-1.9-.2-1.4 0-2.5.4-3.4 1.3s-1.3 2.1-1.3 3.6V24h-4.1V4.1h3.1l.6 3.3h.2c.6-1.1 1.3-2 2.2-2.6.8-.7 1.8-1 2.7-1zm16.3 20.2c-2.7 0-4.7-.7-6.2-2.2-1.5-1.5-2.2-3.7-2.2-6.6 0-2.9.7-5.2 2.2-6.8 1.5-1.6 3.5-2.4 6.2-2.4 2.8 0 5 .8 6.5 2.3 1.5 1.5 2.2 3.7 2.2 6.8 0 2.9-.7 5.1-2.2 6.6-1.4 1.6-3.6 2.3-6.5 2.3zm.1-14.5c-3 0-4.5 1.9-4.5 5.8 0 3.8 1.5 5.7 4.4 5.7 2.9 0 4.4-1.9 4.4-5.7-.1-3.9-1.5-5.8-4.3-5.8zm19 14.2c-3.9 0-5.9-2.2-5.9-6.6V9.5h4.1v8.1c0 1.1.2 1.9.6 2.5.4.6 1.1.9 1.9.9 1.2 0 2-.4 2.6-1.1.6-.7.9-2 .9-3.7V9.5h4.1V24h-3.1l-.5-2.1h-.2c-.5.8-1.2 1.4-2 1.8-.8.4-1.6.6-2.5.6zm16.6-18.6c0-.8.2-1.4.6-1.7.4-.4 1-.5 1.8-.5.8 0 1.4.2 1.8.5.4.4.6.9.6 1.7 0 .7-.2 1.3-.6 1.7-.4.4-1 .6-1.8.6-.8 0-1.4-.2-1.8-.6-.4-.4-.6-1-.6-1.7zm4.3 18.3h-4.1V9.5h4.1V24zm5.6 0V9.5h3.1l.5 2.2h.2c.5-.8 1.2-1.4 2-1.8s1.8-.6 2.8-.6c2.5 0 4.2 1 5 2.9h.3c.6-.9 1.3-1.6 2.2-2.1.9-.5 1.9-.8 3.1-.8 2 0 3.5.5 4.4 1.6.9 1.1 1.4 2.7 1.4 4.8V24h-4.1v-8.7c0-1.1-.2-1.9-.6-2.4-.4-.5-1.1-.8-2-.8-.9 0-1.6.3-2.1.9-.5.6-.7 1.5-.7 2.7V24h-4.1v-8.7c0-1.1-.2-1.9-.6-2.4-.4-.5-1.1-.8-2-.8-1 0-1.7.3-2.1 1-.5.7-.7 1.7-.7 3V24h-4.1z\" />\n                    <path d=\"M13.7 5.1C16.1 2.7 19.4 1 23.2 1c7.5 0 13.6 6.1 13.6 13.6v.1c0 7.5-6.1 13.7-13.7 13.7-3.7 0-7-1.6-9.4-4.1l-.1-.2-5.7 5.7-.1-.1C3.9 28.9 1 24.7 1 19.8c0-4.9 2.9-9.1 7.1-11l.2-.1 5.4 5.4z\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* 3D Isometric Illustration */}\n          <div className=\"flex items-center justify-center\">\n            <div className=\"perspective relative h-[400px] w-full md:h-[500px]\">\n              {/* Main platform */}\n              <div className=\"rotateX-[60deg] rotateZ-[45deg] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform\">\n                {/* Base platform */}\n                <div className=\"transform-style preserve-3d h-64 w-64 rounded-lg border border-indigo-500/30 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 shadow-xl\">\n                  {/* Grid lines on platform */}\n                  <div className=\"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:12px_12px]\"></div>\n\n                  {/* Cubes */}\n                  <div className=\"transform-style preserve-3d absolute -top-10 left-8 h-16 w-16\">\n                    <div className=\"absolute inset-0 translate-z-8 transform bg-blue-500/80 shadow-lg\"></div>\n                    <div className=\"rotateY-90 absolute inset-0 translate-z-8 transform bg-blue-400/80 shadow-lg\"></div>\n                    <div className=\"rotateX-90 absolute inset-0 translate-z-8 transform bg-blue-600/80 shadow-lg\"></div>\n                  </div>\n\n                  <div className=\"transform-style preserve-3d absolute top-8 right-8 h-12 w-12\">\n                    <div className=\"absolute inset-0 translate-z-6 transform bg-purple-500/80 shadow-lg\"></div>\n                    <div className=\"rotateY-90 absolute inset-0 translate-z-6 transform bg-purple-400/80 shadow-lg\"></div>\n                    <div className=\"rotateX-90 absolute inset-0 translate-z-6 transform bg-purple-600/80 shadow-lg\"></div>\n                  </div>\n\n                  <div className=\"transform-style preserve-3d absolute right-14 bottom-12 h-14 w-14\">\n                    <div className=\"absolute inset-0 translate-z-7 transform bg-emerald-500/80 shadow-lg\"></div>\n                    <div className=\"rotateY-90 absolute inset-0 translate-z-7 transform bg-emerald-400/80 shadow-lg\"></div>\n                    <div className=\"rotateX-90 absolute inset-0 translate-z-7 transform bg-emerald-600/80 shadow-lg\"></div>\n                  </div>\n\n                  <div className=\"transform-style preserve-3d absolute bottom-10 left-10 h-10 w-10\">\n                    <div className=\"absolute inset-0 translate-z-5 transform bg-amber-500/80 shadow-lg\"></div>\n                    <div className=\"rotateY-90 absolute inset-0 translate-z-5 transform bg-amber-400/80 shadow-lg\"></div>\n                    <div className=\"rotateX-90 absolute inset-0 translate-z-5 transform bg-amber-600/80 shadow-lg\"></div>\n                  </div>\n                </div>\n\n                {/* Floating elements */}\n                <div className=\"animate-bounce-slow absolute -top-16 -left-16 h-8 w-8 rounded-full bg-pink-400 shadow-lg\"></div>\n                <div className=\"animate-bounce-slow absolute -top-12 right-0 h-6 w-6 rounded-full bg-yellow-400 shadow-lg delay-200\"></div>\n                <div className=\"animate-bounce-slow absolute -right-8 -bottom-8 h-10 w-10 rounded-full bg-blue-400 shadow-lg delay-300\"></div>\n                <div className=\"animate-bounce-slow absolute -bottom-12 left-4 h-7 w-7 rounded-full bg-green-400 shadow-lg delay-100\"></div>\n\n                {/* Code icon */}\n                <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 translate-z-24 transform\">\n                  <div className=\"bg-background flex h-16 w-16 items-center justify-center rounded-2xl shadow-xl\">\n                    <Code2 className=\"text-primary h-8 w-8\" />\n                  </div>\n                </div>\n              </div>\n\n              {/* Shadow below platform */}\n              <div className=\"absolute top-[60%] left-1/2 h-12 w-64 -translate-x-1/2 transform rounded-full bg-black/10 blur-xl\"></div>\n\n              {/* Decorative shapes behind */}\n              <div className=\"border-primary/20 animate-spin-slow absolute top-1/4 right-8 h-12 w-12 rounded-full border-4\"></div>\n              <div className=\"animate-spin-slow absolute bottom-1/4 left-8 h-16 w-16 rounded-full border-4 border-dashed border-amber-500/20 delay-300\"></div>\n\n              {/* Glow effect */}\n              <div className=\"bg-primary/5 absolute top-1/2 left-1/2 -z-10 h-64 w-64 -translate-x-1/2 -translate-y-1/2 transform rounded-full blur-3xl\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/hero-sections/3d-isometric-hero.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A hero with a 3D isometric illustration beside a headline and call to action. Adds depth and a modern feel to the top of a product landing page.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}