# Product Footer

> The Atheros Builder footer — a tinted band with the Atheros A-mark wordmark, a haloed newsletter capture, a brand-gradient Start for Free CTA, four accent-barred nav columns, and a legal bar. Renders fully populated on first paint (no skeleton), with dark mode.

- Category: Footer
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Roastery
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: navigation, newsletter
- Page: https://builder.atheros.ai/components/product-footer
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_product_footer/preview-5037b8c10e62.webp

## 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-label`led `<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

## Keyboard shortcuts

- `Enter` — Submit the newsletter from the email field, or follow a focused link
- `Tab / Shift+Tab` — Move focus through the newsletter, CTAs, and nav/legal links in source order

## Common questions

**Which frameworks is Product Footer available in?**

Product Footer ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Product Footer free?**

Yes. Product Footer is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Product Footer support dark mode?**

Yes. Product Footer ships light and dark themes, both drawn from the Roastery design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Product Footer live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/product-footer

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt