Extract header/footer into shared design system package

[PavelMakarchuk]

Summary

Extracts the header and footer components from app-v2 into @policyengine/design-system so that rewrite-proxied apps (watca, taxsim, keep-your-pay-act, model, api) can render the same header/footer while preserving SEO benefits.

Why

Apps served via Vercel rewrites get SEO indexing under policyengine.org but lose the app-v2 header/footer since they are entirely separate apps. Iframes would give us the shell but kill SEO. A shared package gives us both.

Current header/footer state

Header (HomeHeader.tsx):

• Gradient background: linear-gradient(to right, primary[800], primary[600])
• Nav items: Research, Model, API, About (dropdown: Team, Supporters), Donate
• Country selector (US/UK)
• Mobile hamburger menu with Sheet/Drawer

Footer (Footer.tsx):

• Gradient background: linear-gradient(to right, primary[800], primary[600])
• Contact links, social icons, newsletter subscribe (Mailchimp)

What needs to happen

Phase 1: Decouple from app-v2 internals

• Replace React Router Link with plain <a> tags
• Replace useCurrentCountry() with countryId prop
• Replace useWebsitePath() with direct URLs
• Replace useNavigate()/useLocation() with callback props
• Make analytics optional via callback props

Phase 2: Move into design system package

• Move 10 components (~900 LOC) into packages/design-system/src/shell/
• Add peer deps: @tabler/icons-react, shadcn/ui primitives
• Export Header and Footer from package entry point

Phase 3: Update consumers

• app-v2: Import from design-system instead of local
• watca, keep-your-pay-act, policyengine-model, household-api-docs, taxsim

Rewrite-proxied apps that need the shared shell

Route	Destination
/us/watca	working-americans-tax-cut-act-one.vercel.app
/us/keep-your-pay-act	keep-your-pay-act.vercel.app
/us/taxsim	policyengine-taxsim-policy-engine.vercel.app
/:countryId/model	policyengine-model.vercel.app
/us/api	household-api-docs-policy-engine.vercel.app

Code quality to address during extraction

• Add tests for Footer.tsx and GiveCalcBanner.tsx (0 tests currently)
• Deduplicate logo path (4 files) and typography styles (7+ repetitions)
• Replace hardcoded colors/font sizes with design tokens

Closes #793

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
policyengine-app-v2	Ready	Preview, Comment	Mar 10, 2026 9:53pm
policyengine-calculator	Ready	Preview, Comment	Mar 10, 2026 9:53pm

[policyengine]

I tried to review this PR but ran into an issue:

Claude Code failed (exit 1): Credit balance is too low