Fourth Chair Roles

Careers58: Fourth Chair Roles

A hiring section for a practice that adds one chair at a time: the invitation, a pill action and a photograph on one side, a ruled list of open roles with an arrow that lifts on hover on the other, closed by a note about how applications are actually answered.

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

Base UI flavor

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

This installs the block to components/beste/block/careers58.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Careers58, careers58Demo } from "@/components/beste/block/careers58";

export default function Page() {
  return <Careers58 {...careers58Demo} />;
}

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

import { Careers58 } from "@/components/beste/block/careers58";

export default function Page() {
  return (
    <Careers58
      eyebrow="Work with us"
      heading="A fourth chair, for the right person."
      description="We grow slowly and only when the listening can keep up."
      button={{ label: "Send an open application", href: "mailto:hello@beste.co", tone: "dark" }}
      image={{ src: "/rooms/table.jpg", alt: "A calm room with a long stone table and linen chairs" }}
      roles={[
        { title: "Psychotherapist, evenings", type: "Part time", place: "Lisbon", href: "/roles/therapist" },
        { title: "Practice coordinator", type: "Full time", place: "Lisbon", href: "/roles/coordinator" },
      ]}
      note="Every application is read by a practitioner, and everyone hears back within two weeks."
    />
  );
}

Props

type Role = {
  title: string;
  type: string;
  place: string;
  href: string;
};

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

Behavior notes

• The whole role row is one Link, so the hit target is the full strip rather than the title alone, and the arrow at the end is decoration inside that link rather than a second target.
• type and place are joined with a middle dot inside a single span, so they wrap together and never leave the dot stranded at the end of a line.
• The arrow only lifts under motion-safe:, so the hover affordance is dropped for reduced motion while the row stays clickable.
• Roles are a ul with divide-y and a border on both ends, so the rules come from the list; adding a role adds a rule and nothing needs styling per position.
• The photograph sits under the copy rather than beside it, which is what lets the roles list start at the top of the section: the image fills the space the list leaves in the shorter column.
• It drifts -10% to 10% against a 1.2 scale, and clears from blur(24px) on decode with a complete check on mount so a cached file is not left blurred.
• The list and the note are independent, so a practice with no openings can ship this block with just the invitation, the image and the note.