Mega Footer
Four-column mega footer: brand + newsletter, product/company/legal columns, bottom bar with licence and language switcher.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a footer that closes the page with the same care as the hero: findable links, one newsletter field, no clutter.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion (entrance only, subtle).
LAYOUT
Layout
Top area: 5fr brand column (logo, one-line mission, newsletter email field + button, social icons) + three 2fr link columns (Product / Company / Legal). Hairline. Bottom bar: © line + licence note left, language switcher + "Back to top" right. Link columns collapse to 2-col grid on mobile; brand column full width first.
TYPOGRAPHY
Typography
Column heading: 0.85rem/600 uppercase tracking 0.12em. Links: 0.95rem muted, hover foreground. Mission line: 1rem leading 1.6.
COLOR TOKENS
Color Tokens
--background: 240 20% 8%; --foreground: 0 0% 96%; --muted-foreground: 240 10% 65%; --primary: 250 80% 68%; --border: 240 15% 20%. (Dark footer variant; if the page is dark, invert.)
SPACING
Spacing
Padding 4.5rem top / 2rem bottom; column gap 2.5rem; link gap 0.7rem.
ANIMATION
Animation
Fade-in on view only. Links get an underline slide on hover. Reduced motion safe.
RESPONSIVE
Responsive
<md: brand full width, link columns 2-col; bottom bar stacks centred.
SAMPLE COPY
Sample Copy
Mission: "Tools for small teams who'd rather be building."
Newsletter placeholder: "you@company.com", button "Subscribe", note "One email a month. Unsubscribe anytime."
Columns: Product — Features, Pricing, Changelog, Roadmap; Company — About, Blog, Careers, Contact; Legal — Privacy, Terms, Security.