Two Linked Doors

Feature306: Two Linked Doors

Two tall cards, each one a whole link: a drifting photograph, a quiet label, a serif title, a short dotted list and a closing arrow link.

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://ui.beste.co/r/feature306?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature306?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature306.tsx plus the text1 word stagger it uses.

Quick start

The installed file exports feature306Demo alongside the block: the exact props behind the preview above. Spread it to get a working two Linked Doors in one line.

import { Feature306, feature306Demo } from "@/components/beste/block/feature306";

export default function Page() {
  return <Feature306 {...feature306Demo} />;
}

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

import { Feature306 } from "@/components/beste/block/feature306";

export default function Page() {
  return (
    <Feature306
      eyebrow="Two ways to begin"
      heading="One of these is the right first message."
      doors={[
        {
          label: "If you are ready",
          title: "Book a first hour",
          description: "Sixty minutes, and nothing decided in them.",
          points: ["No referral needed", "Evenings and Saturdays"],
          href: "/book",
          linkLabel: "Choose a time",
          image: { src: "/doors/ready.jpg", alt: "A quiet room with the door ajar" },
        },
      ]}
    />
  );
}

Props

type Door = {
  label: string;
  title: string;
  description: string;
  points?: string[];
  href: string;
  linkLabel: string;
  image: Image;
};

type Image = { src: string; alt: string };

Behavior notes

• Each door is one Link, so the closing linkLabel is a label inside the card rather than a second destination.
• The block ships no pill of its own: the two cards are the action, which is why it carries text1 but not button22.
• points is optional and renders as a dotted list, so a door can be a paragraph alone when there is nothing to itemise.
• The closing link is pushed to the foot by mt-auto, so two doors with different copy lengths still line their actions up.
• The photograph drifts -8% to 8% against a 1.18 scale inside its own frame, independently per card.
• Photos clear from blur(24px) on decode, with a complete check for cached files.