Staaarter

Property Register Interest

A two-column pre-launch screen for a real estate development. One side shows a full-bleed photo of the development with an accent badge overlaid in the corner. The other side carries the project name, an eyebrow, heading, a key-facts grid (units, bedrooms, completion date, starting price), and a working register-interest email form with a success state.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/property-register-interest.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon66.tsx instead.

Usage

The file also exports comingsoon66Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon66, comingsoon66Demo } from "@/components/blocks/coming-soon/comingsoon66";

export default function Page() {
  return <ComingSoon66 {...comingsoon66Demo} />;
}

Props

PropTypeDefaultDescription
projectNamestringnoneName of the development, shown above the eyebrow.
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Register your interest"Main heading.
descriptionstring"Be the first to hear about pricing..."Supporting copy under the heading.
badgeLabelstring"New development"Label on the badge overlaid on the photo.
keyFactsKeyFact[]noneLabel/value pairs rendered in the key-facts grid.
imageMediaSlotImageundefinedPhoto filling the left-hand panel.
classNamestringnoneExtra classes for the outer section element.

Types

export interface KeyFact {
  label: string;
  value: string;
}

Behavior notes

  • The register-interest email form is real client state (useState): submitting swaps it for a confirmation message, nothing is sent to a server.
  • The key-facts grid and the photo badge are both static, decorative content.
  • The photo panel is hidden below the lg breakpoint (hidden lg:block), so on small screens only the form column renders.