{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-with-cards",
  "type": "registry:block",
  "title": "Hero Section with Cards",
  "description": "A hero section with a fan of photo cards and animated entrance.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/card", "@scrollxui/orb-button"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/hero-sections/hero-with-cards.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\nimport {\n  Card,\n  CardContent,\n} from '@/components/ui/card';\nimport { OrbButton } from '@/components/ui/orb-button';\n\nconst CARDS = [\n  {\n    src: 'https://images.unsplash.com/photo-1621268119110-2736e7f2618e?w=400&q=80',\n    alt: 'Friends',\n    rotate: -22,\n    delay: 0.9,\n    z: 10,\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1672908158815-89073b2efef8?w=400&q=80',\n    alt: 'Woman portrait',\n    rotate: -11,\n    delay: 0.75,\n    z: 20,\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1498746607408-1e56960e3bdd',\n    alt: 'Man portrait',\n    rotate: 0,\n    delay: 0.6,\n    z: 30,\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1595152772835-219674b2a8a6?w=400&q=80',\n    alt: 'Portrait',\n    rotate: 11,\n    delay: 0.75,\n    z: 20,\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1724414913941-18e868c16af3?w=400&q=80',\n    alt: 'Street style',\n    rotate: 22,\n    delay: 0.9,\n    z: 10,\n  },\n];\n\nconst Navbar: React.FC = () => (\n  <nav className='flex w-full items-center justify-between border-t border-b border-zinc-200 px-4 py-4 dark:border-zinc-800'>\n    <div className='flex items-center gap-2'>\n      <div className='size-7 rounded-lg bg-zinc-950 dark:bg-zinc-50' />\n      <h1 className='text-base font-bold md:text-2xl text-zinc-900 dark:text-white'>\n        Scrapee\n      </h1>\n    </div>\n    <OrbButton size='sm'>Get Started</OrbButton>\n  </nav>\n);\n\nconst HeroSectionwithCards: React.FC = () => {\n  return (\n    <div className='min-h-screen w-full bg-zinc-50 dark:bg-zinc-950 flex flex-col overflow-hidden transition-colors duration-500'>\n      <Navbar />\n\n      <div className='flex-1 flex flex-col items-center pt-10 pb-0 text-center px-4'>\n        <motion.h1\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}\n          className='text-4xl md:text-6xl font-bold text-zinc-900 dark:text-white max-w-2xl leading-tight tracking-tight'\n        >\n          Create{' '}\n          <em className='font-bold italic text-zinc-700 dark:text-zinc-300'>Social Content</em>\n          <br />\n          that&apos;s ready to perform\n        </motion.h1>\n\n        <motion.p\n          initial={{ opacity: 0, y: 16 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.38, ease: 'easeOut' }}\n          className='mt-5 text-base text-zinc-500 dark:text-zinc-400 max-w-sm leading-relaxed'\n        >\n          Create, schedule, and optimize your entire social strategy in minutes, not hours.\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.4, delay: 0.52 }}\n          className='mt-8'\n        >\n          <OrbButton>Try it Free</OrbButton>\n        </motion.div>\n\n        <div className='relative mt-10 flex items-end justify-center' style={{ height: 380, width: '100%' }}>\n          {CARDS.map((card, i) => (\n            <motion.div\n              key={i}\n              initial={{ opacity: 0, y: 60 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.65, delay: card.delay, ease: [0.22, 1, 0.36, 1] }}\n              className='absolute bottom-0 origin-bottom'\n              style={{\n                rotate: card.rotate,\n                zIndex: card.z,\n                translateX: `${(i - 2) * 120}px`,\n              }}\n            >\n              <Card className='w-48 h-72 md:w-56 md:h-80 p-0 overflow-hidden shadow-xl ring-2 ring-white/60 dark:ring-zinc-700/60 border-0 rounded-2xl'>\n                <CardContent className='p-0 w-full h-full'>\n                  <img\n                    src={card.src}\n                    alt={card.alt}\n                    className='w-full h-full object-cover'\n                  />\n                </CardContent>\n              </Card>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default HeroSectionwithCards;"
    }
  ]
}