Neighborhood Places List

Realestate27: Neighborhood Places List

A neighborhood list for a development's location page: a wide photograph that is unveiled from the top once loaded and drifts against the scroll, the eyebrow, heading and intro in the header grid under it, then eight places in two columns. Each row carries its category, name and walking distance as a light figure, plus a one-line note that fades in while the row is hovered or focused. Hairlines draw with the rows, which rise in reading order, 0.08 s apart.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate27.tsx plus the badge24 rule eyebrow and the shadcn/ui button primitive it depends on.

Quick start

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

import { Realestate27, realestate27Demo } from "@/components/beste/block/realestate27";

export default function Page() {
  return <Realestate27 {...realestate27Demo} />;
}

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

import { Realestate27 } from "@/components/beste/block/realestate27";

export default function Page() {
  return (
    <Realestate27
      eyebrow="The neighborhood"
      heading="Eight places the sales team keeps sending people to"
      description="Walking times are from the courtyard gate; hover a place for the note we would give you in person."
      image={{
        src: "https://oud.pics/b/realestate/alder-river-walk.webp",
        alt: "The stone promenade along the river beside the brick warehouse",
      }}
      places={[
        { category: "Bakery", title: "Ferment", distance: "3 min", description: "Sourdough from 7 and cardamom buns on Saturdays.", href: "/area/ferment" },
        { category: "Park", title: "Granary Square", distance: "8 min", description: "Lawns to the water and a playground.", href: "/area/granary-square" },
        { category: "Pool", title: "Mill Lane lido", distance: "9 min", description: "A 50 metre heated outdoor pool, open all year." },
      ]}
    />
  );
}

Props

type Place = {
  category: string;
  title: string;
  distance: string;
  description: string;
  href?: string;
};

Behavior notes

• The photograph is gated on its own load event and on the frame being in view, then opens from the top over 1.6 s while the image settles from a slight zoom; it drifts from -6% to 6% against the scroll, or stays still with prefers-reduced-motion.
• The rows rise in reading order, 0.08 s apart: left, right, left, right on wide screens, top to bottom on phones; each row's hairline draws from the left at the same moment.
• Each note is rendered at zero opacity and fades in over 0.5 s while its row is hovered. A place with an href renders as a link, so keyboard focus shows the note as well; without an href the row is static text.
• Distances are plain strings ("3 min", "400 m") shown as a light figure on the right of the row; they do not count up.