Two Column Buyer FAQ

Realestate41: Two Column Buyer FAQ

A buyer FAQ for a development's sales page: a header with eyebrow, heading, intro and a contact line with a text link, then eight questions split across two shadcn accordion columns under hairlines that draw in row by row. Only one answer is open at a time across both columns, the chevron turns as an item opens and answers expand with the accordion's own height animation.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate41.tsx plus the badge24 rule eyebrow and the shadcn/ui accordion primitive behind the two question columns.

Quick start

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

import { Realestate41, realestate41Demo } from "@/components/beste/block/realestate41";

export default function Page() {
  return <Realestate41 {...realestate41Demo} />;
}

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

import { Realestate41 } from "@/components/beste/block/realestate41";

export default function Page() {
  return (
    <Realestate41
      eyebrow="Buyer questions"
      heading="The questions every buyer asks before reserving"
      description="Straight answers on reserving, paying, finishes and timing."
      contact={{
        text: "Still have a question? Call the sales team on +44 20 7946 0000.",
        link: { label: "Talk to the sales team", href: "/contact" },
      }}
      items={[
        { question: "Can I reserve before the show apartment opens?", answer: "Yes. Homes can be reserved from the plans now, and the show apartment opens in November." },
        { question: "What does the reservation fee cover?", answer: "It takes the home off the market, fixes the price and is credited against your deposit on exchange." },
        { question: "When do I pay the deposit?", answer: "10% on exchange, 10% at structure complete and the balance on completion." },
        { question: "When will the homes be ready?", answer: "Completion is expected in spring 2027, with the warehouse homes finishing first." },
      ]}
    />
  );
}

Props

type Item = {
  question: string;
  answer: string;
};

type Contact = {
  text: string;
  link?: { label: string; href: string };
};

Behavior notes

• The items are split in two with Math.ceil, so an odd count puts the extra question in the left column; each column is its own shadcn Accordion but both share one controlled value, so opening a question in one column closes the open one in the other.
• Every question row rises 0.1 s after the one above it in its column and draws a hairline on its top edge at the same time; a closing hairline draws under the last row of each column.
• The trigger is a full-width button with the question as the item title; the built-in chevron rotates 180 degrees over 0.5 s on the set's ease while the answer expands with the accordion's height animation.
• The contact line rises at 0.35 s after the intro at 0.25 s, and its link is an underlined text link to wherever contact.link.href points.
• With prefers-reduced-motion no row is offset or faded and the hairlines render complete; the accordion still opens and closes.