{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-section-with-floating-gallery",
  "type": "registry:block",
  "title": "CTA Section With Floating Gallery",
  "description": "CTA section with staggered image gallery.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/orb-button"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/cta-sections/cta-section-with-floating-gallery.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { ArrowRight } from 'lucide-react';\nimport { OrbButton } from '@/components/ui/orb-button';\n\ninterface CTAWithFloatingGalleryProps {\n  title?: string;\n  description?: string;\n  buttonLabel?: string;\n  className?: string;\n}\n\nconst galleryImages = [\n  {\n    url: 'https://scrollxui.dev/assets/blocks/hero-sections.png',\n    alt: 'Hero Sections',\n    delay: 0,\n  },\n  {\n    url: 'https://scrollxui.dev/assets/blocks/footers.png',\n    alt: 'Footers',\n    delay: 0.1,\n  },\n  {\n    url: 'https://scrollxui.dev/assets/blocks/bento.png',\n    alt: 'Bento Grids',\n    delay: 0.2,\n  },\n  {\n    url: 'https://scrollxui.dev/assets/blocks/pricing-sections.png',\n    alt: 'Pricing Sections',\n    delay: 0.15,\n  },\n  {\n    url: 'https://scrollxui.dev/assets/blocks/contact-sections.png',\n    alt: 'Contact Sections',\n    delay: 0.25,\n  },\n  {\n    url: 'https://scrollxui.dev/assets/blocks/testimonials.png',\n    alt: 'Logo Cloud',\n    delay: 0.3,\n  },\n];\n\nexport default function CTAWithFloatingGallery({\n  title = 'Launch Rapidly with Production-Ready UI Blocks',\n  description = 'Ship polished landing pages in hours. Pick a block, customize it, and move from idea to release without rebuilding layout primitives.',\n  buttonLabel = 'Get All Blocks',\n  className,\n}: CTAWithFloatingGalleryProps) {\n  const words = title.split(' ');\n  const leftImages = galleryImages.slice(0, 3);\n  const rightImages = galleryImages.slice(3);\n\n  return (\n    <section\n      className={cn(\n        'mx-auto my-20 grid w-full max-w-7xl grid-cols-1 items-center gap-10 px-4 md:my-28 md:grid-cols-2 md:gap-16 md:px-8',\n        className\n      )}\n    >\n      <div className='max-w-xl'>\n        <h2 className='text-3xl font-bold tracking-tight text-balance text-zinc-900 md:text-4xl dark:text-white'>\n          {words.map((word, index) => (\n            <motion.span\n              key={`${word}-${index}`}\n              initial={{ opacity: 0, filter: 'blur(6px)', y: 12 }}\n              whileInView={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n              viewport={{ once: true }}\n              transition={{\n                duration: 0.4,\n                delay: index * 0.08,\n                ease: 'easeInOut',\n              }}\n              className='mr-2 inline-block'\n            >\n              {word}\n            </motion.span>\n          ))}\n        </h2>\n\n        <motion.p\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.4 }}\n          className='mt-6 max-w-lg text-base text-zinc-600 md:text-base dark:text-zinc-400'\n        >\n          {description}\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 10 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6, delay: 0.5 }}\n          className='mt-8'\n        >\n          <OrbButton>\n            <span className='flex items-center gap-2'>\n              {buttonLabel}\n            </span>\n          </OrbButton>\n        </motion.div>\n      </div>\n\n      <div className='relative overflow-hidden rounded-2xl bg-white/60 p-3 dark:bg-zinc-950/50'>\n        <div className='pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-linear-to-b from-white to-transparent dark:from-zinc-950'></div>\n        <div className='pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 bg-linear-to-t from-white to-transparent dark:from-zinc-950'></div>\n        \n        <div className='grid grid-cols-2 gap-3 overflow-hidden'>\n          <div className='flex flex-col gap-3'>\n            {leftImages.map((image) => (\n              <motion.div\n                key={image.alt}\n                initial={{ opacity: 0, scale: 0.8, y: 20 }}\n                whileInView={{ opacity: 1, scale: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{\n                  duration: 0.6,\n                  delay: image.delay,\n                  ease: [0.22, 1, 0.36, 1],\n                }}\n                className='overflow-hidden rounded-xl shadow-sm ring-1 shadow-black/10 ring-black/5 dark:shadow-white/10 dark:ring-white/5'\n              >\n                <img\n                  src={image.url}\n                  alt={image.alt}\n                  className='h-44 w-full object-cover'\n                />\n              </motion.div>\n            ))}\n          </div>\n\n          <div className='mt-10 flex flex-col gap-3'>\n            {rightImages.map((image) => (\n              <motion.div\n                key={image.alt}\n                initial={{ opacity: 0, scale: 0.8, y: 20 }}\n                whileInView={{ opacity: 1, scale: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{\n                  duration: 0.6,\n                  delay: image.delay,\n                  ease: [0.22, 1, 0.36, 1],\n                }}\n                className='overflow-hidden rounded-xl shadow-sm ring-1 shadow-black/10 ring-black/5 dark:shadow-white/10 dark:ring-white/5'\n              >\n                <img\n                  src={image.url}\n                  alt={image.alt}\n                  className='h-44 w-full object-cover'\n                />\n              </motion.div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}