Site Footer

1import Link from "next/link"
2 
3import { getBrand } from "@/lib/brand"
4 
5/**
6 * Lighter site footer. Edit CONTENT / LINKS after install.
7 * For a louder CTA footer, use @atroui/footer-bold instead.
8 */
9const CONTENT = {
10  blurb: "Dark-first UI you own in your repo.",
11  copyrightSuffix: "All rights reserved.",
12}
13 
14const LINKS = [
15  { label: "Work", href: "/work" },
16  { label: "Services", href: "/services" },
17  { label: "Journal", href: "/journal" },
18  { label: "Contact", href: "/contact" },
19]
20 
21const LEGAL = [
22  { label: "Privacy", href: "/privacy" },
23  { label: "Terms", href: "/terms" },
24]
25 
26export function SiteFooter() {
27  const year = new Date().getFullYear()
28  const { name, email } = getBrand()
29 
30  return (
31    <footer className="border-t border-border-subtle pb-[env(safe-area-inset-bottom)]">
32      <div className="mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 sm:px-10 sm:py-14">
33        <div className="flex flex-col gap-10 md:flex-row md:items-start md:justify-between">
34          <div className="max-w-sm">
35            <p className="text-lg font-medium tracking-tight text-foreground">
36              {name}
37            </p>
38            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
39              {CONTENT.blurb}
40            </p>
41            <a
42              href={`mailto:${email}`}
43              className="mt-4 inline-flex text-sm font-medium text-foreground underline-offset-4 hover:underline"
44            >
45              {email}
46            </a>
47          </div>
48 
49          <div className="flex flex-wrap gap-12 sm:gap-16">
50            <nav aria-label="Site" className="flex flex-col gap-2">
51              <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
52                Site
53              </p>
54              {LINKS.map((item) => (
55                <Link
56                  key={item.href}
57                  href={item.href}
58                  className="text-sm text-muted-foreground hover:text-foreground"
59                >
60                  {item.label}
61                </Link>
62              ))}
63            </nav>
64            <nav aria-label="Legal" className="flex flex-col gap-2">
65              <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
66                Legal
67              </p>
68              {LEGAL.map((item) => (
69                <Link
70                  key={item.href}
71                  href={item.href}
72// … truncated