Migration Hero With Step TrackerPRO

Hero158: Migration Hero With Step Tracker

A hero that opens on an oversized light heading, then drops a hairline into a narrow copy column carrying one action and a reassurance note, beside a wide image tile floating a live horizontal step tracker.

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

Base UI flavor

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

This installs the block to components/beste/block/hero158.tsx, the progress16 step-tracker piece it floats on the tile (installed to components/beste/piece/progress16.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Hero158, hero158Demo } from "@/components/beste/block/hero158";

export default function Page() {
  return <Hero158 {...hero158Demo} />;
}

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

import { Hero158 } from "@/components/beste/block/hero158";
import { Progress16 } from "@/components/beste/piece/progress16";

export default function Page() {
  return (
    <Hero158
      badge={{ label: "Switching over" }}
      heading="Move your practice across without closing for a week"
      description="Export what you have, map it once, and watch the workspace fill in."
      button={{ label: "Start a migration", href: "/migrate" }}
      note="No card required. We stay on the call until your first booking lands."
      media={
        <Progress16
          title="Migration"
          steps={["Export", "Map fields", "Review", "Go live"]}
          activeIndex={2}
          caption="Review finishes today, and go live is booked for Friday morning."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The heading sits above the grid, not inside it, and is capped at max-w-4xl while scaling text-4xl through lg:text-7xl. It is the only element allowed the full container width, which is what makes the hairline underneath read as a rule rather than a divider.
• The lower half is a md:grid-cols-3 split where the copy takes one column and the media tile takes two through md:col-span-2. Below md both stack in source order, so the copy always precedes the tile.
• The copy column is flex flex-col items-start, so the action never stretches to the column width. Removing items-start here would let Button21 inflate, since flex children default to align-items: stretch.
• note carries its own border-t and top padding, which means the second hairline only appears when a note is actually passed.
• The media tile is a fixed band (h-64, then md:h-72) with the image absolutely positioned behind and the piece layered at z-10. The piece centers itself inside its own root, so any piece from the catalogue drops in without extra wrapping.
• image renders only when media is present, since the tile itself is gated on media. Passing an image with no media leaves the row empty rather than showing a bare photograph.