# Footer

Canonical footer: `components/footer.tsx` (`FooterSection`).

## Structure

1. **Newsletter band** — headline + short copy + email form.
2. **Link columns** — site maps (pages, services, contact, legal).
3. **Brand / social / legal meta** — logo mark, social icon buttons, copyright.

## Layout

```tsx
<footer className={cn("section-shell bg-section-muted", layout.sectionY)}>
  <div className="section-decor" aria-hidden>…</div>
  <Container className="section-content">
    {/* newsletter */}
    {/* link grid */}
    {/* bottom bar */}
  </Container>
</footer>
```

| Region | Grid / spacing |
| --- | --- |
| Newsletter | `grid-cols-1 lg:grid-cols-2 gap-10`, bottom border, `mb-14 pb-14` |
| Links | `grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-10`, `py-10 lg:py-16` |
| Column titles | `type.h4` + `mb-5` |
| Links | `type.link` + `space-y-4` |

## Form

- `Input` height aligned to `Button size="lg"` via `h-[var(--btn-height-lg)]`.
- Stack vertically on mobile (`flex-col`), horizontal from `sm`.

## Social icons

- Use `Button variant="ghost" size="icon"` with accessible `aria-label`.
- Icons from `lucide-react`.

## Visual

- Background: `bg-section-muted` (not a hard gray box).
- Optional top wash gradient in `.section-decor` using primary at ≤ 4% opacity.
- Borders: semantic `border-border`.

## Rules

1. Stay on the shared `Container`—footer columns must align with header/content.
2. Do not introduce a second footer component for marketing pages.
3. Keep link lists scannable; avoid paragraph walls.
4. Dark mode comes from tokens automatically.

## Related

- [sections.md](./sections.md)
- [forms.md](./forms.md)
- [icons.md](./icons.md)