Footer 4 – Brand-led sitemap footer

1import { FiLinkedin } from "react-icons/fi";
2import { RiTwitterXLine } from "react-icons/ri";
3 
4import { PlaceholderLogo } from "@/components/shadcncraft/pro-marketing/placeholder-logo";
5import { Separator } from "@/components/ui/separator";
6 
7export function Footer4() {
8  return (
9    <footer className="w-full bg-background py-6 lg:py-20" role="contentinfo">
10      <div className="mx-auto flex w-full max-w-7xl flex-col gap-16 px-5 lg:gap-9 lg:px-8">
11        <Separator role="presentation" aria-hidden="true" />
12 
13        <div className="grid grid-cols-4 gap-6 lg:flex-row lg:items-start lg:justify-between lg:gap-9">
14          {/* Logo and Description */}
15          <div className="col-span-full flex flex-col justify-between gap-9 lg:col-span-1">
16            <a href="/" aria-label="Go to home page">
17              {/* Replace with your real logo  */}
18              <PlaceholderLogo />
19            </a>
20 
21            <div className="flex flex-col gap-4">
22              <p className="text-sm text-pretty text-muted-foreground">
23                Building tools that help teams work smarter and faster.
24              </p>
25              <div className="flex items-center gap-2">
26                <FiLinkedin className="size-4" />
27                <RiTwitterXLine className="size-4" />
28              </div>
29            </div>
30          </div>
31 
32          {/* Navigation Links */}
33          <nav
34            className="col-span-full grid gap-6 md:grid-cols-2 lg:col-span-3 lg:grid-cols-3 lg:gap-9"
35            aria-label="Footer navigation"
36          >
37            {navigationData.map((section) => (
38              <div key={section.title} className="flex flex-col gap-2.5">
39                <h3 className="text-sm font-medium text-muted-foreground">
40                  {section.title}
41                </h3>
42                <ul className="flex flex-col gap-3">
43                  {section.links.map((link) => (
44                    <li key={link.label} className="text-base">
45                      <a href={link.href}>{link.label}</a>
46                    </li>
47                  ))}
48                </ul>
49              </div>
50            ))}
51          </nav>
52        </div>
53 
54        <Separator role="presentation" aria-hidden="true" />
55 
56        {/* Social Links and Copyright */}
57        <div className="w-full">
58          <p className="text-sm text-muted-foreground">
59            &copy; Copyright Acme Inc. 2025. All right reserved.
60          </p>
61        </div>
62      </div>
63    </footer>
64  );
65}
66 
67// … truncated