Two-column hero section with social proof, star ratings, and overlapping avatars.

SCB Hero 01

Two-column hero section with social proof, star ratings, and overlapping avatars. Ideal for SaaS and product landing pages.

Preview

Open in

Loading preview...

Installation

Terminal

$npx shadcn@latest add @vandoko/scb-hero-01

Usage

import { Hero3 } from "@/components/scb-hero-01";

export default function Page() {
  return (
    <Hero3
      heading="Build faster with our platform"
      description="The all-in-one solution for modern teams."
      image={{ src: "/hero-image.jpg", alt: "Hero" }}
    />
  );
}

Features

Two-Column Layout - Text on left, image on right
Social Proof - Overlapping avatars with customer count
Star Ratings - 5-star display with review count
Dual CTAs - Primary and secondary action buttons
Responsive - Stacks on mobile devices

Props

5 props

Prop	Type	Default	Description
`heading`req	`string`	—	Main headline text
`description`req	`string`	—	Supporting description text
`image`req	`{ src: string; alt: string }`	—	Hero image config
`buttons`	`{ primary?: Button; secondary?: Button }`	—	CTA buttons config
`reviews`	`{ count: number; avatars: Avatar[]; rating?: number }`	—	Social proof config