Sales Suite Visit Details

Realestate44: Sales Suite Visit Details

A visit-us block for a development: a tall 3:4 photograph of the entrance on the left and, on the right, heading and lead, an address card (a map pin, the suite's name, the street in large type and a walking-time pill), and an opening-hours list whose row for today is marked with a thin accent bar and a Today tag read from the visitor's clock. A directions pill, a phone link and a short access note close the column.

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

Base UI flavor

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

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

Quick start

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

import { Realestate44, realestate44Demo } from "@/components/beste/block/realestate44";

export default function Page() {
  return <Realestate44 {...realestate44Demo} />;
}

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

import { Realestate44 } from "@/components/beste/block/realestate44";

export default function Page() {
  return (
    <Realestate44
      eyebrow="The sales suite"
      heading="Come and see the brick, the oak and the river for yourself."
      description="The sales suite sits on the ground floor of the warehouse, with the show apartment one floor up."
      image={{
        src: "https://oud.pics/b/realestate/alder-lobby-stair.webp",
        alt: "The warehouse entrance lobby with a cast iron column and an oak stair",
      }}
      address={{ name: "Alder Row sales suite", lines: ["2 Mill Lane", "Riverside"], walk: "6 minutes on foot from the station" }}
      hours={[
        { label: "Monday to Friday", time: "10:00 to 18:00", days: [1, 2, 3, 4, 5] },
        { label: "Saturday", time: "10:00 to 17:00", days: [6] },
        { label: "Sunday", time: "By appointment", days: [0] },
      ]}
      phone={{ number: "+44 20 7946 0000", href: "tel:+442079460000" }}
      button={{ label: "Get directions", href: "/directions" }}
      labels={{ address: "Address", hours: "Opening hours", today: "Today" }}
      note="Free parking in the courtyard for visitors."
    />
  );
}

Props

type OpeningRow = { label: string; time: string; days: number[] };

type Labels = { address?: string; hours?: string; today?: string };

Behavior notes

• The address sits in a rounded-md bg-muted card that rises as one piece: a map pin in a round paper badge, the suite's name in muted text, the street lines joined with commas in the item title style, and the walking time as a paper pill with a footprints icon.
• Today is read with new Date().getDay() inside an effect, so the server renders no highlighted row and the client marks the row whose days contains the current weekday; the accent bar scales in and the labels.today tag appears beside the row label.
• The photograph is gated on its own load event and on the frame being in view, opens from the top over 1.6 s and drifts from -6% to 6% against the scroll.
• The address card rises 0.4 s into the sequence and the hours list starts after it; every hours row draws its own hairline as it rises, 100 ms apart, with the button row and note last and no line above them.
• The directions pill is a Button25 wrapped around next/link; the phone link is a plain anchor so tel: URLs work everywhere.
• With prefers-reduced-motion the photograph shows at once, the parallax is zero and no text moves.