proNew331 lines · framer-motion

Footer Columns Newsletter

A real footer: wordmark, link columns, and a newsletter that actually confirms. A full-width site footer with a wordmark and short description, four link columns (Product, Resources, Company, Legal), a newsletter signup card, and a bottom row with copyright and social links.

Use it for: The last section of a marketing site or app landing page, where visitors expect site navigation, legal links and a way to stay in touch without leaving the page.
Themes: Light + dark
License: Commercial use

Live

Verdant

Infrastructure for teams shipping AI products — one dashboard for every agent, model and run.

Product

Resources

Company

Legal

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width footer: wordmark + short description, 4 link columns, a
 * UI-only newsletter signup (no network — validates, swaps to an inline
 * success state, and can be reset for the demo), then a copyright + socials
 * row. Internal links are real <a href="#"> elements with onClick
 * preventDefault so they never jump or reload.
 */

export interface FooterLink {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Newsletter form validates the email with a regex on submit; on a valid address it swaps the form for an inline 'you're on the list' success state via AnimatePresence — no network request is made.
→An invalid or empty email keeps the form and shows an inline error message tied to the input with aria-describedby and aria-invalid.
→The success state includes a 'Use a different email' button that resets the card back to the empty form, so the demo can be replayed without a page reload.
→showNewsletter toggles the whole newsletter card off, collapsing the grid to the link columns.
→All footer links and the brand mark are real <a href="#"> elements with onClick preventDefault, so they never navigate or reload.

Accessibility

✓Newsletter success message is in a role="status" region so screen readers announce it when it replaces the form.
✓Email input has an associated <label> (visually hidden) plus aria-invalid/aria-describedby wired to the inline error.
✓Social icons are <a> elements with aria-label and title naming the destination, not bare icon-only buttons.
✓Every link and button has a visible focus-visible outline using the design system's signal colour.
✓Honours prefers-reduced-motion.