{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-01",
  "type": "registry:block",
  "description": "A simple gallery section.",
  "files": [
    {
      "path": "registry/designali/blocks/gallery/gallery-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion } from \"motion/react\"\n\nconst images = [\n  \"/img/hero-1.jpg\",\n  \"/img/chat-1-light.jpg\",\n  \"/img/hero-2.jpg\",\n  \"/img/dashboard-1-dark.jpg\",\n  \"/img/login-1.jpg\",\n  \"/img/hero-1.jpg\",\n  \"/img/chat-1-light.jpg\",\n  \"/img/hero-2.jpg\",\n  \"/img/dashboard-1-dark.jpg\",\n  \"/img/login-1.jpg\",\n]\n\nexport function HeroSection() {\n  return (\n    <section className=\"relative h-full w-full overflow-hidden bg-background\">\n      <div className=\"relative h-full w-full overflow-hidden\">\n\n        <motion.div\n          className=\"absolute left-1/2 top-[50%] h-full w-full\"\n          style={{\n            x: \"-50%\",\n            y: \"-50%\",\n          }}\n          animate={{ rotate: 360 }}\n          transition={{\n            duration: 35,\n            repeat: Infinity,\n            ease: \"linear\",\n          }}\n        >\n          {images.map((src, index) => {\n            const angle = (index * 360) / images.length\n\n            const radiusX = 500\n            const radiusY = 500\n\n            const x = Math.cos((angle * Math.PI) / 180) * radiusX\n            const y = Math.sin((angle * Math.PI) / 180) * radiusY\n\n            return (\n              <div\n                key={`${src}-${index}`}\n                className=\"absolute left-1/2 top-1/2\"\n                style={{\n                  transform: `\n            translate(-50%, -50%)\n            translate(${x}px, ${y}px)\n          `,\n                }}\n              >\n                {/* COUNTER ROTATION */}\n                <motion.div\n                  animate={{ rotate: -360 }}\n                  transition={{\n                    duration: 35,\n                    repeat: Infinity,\n                    ease: \"linear\",\n                  }}\n                >\n                  <div className=\"h-30 w-full aspect-video overflow-hidden border border-white/10 shadow-2xl\">\n                    <img\n                      src={src}\n                      alt={`Gallery ${index + 1}`}\n                      draggable={false}\n                      className=\"h-full w-full object-cover\"\n                    />\n                  </div>\n                </motion.div>\n              </div>\n            )\n          })}\n        </motion.div>\n\n        {/* CENTER CONTENT - STATIC */}\n        <div className=\"relative z-20 flex min-h-screen flex-col items-center justify-center px-6 pb-20 text-center\">\n          \n          {/* Badge */}\n          <div className=\"mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-muted/50 px-4 py-1.5 text-xs text-muted-foreground backdrop-blur-md\">\n            <span className=\"h-2 w-2 rounded-full bg-emerald-500 animate-pulse\" />\n            Next-Gen AI Image Generator v2.0\n          </div>\n\n          <h1 className=\"max-w-[700px] text-4xl font-normal tracking-[-0.04em] md:text-6xl\">\n             Your Imagination\n            <br />\n            To Life With AI\n          </h1>\n\n          <p className=\"mt-5 max-w-[520px] text-sm leading-6 text-muted-foreground\">\n            Generate photorealistic assets, conceptual artwork, and stunning designs instantly using our advanced multi-model neural engine.\n          </p>\n\n          <div className=\"mt-7 flex flex-col sm:flex-row items-center gap-3\">\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-3 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-transform active:scale-95\"\n            >\n              Start Creating Free\n              \n            </button>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-2 rounded-full border border-border bg-background px-6 py-3 text-sm font-medium text-foreground hover:bg-muted/50\"\n            >\n              Explore Showcase\n            </button>\n          </div>\n\n          <div className=\"mt-12 grid w-full max-w-[650px] md:grid-cols-3 md:border-t border-border/60 pt-7\">\n            <div className=\"px-4 text-center\">\n              <h3 className=\"font-serif text-base font-medium\">\n                4K Resolution\n              </h3>\n              <p className=\"m-2 text-[11px] text-muted-foreground\">\n                Crisp, ultra-high-definition exports ready for print.\n              </p>\n            </div>\n\n            <div className=\"border-y md:border-y-0 md:border-x border-border/60 p-4 text-center\">\n              <h3 className=\"font-serif text-base font-medium\">\n                Sub-Second Gen\n              </h3>\n              <p className=\"m-2 text-[11px] text-muted-foreground\">\n                Lightning fast rendering powered by optimized pipelines.\n              </p>\n            </div>\n\n            <div className=\"px-4 text-center\">\n              <h3 className=\"font-serif text-base font-medium\">\n                Full Control\n              </h3>\n              <p className=\"mt-2 text-[11px] text-muted-foreground\">\n                Fine-tune prompts, styles, and aspect ratios effortlessly.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}",
      "type": "registry:component",
      "target": "components/gallery-01.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px"
  },
  "categories": [
    "gallery"
  ]
}