Four Buying Steps Row

Realestate37: Four Buying Steps Row

A how-to-buy section for a development's sales page: a header with eyebrow, heading and intro, then four steps (Register, Visit, Reserve, Exchange) in one row under hairlines that draw in with each column. Every step shows a title, a short line and how long it takes, and a register button sits with a footnote under a closing hairline.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate37.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the register button, and the shadcn/ui button primitive behind it.

Quick start

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

import { Realestate37, realestate37Demo } from "@/components/beste/block/realestate37";

export default function Page() {
  return <Realestate37 {...realestate37Demo} />;
}

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

import { Realestate37 } from "@/components/beste/block/realestate37";

export default function Page() {
  return (
    <Realestate37
      eyebrow="How buying works"
      heading="Four steps from a first look to your own front door"
      description="Buying off plan at Alder Row is deliberately simple."
      steps={[
        { title: "Register", description: "Tell us which home types interest you and we send the brochure and the price list.", duration: "A few minutes" },
        { title: "Visit", description: "See the show apartment and go through the floor plans with the team.", duration: "About an hour" },
        { title: "Reserve", description: "Choose your home and pay the reservation fee. The price is fixed the same day.", duration: "Same day" },
      ]}
      labels={{ duration: "Takes" }}
      button={{ label: "Register your interest", href: "/register" }}
      note="The reservation fee is deducted from the deposit on exchange."
    />
  );
}

Props

type Step = {
  title: string;
  description: string;
  duration: string;
};

type Labels = {
  duration?: string;
};

Behavior notes

• Steps carry no numbers or labels; the order is read from the row itself, left to right, and the list is a semantic ol so the sequence is still announced.
• The hairline above every step draws from the left over 1.2 s with the column's delay (0.1 s plus 0.1 s per step), and the closing hairline above the button draws at 0.5 s before the button group rises at 0.6 s.
• Heading and intro rise with the set's shared offsets (0.1 s and 0.25 s); the eyebrow draws its own rule through badge24.
• With prefers-reduced-motion nothing is offset or faded, and the hairlines render complete.
• The step list is a semantic ol; when steps is empty the list and its grid are left out, and the button row only renders when a button or a note is given.