Minimal Development Footer

Realestate78: Minimal Development Footer

The smallest footer in the set, for a development's sales site: one ruled row with the text wordmark, three quiet links and a short legal line about the computer-generated images, then a second hairline row with the developer credit and the year. Everything rises in once as it enters the viewport and both hairlines draw from the left, so the footer closes the page in the same grammar as the sections above it.

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://beste.dev/r/realestate78?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate78?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate78.tsx; it uses no shadcn/ui primitives and no shared components, only framer-motion and the cn helper.

Quick start

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

import { Realestate78, realestate78Demo } from "@/components/beste/block/realestate78";

export default function Page() {
  return <Realestate78 {...realestate78Demo} />;
}

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

import { Realestate78 } from "@/components/beste/block/realestate78";

export default function Page() {
  return (
    <Realestate78
      brand="Alder Row"
      items={[
        { label: "Residences", href: "/residences" },
        { label: "Book a viewing", href: "/viewing" },
        { label: "Privacy", href: "/privacy" },
      ]}
      legal="Computer-generated images are indicative only. Prices correct at the time of publication."
      developer={{ label: "A Hartwell & Lowe development", href: "https://beste.co" }}
      year="2026"
    />
  );
}

Props

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

Behavior notes

• Both rows are relative blocks with a hairline motion.span on their top edge that scales from the left over 1.2 seconds as the row enters the viewport, once, with a -10% margin.
• The wordmark rises first, each link 80 ms after the previous, then the legal line; the developer credit and the year follow in the second row.
• The first row stacks on small screens and becomes a single line with the legal text right-aligned from the md breakpoint; the second row goes side by side from sm.
• The second row renders only when developer or year is set, so the footer can shrink to a single ruled row.
• With prefers-reduced-motion every entrance and hairline draw is skipped and the footer renders in its final state.