CTA + Footer Set

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<CtaFooterSet />

Installation

Usage

CtaSection and SiteFooter are two independent page sections that can be used together. Both reveal their children in sequence when they enter the viewport.

import { CtaSection, SiteFooter } from "@/components/ui/cta-footer-set";

<CtaSection
  eyebrow="Start now"
  title="Bring every section to life with motion"
  description="React components you install by copying and pasting."
  actions={
    <>
      <a href="/docs">Get started</a>
      <a href="/components">Browse components</a>
    </>
  }
/>

<SiteFooter
  variant="columns"
  brand="WebberUI"
  tagline="An animation-first React component library."
  columns={[
    { heading: "Product", links: [{ label: "Components", href: "#" }] },
    { heading: "Resources", links: [{ label: "Docs", href: "#" }] },
  ]}
  copyright="© 2026 WebberUI"
/>

SiteFooter offers two layouts: columns (brand + multi-column links + a social row along the bottom) and minimal (a centered brand with inline navigation and social links). Just switch variant.

<SiteFooter
  variant="minimal"
  brand="WebberUI"
  navLinks={[
    { label: "Docs", href: "#" },
    { label: "Components", href: "#" },
  ]}
  social={[{ label: "GitHub", href: "#", icon: <Github className="size-4" /> }]}
  copyright="© 2026 WebberUI"
/>

CtaSection Props

SiteFooter Props

FooterLink / FooterColumn

interface FooterLink {
  label: string;      // Link text; serves as the accessible name when icon-only
  href: string;       // Link target
  icon?: React.ReactNode; // Optional icon
}

interface FooterColumn {
  heading: string;    // Column heading
  links: FooterLink[];
}

How it works

• Both sections are triggered with whileInView and use staggerChildren to reveal their children in sequence; the columns layout uses a nested stagger so that the brand area, each link column, and the bottom row form one continuous ripple of rhythm.
• The background glow in CtaSection is made of two neutral-colored blurred blobs drifting slowly in a loop; it is purely decorative.
• Everything uses neutral colors (neutral-*) plus dark: variants, which makes it easy to carry over your own theme; the hover transition duration can be overridden through --wb-duration-fast.

Accessibility

• When the user has "reduce motion" enabled at the system level, both sections render their static version directly and the glow stops drifting.
• CtaSection uses <section aria-labelledby> pointing at the title, which makes it a named landmark.
• SiteFooter uses the native <footer> tag (with its implicit contentinfo landmark), all links are real <a> elements, and icon-only social links get their aria-label from label.
• Every link has a focus-visible outline and can be operated with the keyboard.