Overlap Heading About

About38: Overlap Heading About

About section where a large sticky heading and a portrait deliberately collide: the copy column pins in place while the negatively-margined portrait tucks under its final words, closing with a bottom stat ribbon split into thirds.

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

Base UI flavor

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

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

Quick start

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

import { About38, about38Demo } from "@/components/beste/block/about38";

export default function Page() {
  return <About38 {...about38Demo} />;
}

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

import { About38 } from "@/components/beste/block/about38";

export default function Page() {
  return (
    <About38
      label="The Studio"
      heading="We design brands that hold their nerve when the <strong>spotlight</strong> hits."
      description="Polaris is a sixteen-person creative studio working out of a reclaimed boiler room."
      button={{ label: "Read the studio file", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1000&h=1250&fit=crop",
        alt: "Designers reviewing printed layouts",
      }}
      stats={[
        { value: "16", label: "People, one floor, zero account managers." },
        { value: "21yr", label: "Of putting craft ahead of the brief." },
        { value: "240+", label: "Identities shipped and still standing." },
      ]}
    />
  );
}

Props

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

Behavior notes

• The text column is lg:sticky lg:top-24 lg:self-start inside the two-track grid, so on large screens where the portrait's 4:5 aspect makes it taller than the copy, the heading and CTA stay pinned near the top of the viewport while the rest of the section scrolls past.
• The portrait is pulled left with lg:-ml-16 and sits beneath the text column on the z-axis (the text column is z-10), so it visually tucks under the heading's last words; on mobile it simply stacks below with no overlap.
• Hovering the portrait scales it slightly (group-hover/about38:scale-105) over a 500ms transition.
• The stat ribbon is a hardcoded three-column split (sm:grid-cols-3) with dividers between entries; the column count is not derived from stats.length, so it is tuned for exactly three items.