Hero178: Evening Hero

An evening hero on the ink surface under film grain: the headline settles in word by word above the intro, a pale pill and a ruled fact table, with a portrait photograph drifting inside its frame alongside.

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

Base UI flavor

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

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

Quick start

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

import { Hero178, hero178Demo } from "@/components/beste/block/hero178";

export default function Page() {
  return <Hero178 {...hero178Demo} />;
}

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

import { Hero178 } from "@/components/beste/block/hero178";

export default function Page() {
  return (
    <Hero178
      eyebrow="Evening sessions now open"
      heading="The day is loud. This hour is not."
      description="Our evening practice runs from six until nine."
      button={{ label: "Reserve an evening", href: "/evenings", tone: "light" }}
      image={{ src: "/photos/dock.jpg", alt: "A wooden dock reaching into a still lake at dusk" }}
      facts={[
        { label: "Hours", value: "18:00 to 21:00, Monday to Thursday" },
        { label: "Length", value: "60 or 75 minutes" },
      ]}
    />
  );
}

Props

type Fact = {
  label: string;
  value: string;
};

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

Behavior notes

• button falls back to the light tone rather than primary, which is the correct default on a dark surface: an unspecified button comes out pale instead of taking the brand colour.
• The photograph sits on a bg-background/10 placeholder rather than bg-muted, because a light muted panel would flash bright against the ink surface while the file loads.
• Facts are a dl on a three-column grid with the value spanning two, so a long value wraps under itself instead of pushing its label out of alignment; the rules are written against background/20 for the dark surface.
• The grain filter takes its id from useId, so two grain surfaces on one page cannot collide on a global SVG id.
• The headline runs with trigger="mount", since a hero is above the fold, and the rest of the column is offset from 0.4 + heading.split(" ").length * 0.07.
• There is no photograph behind the section itself, only grain, so this is the cheapest of the set's dark heroes to load.
• The two columns are vertically centred, so a short fact table stays level with the portrait rather than riding at its top.