Split Call to Action

Realestate59: Split Call to Action

Two calls to action side by side for a development's sales page, divided by a vertical hairline that draws down the middle: each half has a heading, one line of text and a pill button, and the pair is closed above and below by hairlines that draw across. The two columns rise in a short offset sequence; on small screens the halves stack and the divider becomes a horizontal rule.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate59.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 realestate59Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Realestate59, realestate59Demo } from "@/components/beste/block/realestate59";

export default function Page() {
  return <Realestate59 {...realestate59Demo} />;
}

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

import { Realestate59 } from "@/components/beste/block/realestate59";
import { ArrowRight, Download } from "lucide-react";

export default function Page() {
  return (
    <Realestate59
      eyebrow="Next steps"
      panels={[
        {
          title: "Download the brochure",
          description: "Forty pages on the homes, the materials and the river, with every floor plan.",
          button: { label: "Get the brochure", href: "/brochure", tone: "outline", icon: Download },
        },
        {
          title: "Book a viewing",
          description: "Walk through the show apartment in the warehouse, any day of the week.",
          button: { label: "Choose a time", href: "/viewing", icon: ArrowRight },
        },
      ]}
    />
  );
}

Props

type Panel = {
  title: string;
  description: string;
  button: {
    label: string;
    href: string;
    tone?: "dark" | "outline" | "primary" | "neutral";
    icon?: LucideIcon;
  };
};

Behavior notes

• The divider is one element that is a horizontal rule on small screens and a vertical one from md up; it animates both scaleX and scaleY from a top-left origin, so whichever axis has length draws in and the other is a no-op.
• The top hairline draws first, the divider 0.2 seconds later and the bottom hairline at 0.4 seconds, all over 1.2 seconds and only once.
• Each half's heading, line and button rise at 0.1, 0.25 and 0.4 seconds, with the second half offset by a further 0.1 seconds so the two columns read left to right.
• Buttons default to the dark tone; the demo gives the brochure an outline pill and a download icon so the primary action stands out.
• With prefers-reduced-motion every hairline and line of text renders in its final state.