Split Hero with Avatar Social Proof

Hero79: Split Hero with Avatar Social Proof

Two-column hero: heading, description, an overlapping avatar stack with a trust line, and CTA buttons sit on one side while a bordered product screenshot fills the other. displayPosition flips which side holds the content versus the image.

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

Base UI flavor

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

This installs the block to components/beste/block/hero79.tsx along with the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Hero79, hero79Demo } from "@/components/beste/block/hero79";

export default function Page() {
  return <Hero79 {...hero79Demo} />;
}

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

import { Hero79 } from "@/components/beste/block/hero79";

export default function Page() {
  return (
    <Hero79
      badge={{ label: "New Features", variant: "outline" }}
      heading="The modern platform for ambitious teams"
      description="Everything you need to build, launch, and scale your product."
      buttons={[
        { label: "Start Building", href: "/signup" },
        { label: "View Pricing", href: "/pricing", variant: "ghost" },
      ]}
      socialProof={{
        avatars: [
          { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face", alt: "User 1" },
          { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", alt: "User 2" },
        ],
        text: "Trusted by 1,000+ startups",
      }}
      image={{ src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop", alt: "Product screenshot" }}
      displayPosition="left"
    />
  );
}

Props

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

type SocialProof = {
  avatars: { src: string; alt: string }[];
  text: string;
};

Behavior notes

• displayPosition="right" flips which column holds the content by applying lg:[&>*:first-child]:order-2 to the grid, so the swap only takes effect at the lg breakpoint; on mobile the content always stacks above the image.
• Only the first button in buttons receives an ArrowRight icon (checked by array index, not a per-button icon prop), unlike several other heroes in this set that accept an icon field on each button.
• The avatar stack overlaps with -space-x-2 and a border-background ring on each circle so avatars read as a single cluster regardless of how many are passed.
• There is no backgroundMedia slot here: the layout is a plain two-column grid with the image rendered as a static bordered <img>, not an absolutely positioned fill layer like the cinematic heroes in this family.