Numeral About

About39: Numeral About

About section anchored by a giant tracked numeral paired with an eyebrow badge, baseline-aligned against a paragraph, followed by a full-width three-image strip with a taller center frame, and a closing caption + CTA row.

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

Base UI flavor

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

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

Quick start

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

import { About39, about39Demo } from "@/components/beste/block/about39";

export default function Page() {
  return <About39 {...about39Demo} />;
}

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

import { About39 } from "@/components/beste/block/about39";

export default function Page() {
  return (
    <About39
      label="Since the first cut"
      numeral="20<strong>16</strong>"
      description="Polaris started in a borrowed editing suite with one rule that still holds."
      images={[
        { src: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=800&h=1066&fit=crop", alt: "Night shoot on set" },
        { src: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&h=1066&fit=crop", alt: "Landscape on location" },
        { src: "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=800&h=1066&fit=crop", alt: "Director reviewing a take" },
      ]}
      caption="Sixty-plus films shipped. Three continents. One restless crew."
      button={{ label: "See the reel", href: "https://beste.co" }}
    />
  );
}

Props

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

Behavior notes

• Only the first three images entries render (images.slice(0, 3)); extras are dropped.
• The center frame (index 1) uses a taller aspect-[3/5] while the outer two use aspect-[3/4]; the row is items-end, so all three frames share a bottom edge and the center one simply rises higher, producing the staggered strip effect.
• Hovering any strip image scales it slightly (group-hover/about39:scale-105) over a 500ms transition.
• numeral supports inline HTML via dangerouslySetInnerHTML; the demo colors part of it with a <strong> span styled text-primary.
• The eyebrow/numeral column and the paragraph column are baseline-aligned (md:items-end) rather than top-aligned, so the paragraph's last line sits level with the numeral's baseline.
• Button1's seal icon is overridden to ArrowUpRight instead of the component's default ArrowRight.