Residence Photo Spotlight

Realestate36: Residence Photo Spotlight

A residence spotlight: one large 4:3 photograph with a row of five thumbnails under it, one per home type; choosing a thumbnail cross-fades the photograph and swaps the details beside it (type, title, starting price, a short line and fact pills), with an enquiry button at the foot of 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/realestate36?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate36.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the enquiry button, and the shadcn/ui button primitive it builds on.

Quick start

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

import { Realestate36, realestate36Demo } from "@/components/beste/block/realestate36";

export default function Page() {
  return <Realestate36 {...realestate36Demo} />;
}

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

import { Realestate36 } from "@/components/beste/block/realestate36";

export default function Page() {
  return (
    <Realestate36
      eyebrow="The residences"
      heading="Five homes, one way of living"
      residences={[
        {
          name: "Type A",
          title: "Two bedroom",
          price: "$640,000",
          description: "A corner home in the warehouse with tall arched windows.",
          facts: ["2 bedrooms", "1 bathroom", "78 m²"],
          image: { src: "/homes/type-a.webp", alt: "The Type A living room" },
        },
        {
          name: "Type E",
          title: "Penthouse",
          price: "$1,650,000",
          description: "The top of the warehouse, with a roof terrace on the river side.",
          facts: ["2 bedrooms", "62 m² terrace", "146 m²"],
          image: { src: "/homes/type-e.webp", alt: "The penthouse roof terrace" },
        },
      ]}
      button={{ label: "Enquire about this home", href: "/enquire" }}
      labels={{ choose: "Choose a home type" }}
    />
  );
}

Props

type Residence = {
  name: string;
  title: string;
  price: string;
  description: string;
  facts: string[];
  image: { src: string; alt: string };
};

Behavior notes

• Every photograph is mounted and stacked inside the 4:3 frame; the chosen one fades in and settles from a 1.04 scale while the others fade out, so switching never waits on a download after the first load.
• The frame opens from the top once the block is in view and the first photograph has loaded. Thumbnails rise in one after another; the chosen one is fully opaque with a foreground ring, the others sit at 60% and brighten on hover. Each thumbnail is a button with aria-pressed and the type's name and title as its label.
• The details (type, title, price, description, fact pills) cross-fade with AnimatePresence when the selection changes; the price is set in the figure style on one line.
• On desktop the photo takes eight of twelve columns and the details four, with the button pushed to the foot of the column; on phones the details follow the thumbnails.
• With prefers-reduced-motion the frame and text render in place and selection changes swap without movement.