# Enterprise Footer

> A two-tier enterprise footer with a softly washed newsletter band and inline validation, a design-system-colored Stratum brand column, four indexed link columns, and a clean legal band with Tabler socials.

- Category: Footer
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: newsletter, navigation, social
- Page: https://builder.atheros.ai/components/enterprise-footer
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_enterprise_footer/preview-2bd3407fae47.webp

## Features

- Ships fully populated at first paint — the four nav columns, legal links, socials, and copyright year render immediately from the in-file data model with no skeleton, flash, artificial latency, or reveal delay
- Full-width newsletter band leading the footer — a clean flush top strip with a subtle primary-color wash, a wide-tracked Tabler mail eyebrow, headline, supporting copy, and inline subscribe form
- Console-style email field with an inline Tabler `at` prefix glyph, a clear focus ring, and a radius shared with the adjacent subscribe button
- Client-side email validation with an inline `aria-live` error line, a fake-latency "Subscribing…" state with a light sweep charging across the button, and an emerald "Subscribed ✓" success morph that resets after 2.5s
- Matched-radius subscribe button — shares the input’s design-system radius, adds a darker copper ramp on hover, nudges the chevron forward, and gives a springy `scale(0.97)` press response
- Three-stop gradient Stratum mark built at runtime — the official Tabler `stack-2` icon paired with a bold wordmark and recolored per design system and theme via `<linearGradient>` stops driven by CSS custom properties
- Brand column with tagline and a quiet "All systems operational" status pill with a pulsing success dot
- Four nav columns (Product, Resources, Support, Company) rendered from a data array with `createElement`/`textContent` — each an `aria-label`led `<nav>` landmark
- Indexed headings — each column heading carries a primary-colored `01`–`04` tabular-numeral index (aria-hidden), giving the grid an annual-report cadence without decorative rules
- Nav and legal links use clean primary-color hover states without decorative underlines
- Distinct full-width legal band closing the page — tabular-numeral auto-updating copyright, cleanly spaced legal links, and official Tabler brand social icons (Instagram, LinkedIn, X, YouTube, GitHub) with a primary-color hover wash and a springy press scale
- Boardroom-amber enterprise identity: warm paper light theme with an ivory shell and white focal card; roasted near-black dark theme with espresso surfaces and a lifted amber accent carrying dark-on-amber CTAs
- IBM Plex Sans across the whole scale for an engineering-grade enterprise voice

## Accessibility

- **Landmarks** — `<footer>` contentinfo, one `aria-label`led `<nav>` per column, `<main>` page area
- **Form label** — Visually-hidden `<label for="subscribe-email">` plus placeholder
- **Validation** — `aria-live="polite"` error line referenced by `aria-describedby`, `aria-invalid` on the input
- **Social links** — `aria-label` + `rel="noopener"` per link, decorative SVGs `aria-hidden="true"`
- **Legal links** — Real text links inside an `aria-label`led list
- **Focus indicators** — Global `:focus-visible` ring, amber glow ring on the input
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Submit the newsletter form

## Common questions

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

Enterprise 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 Enterprise Footer free?**

Enterprise Footer is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Enterprise Footer support dark mode?**

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

## Get the code

Preview Enterprise 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/enterprise-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
