Showcase Hero With Video

Large heading with dual CTAs and a small rating/testimonial card, next to a static media card styled to look playable with a centered play icon and floating metric badges over its corners, followed by a labelled about block with large paragraphs.

By Staaarter Team

About

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/showcase-hero-with-video.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about56.tsx instead.

Usage

The file also exports about56Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { About56, about56Demo } from "@/components/blocks/about/about56";

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

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading.
heading	string	none	Large hero heading.
description	string	undefined	Supporting paragraph below the heading.
buttons	ButtonItem[]	[]	Dual CTA buttons below the description.
testimonial	Testimonial	undefined	Small rating and quote card below the buttons.
video	{ src: string; alt: string }	none	Static image rendered inside the media card, with a centered play-icon overlay drawn on top.
metrics	MetricBadge[]	[]	Up to two small metric badges floated over the media card's corners.
aboutLabel	string	undefined	Small label above the paragraph block beneath the hero.
paragraphs	string[]	none	Large paragraphs in the labelled about block at the bottom.
className	string	none	Extra classes for the outer section element.

Types

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

type Testimonial = {
  quote: string;
  name: string;
  rating: number;
};

type MetricBadge = {
  label: string;
  value: string;
};

Behavior notes

Despite the "video" name, this renders a static MediaSlot image with a decorative Play icon overlay, never a real <video> element or any client-side playback state, per the block-building rule that playable-media briefs get a static equivalent.
metrics are positioned with fixed absolute offsets keyed to array index (first badge top-left, second bottom-right), unlike About54's single inset card which anchors from only one corner of its photo.
The bottom about block is a distinct labelled section below a top border, structurally closer to About14's stats-then-story-card split than to About15's single-column letter, since it sits after a two-column hero rather than being the whole section.

More About Blocks

View all →

team-mission

Team & Mission

Two-column about section with mission statement, company stats, and team member grid.

values-with-team-photo

Values with Team Photo

Full-width photo with a three-column values grid below.

timeline-milestones

Timeline & Milestones

Company stats on the left and a vertical timeline of milestones on the right.

founder-quote-team

Founder Quote & Team

Founder blockquote with avatar, followed by a horizontal team member row.

image-text-split

Image & Text Split

Tall image on the left, company story, inline stats, and CTAs on the right.

numbered-principles

Numbered Principles

Heading on the left and numbered company principles on the right.