The Team Behind It

Realestate54: The Team Behind It

The four practices behind a development (developer, architect, landscape and interiors) as four hairline-topped columns under a header grid. Each column carries the role as a caption, the practice name, a short paragraph and a text link with an arrow that nudges up and to the right on hover; the columns rise in order as they scroll into view, with each link following its column a beat later.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate54.tsx plus the badge24 eyebrow it renders above the heading; the links are plain text links, so no shadcn/ui primitives are needed.

Quick start

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

import { Realestate54, realestate54Demo } from "@/components/beste/block/realestate54";

export default function Page() {
  return <Realestate54 {...realestate54Demo} />;
}

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

import { Realestate54 } from "@/components/beste/block/realestate54";

export default function Page() {
  return (
    <Realestate54
      eyebrow="The team behind it"
      heading="The 4 practices behind Alder Row"
      description="A developer, an architect, a landscape studio and an interiors practice who have worked together before."
      practices={[
        {
          role: "Developer",
          name: "Hartwell & Lowe",
          description: "20 years of taking on the buildings nobody else wanted. Alder Row is their ninth scheme.",
          link: { label: "About the developer", href: "/about" },
        },
        {
          role: "Architects",
          name: "Nils Frahm Studio",
          description: "Kept the warehouse hall at its full height and designed the courtyard wing in pale concrete.",
          link: { label: "See the practice", href: "/architects" },
        },
        {
          role: "Landscape",
          name: "Hania Rani Landscapes",
          description: "Planted the courtyard with birch over gravel and opened the river walk to the public.",
          link: { label: "Walk the courtyard", href: "/courtyard" },
        },
      ]}
    />
  );
}

Props

type Practice = {
  role: string;
  name: string;
  description: string;
  link: { label: string; href: string };
};

Behavior notes

• Columns enter once they scroll into view (10% margin), each rising 16 pixels 0.12 seconds after the previous one; the hairline on top of a column scales in from the left on the same delay.
• Each link rises 0.2 seconds after its own column, so the links are the last things to settle across the row; the arrow nudges half a pixel up and right over 0.5 seconds on hover.
• Links sit on mt-auto, so in a row with paragraphs of different length they align along the bottom of the grid.
• The grid is one column on phones, two on tablets and four from the md breakpoint; more than four practices wrap onto a second row with the same stagger.
• With prefers-reduced-motion the columns, hairlines and links render in place with no entrance.