About With Stats Band

About33: About With Stats Band

About section built as a two-track split: a narrow left rail carries an eyebrow badge and a primary-tone seal CTA, the right side carries a bold heading over two side-by-side images, and a four-column stats band runs the full width beneath both.

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/about33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/about33.tsx, the badge6 and button1 components it uses for the eyebrow label and the seal CTA, and its dependencies.

Quick start

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

import { About33, about33Demo } from "@/components/beste/block/about33";

export default function Page() {
  return <About33 {...about33Demo} />;
}

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

import { About33 } from "@/components/beste/block/about33";

export default function Page() {
  return (
    <About33
      label="Our Story"
      button={{ label: "Meet The Team", href: "https://beste.co" }}
      heading="We turn curious beginners into working engineers."
      images={[
        { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&h=675&fit=crop", alt: "Team workshop" },
        { src: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=900&h=675&fit=crop", alt: "Code review session" },
      ]}
      stats={[
        { value: "9,400", title: "Graduates hired worldwide." },
        { value: "94%", title: "Land a job within six months." },
        { value: "$78k", title: "Median starting salary." },
        { value: "320+", title: "Hiring partners on board." },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type StatItem = { value: string; title: string };

Behavior notes

• Only the first two images entries render (images.slice(0, 2)); extras are silently dropped, and the grid stays two columns wide even if just one image is passed.
• The stats band is a hardcoded four-column grid on md with a right border between each item (md:border-r, cleared on the first and last); the layout assumes four stats and does not recompute column count from stats.length.
• heading is injected with dangerouslySetInnerHTML, so line breaks and inline entities must be authored directly into the string, as the demo does with <br /> and –.
• Button1 is rendered asChild with tone="primary", giving the CTA a primary-colored pill instead of the component's default dark tone.