proNew322 lines · framer-motion

Footer Sitemap Dark

Every page in one dense, dark-toned bottom bar. A large sitemap-style footer with a wordmark and blurb, six densely linked groups, abstract socials, and a bottom bar with its own segmented language/region control. Always rendered in a deliberately dark-toned surface in both themes.

Use it for: The footer of a marketing site, docs hub or dashboard with enough pages (product, resources, legal, developers) that a single link row isn't enough.
Themes: Light + dark
License: Commercial use

Live

Arcframe

Infrastructure for teams that ship on their own schedule, across every surface they build for.

Product

Solutions

Resources

Company

Legal

Developers

tsx

"use client";

import * as React from "react";
import { 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;
}

/**
 * Dense, business-grade sitemap footer. Always dark-toned by design via the
 * `bg-foreground`/`text-background` token pair, which flips with the theme:
 * a near-black band with light text in light mode, a near-white band with
 * dark text in dark mode — in both cases a deliberate, high-contrast break
 * from the page behind it rather than a hardcoded shade that could clash.
 * Six link groups laid out like a real sitemap, a wordmark + blurb, abstract
 * socials, and a bottom bar with its own segmented language/region control
 * (never a native <select>).

The rest is in Pro.

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

Get Pro

How it behaves

→Section background and text use bg-foreground/text-background — a token pair that flips with .dark, so the footer is always a deliberate near-black (light mode) or near-white (dark mode) band, never a hardcoded shade that could clash with the page.
→Content grid: a wordmark + blurb + social column on the left, six link groups (Product, Solutions, Resources, Company, Legal, Developers) in a responsive 2/3-column grid on the right; collapses to one column under sm.
→Region switch is a self-built segmented control: clicking an option moves a shared layoutId pill behind the active label with a spring, and calls onRegionChange — no native <select>.
→A thin gradient hairline above the content loops across the top edge; it is driven off an IntersectionObserver + document.hidden check and stops animating when the block is offscreen or the tab is hidden, and is skipped entirely under prefers-reduced-motion.
→Link groups and the brand column fade/slide up once on mount so the block always reads as complete in a static preview, with no scroll-trigger to miss.
→All footer links are href="#" by default with onClick preventDefault, so nothing navigates or reloads unless a real href is supplied.

Accessibility

✓Region switch is a `role="group"` of real `<button>`s with `aria-pressed`, fully keyboard operable — no native `<select>` and no custom listbox semantics to get wrong.
✓Decorative glow blobs and the hairline are `aria-hidden`; link groups are grouped under a visible `<p>` label per column read alongside the links.
✓Social icons are real links with `aria-label`; copyright text and link groups keep contrast against the inverted surface via the `background`/`foreground` token pair rather than a fixed opacity that could fail in one theme.
✓Honours prefers-reduced-motion.