Dark Call to Action Band

Realestate55: Dark Call to Action Band

A full-width dark band for a development's sales page: a pale eyebrow with its short rule, a large sans heading on the left and the lead paragraph with two pill buttons (a paper one and a hairline outline) aligned to the bottom right. Two faint hairlines close the band above and below, drawing across as it scrolls into view, and every line of text rises in one sequence after the eyebrow.

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/realestate55?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate55.tsx together with the badge24 eyebrow and button25 pill components and the shadcn/ui button primitive behind the two buttons.

Quick start

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

import { Realestate55, realestate55Demo } from "@/components/beste/block/realestate55";

export default function Page() {
  return <Realestate55 {...realestate55Demo} />;
}

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

import { Realestate55 } from "@/components/beste/block/realestate55";
import { ArrowRight } from "lucide-react";

export default function Page() {
  return (
    <Realestate55
      eyebrow="Alder Row, Riverside"
      heading="Fifteen homes are still available. Come and see the river for yourself."
      description="The sales suite is open seven days a week, and the show apartment is ready to walk through."
      buttons={[
        { label: "Book a viewing", href: "/viewing", tone: "neutral", icon: ArrowRight },
        { label: "Download the brochure", href: "/brochure", tone: "outline" },
      ]}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "dark" | "outline" | "primary" | "neutral";
  icon?: LucideIcon;
};

Behavior notes

• The band is bg-foreground with text-background, so it inverts cleanly with the theme; the paragraph sits at 70% and the eyebrow at 80% of the paper colour, and the hairlines at 20%.
• Both hairlines scale from the left over 1.2 seconds once the band is 10% inside the viewport, the bottom one 0.3 seconds after the top; they animate only once.
• The heading, paragraph and button row rise 16 pixels into place at 0.1, 0.25 and 0.4 seconds, after the eyebrow has drawn its own rule.
• Buttons without a tone default to neutral, the paper pill meant for dark grounds; outline renders a hairline in the current text colour so it stays legible on the dark band.
• With prefers-reduced-motion every element renders in its final state and nothing moves.