Staaarter

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.

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

npx shadcn add https://staaarter.com/r/qa-about-us.json

Prefer 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

PropTypeDefaultDescription
badge{ label: string; variant?: BadgeVariant }noneOptional pill above the heading in the left column.
headingstringnoneHeading in the left column.
descriptionstringundefinedIntro text under the heading.
qaQAItem[]noneQuestion-answer pairs rendered as a definition list in the right column.
classNamestringnoneExtra 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.