{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-section-with-avatars",
  "type": "registry:block",
  "title": "CTA Section with Avatars",
  "description": "Modern CTA with avatars and smooth reveal animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/avatar-group",
    "@scrollxui/stripe-button"
  ],
  "dependencies": ["lucide-react"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/cta-sections/cta-section-with-avatars.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Phone, Star } from 'lucide-react';\nimport { AvatarGroup } from '@/components/ui/avatar-group';\nimport { StripeButton } from '@/components/ui/stripe-button';\n\ninterface Avatar {\n  imageUrl: string;\n  name: string;\n}\n\ninterface CTASectionwithAvatarsProps {\n  title?: string;\n  description?: string;\n  avatars?: Avatar[];\n  className?: string;\n  buttonLabel?: string;\n  trustLabel?: string;\n}\n\nconst defaultAvatars: Avatar[] = [\n  { imageUrl: 'https://i.pravatar.cc/80?img=11', name: 'Mia Chen' },\n  { imageUrl: 'https://i.pravatar.cc/80?img=15', name: 'Jake Ellis' },\n  { imageUrl: 'https://i.pravatar.cc/80?img=23', name: 'Sara Osei' },\n  { imageUrl: 'https://i.pravatar.cc/80?img=32', name: 'Tom Wade' },\n  { imageUrl: 'https://i.pravatar.cc/80?img=47', name: 'Priya Nair' },\n  { imageUrl: 'https://i.pravatar.cc/80?img=54', name: 'Lena Brandt' },\n];\n\nconst StarRating = ({ count = 5 }: { count?: number }) => (\n  <div className=\"flex items-center justify-center gap-1\">\n    {Array.from({ length: count }).map((_, i) => (\n      <motion.div\n        key={i}\n        initial={{ opacity: 0, scale: 0 }}\n        whileInView={{ opacity: 1, scale: 1 }}\n        viewport={{ once: true }}\n        transition={{ delay: 0.6 + i * 0.08, duration: 0.3, type: 'spring' }}\n      >\n        <Star className=\"w-6 h-6 text-amber-400 fill-amber-400\" />\n      </motion.div>\n    ))}\n  </div>\n);\n\nexport default function CTASectionwithAvatars({\n  title = 'Hyper-Real AI. Crafted to Perfection.',\n  description = 'Reserve your spot before the doors close. The first 100 members unlock 50% off — photorealism at scale, no waiting, no compromise.',\n  avatars = defaultAvatars,\n  className,\n  buttonLabel = 'Book a call',\n  trustLabel = 'Trusted by 27,000+ creators',\n}: CTASectionwithAvatarsProps) {\n  const words = title.split(' ');\n\n  return (\n    <section className={cn('relative w-full overflow-hidden py-24', className)}>\n      <div className=\"mx-auto max-w-lg px-6 flex flex-col items-center text-center gap-8\">\n        <h1 className=\"relative z-10 text-3xl font-bold tracking-tight text-zinc-800 md:text-4xl lg:text-5xl dark:text-zinc-100\">\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        </h1>\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=\"relative z-10 text-base text-zinc-500 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.5, delay: 0.55 }}\n          className=\"flex flex-col items-center gap-3\"\n        >\n          <AvatarGroup avatarUrls={avatars} />\n          <StarRating count={5} />\n          <p className=\"text-sm text-zinc-400 dark:text-zinc-500\">{trustLabel}</p>\n        </motion.div>\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.65 }}\n        >\n          <StripeButton size=\"lg\">\n            <span className=\"flex items-center gap-2\">\n              {buttonLabel}\n              <Phone className=\"w-4 h-4\" />\n            </span>\n          </StripeButton>\n        </motion.div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}