Hero138: Editorial Trust Hero

Static full-bleed editorial hero over a photo background: an eyebrow badge, a giant display heading, a supporting paragraph, up to two CTA buttons with different tones, and an overlapping avatar row paired with a trust line beneath them.

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

Base UI flavor

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

This installs the block to components/beste/block/hero138.tsx, the badge7 eyebrow and button12 CTA buttons it renders through, and its dependencies.

Quick start

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

import { Hero138, hero138Demo } from "@/components/beste/block/hero138";

export default function Page() {
  return <Hero138 {...hero138Demo} />;
}

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

import { Hero138 } from "@/components/beste/block/hero138";

export default function Page() {
  return (
    <Hero138
      badge={{ label: "Studio Auralis" }}
      heading="Quiet work, loud results."
      description="We build calm, considered brand systems for teams who would rather be remembered than be everywhere."
      backgroundImage={{
        src: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1920&h=1200&fit=crop",
        alt: "Concrete spiral staircase shot from below",
      }}
      buttons={[
        { label: "Start a project", href: "/contact" },
        { label: "View the studio", href: "/studio" },
      ]}
      items={[
        {
          src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&h=120&fit=crop",
          alt: "Portrait of a studio founder",
        },
        {
          src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop",
          alt: "Portrait of a brand lead",
        },
      ]}
      labels={{ trust: "Trusted by teams across four continents." }}
    />
  );
}

Props

type Badge = { label: string };
type HeroImage = { src: string; alt: string };
type ActionButton = { label: string; href: string };
type Avatar = { src: string; alt: string };

Behavior notes

• This hero is fully static: there is no useState or useEffect, no rotation, and no crossfade, unlike most of the other heroes in this set; the background is a single fixed image with a legibility gradient overlay.
• Buttons render with different visual weight by position rather than an explicit "primary" flag: the first entry in buttons gets tone="dark" on Button12 and every subsequent entry gets tone="outline".
• The avatar row renders as overlapping circles (-space-x-3 with a border-2 border-background ring on each) and only appears, together with the trust line, when items has entries or labels.trust is set.
• Badge, heading, description, buttons, and the avatar/trust row are each wrapped in their own conditional, so any subset of props can be omitted without leaving empty gaps in the layout.