Q&A About Us
Asymmetric two-column layout with heading on the left and question-answer pairs on the right. A conversational way to introduce your company.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/qa-about-us.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about22.tsx instead.
Usage
The file also exports about22Demo, 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 { About22, about22Demo } from "@/components/blocks/about/about22"; export default function Page() { return <About22 {...about22Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; variant?: BadgeVariant } | none | Optional pill above the heading in the left column. |
| heading | string | none | Heading in the left column. |
| description | string | undefined | Intro text under the heading. |
| qa | QAItem[] | none | Question-answer pairs rendered as a definition list in the right column. |
| className | string | none | Extra classes for the outer section element. |
Types
type QAItem = { question: string; answer: string };
Behavior notes
- The grid is intentionally asymmetric (a narrower left column, a wider right column via a 1fr/1.4fr template) rather than the even lg:grid-cols-2 split used by About1 and About5, since the right column needs more room for full question-answer pairs.
- All Q&A pairs render simultaneously in a plain definition list with dividers between them, not as an interactive single-open accordion; this matches the static-equivalent rule applied across the batch rather than a JS-driven expand/collapse.
- Unlike About17's award list where every row shares identical structure (icon, title, org, year), each Q&A row here is just a question/answer pair with no icon, keeping the right column reading as prose rather than a data list.
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.