---
name: adding-corporate-footer
description: Use when asked to give a website a larger, corporate-looking, "real company" or multi-column footer, especially across several sibling sites or brands that share a product family.
---

# Adding a corporate footer

## Overview

A corporate footer is a fixed set of regions rendered in the site's own design language. Every link resolves to something that exists today. When several sibling sites get footers, they share the same regions in the same order, so the family reads as one company.

## The footer contract

Build the footer as one component (`_components/site-footer.tsx` or the repo's equivalent) containing these regions, top to bottom:

1. **Brand block + link columns** (side by side on desktop, stacked on mobile)
   - Brand block: the site's existing logo mark and wordmark (copied, recolored for the footer background), a 1–2 sentence description of what the product does, and the site's primary CTA button, using the same label as the header CTA.
   - Exactly 3 link columns: **Product** (the page's own section anchors), a **domain column** named for what the site handles (Forms / Documents / For your firm), and **Company** (contact, primary CTA, security report). The links come from the link inventory below.
2. **Family strip** (only if sibling sites exist): one tile per sibling, with name, a one-line description and absolute URL. Mark the current site with `aria-current="page"` and a quiet "You're here".
3. **Bottom bar**: `© <year> <Brand>. All rights reserved.` on the left. On the right, the site's disclaimer line: what the product is _not_ (not tax, accounting or medical advice, not generally available, …) plus any "sample data is fictional" note already on the page.

## Link inventory

Before writing JSX, list every link target and keep only these kinds:

| Kind                                                 | Example                                           |
| ---------------------------------------------------- | ------------------------------------------------- |
| Section anchor that exists on the page               | `#pricing` (grep the page for `id="pricing"`)     |
| Route that exists in the app directory               | `/docs` only if `app/docs/page.tsx` exists        |
| mailto to the site's contact address, with a subject | `mailto:hello@site.com?subject=Security%20report` |
| Sibling-site absolute URL                            | `https://schemacare.com`                          |

Pages that the inventory doesn't contain (Privacy, Terms, Careers, Blog, social profiles) are listed for the user in the final report as "add when the page exists".

## Styling

- Reuse the site's tokens (`@theme` colors, fonts, radius). The footer background is the site's darkest brand color; headings use the site's display font.
- Max width and gutters match the page container (`mx-auto max-w-6xl px-4 sm:px-6` or whatever the page uses).
- The family strip borrows the site's own card or table vocabulary (ruled grid, rounded tiles, double rule), so each sibling's footer differs in look but not in structure.

## Wiring and verification

1. Replace the old `<footer>` in the page with `<SiteFooter />` and add the import.
2. Run lint and the type check (`pnpm lint`, `pnpm exec tsc --noEmit`).
3. Render it: run the dev server, then screenshot the `footer` element at desktop width, and check phone width (390px) for horizontal overflow (`document.documentElement.scrollWidth`).
4. Read the screenshot and fix copy that wraps awkwardly or reads unclearly.
5. For sibling sites, repeat per repo and compare the three screenshots for matching regions.

## Common mistakes

| Mistake                                             | Fix                                                                                   |
| --------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Footer written but never rendered                   | Steps 2–3 above, before reporting done                                                |
| Disclaimer missing                                  | It's a required bottom-bar slot; derive it from what the page says the product is not |
| Siblings get different column sets                  | Use the contract; only the domain column's name and links change                      |
| Generic grey footer                                 | Use the site's tokens and its darkest brand color                                     |
| Column padded with several links to the same anchor | Each link in a column points to a distinct target. A short column is fine             |
| `sed` edits on multi-line JSX text silently miss    | Use an exact-match edit tool and grep for the new text afterward                      |