# Footer Sections

> Three footers — a link-rich directory with a newsletter, an oversized wordmark whose letters rise as you scroll, and a compact bar with a live local clock and status dot.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/footer-sections
- Install: `npx shadcn@latest add @geturui-pro/footer-sections`
- Dependencies: motion, lucide-react

## Variants

### Directory

Brand, five link columns with sliding underlines and tags, a newsletter card with loading and joined states, and a legal row.

Install: `npx shadcn@latest add @geturui-pro/footer-sections-directory`

```tsx
import { DirectoryFooter } from "@/components/blocks/footer-sections/directory";

export default function Footer() {
  return (
    <DirectoryFooter
      brand={{ name: "Parcel", tagline: "The shared inbox for support teams." }}
      newsletter={{ title: "The Tuesday letter", onSubscribe: async (email) => { await fetch("/api/subscribe", { method: "POST", body: email }); } }}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `{ name: string; monogram?: string; tagline?: string; href?: string }` | — | Brand block with a volt monogram tile. |
| columns | `DirectoryColumn[]` | — | { title, links: { label, href, tag?, external? }[] }. Up to five. |
| newsletter | `{ title; description?; placeholder?; cta?; onSubscribe? } | null` | — | null hides the form. onSubscribe may return a promise. |
| legal | `DirectoryLink[]` | — | Links on the base row. |
| copyright | `string` | — | Text on the base row. |
| className | `string` | — | Classes for the footer. |

### Wordmark

Large display links and a statement above an oversized brand wordmark whose letters rise and straighten as the footer scrolls into view.

Install: `npx shadcn@latest add @geturui-pro/footer-sections-wordmark`

```tsx
import { WordmarkFooter } from "@/components/blocks/footer-sections/wordmark";

export default function Footer() {
  return <WordmarkFooter wordmark="Halden" copyright="© 2026 Halden Studio" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark | `string` | "Halden" | The oversized word; 4–8 letters fill the width best. |
| statement | `string` | — | One line under the links. |
| links | `WordmarkLink[]` | — | Primary links in display type. |
| secondary | `WordmarkLink[]` | — | Smaller links on the right. |
| backToTop | `boolean` | true | Show the back-to-top button. |
| copyright | `string` | — | Text on the base row. |
| className | `string` | — | Classes for the footer. |

### Local time

Compact one-row footer with a live clock in the team's time zone whose digits roll each second, an office-hours hint and a status dot.

Install: `npx shadcn@latest add @geturui-pro/footer-sections-local-time`

```tsx
import { LocalTimeFooter } from "@/components/blocks/footer-sections/local-time";

export default function Footer() {
  return <LocalTimeFooter timeZone="America/New_York" city="New York" status="operational" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `{ name: string; monogram?: string; href?: string }` | — | Monogram and name on the left. |
| timeZone | `string` | "Europe/Lisbon" | IANA time zone for the clock. |
| city | `string` | "Lisbon" | City label next to the clock. |
| hours | `[number, number]` | [9, 18] | Office hours in that zone; drives the Team online chip. |
| status | `"operational" | "degraded" | "outage"` | "operational" | Colour and default wording of the status pill. |
| statusLabel / statusHref | `string` | — | Override the status text and link. |
| links | `LocalTimeLink[]` | — | Small links on the right. |
| className | `string` | — | Classes for the footer. |

## Accessibility

- Each footer is a footer landmark with a labelled nav; external links announce that they open a new tab.
- The newsletter field has a real label, aria-invalid and a polite error line; the clock exposes hours and minutes once, not every second.
- The wordmark keeps its text in aria-label and renders static under reduced motion; the status ping stops too.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.