Reservation Fee Explainer

Realestate38: Reservation Fee Explainer

A reservation explainer for a development's sales page: on the left the reservation fee as a large figure that counts up in view, with a checklist of what the fee does under drawn hairlines. On the right a short vertical timeline (reservation, exchange within 28 days, completion) whose spine draws down and whose dots fill in order, followed by a reserve button and a short note.

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

Base UI flavor

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

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

Quick start

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

import { Realestate38, realestate38Demo } from "@/components/beste/block/realestate38";

export default function Page() {
  return <Realestate38 {...realestate38Demo} />;
}

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

import { Realestate38 } from "@/components/beste/block/realestate38";

export default function Page() {
  return (
    <Realestate38
      eyebrow="Reserving a home"
      heading="One fee holds your home while the paperwork catches up"
      description="A reservation takes the home off the market the same day and fixes the price."
      fee={5000}
      currency="USD"
      locale="en-US"
      covers={["Takes the home off the market the same day", "Fixes the price for the whole build", "Credited against your deposit on exchange"]}
      milestones={[
        { when: "Day 0", title: "Reservation", description: "You pay the fee and the contract pack goes to your solicitor." },
        { when: "Within 28 days", title: "Exchange of contracts", description: "You exchange with a 10% deposit, less the reservation fee." },
        { when: "Spring 2027", title: "Completion", description: "The balance is paid and the keys are handed over." },
      ]}
      labels={{ fee: "Reservation fee", covers: "What it does", timeline: "What happens next" }}
      button={{ label: "Reserve a home", href: "/reserve" }}
      note="Reservations are taken in person or online once you have viewed."
    />
  );
}

Props

type Milestone = {
  when: string;
  title: string;
  description: string;
};

type Labels = {
  fee?: string;
  covers?: string;
  timeline?: string;
};

Behavior notes

• The fee is a spring from 0 to the value that starts once the figure scrolls into view and is formatted with Intl.NumberFormat as a whole currency amount; with prefers-reduced-motion the final figure shows at once.
• Checklist rows rise 0.1 s apart from 0.25 s and each draws its own hairline on top; a closing hairline draws after the last row so the list is bounded on both sides.
• The timeline spine scales down from its top over 1.6 s, and each milestone rises with its dot growing from 0.6 to full size, 0.25 s apart, so the dots fill as the spine passes them.
• The button and note rise last, after the final milestone, and only render when one of them is given.
• The two columns stack on small screens with the fee and checklist first; on desktop they take five and six of twelve columns with a gap in between.