## Product Footer (S—037)

A product footer with grouped columns, a live status pill, link badges and accordion columns on mobile.

- URL: https://sundaeui.dev/components/site-footer
- Category: Page sections · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/site-footer.json`
- Tags: tailwind, section, footer, react, navigation, landing-page

A complete footer for a product site: brand and tagline, four labelled link columns, optional badges such as “New” on fresh pages, and a bottom bar for copyright and legal links.
A status pill links to your status page, with a calm pulse when everything is fine and amber or red otherwise. On phones the columns become accordions, so the footer doesn’t turn into a long scroll of links.
Use it as the global footer of a marketing or docs site.

### Usage

```tsx
import { SiteFooter } from '@/components/sundae/site-footer'

<SiteFooter brand={<Logo />} columns={columns} status={{ label: 'All systems normal', href: 'https://status.example.com', state: 'ok' }} legal={[{ label: 'Privacy', href: '/privacy' }]} />
```

### Props

- `brand` (`ReactNode`, required): Logo or name.
- `tagline` (`string`): One-line description.
- `columns` (`FooterColumn[]`, required): { title, links: { label, href, badge? }[] }.
- `status` (`{ label, href, state: 'ok' | 'degraded' | 'down' }`): Status pill.
- `legal` (`{ label, href }[]`): Bottom-bar links.
- `copyright` (`string`): Defaults to © current year.

### Accessibility

- Each column is a labelled nav. Mobile toggles expose aria-expanded.
- The status pulse is removed for reduced motion.