{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-1",
  "title": "CTA Exemple 1",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Cta/cta1.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\";\r\nimport { useState, useRef } from \"react\";\r\n\r\n// ─── Avatars ──────────────────────────────────────────────────────────────────\r\n\r\nconst avatars = [\r\n  \"https://i.pravatar.cc/40?img=11\",\r\n  \"https://i.pravatar.cc/40?img=22\",\r\n  \"https://i.pravatar.cc/40?img=33\",\r\n];\r\n\r\n// ─── Hover image with 3D tilt + glow ─────────────────────────────────────────\r\n\r\nfunction HoverImage() {\r\n  const ref = useRef<HTMLSpanElement>(null);\r\n\r\n  const rawX = useMotionValue(0);\r\n  const rawY = useMotionValue(0);\r\n  const rotateX = useSpring(useTransform(rawY, [-1, 1], [18, -18]), {\r\n    stiffness: 300,\r\n    damping: 25,\r\n  });\r\n  const rotateY = useSpring(useTransform(rawX, [-1, 1], [-18, 18]), {\r\n    stiffness: 300,\r\n    damping: 25,\r\n  });\r\n  const scale = useSpring(1, { stiffness: 300, damping: 22 });\r\n\r\n  function handleMouseMove(e: React.MouseEvent<HTMLSpanElement>) {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    const rect = el.getBoundingClientRect();\r\n    const cx = rect.left + rect.width / 2;\r\n    const cy = rect.top + rect.height / 2;\r\n    rawX.set((e.clientX - cx) / (rect.width / 2));\r\n    rawY.set((e.clientY - cy) / (rect.height / 2));\r\n    scale.set(1.18);\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    rawX.set(0);\r\n    rawY.set(0);\r\n    scale.set(1);\r\n  }\r\n\r\n  return (\r\n    <motion.span\r\n      ref={ref}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseLeave={handleMouseLeave}\r\n      style={{\r\n        rotateX,\r\n        rotateY,\r\n        scale,\r\n        transformStyle: \"preserve-3d\",\r\n        perspective: 600,\r\n      }}\r\n      className=\"inline-block w-11 h-11 md:w-13 md:h-13 rounded-xl overflow-hidden align-middle relative -top-1 cursor-pointer shadow-lg\"\r\n      whileHover={{ boxShadow: \"0 0 24px 6px rgba(255,255,255,0.15)\" }}\r\n    >\r\n      <img\r\n        src=\"https://bagui.vercel.app/faviconblack.png\"\r\n        alt=\"\"\r\n        className=\"w-full h-full object-cover pointer-events-none\"\r\n      />\r\n    </motion.span>\r\n  );\r\n}\r\n\r\n// ─── FadeUp word ──────────────────────────────────────────────────────────────\r\n\r\nfunction FadeUp({\r\n  children,\r\n  delay = 0,\r\n  className = \"\",\r\n}: {\r\n  children: React.ReactNode;\r\n  delay?: number;\r\n  className?: string;\r\n}) {\r\n  return (\r\n    <motion.span\r\n      initial={{ opacity: 0, y: 20 }}\r\n      whileInView={{ opacity: 1, y: 0 }}\r\n      viewport={{ once: true }}\r\n      transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}\r\n      className={`inline-block ${className}`}\r\n    >\r\n      {children}\r\n    </motion.span>\r\n  );\r\n}\r\n\r\n// ─── Main ────────────────────────────────────────────────────────────────────\r\n\r\nexport default function CTASection1() {\r\n  const [email, setEmail] = useState(\"\");\r\n\r\n  return (\r\n    <section className=\"w-full py-28 px-4 overflow-hidden\">\r\n      <div className=\"max-w-3xl mx-auto flex flex-col items-center text-center\">\r\n        {/* ── Headline ── */}\r\n        <h2\r\n          className=\"text-4xl md:text-5xl lg:text-[3.5rem] font-bold text-black leading-[1.15] tracking-tight mb-10\"\r\n          style={{ perspective: 800 }}\r\n        >\r\n          {/* Line 1 */}\r\n          <span className=\"flex flex-wrap items-center justify-center gap-x-3 gap-y-2 mb-2\">\r\n            <FadeUp delay={0}>Ship</FadeUp>\r\n            <FadeUp delay={0.06}>beautiful</FadeUp>\r\n\r\n            <FadeUp delay={0.11}>\r\n              <HoverImage />\r\n            </FadeUp>\r\n\r\n            <FadeUp delay={0.15}>\r\n              <em className=\"italic font-bold text-black\">blocks</em>\r\n            </FadeUp>\r\n\r\n            <FadeUp delay={0.19}>\r\n              <span className=\"text-black font-light\">←</span>\r\n            </FadeUp>\r\n          </span>\r\n\r\n          {/* Line 2 */}\r\n          <span className=\"flex flex-wrap items-center justify-center gap-x-3 gap-y-2\">\r\n            <FadeUp delay={0.23}>faster with</FadeUp>\r\n\r\n            <FadeUp delay={0.27}>\r\n              <span className=\"text-red-500 font-black text-5xl leading-none\">\r\n                ✱\r\n              </span>\r\n            </FadeUp>\r\n\r\n            <FadeUp delay={0.31}>zero</FadeUp>\r\n\r\n            <FadeUp delay={0.35}>\r\n              <span className=\"inline-flex items-center border-2 border-black rounded-full px-5 py-1 leading-none text-black\">\r\n                Bag/UI\r\n              </span>\r\n            </FadeUp>\r\n\r\n            <FadeUp delay={0.39}>.</FadeUp>\r\n          </span>\r\n        </h2>\r\n\r\n        {/* ── Subline ── */}\r\n        <motion.p\r\n          initial={{ opacity: 0, y: 10 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{\r\n            duration: 0.45,\r\n            delay: 0.44,\r\n            ease: \"easeOut\",\r\n          }}\r\n          className=\"text-sm text-zinc-500 mb-8 max-w-sm\"\r\n        >\r\n          Premium shadcn/ui blocks — plug in, customize, ship.\r\n        </motion.p>\r\n\r\n        {/* ── Email form ── */}\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 16 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{\r\n            duration: 0.5,\r\n            delay: 0.48,\r\n            ease: [0.22, 1, 0.36, 1],\r\n          }}\r\n          className=\"flex items-center gap-3 w-full max-w-lg mb-5\"\r\n        >\r\n          <input\r\n            type=\"email\"\r\n            value={email}\r\n            onChange={(e) => setEmail(e.target.value)}\r\n            placeholder=\"Enter your e-mail\"\r\n            className=\"flex-1 bg-white text-zinc-950 placeholder-zinc-400 text-sm rounded-full px-5 py-3.5 outline-none border border-zinc-200 focus:border-zinc-400 transition-colors\"\r\n          />\r\n\r\n          <motion.button\r\n            whileHover={{ scale: 1.04 }}\r\n            whileTap={{ scale: 0.96 }}\r\n            className=\"bg-black text-white text-sm font-semibold rounded-full px-6 py-3.5 whitespace-nowrap hover:bg-zinc-800 transition-colors cursor-pointer\"\r\n          >\r\n            Subscribe →\r\n          </motion.button>\r\n        </motion.div>\r\n\r\n        {/* ── Social proof ── */}\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 10 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{\r\n            duration: 0.4,\r\n            delay: 0.56,\r\n            ease: \"easeOut\",\r\n          }}\r\n          className=\"flex items-center gap-2.5\"\r\n        >\r\n          <div className=\"flex -space-x-2.5\">\r\n            {avatars.map((src, i) => (\r\n              <img\r\n                key={i}\r\n                src={src}\r\n                alt=\"\"\r\n                className=\"w-7 h-7 rounded-full border-2 border-white object-cover shadow-sm\"\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          <span className=\"text-[13px] text-zinc-600\">\r\n            11.5k+ devs already subscribed\r\n          </span>\r\n        </motion.div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/cta-ex-1.tsx"
    }
  ],
  "type": "registry:block"
}