Values And Mission Statement

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

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

Usage

The file also exports about57Demo, 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 { About57, about57Demo } from "@/components/blocks/about/about57";

export default function Page() {
  return <About57 {...about57Demo} />;
}

Props

Types

type StatementItem = {
  accent: string;
  paragraph: string;
  label: string;
};

Behavior notes

• This is the only about block among 53-58 that inverts tokens (bg-foreground/text-background) for the whole section, the same intentional inverted-panel pattern used elsewhere in the library, unlike About58 which stays on the default surface and only insets a muted card.
• statements is a fixed two-element tuple, not the open pillars array About16 uses for its three-card grid; there is no icon slot at all, the entire block is type-only like About55.
• Every paragraph renders uppercase and tracked wide by default, which no other about block in this batch does; About53's statement column, by contrast, stays in normal sentence case.