{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer2",
  "title": "Footer Exemple 2",
  "description": "",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Footer/footer2.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, Variants } from \"framer-motion\";\r\nimport Image from \"next/image\";\r\n\r\n// ─── Avatar data — real photos via DiceBear (open-source, no key needed) ──────\r\nconst AVATARS = [\r\n  {\r\n    id: 1,\r\n    src: \"https://api.dicebear.com/9.x/notionists/svg?seed=JK&backgroundColor=b6e3f4\",\r\n  },\r\n  {\r\n    id: 2,\r\n    src: \"https://api.dicebear.com/9.x/notionists/svg?seed=AM&backgroundColor=c0aede\",\r\n  },\r\n  {\r\n    id: 3,\r\n    src: \"https://api.dicebear.com/9.x/notionists/svg?seed=SL&backgroundColor=ffdfbf\",\r\n  },\r\n  {\r\n    id: 4,\r\n    src: \"https://api.dicebear.com/9.x/notionists/svg?seed=TR&backgroundColor=d1d4f9\",\r\n  },\r\n  {\r\n    id: 5,\r\n    src: \"https://api.dicebear.com/9.x/notionists/svg?seed=PW&backgroundColor=ffd5dc\",\r\n  },\r\n];\r\n\r\n// ─── Motion variants ──────────────────────────────────────────────────────────\r\nconst stagger: Variants = {\r\n  hidden: { opacity: 0 },\r\n  visible: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.1, delayChildren: 0.05 },\r\n  },\r\n};\r\n\r\nconst slide: Variants = {\r\n  hidden: { opacity: 0, y: 16 },\r\n  visible: {\r\n    opacity: 1,\r\n    y: 0,\r\n    transition: { duration: 0.45, ease: \"easeOut\" },\r\n  },\r\n};\r\n\r\nconst panelVariant: Variants = {\r\n  hidden: { opacity: 0, scale: 0.975 },\r\n  visible: {\r\n    opacity: 1,\r\n    scale: 1,\r\n    transition: { duration: 0.55, ease: \"easeOut\", delay: 0.1 },\r\n  },\r\n};\r\n\r\nconst currentYear = new Date().getFullYear();\r\n\r\nfunction AvatarStack() {\r\n  return (\r\n    <motion.div variants={slide} className=\"flex items-center\">\r\n      <div className=\"flex -space-x-2.5\">\r\n        {AVATARS.map((a) => (\r\n          <div\r\n            key={a.id}\r\n            className=\"w-10 h-10 rounded-sm border-2 border-white overflow-hidden bg-zinc-100 select-none flex-shrink-0\"\r\n          >\r\n            <Image\r\n              src={a.src}\r\n              alt=\"team member\"\r\n              width={40}\r\n              height={40}\r\n              className=\"w-full h-full object-cover\"\r\n              unoptimized\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nfunction LeftHeading() {\r\n  return (\r\n    <motion.h2\r\n      variants={slide}\r\n      className=\"text-[1.85rem] sm:text-[2.1rem] leading-[1.18] tracking-[-0.025em] text-zinc-900\"\r\n      style={{ fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\" }}\r\n    >\r\n      We build digital products\r\n      <br />\r\n      that help ambitious\r\n      <br />\r\n      businesses grow faster.{\" \"}\r\n      <span role=\"img\" aria-label=\"heart\">\r\n        👨🏾‍💻\r\n      </span>\r\n    </motion.h2>\r\n  );\r\n}\r\n\r\nfunction CTACard() {\r\n  return (\r\n    <motion.div\r\n      variants={slide}\r\n      className=\"flex items-center gap-4 rounded-2xl px-5 py-4 w-fit bg-gray-100\"\r\n    >\r\n      <motion.button\r\n        whileHover={{ scale: 1.03 }}\r\n        whileTap={{ scale: 0.97 }}\r\n        className=\"text-sm font-semibold px-5 py-2.5 rounded-xl whitespace-nowrap transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 bg-black text-white cursor-pointer\"\r\n      >\r\n        Let&apos;s talk\r\n      </motion.button>\r\n      <div\r\n        className=\"text-[12px] leading-[1.6]\"\r\n        style={{\r\n          color: \"#71717a\",\r\n          fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\",\r\n        }}\r\n      >\r\n        <p>Book a free strategy call.</p>\r\n        <p>Tell us about your project.</p>\r\n      </div>\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nfunction TrustBadges() {\r\n  return (\r\n    <motion.div variants={slide} className=\"flex items-center gap-6 flex-wrap\">\r\n      {/* Clutch */}\r\n      <div className=\"flex flex-col gap-0.5\">\r\n        <p\r\n          className=\"text-[9px] font-semibold uppercase tracking-widest\"\r\n          style={{\r\n            color: \"#71717a\",\r\n            fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\",\r\n          }}\r\n        >\r\n          Reviewed on\r\n        </p>\r\n        <div className=\"flex items-center gap-1.5\">\r\n          <span\r\n            className=\"text-[1.25rem] font-bold tracking-tight leading-none text-zinc-900\"\r\n            style={{ fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\" }}\r\n          >\r\n            Clutch\r\n          </span>\r\n          <span className=\"text-red-500 text-sm leading-none\">★★★★★</span>\r\n        </div>\r\n        <p\r\n          className=\"text-[9px] -mt-0.5\"\r\n          style={{\r\n            color: \"#71717a\",\r\n            fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\",\r\n          }}\r\n        >\r\n          10 reviews\r\n        </p>\r\n      </div>\r\n\r\n      <div className=\"w-px h-10 bg-zinc-200\" />\r\n\r\n      {/* Webflow */}\r\n      <div className=\"flex flex-col gap-0.5\">\r\n        <p\r\n          className=\"text-[9px] font-semibold uppercase tracking-widest\"\r\n          style={{\r\n            color: \"#71717a\",\r\n            fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\",\r\n          }}\r\n        >\r\n          Professional Partner\r\n        </p>\r\n        <div className=\"flex items-center gap-1.5\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n            <path\r\n              d=\"M17.6 3.6H6.4C4.9 3.6 3.6 4.9 3.6 6.4v11.2c0 1.5 1.3 2.8 2.8 2.8h11.2c1.5 0 2.8-1.3 2.8-2.8V6.4c0-1.5-1.3-2.8-2.8-2.8z\"\r\n              fill=\"#4353FF\"\r\n            />\r\n            <path\r\n              d=\"M15.5 8.5l-2.3 4.6-1.1-2.8L10.5 14 9 8.5H7l2.5 7h2l1.2-3.5 1.1 3.5h2L18 8.5h-2.5z\"\r\n              fill=\"white\"\r\n            />\r\n          </svg>\r\n          <span\r\n            className=\"text-[1.25rem] font-bold tracking-tight leading-none text-zinc-900\"\r\n            style={{ fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\" }}\r\n          >\r\n            Webflow\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nfunction RightPanel() {\r\n  const socialLinks = [\"x\", \"behance\", \"linkedin\", \"dribbble\"];\r\n  const font = { fontFamily: \"'Geist', 'Inter', system-ui, sans-serif\" };\r\n\r\n  return (\r\n    <motion.div\r\n      variants={panelVariant}\r\n      initial=\"hidden\"\r\n      whileInView=\"visible\"\r\n      viewport={{ once: true, amount: 0.3 }}\r\n      className=\"h-full rounded-[2rem] flex flex-col justify-between p-10 sm:p-12\"\r\n      style={{ backgroundColor: \"#09090b\" }}\r\n    >\r\n      <div className=\"space-y-7\">\r\n        <div className=\"space-y-2\">\r\n          <h3\r\n            className=\"text-[#fafafa] text-2xl sm:text-[1.75rem] font-semibold leading-[1.25] tracking-[-0.02em]\"\r\n            style={font}\r\n          >\r\n            Let&apos;s build something your\r\n            <br />\r\n            customers will remember.\r\n          </h3>\r\n          <p\r\n            className=\"text-base font-normal\"\r\n            style={{ color: \"#52525b\", ...font }}\r\n          >\r\n            Ready to get started?\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"flex items-center gap-3 flex-wrap\">\r\n          <motion.button\r\n            whileHover={{ scale: 1.03 }}\r\n            whileTap={{ scale: 0.97 }}\r\n            className=\"text-sm font-semibold px-6 py-3 rounded-xl transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 cursor-pointer\"\r\n            style={{ backgroundColor: \"#fafafa\", color: \"#09090b\", ...font }}\r\n          >\r\n            Start a Project\r\n          </motion.button>\r\n          <motion.button\r\n            whileHover={{ scale: 1.03 }}\r\n            whileTap={{ scale: 0.97 }}\r\n            className=\"text-sm font-semibold px-6 py-3 rounded-xl transition-colors duration-200 focus:outline-none focus-visible:ring-2 cursor-pointer\"\r\n            style={{ backgroundColor: \"#27272a\", color: \"#fafafa\", ...font }}\r\n            onMouseEnter={(e) =>\r\n              (e.currentTarget.style.backgroundColor = \"#3f3f46\")\r\n            }\r\n            onMouseLeave={(e) =>\r\n              (e.currentTarget.style.backgroundColor = \"#27272a\")\r\n            }\r\n          >\r\n            Book a Call\r\n          </motion.button>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        className=\"flex flex-col sm:flex-row sm:items-end justify-between gap-5 mt-10 pt-8\"\r\n        style={{ borderTop: \"1px solid #27272a\" }}\r\n      >\r\n        <div className=\"space-y-1 \">\r\n          <p className=\"text-sm text-gray-300\">\r\n            support@bagui.dev\r\n          </p>\r\n          <p className=\"text-xs text-[#3f3f46]\" >\r\n            © {currentYear} BagUI. All rights reserved.\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"flex items-center gap-5 flex-wrap\">\r\n          {socialLinks.map((link) => (\r\n            <a\r\n              key={link}\r\n              href=\"#\"\r\n              className=\"text-xs capitalize transition-colors duration-200\"\r\n              style={{ color: \"#52525b\", ...font }}\r\n              onMouseEnter={(e) => (e.currentTarget.style.color = \"#fafafa\")}\r\n              onMouseLeave={(e) => (e.currentTarget.style.color = \"#52525b\")}\r\n            >\r\n              {link}\r\n            </a>\r\n          ))}\r\n          <span\r\n            className=\"w-px h-3 hidden sm:block\"\r\n            style={{ backgroundColor: \"#27272a\" }}\r\n          />\r\n          <a\r\n            href=\"#\"\r\n            className=\"text-xs transition-colors duration-200\"\r\n            style={{ color: \"#52525b\", ...font }}\r\n            onMouseEnter={(e) => (e.currentTarget.style.color = \"#fafafa\")}\r\n            onMouseLeave={(e) => (e.currentTarget.style.color = \"#52525b\")}\r\n          >\r\n            Privacy Policy\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nexport default function DivBlockFooter() {\r\n  return (\r\n    <footer\r\n      className=\"w-full px-6 sm:px-10 lg:px-16 py-10 sm:py-14\"\r\n    >\r\n      <div className=\"flex flex-col lg:flex-row gap-6 lg:gap-8 items-stretch\">\r\n        <motion.div\r\n          className=\"w-full lg:w-[30%] flex flex-col justify-between gap-6\"\r\n          variants={stagger}\r\n          initial=\"hidden\"\r\n          whileInView=\"visible\"\r\n          viewport={{ once: true, amount: 0.3 }}\r\n        >\r\n          <AvatarStack />\r\n          <LeftHeading />\r\n          <CTACard />\r\n          <TrustBadges />\r\n        </motion.div>\r\n\r\n        <div className=\"w-full lg:w-[70%] flex flex-col\">\r\n          <RightPanel />\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/Footer-ex-2.tsx"
    }
  ],
  "type": "registry:block"
}