Hero78: Centered Hero with Founder Social Proof

Centered hero with a headline, CTA buttons, an overlapping avatar stack with a proof line, and a full-width product image beneath everything, each element rendering independently of the others.

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

Base UI flavor

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

This installs the block to components/beste/block/hero78.tsx and the shadcn/ui badge and button components it depends on.

Quick start

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

import { Hero78, hero78Demo } from "@/components/beste/block/hero78";

export default function Page() {
  return <Hero78 {...hero78Demo} />;
}

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

import { Hero78 } from "@/components/beste/block/hero78";

export default function Page() {
  return (
    <Hero78
      badge={{ label: "Now in Beta", variant: "secondary" }}
      heading="Ship products faster with AI-powered workflows"
      description="Automate the busywork and keep your team focused on what matters."
      buttons={[
        { label: "Get Started Free", href: "/signup" },
        { label: "Book a Demo", href: "/demo", variant: "outline" },
      ]}
      socialProof={{
        avatars: [
          { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", alt: "User" },
          { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "User" },
        ],
        text: "Loved by 500+ founders",
      }}
      image={{ src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=800&fit=crop", alt: "Product screenshot" }}
    />
  );
}

Props

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

Behavior notes

• socialProof.avatars renders as an overlapping stack (-space-x-2, each avatar in its own bordered circle) with no cap on count; a long array overflows visually rather than truncating with a "+N" indicator.
• The image is a plain <img> carrying fixed width={1200} height={800} attributes for aspect-ratio reservation, but it scales with w-full, so its rendered size follows the container, not those attributes.
• Only the first button (index 0) gets an ArrowRight icon.
• socialProof and image render independently of each other and of buttons; each block can be omitted on its own, for example shipping the hero with only a headline and CTA buttons.