Footer

Dark-themed footer with brand info, navigation, social links, and contact details. Pulls from site constants.

Preview

Usage

import { Footer } from "@/extensions/layout";

// Render at the bottom of your page or layout
<main className="flex flex-1 flex-col">
  <div className="flex-1">{/* page content */}</div>
  <Footer />
</main>

Usage Notes

Footer has no props — it reads from @/constants (BRAND, NAV_LINKS, SOCIAL_LINKS, CONTACT).
Footer includes its own Container — no need to wrap it in one.
To keep the footer pinned to the bottom of the viewport, use flex flex-1 flex-col on the parent and flex-1 on the content area above it.
Inherits the current theme — wrap in a dark class if you want the footer to always render dark.
Edit the component directly to customize layout, columns, or styling.

Basic Usage

import { Footer } from "@/extensions/layout";

<Footer />

Source

src/extensions/layout/Footer.tsx

import { Badge, Link, Container } from "@/ui";
import { BRAND, CONTACT, NAV_LINKS, SOCIAL_LINKS } from "@/constants";

export function Footer() {
  return (
    <footer className="bg-root text-root-contrast" aria-label="Site footer">
      <Container className="pb-6 pt-16">
        <div className="mb-12 grid grid-cols-1 gap-12 md:grid-cols-4">
          {/* Brand */}
          <div>
            <p className="mb-1 text-sm font-bold tracking-tight">
              {BRAND.name}
            </p>
            <p className="mt-0.5 text-sm tracking-wide text-root-contrast-subtle">
              {BRAND.tagline}
            </p>
            <p className="mt-0.5 text-sm tracking-wide text-root-contrast-subtle">
              Est. {BRAND.year} · {BRAND.location}
            </p>
          </div>

          {/* Navigation */}
          <nav aria-label="Footer navigation">
            <Badge variant="minimal" className="mb-5 text-root-contrast-subtle">
              Navigation
            </Badge>
            <ul className="space-y-3">
              {NAV_LINKS.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-root-contrast/75 transition-colors hover:text-root-contrast"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          {/* Socials */}
          <div>
            <Badge variant="minimal" className="mb-5 text-root-contrast-subtle">
              Follow Us
            </Badge>
            <ul className="space-y-3">
              {SOCIAL_LINKS.map((social) => (
                <li key={social.label}>
                  <Link
                    href={social.href}
                    className="text-sm text-root-contrast/75 transition-colors hover:text-root-contrast"
                  >
                    {social.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <Badge variant="minimal" className="mb-5 text-root-contrast-subtle">
              Contact
            </Badge>
            <ul className="space-y-3 text-sm">
              <li>
                <Link
                  href={CONTACT.phone.href}
                  className="text-root-contrast/75 transition-colors hover:text-root-contrast"
                >
                  {CONTACT.phone.number}
                </Link>
              </li>
              <li>
                <Link
                  href={CONTACT.email.href}
                  className="text-root-contrast/75 transition-colors hover:text-root-contrast"
                >
                  {CONTACT.email.address}
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Copyright */}
        <div className="flex flex-col items-center justify-between gap-2 border-t border-root-contrast/15 pt-6 text-sm text-root-contrast-subtle sm:flex-row">
          <span>
            © {new Date().getFullYear()} {BRAND.name}
          </span>
          <span>{BRAND.location}</span>
        </div>
      </Container>
    </footer>
  );
}