Realestate10: Development Hero with Fact Bar

A property development hero on a plain ground: an eyebrow with a short rule, a large sans headline beside the intro and two pill buttons, then a wide photograph that is unveiled from the top once it has loaded and drifts slowly against the scroll, and a four-figure fact bar (homes, bedrooms, prices from, completion) under hairlines that draw in as they enter the viewport.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate10.tsx plus the badge24 rule eyebrow above the headline, the button25 quiet pill behind both buttons, and the shadcn/ui button primitive they build on.

Quick start

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

import { Realestate10, realestate10Demo } from "@/components/beste/block/realestate10";

export default function Page() {
  return <Realestate10 {...realestate10Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Realestate10 } from "@/components/beste/block/realestate10";

export default function Page() {
  return (
    <Realestate10
      eyebrow="Alder Row, Riverside"
      heading="Twenty-four homes between the old warehouse and the river."
      description="Two, three and four bedroom apartments across a restored brick warehouse and a new courtyard wing."
      buttons={[
        { label: "Register your interest", href: "/register", icon: ArrowRight },
        { label: "View the residences", href: "/residences", tone: "outline" },
      ]}
      image={{
        src: "https://oud.pics/b/realestate/alder-courtyard-exterior.webp",
        alt: "A brick warehouse and a pale concrete wing around a birch courtyard",
      }}
      facts={[
        { value: "24", label: "Homes" },
        { value: "2 to 4", label: "Bedrooms" },
        { value: "$640,000", label: "Prices from" },
        { value: "Spring 2027", label: "Completion" },
      ]}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "dark" | "outline" | "primary" | "neutral";
  icon?: LucideIcon;
};

type Fact = { value: string; label: string };

Behavior notes

• The photograph is gated on its own load event: the frame stays clipped to zero height until the image has loaded, then opens from the top over 1.6 seconds while the image settles from a 1.18 to a 1.12 scale. If the image is already cached the complete flag opens it on mount.
• The image frame is the scroll target for a small parallax: the picture travels from -6% to 6% as the frame crosses the viewport. The constant 1.12 scale keeps the edges covered while it moves.
• The frame is a 4:3 box on small screens and 21:9 from the md breakpoint, so the header and the fact bar stay close together on desktop.
• The eyebrow's rule draws and its text rises on mount (badge24 with trigger="mount"), then headline, intro and buttons rise in with staggered delays; the fact bar and its hairlines animate when they enter the viewport, once, each hairline growing from the left.
• With prefers-reduced-motion every entrance, the clip reveal and the parallax are disabled and the section renders in its final state.