Reverse Split Hero with Testimonial

Hero89: Reverse Split Hero with Testimonial

Fullscreen hero split 50/50: a video or image panel fills the left half, and the right half stacks a badge, heading, description, and buttons, closing with a bordered testimonial quote and avatar underneath. The layout stacks to a single column below lg, with the media panel on top.

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

Base UI flavor

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

This installs the block to components/beste/block/hero89.tsx and the shadcn/ui primitives it depends on: Badge, Button, and Avatar (for the testimonial's headshot with an initials fallback).

Quick start

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

import { Hero89, hero89Demo } from "@/components/beste/block/hero89";

export default function Page() {
  return <Hero89 {...hero89Demo} />;
}

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

import { Hero89 } from "@/components/beste/block/hero89";

export default function Page() {
  return (
    <Hero89
      badge={{ label: "New in V3", variant: "secondary" }}
      heading="Design, build, and launch in one place"
      description="A unified workspace that brings your entire product workflow together."
      buttons={[
        { label: "Get Started", href: "/signup", variant: "default" },
        { label: "View Pricing", href: "/pricing", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "/hero/workspace.jpg", alt: "Workspace preview" }}
      testimonial={{
        quote: "This platform completely transformed how our team ships products.",
        name: "Sarah Chen",
        title: "VP of Engineering at Acme",
        avatar: { src: "/avatars/sarah.jpg", alt: "Sarah Chen" },
      }}
    />
  );
}

Props

type Badge = { label: string; variant?: "default" | "secondary" | "outline" };
type Button = { label: string; href: string; variant?: "default" | "outline" };
type BackgroundMedia = { type: "image" | "video"; src: string; alt?: string };

type Testimonial = {
  quote: string;
  name: string;
  title: string;
  avatar?: { src: string; alt: string };
};

Behavior notes

• backgroundMedia.type: "video" renders a <video> with autoPlay loop muted playsInline; there is no poster attribute, so the first visible frame is whatever the video decodes first. "image" renders a plain <img> instead; neither uses next/image.
• The testimonial avatar falls back to initials (AvatarFallback) generated by splitting testimonial.name on spaces and joining the first letter of each word, so a name with no spaces yields a single-letter fallback.
• Layout is flex-col on mobile and lg:flex-row at the lg breakpoint; the media panel keeps a min-h-[400px] floor on small screens before the section becomes true 50/50 on desktop.
• The section itself carries min-h-screen, so it always fills the viewport height regardless of content length.
• The testimonial block is entirely optional and only renders when testimonial is passed; without it the right column ends after the buttons.