Launch Offer with Countdown

Realestate40: Launch Offer with Countdown

An incentive section for a development's sales page: eyebrow, heading and intro, the offer value as a large figure counting up in view, a checklist of what is included under drawn hairlines, a four-cell countdown (days, hours, minutes, seconds) to a fixed date or a rolling number of days with rolling digits and a closed state, then a reserve button and a note. A tall 3:4 photograph beside the text opens top to bottom once loaded and drifts slightly with the scroll.

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

Base UI flavor

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

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

import { Realestate40, realestate40Demo } from "@/components/beste/block/realestate40";

export default function Page() {
  return <Realestate40 {...realestate40Demo} />;
}

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

import { Realestate40 } from "@/components/beste/block/realestate40";

export default function Page() {
  return (
    <Realestate40
      eyebrow="Launch offer"
      heading="We pay the stamp duty on the next homes reserved"
      description="Reserve before the offer closes and the stamp duty contribution is written into your contract."
      offer={{ label: "Contribution of up to", amount: 25000 }}
      currency="USD"
      locale="en-US"
      includes={["Stamp duty paid on completion, up to the contribution", "$1,500 towards your conveyancing fees", "First choice of the two finishes palettes"]}
      endsAt="2027-03-14T09:00:00Z"
      image={{
        src: "https://oud.pics/b/realestate/alder-arched-window.webp",
        alt: "An arched warehouse window with a deep brick reveal and an oak frame",
      }}
      labels={{
        included: "What is included",
        endsIn: "The offer closes in",
        ended: "This offer has closed",
        units: { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" },
      }}
      button={{ label: "Reserve with the offer", href: "/reserve" }}
      note="Available on homes reserved by the closing date and exchanged within 28 days."
    />
  );
}

Props

type Labels = {
  included?: string;
  endsIn?: string;
  ended?: string;
  units?: { days: string; hours: string; minutes: string; seconds: string };
};

Behavior notes

• The countdown runs on a one-second interval that is cleared on unmount; endsAt is parsed with Date.parse, otherwise the target is now plus endsInDays days. Nothing is rendered from the clock on the server, so the cells read 00 until the first tick and no hydration mismatch occurs.
• Each cell swaps its two-digit value with a roll (the old digits leave upwards, the new ones enter from below); once the deadline passes the caption cross-fades to labels.ended and the digits settle to 00 in the muted color.
• The offer amount is a spring from 0 that starts when the figure scrolls into view, formatted with Intl.NumberFormat as a whole currency amount.
• Checklist rows and the countdown cells each draw a hairline on top with their own delay, so the left column reveals in one sequence: heading, intro, figure, checklist, countdown, button.
• The photograph is gated on its own load event and on the frame being in view, opens from the top over 1.6 s, settles from a 1.18 to a 1.12 scale and drifts from -6% to 6% against the scroll; with prefers-reduced-motion it shows at once and does not move.