{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/facebook-icon","@efferd/instagram-icon","@efferd/x-icon","@efferd/youtube-icon"],"name":"footer-4","description":"Grid-based footer with social cards, link groups, and copyright bar.","categories":["footer"],"files":[{"path":"registry/blocks/footer/4/footer.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { FacebookIcon } from \"@/components/icons/facebook-icon\";\nimport { InstagramIcon } from \"@/components/icons/instagram-icon\";\nimport { XIcon } from \"@/components/icons/x-icon\";\nimport { YoutubeIcon } from \"@/components/icons/youtube-icon\";\n\nexport function Footer() {\n\treturn (\n\t\t<footer\n\t\t\tclassName={cn(\n\t\t\t\t\"border-t\",\n\t\t\t\t\"dark:bg-[radial-gradient(35%_128px_at_50%_0%,--theme(--color-foreground/.08),transparent)]\"\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"relative mx-auto max-w-5xl px-4\">\n\t\t\t\t<div className=\"relative grid grid-cols-1 border-x md:grid-cols-4 md:divide-x\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<SocialCard\n\t\t\t\t\t\t\tclassName=\"border-t-0\"\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\ticon={<FacebookIcon />}\n\t\t\t\t\t\t\ttitle=\"Facebook\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<LinksGroup\n\t\t\t\t\t\t\tlinks={[\n\t\t\t\t\t\t\t\t{ title: \"Pricing\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Testimonials\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"FAQs\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Contact Us\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Blog\", href: \"#\" },\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\ttitle=\"About Us\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<SocialCard href=\"#\" icon={<YoutubeIcon />} title=\"Youtube\" />\n\t\t\t\t\t\t<LinksGroup\n\t\t\t\t\t\t\tlinks={[\n\t\t\t\t\t\t\t\t{ title: \"Help Center\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Terms\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Privacy\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Security\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Cookie Policy\", href: \"#\" },\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\ttitle=\"Support\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<SocialCard href=\"#\" icon={<XIcon />} title=\"Twitter\" />\n\t\t\t\t\t\t<LinksGroup\n\t\t\t\t\t\t\tlinks={[\n\t\t\t\t\t\t\t\t{ title: \"Forum\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Events\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Partners\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Affiliates\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Career\", href: \"#\" },\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\ttitle=\"Community\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<SocialCard href=\"#\" icon={<InstagramIcon />} title=\"Instagram\" />\n\t\t\t\t\t\t<LinksGroup\n\t\t\t\t\t\t\tlinks={[\n\t\t\t\t\t\t\t\t{ title: \"Investors\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Terms of Use\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Privacy Policy\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Cookie Policy\", href: \"#\" },\n\t\t\t\t\t\t\t\t{ title: \"Legal\", href: \"#\" },\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\ttitle=\"Press\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex justify-center border-t p-3\">\n\t\t\t\t<p className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t&copy; {new Date().getFullYear()} efferd, All rights reserved\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</footer>\n\t);\n}\n\ntype LinksGroupProps = {\n\ttitle: string;\n\tlinks: { title: string; href: string }[];\n};\nfunction LinksGroup({ title, links }: LinksGroupProps) {\n\treturn (\n\t\t<div className=\"p-2\">\n\t\t\t<h3 className=\"mt-2 mb-3 font-light text-[10px] text-muted-foreground uppercase tracking-wider\">\n\t\t\t\t{title}\n\t\t\t</h3>\n\t\t\t<ul>\n\t\t\t\t{links.map((link) => (\n\t\t\t\t\t<li key={link.title}>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground text-sm hover:text-foreground\"\n\t\t\t\t\t\t\thref={link.href}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{link.title}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n\nfunction SocialCard({\n\ttitle,\n\thref,\n\tclassName,\n\ticon,\n}: React.ComponentProps<\"a\"> & {\n\ttitle: string;\n\ticon?: React.ReactNode;\n}) {\n\treturn (\n\t\t<a\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-between border-y p-2 text-sm hover:bg-muted md:border-t-0 dark:hover:bg-muted/50\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\thref={href}\n\t\t>\n\t\t\t<span className=\"flex items-center gap-2 font-medium [&>svg]:size-3.5 [&>svg]:shrink-0\">\n\t\t\t\t{icon}\n\t\t\t\t{title}\n\t\t\t</span>\n\t\t\t<IconPlaceholder\n\t\t\t\tclassName=\"size-4\"\n\t\t\t\thugeicons=\"ArrowRight01Icon\"\n\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t/>\n\t\t</a>\n\t);\n}\n"}]}