Problem

Apps served via Vercel rewrites (e.g. /us/watca, /us/taxsim) render their own UI — they don't get policyengine-app-v2's header/footer. This means:

1. Inconsistent header/footer between the main site and rewrite-proxied apps
2. We use rewrites (not iframes) for SEO — search engines can index the content under policyengine.org
3. But the trade-off is losing the shared shell

Proposed solution

Extract the header and footer into the existing @policyengine/design-system package (or a new @policyengine/shell package) so any app can import and render the same header/footer.

Scope of work

Components to extract (~900 lines across 10 components)

Header (7 components):

• HomeHeader.tsx — root header with nav items
• HeaderContent.tsx — layout container
• HeaderLogo.tsx — logo + home link
• DesktopNavigation.tsx — desktop nav menu
• NavItem.tsx — individual nav item with dropdown support
• CountrySelector.tsx — country/region switcher
• MobileMenu.tsx — mobile hamburger menu (Sheet/Drawer)

Footer (2 components):

• Footer.tsx — links, social icons, copyright
• FooterSubscribe.tsx — newsletter subscription form (Mailchimp)

Optional:

• GiveCalcBanner.tsx — seasonal promotional banner

Dependencies to decouple

Dependencies to keep as-is

• @policyengine/design-system tokens (colors, spacing, typography) — already in the package
• @tabler/icons-react — add as peer dep
• shadcn/ui primitives (Button, Input, DropdownMenu, Sheet, etc.) — need to either bundle or add as peer deps
• jsonp — for Mailchimp subscription

Proposed component API

// Consumer usage in any app
import { Header, Footer } from '@policyengine/design-system';

<Header
  countryId="us"
  countries={['us', 'uk']}
  onCountryChange={(id) => { /* update URL */ }}
  navItems={[
    { label: 'Research', href: '/us/research' },
    { label: 'About', href: '/us/team' },
  ]}
/>

<Footer
  countryId="us"
  onNewsletterSuccess={(msg) => { /* analytics */ }}
/>

Repos affected

1. policyengine-app-v2 — extract components, update imports
2. working-americans-tax-cut-act-one (watca) — install package, add header/footer
3. Any future rewrite-proxied apps — same pattern

Related

• Remove footer from the modal page. #697 (model page iframe height)
• PR Fix 404 on first click for rewrite-proxied apps #792 (interim fix: <a> tags for rewrite-proxied app links)