Hero181: Benefits Split Hero

A benefits split: headline, intro, three ticked lines and a pill on one side, a portrait photograph drifting inside its frame on the other.

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

Base UI flavor

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

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

Quick start

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

import { Hero181, hero181Demo } from "@/components/beste/block/hero181";

export default function Page() {
  return <Hero181 {...hero181Demo} />;
}

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

import { Hero181 } from "@/components/beste/block/hero181";

export default function Page() {
  return (
    <Hero181
      eyebrow="Coaching that ends"
      heading="Twelve weeks, one decision, a clear next step."
      description="Structured coaching for a change you have been circling for too long."
      benefits={[
        "A written plan after the first session",
        "Fortnightly sessions, in the room or online",
        "A closing session to name what changed",
      ]}
      button={{ label: "Start the twelve weeks", href: "/coaching" }}
      image={{ src: "/photos/lake.jpg", alt: "A calm lake reflecting mountains at first light" }}
    />
  );
}

Props

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

Behavior notes

• Benefits are plain strings, and the whole list animates as one block rather than line by line, because three short lines under a headline read as a single claim rather than as three arrivals.
• The tick sits in a bordered size-6 circle with shrink-0 and a mt-1 nudge, so a benefit that wraps keeps its mark aligned to the first line rather than centred against the pair.
• The headline runs with trigger="mount", and everything after it is offset from 0.4 + heading.split(" ").length * 0.07, so the column resolves in reading order.
• The headline is set one step smaller than the centred heroes in the family (text-6xl to text-7xl rather than text-8xl), because it shares its row with a photograph instead of running the full width.
• The two columns are vertically centred, so a short benefit list stays level with the portrait instead of riding at its top edge.
• The photograph drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount for cached files.
• Without image the copy column keeps its six-column position rather than stretching across the grid.