{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footer-3", "title": "Footer Exemple 3", "description": "", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "registry/default/blocks/Footer/footer3.tsx", "content": "\"use client\";\r\n\r\n/**\r\n * Footer3\r\n * ────────────────────────────────────────────────────────────────────────\r\n * A CTA banner + footer section, reproduced from the provided screenshot,\r\n * restyled with BagUI's design tokens (bagui.vercel.app):\r\n * - Font: Geist (next/font/google) — falls back to Inter/system-ui if\r\n * the project hasn't wired up the --font-geist-sans CSS variable yet.\r\n * - Colors: BagUI's monochrome shadcn \"neutral\" system — near-black\r\n * (#09090b / zinc-950) surfaces, white, and the zinc gray scale.\r\n * No blue — the original hero gradient is reinterpreted as a\r\n * monochrome ambient light on a zinc-950 panel.\r\n *\r\n * Dependencies (already present in a standard BagUI/shadcn setup):\r\n * npm install framer-motion lucide-react\r\n *\r\n * Font setup (in app/layout.tsx), same as BagUI:\r\n * import { Geist } from \"next/font/google\";\r\n * const geistSans = Geist({ subsets: [\"latin\"], variable: \"--font-geist-sans\" });\r\n * ...\r\n */\r\n\r\nimport { useState } from \"react\";\r\nimport Image from \"next/image\";\r\nimport { motion, useReducedMotion, type Variants } from \"framer-motion\";\r\nimport { ChevronRight } from \"lucide-react\";\r\nimport {\r\n FaXTwitter, // X\r\n FaInstagram, // Instagram\r\n FaLinkedin, // LinkedIn\r\n FaFacebook,\r\n} from \"react-icons/fa6\";\r\n\r\n// ─── Font stack (Geist first, graceful fallback) ──────────────────────────\r\nconst font = {\r\n fontFamily: \"var(--font-geist-sans), Geist, Inter, system-ui, sans-serif\",\r\n} as const;\r\n\r\n// ─── Motion variants ───────────────────────────────────────────────────────\r\nconst stagger: Variants = {\r\n hidden: {},\r\n visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },\r\n};\r\n\r\nconst fadeUp: Variants = {\r\n hidden: { opacity: 0, y: 16 },\r\n visible: {\r\n opacity: 1,\r\n y: 0,\r\n transition: { duration: 0.5, ease: \"easeOut\" },\r\n },\r\n};\r\n\r\nconst heroVariant: Variants = {\r\n hidden: { opacity: 0, scale: 0.97 },\r\n visible: {\r\n opacity: 1,\r\n scale: 1,\r\n transition: { duration: 0.6, ease: \"easeOut\" },\r\n },\r\n};\r\n\r\n// ─── Content ────────────────────────────────────────────────────────────────\r\nconst PRODUCT_LINKS = [\"Features\", \"Pricing\", \"Integrations\", \"AI Agents\"];\r\nconst RESOURCE_LINKS = [\r\n \"Documentation\",\r\n \"Case Studies\",\r\n \"Blog\",\r\n \"Support Center\",\r\n];\r\n\r\nfunction XIcon({ className }: { className?: string }) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nconst SOCIALS: {\r\n id: string;\r\n label: string;\r\n icon: React.ComponentType<{ className?: string }>;\r\n href: string;\r\n}[] = [\r\n { id: \"linkedin\", label: \"LinkedIn\", icon: FaLinkedin, href: \"#\" },\r\n { id: \"x\", label: \"X\", icon: XIcon, href: \"#\" },\r\n { id: \"instagram\", label: \"Instagram\", icon: FaFacebook, href: \"#\" },\r\n];\r\n\r\n// ─── Hero / CTA banner ──────────────────────────────────────────────────────\r\nfunction HeroBanner() {\r\n const reduceMotion = useReducedMotion();\r\n\r\n return (\r\n \r\n {/* ambient glow rising from the bottom, monochrome instead of blue */}\r\n \r\n {/* faint converging light beams */}\r\n \r\n \r\n\r\n

\r\n \r\n Transform customer support\r\n
with intelligent AI agents\r\n \r\n\r\n \r\n Start Free Trial\r\n \r\n \r\n

\r\n \r\n );\r\n}\r\n\r\nfunction SocialLink({\r\n icon: Icon,\r\n href,\r\n label,\r\n}: {\r\n icon: React.ComponentType<{ className?: string }>;\r\n href: string;\r\n label: string;\r\n}) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction BrandColumn() {\r\n return (\r\n \r\n

\r\n \r\n\r\n \r\n Bag\\Ui\r\n \r\n

\r\n

\r\n Modern AI support platform designed to automate conversations and\r\n deliver faster customer responses.\r\n

\r\n

\r\n {SOCIALS.map((s) => (\r\n \r\n ))}\r\n

\r\n \r\n );\r\n}\r\n\r\nfunction LinkColumn({ title, links }: { title: string; links: string[] }) {\r\n return (\r\n \r\n

\r\n {title}\r\n

\r\n

\r\n \r\n {l}\r\n \r\n

\r\n \r\n );\r\n}\r\n\r\nfunction CompanyColumn() {\r\n const [email, setEmail] = useState(\"\");\r\n\r\n return (\r\n \r\n

\r\n Company\r\n

\r\n

\r\n Helping teams create faster, smarter, and more reliable customer support\r\n experiences with AI\r\n

\r\n e.preventDefault()}\r\n className=\"flex items-center justify-between gap-1 rounded-full border border-zinc-200 py-1 pl-4 pr-1 transition-colors duration-200 focus-within:border-zinc-400\"\r\n >\r\n setEmail(e.target.value)}\r\n placeholder=\"Email address\"\r\n style={font}\r\n className=\"w-full bg-transparent text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none\"\r\n />\r\n \r\n Subscribe\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\n// ─── Bottom bar ─────────────────────────────────────────────────────────────\r\nfunction BottomBar() {\r\n const year = new Date().getFullYear();\r\n\r\n return (\r\n \r\n

\r\n \r\n \r\n Privacy Policy\r\n \r\n \r\n \r\n Terms & Conditions\r\n \r\n \r\n \r\n );\r\n}\r\n\r\n// ─── Main export ────────────────────────────────────────────────────────────\r\nexport default function Footer3() {\r\n return (\r\n \r\n );\r\n}\r\n", "type": "registry:block", "target": "components/Footer-ex-3.tsx" } ], "type": "registry:block" }