Image & Text Split

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot 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/about5.tsx instead.

Usage

The file also exports about5Demo, 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 { About5, about5Demo } from "@/components/blocks/about/about5";

export default function Page() {
  return <About5 {...about5Demo} />;
}

Props

Types

type StatItem = { title: string; value: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• Unlike About1, buttons here alternate: the first button defaults to variant "default" and every button after it defaults to "outline", unless a button sets its own variant explicitly.
• The image column keeps a fixed 4:5 aspect ratio at every breakpoint so the two-column grid never becomes lopsided when the image is a placeholder.
• stats renders as an inline flex-wrap row rather than a grid, so it stays readable with anywhere from one to several stats.