About Statement With Pillars

About59: About Statement With Pillars

Centered eyebrow and a large statement heading, followed by a three-up row of icon pillars pairing a circular icon with a title and a one-line description.

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

Base UI flavor

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

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

Quick start

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

import { About59, about59Demo } from "@/components/beste/block/about59";

export default function Page() {
  return <About59 {...about59Demo} />;
}

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

import { Compass, Infinity, UserCheck } from "lucide-react";
import { About59 } from "@/components/beste/block/about59";

export default function Page() {
  return (
    <About59
      badge={{ label: "The approach" }}
      heading="We partner with leadership teams to turn scattered ideas into <strong>one clear brand.</strong>"
      features={[
        { icon: Compass, title: "Independent", description: "No agency layers between you and the work." },
        { icon: UserCheck, title: "Senior-led", description: "The people who pitch are the people who build." },
        { icon: Infinity, title: "Built to last", description: "Brands and systems that outlive the launch." },
      ]}
    />
  );
}

Props

type Feature = { icon: LucideIcon; title: string; description: string };

Behavior notes

• features[].icon is a Lucide icon component reference passed directly, not a string key; callers import the icon (e.g. Compass from lucide-react) and pass the component itself, exactly as the demo does.
• Each pillar is a horizontal pairing (a circular icon on the left, title and description stacked to its right), not a vertically stacked or centered card like most feature-row patterns.
• The pillar grid is fixed at md:grid-cols-3 and does not adapt to features.length.
• There is no button, link, or CTA anywhere in this component; it is a pure statement-plus-pillars layout.