Mega Footer
aka Sitemap Footer
Multi-column footer with full nav, contact, status, and legal.
When to use
Mature products. New startups should skip and use a minimal one.
Anatomy
- 4–5 columns of links grouped by theme
- Left: logo + tagline + region switcher
- Bottom strip: status pill, social icons, copyright
How the industry does it
1 examples · credited
Prompt
Build a mega footer. Top section: 5-column grid. Column 1 (wider): wordmark, one-line tagline, region/currency switcher. Columns 2–5: link groups (Product, Developers, Company, Legal) each with a small uppercase label and 5–7 14px links in ink-400. Below the grid: a 1px divider, then a bottom strip with: a small "All systems normal" status pill on the left (green dot), social icon row in the center, and copyright + a "Made with care" line on the right. Background subtly darker than the page. Generous vertical padding (96px top).Polish & tuning
2 of 4 unlockedMotion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.