After burnout
You did the hard thing for too long, and now the rest will not come. We work on the nervous system first and the story second.
How we work with thisWho comes here
You did the hard thing for too long, and now the rest will not come. We work on the nervous system first and the story second.
How we work with thisNew city, new role, an ending. Coaching for the months when the old map has stopped working.
How we work with thisA loss that everyone else has moved on from. A room where it does not need to be finished.
How we work with thisNothing is wrong exactly, and nothing moves. Sometimes the work is finding out what you are waiting for.
How we work with thisA who-this-is-for section: a serif heading that settles in word by word beside the intro and a pill action, then four soft muted cards, each numbered, with a serif situation title, a short description and an arrow link that lifts on hover.
Four situations as numbered cards on soft panels, each with a serif title, a paragraph and a link whose arrow lifts on hover, under a heading and a pill.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/usecase54?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/usecase54?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/usecase54.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.
The installed file exports usecase54Demo alongside the block: the exact props behind the preview above. Spread it to get a working situations section in one line.
import { Usecase54, usecase54Demo } from "@/components/beste/block/usecase54";
export default function Page() {
return <Usecase54 {...usecase54Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Usecase54 } from "@/components/beste/block/usecase54";
export default function Page() {
return (
<Usecase54
eyebrow="Who comes here"
heading="Four situations we know well."
description="Not diagnoses, just seasons of a life."
button={{ label: "Talk about yours", href: "/contact" }}
situations={[
{
title: "After burnout",
description: "You did the hard thing for too long, and now the rest will not come.",
href: "/situations/burnout",
},
]}
labels={{ more: "How we work with this" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small-caps line above the heading |
heading | string | – | Section heading, rendered as an h2 through Text1 |
description | string | – | Short intro in the narrow right column |
button | ActionButton | – | Pill action under the intro |
situations | Situation[] | [] | Cards, four across from md |
labels | { more?: string } | {} | Link wording; the link is dropped when unset |
className | string | – | Extra classes for the outer <section> |
type Situation = {
title: string;
description: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
tone?: "primary" | "light" | "dark" | "outline";
};tabular-nums, so nothing has to be kept in sync when a situation is added or removed.mt-auto, so the four links sit on one line however uneven the descriptions above them are.motion-safe:, so the affordance is dropped for reduced motion while the link keeps working.0.1s stagger by index, so a four-up row resolves left to right.sm and four at md, so four situations fill exactly one row on a desktop.h3 under the section h2, keeping the outline correct wherever the block sits on a page.