Wide Banner & Product Cards

Installation

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

Usage

The file also exports about29Demo, 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 { About29, about29Demo } from "@/components/blocks/about/about29";

export default function Page() {
  return <About29 {...about29Demo} />;
}

Props

Types

type ProductCard = {
  name: string;
  description: string;
  attributes: string[];
  image?: { src: string; alt: string };
};

Behavior notes

• Unlike About9's plain text logo strip, About29 stacks a panoramic banner and a full product-card grid above the same trailing logo row, so the logos read as a closing credibility strip rather than the section's main content.
• Each product card's attributes render as outline Badge pills rather than plain text, distinguishing the 'layered attributes' from About17's award list, which uses a single icon plus title/organization/year instead of a badge list.
• The banner sits at a fixed 21:9 ratio between the header and the cards, similar in spirit to About19's panoramic photo, but About19 pairs its banner with an icon fact list and a quote block instead of purchasable-style product cards.