# Footer

Footer is a ready-made neobrutalist section (block) from Cruise UI, built from its components. A site footer block: logo and blurb, 2–4 link columns, social links, an optional WhatsApp button and newsletter form, and a © row. Dark (.on-deep) by default, with a light variant.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-footer
```

Import: `import { CruiseFooter } from "@/components/cruise/blocks/footer";`

## When to use

The bottom of every marketing or shop page.

## When not to

Inside an app dashboard (use the Dashboard layout's sidebar for links).

## Example (React)

```tsx
"use client";

import { CruiseFooter } from "@/components/cruise/blocks/footer";

export default function FooterExample() {
  return (
    <CruiseFooter
      brand="Mama Put Kitchen"
      blurb="Home-style meals delivered across Lagos, hot and on time."
      columns={[
        { title: "Menu", links: [{ label: "Rice dishes", href: "#rice" }, { label: "Soups", href: "#soups" }, { label: "Drinks", href: "#drinks" }] },
        { title: "Company", links: [{ label: "About us", href: "#about" }, { label: "Careers", href: "#careers" }] },
        { title: "Help", links: [{ label: "Delivery areas", href: "#delivery" }, { label: "Contact", href: "#contact" }] },
      ]}
      socials={[
        { network: "instagram", href: "https://instagram.com/" },
        { network: "x", href: "https://x.com/" },
        { network: "tiktok", href: "https://tiktok.com/" },
      ]}
      whatsapp={{ phone: "+2348012345678", message: "Hello, I'd like to order", label: "Order on WhatsApp" }}
      newsletter={{ title: "Weekly menu in your inbox", onSubscribe: async () => {} }}
      year={2026}
      signatureBand
    />
  );
}
```

## Props: CruiseFooter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand?` | `string` | `"Your brand"` | Name used in the © line and social link labels. |
| `logo?` | `ReactNode` | — | Logo next to (or instead of) the brand name; defaults to the name in Baloo 2. |
| `blurb?` | `ReactNode` | `"One short line about what you do and who it's for."` | — |
| `columns?` | `CruiseFooterColumn[]` | `DEFAULT_COLUMNS` | 2–4 columns of links. |
| `socials?` | `CruiseFooterSocial[]` | `[]` | — |
| `whatsapp?` | `{ phone: string; message?: string \| undefined; label?: string \| undefined; }` | — | Adds a WhatsApp button (the WhatsApp component). |
| `newsletter?` | `{ title?: string \| undefined; label?: string \| undefined; button?: string \| undefined; done?: string \| undefined; onSubscribe: (email: string) => void \| Promise<void>; }` | — | Adds an email sign-up; onSubscribe gets the address. |
| `copyright?` | `ReactNode` | — | Text after "©" and the year; defaults to the brand name. |
| `year?` | `number` | — | Defaults to the current year (shown once the page loads). |
| `variant?` | `"dark" \| "light"` | `"dark"` | "dark" uses .on-deep; "light" sits on --paper. |
| `signatureBand?` | `boolean` | `false` | The active city's signature band along the top. |
| `className?` | `string` | — | — |

## Accessibility

- A <footer> landmark; each link column is a <nav> with its column title as the label.
- Social links are 44px icon buttons named "Brand on Instagram" and so on.
- The newsletter field has a real label and shows errors in words.