Valley Footer

Footer124: Valley Footer

A photographic footer: a closing statement settles in word by word over a valley under grain, then a newsletter row beside three link groups, and a ruled line carrying the wordmark, socials and copyright.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/footer124?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/footer124?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/footer124.tsx, the shadcn input primitive the newsletter is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports footer124Demo alongside the block: the exact props behind the preview above. Spread it to get a working footer in one line.

import { Footer124, footer124Demo } from "@/components/beste/block/footer124";

export default function Page() {
  return <Footer124 {...footer124Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Footer124 } from "@/components/beste/block/footer124";

export default function Page() {
  return (
    <Footer124
      brand="Altair"
      statement="Progress rarely feels like progress while it is happening. You do not have to walk it alone."
      image={{ src: "/photos/valley.jpg", alt: "A wide green valley under soft evening light" }}
      newsletter={{
        title: "A letter, once a month",
        description: "One short note on rest, attention and the slow work.",
        placeholder: "Your email",
        button: "Join",
      }}
      groups={[
        {
          title: "Practice",
          links: [
            { label: "About", href: "/about" },
            { label: "Fees", href: "/pricing" },
          ],
        },
      ]}
      socials={[{ label: "Instagram", href: "https://instagram.com" }]}
      copyright="2026 Altair. Registered practice, Lisbon." 
    />
  );
}

Props

type LinkGroup = {
  title: string;
  links: FooterLink[];
};

type FooterLink = {
  label: string;
  href: string;
};

type Newsletter = {
  title: string;
  description: string;
  placeholder: string;
  button: string;
};

Behavior notes

• The statement is a p rather than a heading, and its stagger is tightened to 0.035s: it runs to several sentences, so the default rhythm would still be assembling long after the reader arrives.
• The background photograph has no parallax here. A footer is the last thing on the page and there is nothing below it to scroll against, so a drift would only ever be half seen.
• The gradient darkens downward (foreground/70 to foreground/95), so the copyright line at the bottom sits on the deepest part of the wash while the statement keeps some of the picture behind it.
• The Input is restyled for a dark surface with a translucent fill and a background/30 border, and its focus ring is traded for a solid border, because the shadcn default is drawn for a light one.
• The grain filter's id comes from useId, so two grain surfaces on one page cannot collide on a global SVG id.
• Link groups are a plain two-column grid on a phone and three across from md, so a three-group footer never leaves one column stranded on its own row.
• The newsletter form only calls preventDefault(); no address is captured or sent until you wire it up.