Footer.

The closure of the digital narrative. It anchors the layout, provides secondary navigation paths, and reinforces brand identity through consistent typography and social proof.

import { Footer, FooterGrid, FooterBottom } from "@/components/ui/footer"

Configuration

Composition

Viewport

Main Content Area

Full Width

Asymmetrical Grid Layout

Grid Architecture

The footer uses a responsive CSS Grid. In desktop (`md:grid-cols-2`), it separates brand vision from navigation. In mobile, it collapses into a single column stack, preserving hierarchy without hiding content.

Interaction Textures

Links aren't just text. We use micro-interactions like the arrow reveal (`opacity-0` -> `opacity-100`) and border color shifts to make the footer feel alive and interactive, inviting clicks even at the bottom of the page.

Layout.tsx

<Footer>
  <FooterContainer>
    <FooterGrid>
      <div className="col-span-1">
        <Logo />
        <p>Tagline...</p>
      </div>
      <div className="col-span-1 grid grid-cols-2">
        <LinksColumn title="Work" links={WORK_LINKS} />
        <LinksColumn title="Social" links={SOCIAL_LINKS} />
      </div>
    </FooterGrid>
    <FooterBottom>
      <Copyright />
    </FooterBottom>
  </FooterContainer>
</Footer>