Brochure Download Form

Realestate46: Brochure Download Form

A brochure request for a development: heading and lead on the left over a numbered contents list of six chapters with their page counts and a total, hairlines between the rows. On the right a 4:3 photograph of the dining room at dusk opens from the top once it has loaded, with the email field, the submit pill and a note about the file under it as a one-line GET form, so the two columns carry equal weight.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate46.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the submit button, and the shadcn/ui button and input primitives behind them and the email field.

Quick start

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

import { Realestate46, realestate46Demo } from "@/components/beste/block/realestate46";

export default function Page() {
  return <Realestate46 {...realestate46Demo} />;
}

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

import { Realestate46 } from "@/components/beste/block/realestate46";

export default function Page() {
  return (
    <Realestate46
      eyebrow="The brochure"
      heading="Sixty-four pages on the buildings, the homes and the river."
      description="Floor plans for every type, the full specification and the story of the warehouse."
      image={{
        src: "https://oud.pics/b/realestate/alder-dining-dusk.webp",
        alt: "A long oak dining table at dusk under a linen pendant",
      }}
      chapters={[
        { title: "The place and the river walk", pages: 8 },
        { title: "Floor plans, Type A to Type E", pages: 20 },
        { title: "Specification and finishes", pages: 12 },
      ]}
      form={{ action: "/brochure", params: { email: "email" } }}
      labels={{ contents: "What is inside", pages: "pages", email: "Email", submit: "Send me the brochure" }}
      note="A 24 MB PDF. We will also send you the price list."
    />
  );
}

Props

type Chapter = { title: string; pages: number };

type BrochureForm = { action: string; params?: { email?: string } };

type Labels = { contents?: string; pages?: string; email?: string; submit?: string };

Behavior notes

• The form is a plain method="get" form posting to form.action with one type="email" field carrying native required; its parameter name comes from form.params.email and falls back to email.
• The contents caption shows the sum of every chapter's pages next to labels.pages, so the total always matches the list.
• Rows rise 80 ms apart and each draws its own hairline as it appears; the form field and note follow after the last row with no line above them, so the sequence length adapts to the number of chapters.
• The photograph is gated on its own load event and on the frame being in view, opens from the top over 1.6 s and drifts from -6% to 6% against the scroll; on small screens it moves below the form.
• With prefers-reduced-motion the photograph shows at once, the parallax is zero and no text moves.