Founder Statement

About67: Founder Statement

Founder statement section: an eyebrow badge and heading above a large blockquote, followed by a circular avatar, the founder's name and role, and an optional signature line. Built for a single, quotable "why we started this" moment rather than a full bio.

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

Base UI flavor

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

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

Quick start

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

import { About67, about67Demo } from "@/components/beste/block/about67";

export default function AboutPage() {
  return <About67 {...about67Demo} />;
}

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

import { About67 } from "@/components/beste/block/about67";

export default function AboutPage() {
  return (
    <About67
      badge={{ label: "From the founder" }}
      labels={{ signoff: "Written at the desk where it all began" }}
      heading="Why we started this <strong>studio</strong>."
      quote="I spent a decade watching good ideas flattened into templates, so we built a place where restraint could be the loudest choice in the room."
      founder={{
        name: "Jordan Lee",
        role: "Founder & Creative Director",
        avatar: {
          src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop",
          alt: "Portrait of Jordan Lee",
        },
      }}
    />
  );
}

Props

type Badge = { label: string };
type About67Labels = { signoff?: string };
type About67Founder = { name: string; role: string; avatar: { src: string; alt: string } };

Behavior notes

• quote is rendered as plain text inside a <blockquote>, not through dangerouslySetInnerHTML like heading is, so any HTML in it would show up literally rather than render.
• The founder row only appears when founder is set; labels.signoff is nested one level further and only shows once founder is present, directly under the role line.
• The avatar is a fixed size-14 circle with a border, cropped with object-cover, so non-square source images are cropped rather than distorted.
• The section caps at max-w-3xl, noticeably narrower than the max-w-6xl/max-w-7xl containers used by the other About blocks in this set, keeping the quote's line length readable.
• The quote scales from text-2xl up to text-4xl at lg with font-semibold and tight leading-snug, making it the visual focal point of the section.