Staaarter

Founder Statement About

A single dark, inverted-token card built around a founder portrait: a pull-quote with a Quote glyph, a name-and-role signature, and 2-3 supporting stats along the bottom edge of the same card, with an optional eyebrow and heading above it.

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 media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/founder-statement-about.json

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

Usage

The file also exports about49Demo, 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 { About49, about49Demo } from "@/components/blocks/about/about49";

export default function Page() {
  return <About49 {...about49Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall label above the heading, outside the dark card.
headingstringundefinedHeading above the dark card.
quotestringnonePull-quote inside the dark card.
founderFoundernoneName and role shown as the quote's signature.
portraitMediaSlotImageundefinedFounder portrait filling the left side of the card.
statsStatItem[][]2-3 stat tiles along the bottom of the card, below a divider.
classNamestringnoneExtra classes for the outer section element.

Types

type Founder = { name: string; role: string };

type StatItem = { title: string; value: string };

Behavior notes

  • Unlike About4's centered blockquote with a small circular avatar, About49 uses a full portrait photo via MediaSlot inside a contained dark card, and the whole card, not just the text, carries the inverted bg-foreground/text-background treatment.
  • stats render inside the same dark card as the quote, below a border-background/20 divider, whereas About19 keeps its leadership quote card and its stats row as two separate, differently styled sections.
  • The stats grid is a fixed 3-column layout regardless of item count, the same fixed-grid convention About14 uses for its stat row, rather than reflowing based on how many stats are supplied.