About with Stats Grid

About66: About with Stats Grid

Two-column about section with a tall portrait image on one side and an eyebrow badge, heading, description, and a 2x2 grid of large stat figures on the other. Built for studios that want to back up an about statement with a handful of hard numbers.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/about66?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/about66?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/about66.tsx, the badge7 component it uses for the eyebrow badge, and its dependencies.

Quick start

The installed file exports about66Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { About66, about66Demo } from "@/components/beste/block/about66";

export default function AboutPage() {
  return <About66 {...about66Demo} />;
}

Then replace the demo with your own props. Written out, the same setup looks like this:

import { About66 } from "@/components/beste/block/about66";

export default function AboutPage() {
  return (
    <About66
      badge={{ label: "By the numbers" }}
      heading="Measured in <strong>outcomes</strong>, not output."
      description="Every engagement is scoped to a result we can defend in a boardroom."
      stats={[
        { value: "9yrs", title: "Compounding our craft inside one studio" },
        { value: "40+", title: "Brands we have carried from zero to launch" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&h=1125&fit=crop",
        alt: "Studio interior with a long shared worktable",
      }}
    />
  );
}

Props

type Badge = { label: string };
type About66Stat = { value: string; title: string };
type About66Image = { src: string; alt: string };

Behavior notes

• The image always renders first in source order and occupies the left column at lg and up; there is no displayPosition prop to flip the sides.
• stats uses a fixed sm:grid-cols-2 grid regardless of item count, so it is designed around exactly four entries (the demo's 2x2 layout); a third or fifth stat wraps into a new row rather than reflowing to three columns.
• Each stat is a border-t row with the value at text-4xl/text-5xl bold above a muted description line, not a boxed card.
• The heading scales up to text-6xl at lg, larger than the equivalent heading in about63, since this variant has no facts list competing for vertical space.
• The image container is a fixed aspect-[4/5]; supply a portrait-oriented photo to avoid letterboxing from object-cover.