Team & Mission

About1: Team & Mission

Two-column about section: a mission paragraph paired with a 2x2 stat tile grid on one side, and a 2x2 team member grid of avatar cards on the other, closed out with a row of CTA buttons beneath both columns.

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

Base UI flavor

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

This installs the block to components/beste/block/about1.tsx and the badge, button, and avatar shadcn/ui primitives it depends on.

Quick start

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

import { About1, about1Demo } from "@/components/beste/block/about1";

export default function Page() {
  return <About1 {...about1Demo} />;
}

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

import { About1 } from "@/components/beste/block/about1";

export default function Page() {
  return (
    <About1
      badge={{ label: "About Us", variant: "secondary" }}
      heading="Building the future of digital experiences"
      description="A team of designers, engineers, and strategists crafting products people love."
      mission="Our mission is to empower businesses with beautifully crafted, accessible, and performant digital products."
      stats={[
        { title: "Founded", value: "2018" },
        { title: "Team Members", value: "45+" },
      ]}
      team={[
        { name: "Sarah Chen", role: "CEO & Co-Founder", avatar: { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", alt: "Sarah Chen" } },
        { name: "Marcus Johnson", role: "CTO & Co-Founder", avatar: { src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e", alt: "Marcus Johnson" } },
      ]}
      buttons={[{ label: "Join Our Team", href: "https://beste.co" }]}
    />
  );
}

Props

type StatItem = { title: string; value: string };

type TeamMember = {
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The header block (badge, heading, description) only renders its wrapping <div> when at least one of badge, heading, or description is set, so an about section with none of the three collapses cleanly instead of leaving empty spacing.
• stats renders in a fixed grid-cols-2 regardless of how many items are passed; five or more stats wrap to a third row rather than reflowing to three columns.
• team also renders in a fixed grid-cols-2; each Avatar falls back to an AvatarFallback built from the initials of member.name (first letter of each space-separated word) when member.avatar is not supplied, so avatars are never blank.
• The mission column and the team column are independent: mission/stats render regardless of whether team has any entries, and vice versa, since each is gated by its own truthiness check inside the shared lg:grid-cols-2 row.
• The first button defaults to variant="default"; every button beyond that still defaults to "default" too (unlike usecase10, which alternates default/outline), so an unstyled multi-button array renders all buttons in the same primary style unless each sets its own variant.