Showcase Hero With Video

About56: Showcase Hero With Video

Hero-scale about section: an oversized heading with dual CTAs and a desktop-only rating card, a clickable video thumbnail that opens a YouTube embed in a modal, a row of metric cards, and a labelled about block with rich paragraphs.

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

Base UI flavor

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

This installs the block to components/beste/block/about56.tsx, the button1 component it uses for the primary CTA, the badge6 component it uses for the about label, and its dependencies.

Quick start

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

import { About56, about56Demo } from "@/components/beste/block/about56";

export default function Page() {
  return <About56 {...about56Demo} />;
}

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

import { About56 } from "@/components/beste/block/about56";

export default function Page() {
  return (
    <About56
      heading="We build brands the world keeps coming back to"
      description="An independent product and brand studio for teams that take the work seriously."
      primaryCta={{ label: "Start a project", href: "/contact" }}
      secondaryCta={{ label: "Book a call", href: "/call" }}
      rating={{ value: "4.9", label: "Client rating" }}
      video={{
        thumbnail: "https://images.unsplash.com/photo-1558722141-dc9be8718862?w=2000&fit=crop",
        alt: "Studio team in a working session",
        videoUrl: "https://www.youtube.com/embed/ScMzIvxBSi4",
      }}
      metrics={[
        { title: "Engagement", subtitle: "After our last refresh", value: "+118%", badge: "First 90 days" },
        { title: "Revenue influenced", value: "$12M+" },
      ]}
      aboutLabel="About"
      paragraphs={["Polaris is an independent product and brand studio."]}
    />
  );
}

Props

type CtaLink = { label: string; href: string };
type Metric = { title: string; subtitle?: string; value: string; badge?: string };

Behavior notes

• Clicking the video thumbnail sets isPlaying to true and renders a fixed, full-viewport modal with a YouTube iframe pointed at ${video.videoUrl}?autoplay=1; closing happens by clicking the backdrop or the X button (the inner panel calls stopPropagation so clicks inside it don't close the modal).
• The rating card only renders on lg and above (hidden lg:flex); it is not shown at all on mobile or tablet widths.
• secondaryCta is not rendered through Button1; it's a manually styled Link with an outline look, distinct from primaryCta's pill button.
• Metric cards pin their large value to the bottom of the card (mt-auto) regardless of whether subtitle is present, so cards with and without a subtitle still align on the value baseline.
• paragraphs entries render via dangerouslySetInnerHTML, so <strong> (or other inline HTML) inside a paragraph string is honored, as the demo does to bold "your team".