Product Footer

Features

• Lavender Atheros footer with a runtime wordmark, a four-column nav grid, and a hairline-divided legal band, capped at 1200px centered
• Validated newsletter capture matching the production NewsletterForm — a violet-haloed email input with a Tabler mail icon, a hint line, and a springy square send button that runs an idle → invalid (inline error + aria-invalid) → loading (pulsing, double-submit guarded) → subscribed flow, ending on an emerald "You're subscribed!" pill over a hairline rule
• Two stacked CTAs — an accessible violet→indigo brand-gradient Start for Free primary (hover cross-fades to a shifted gradient) and a tinted Log In outline (primary-100 fill, primary-300 border, primary-600 text)
• Four nav columns rendered from a data array, each led by a 2px rounded accent bar in its own hue — Builder pink, Learning violet, Resources blue, About Us purple
• Nav and legal links hover to the brand violet; link rows support an optional violet-tinted badge pill via the badge data field
• Populated on first paint — the wordmark, newsletter, CTAs, and four nav columns render immediately from the seed data with no skeleton or fetch-latency phase (footers never skeleton)
• Auto-updating copyright year and a wrap of legal links in the bottom band
• Polished dual theme: lavender-on-white light identity and a deep violet-navy dark companion with a lifted accent

Accessibility

Landmarks

<footer> region, one aria-labelled <nav> per column, <main> page area

Wordmark

aria-label="Atheros home" with the decorative mark aria-hidden="true"

Newsletter

Labelled email input wired to its hint and error via aria-describedby; aria-invalid toggled on validation; role="alert" inline error; role="status" success confirmation; a polite aria-live region announces subscribing and success

Links

Nav and legal links carry visible text; decorative icons are aria-hidden="true"

Form

novalidate form submits on Enter; the submit is re-entrancy-guarded so a double press cannot fire two requests

Focus indicators

Global 2px accent :focus-visible outline plus a focus ring on the email input

Reduced motion

prefers-reduced-motion: reduce disables all transitions and animations

Customise it with AI

Open Product Footer in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the footer is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.