Hero59: Enterprise Hero with Trust Badges

Centered enterprise/B2B hero that closes with a row of compliance and reliability signals (SOC 2, uptime, CDN, encryption), each rendered as an icon-plus-label pair rather than a generic logo strip.

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

Base UI flavor

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

This installs the block to components/beste/block/hero59.tsx and its shadcn/ui dependencies: Badge, Button.

Quick start

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

import { Hero59, hero59Demo } from "@/components/beste/block/hero59";

export default function Page() {
  return <Hero59 {...hero59Demo} />;
}

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

import { Hero59 } from "@/components/beste/block/hero59";

export default function Page() {
  return (
    <Hero59
      badge={{ label: "Enterprise Ready", variant: "outline" }}
      heading="Secure infrastructure for modern teams"
      description="Deploy with confidence using our battle-tested platform."
      buttons={[
        { label: "Get Started", href: "https://beste.co" },
        { label: "Contact Sales", href: "https://beste.co", variant: "outline" },
      ]}
      features={[
        { icon: "shield", label: "SOC 2 Compliant" },
        { icon: "zap", label: "99.99% Uptime" },
      ]}
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost";
};

type FeatureItem = {
  icon: "shield" | "zap" | "globe" | "lock";
  label: string;
};

Behavior notes

• Each FeatureItem.icon is one of four fixed string keys resolved through a local iconMap (shield, zap, globe, lock) to the matching Lucide icon; there is no way to pass a custom icon component through this prop.
• The trust row is a flex flex-wrap justify-center list, so items reflow onto additional lines on narrow viewports instead of scrolling or collapsing into a menu.
• The heading uses text-pretty (avoids a lone short word on the last line) while the description uses text-balance, a deliberate split rather than both using the same wrapping strategy.
• Layout is a single centered column with no image or split variant; features is entirely optional and the hero degrades to heading, description, and buttons without it.