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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Small label above the heading, outside the dark card. |
| heading | string | undefined | Heading above the dark card. |
| quote | string | none | Pull-quote inside the dark card. |
| founder | Founder | none | Name and role shown as the quote's signature. |
| portrait | MediaSlotImage | undefined | Founder portrait filling the left side of the card. |
| stats | StatItem[] | [] | 2-3 stat tiles along the bottom of the card, below a divider. |
| className | string | none | Extra 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.
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.