Pinned Photos About

About53: Pinned Photos About

About section that pairs a two-photo pinned cluster (rotated, captioned cards with a small pin dot, like notes tacked to a board) against a statement, an inline stats line, and a single CTA button. The photo cluster and statement swap sides between mobile and desktop.

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

Base UI flavor

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

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

Quick start

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

import { About53, about53Demo } from "@/components/beste/block/about53";

export default function Page() {
  return <About53 {...about53Demo} />;
}

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

import { About53 } from "@/components/beste/block/about53";

export default function Page() {
  return (
    <About53
      label="Inside The Studio"
      heading="We build <strong>brands</strong> that people pin to their wall."
      description="Polaris is a small creative studio working at the seam of strategy and craft."
      button={{ label: "See The Studio", href: "/studio" }}
      photos={[
        { image: "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=900&h=1100&fit=crop", caption: "Roll 14, set day" },
        { image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=900&h=1100&fit=crop", caption: "Pinned: the cut we almost killed" },
      ]}
      stats={[
        { value: "11 yrs", label: "of quiet making" },
        { value: "60+", label: "brands shipped" },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type PinnedPhoto = { image: string; caption: string };
type StatItem = { value: string; label: string };

Behavior notes

• Only the first two entries of photos are ever rendered (photos.slice(0, 2)); any additional items in the array are silently ignored.
• The two pinned photos are rotated in opposite directions (sm:rotate-2 / sm:-rotate-3) and the second is absolutely positioned to overlap the bottom-right of the first, but only from the sm breakpoint up; below that they stack vertically in a plain column.
• Hovering the cluster (named group group/about53) straightens both photos slightly (rotate-1 / -rotate-1), a subtle "un-pin" effect on hover.
• On mobile the photo cluster appears before the statement in document order; from lg up, lg:order-first/lg:order-last flips the statement to the left column and the photos to the right.
• Each photo carries a small circular "pin dot" (bg-primary) centered at its top edge, reinforcing the pinned-note visual.