Founder Quote About

About45: Founder Quote About

A founder-led about section built around a large pull-quote with a left accent border, a name-and-role signature paired with a CTA, and a portrait with a caption on the right. A four-item facts strip spans the full width beneath, separated by vertical dividers on 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/about45?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { About45, about45Demo } from "@/components/beste/block/about45";

export default function AboutPage() {
  return <About45 {...about45Demo} />;
}

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

import { About45 } from "@/components/beste/block/about45";

export default function AboutPage() {
  return (
    <About45
      label="From the founder"
      quote="I started this company because <strong>every tool I tried made the work slower</strong>, not faster."
      signature={{ name: "Jordan Rivera", role: "Founder & CEO" }}
      button={{ label: "Read our story", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=900&h=1125&fit=crop",
        alt: "Founder Jordan Rivera in the office",
      }}
      caption="Jordan at the studio, Austin"
      facts={[
        { value: "2018", label: "Company founded" },
        { value: "40+", label: "Team members" },
        { value: "12k", label: "Customers served" },
        { value: "4.8", label: "Average rating" },
      ]}
    />
  );
}

Props

type Signature = { name: string; role: string };
type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type FactItem = { value: string; label: string };

Behavior notes

• The layout is lg:grid-cols-[1.5fr_1fr] with items-end, so the quote column and the portrait figure align to a shared baseline rather than stretching to equal heights.
• The quote sits inside a <blockquote> with a 4px primary-colored left border; the text itself is set with dangerouslySetInnerHTML, so <strong> spans inside quote render in the primary color.
• Signature and button share one row (sm:flex-row sm:items-end sm:justify-between) that stacks vertically on narrow viewports, with the signature above the button.
• The portrait is wrapped in a semantic <figure>/<figcaption> pair rather than a plain <img> with an adjacent paragraph.
• The facts strip uses a md:grid-cols-4 grid with md:border-r on every item except the last, producing vertical divider lines between facts that only appear at the md breakpoint and above.