Founder Quote About
A large rectangular founder portrait sits beside a pull-quote, a plain-text signature line, and a small strip of company facts such as founded year, HQ, and team size.
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-quote-about.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about45.tsx instead.
Usage
The file also exports about45Demo, 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 { About45, about45Demo } from "@/components/blocks/about/about45"; export default function Page() { return <About45 {...about45Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quote | string | none | Founder pull-quote. |
| founder | Founder | none | Name and role shown as the signature line under the quote. |
| portrait | MediaSlotImage | undefined | Rectangular founder portrait; falls back to a placeholder via MediaSlot. |
| facts | Fact[] | none | Small label/value facts strip below a top border; the strip is skipped entirely when the array is empty. |
| className | string | none | Extra classes for the outer section element. |
Types
type Founder = { name: string; role: string }; type Fact = { label: string; value: string };
Behavior notes
- Unlike About4, which pairs its quote with a circular Avatar and an optional team grid, this block uses a full rectangular MediaSlot portrait beside the quote and has no team roster at all, replacing it with a facts strip instead.
- The signature under the quote is plain text (name plus role), not an Avatar or avatar-initials fallback, so this block has no avatar dependency despite being a founder/people-focused layout.
- facts renders as a flex-wrapped row of label/value pairs above a top border, distinct from About13's dl of company details, which lives in its own bordered box beside the story rather than under a quote.
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.