Hero180: Centred Serif Hero

The plainest hero in the set: a centred headline that settles in word by word, an intro, two pills and an avatar trust line, with no photograph and nothing to load.

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

Base UI flavor

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

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

Quick start

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

import { Hero180, hero180Demo } from "@/components/beste/block/hero180";

export default function Page() {
  return <Hero180 {...hero180Demo} />;
}

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

import { Hero180 } from "@/components/beste/block/hero180";

export default function Page() {
  return (
    <Hero180
      eyebrow="Therapy and coaching in Lisbon"
      heading="A steady hour in an unsteady week."
      description="One room, one person who listens all the way through, and no hurry."
      buttons={[
        { label: "Arrange a first call", href: "/call" },
        { label: "How it works", href: "/how", tone: "outline" },
      ]}
      avatars={[{ src: "/people/one.jpg", alt: "Portrait of a client" }]}
      proof="Trusted by 140 people this year" 
    />
  );
}

Props

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

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

Behavior notes

• Nothing here loads except the avatars: no background photograph, no grain filter, no scroll listener. It is the hero to reach for when the page below is already image-heavy and the top should paint immediately.
• The headline runs with trigger="mount", since a hero is above the fold and a scroll-triggered stagger would never fire.
• Everything after it is offset from 0.4 + heading.split(" ").length * 0.07, so the intro, the buttons and the trust line arrive in reading order however long the headline runs.
• The column is capped at max-w-4xl while the intro is held to max-w-2xl inside it, so the headline can run wide while the paragraph keeps a readable measure.
• Buttons wrap and centre, so two actions stack cleanly on a phone rather than shrinking side by side.
• Avatars overlap with -space-x-3, each ringed in border-background, so the separation comes from the ring rather than from a gap.
• Every part is optional, so this collapses to a headline and a single button without any layout compensation.