Split Hero with Testimonial Card

Hero38: Split Hero with Testimonial Card

Two-column hero built for trust and social proof: standard heading/description/CTA copy on one side, and a bordered testimonial card on the other with a large translucent quote mark, the quote text, and an author row with avatar, name, role, and company.

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

Base UI flavor

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

This installs the block to components/beste/block/hero38.tsx and the Badge and Button shadcn/ui primitives it uses.

Quick start

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

import { Hero38, hero38Demo } from "@/components/beste/block/hero38";

export default function Page() {
  return <Hero38 {...hero38Demo} />;
}

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

import { Hero38 } from "@/components/beste/block/hero38";

export default function Page() {
  return (
    <Hero38
      heading="Join thousands of successful teams"
      description="See why leading companies trust us with their workflows."
      buttons={[{ label: "Get Started", href: "/signup" }]}
      testimonial={{
        quote: "Our team productivity increased by 40% within the first month.",
        author: {
          name: "Sarah Mitchell",
          role: "VP of Engineering",
          avatar: {
            src: "https://images.unsplash.com/photo-1767920787831-644f2b59d960?w=200&auto=format&fit=crop",
            alt: "Sarah Mitchell",
          },
        },
        company: "TechCorp",
      }}
    />
  );
}

Props

type Testimonial = {
  quote: string;
  author: {
    name: string;
    role: string;
    avatar?: { src: string; alt: string };
  };
  company?: string;
};

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

Behavior notes

• The testimonial card only renders when the testimonial prop is supplied; there is no placeholder or fallback state if it is omitted, the column is simply empty.
• The author avatar is only rendered when testimonial.author.avatar is set; there is no initials fallback if it is missing, the name/role text simply appears without an avatar.
• testimonial.company, when present, is appended inline to the role line as "{role} at {company}"; when absent, the role renders alone with no trailing text.
• displayPosition: "right" swaps the text and testimonial columns via two independent lg:order-2/lg:order-1 classes, one per column.
• No animation is used; the layout is a static two-column grid, and the quote icon (text-primary/20) is purely decorative.