Values with Team Photo

About2: Values with Team Photo

Culture/values section built as three stacked blocks: a centered heading group, a full-width 2:1 team photo, and a three-column values grid where each value pairs a circular icon badge with a title and description, closed with CTA buttons.

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

Base UI flavor

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

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

Quick start

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

import { About2, about2Demo } from "@/components/beste/block/about2";

export default function Page() {
  return <About2 {...about2Demo} />;
}

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

import { Heart, Target } from "lucide-react";
import { About2 } from "@/components/beste/block/about2";

export default function Page() {
  return (
    <About2
      badge={{ label: "Our Values", variant: "secondary" }}
      heading="Driven by purpose, powered by people"
      description="Technology should serve people, not the other way around."
      image={{ src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c", alt: "Team collaborating" }}
      values={[
        { icon: Target, title: "Mission First", description: "Every decision is guided by our mission." },
        { icon: Heart, title: "People Centered", description: "We build for real people with real needs." },
      ]}
      buttons={[{ label: "See Open Roles", href: "https://beste.co" }]}
    />
  );
}

Props

type ValueItem = {
  icon?: LucideIcon;
  title: string;
  description?: string;
};

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

Behavior notes

• values[].icon is typed as a LucideIcon component reference (e.g. Target), not a rendered React.ReactNode element like the icon fields on the usecase and about1 blocks; the component itself resolves it with const Icon = value.icon and renders <Icon className="size-5 text-primary" />, so callers must pass the icon component, not a JSX element.
• The header block (badge, heading, description) only renders when at least one of the three is set, matching about1's pattern.
• The team photo is a fixed aspect-[2/1] crop (object-cover), and the whole image block is skipped entirely, with no placeholder, when image is omitted.
• values always lays out as md:grid-cols-3 regardless of item count; passing fewer than three leaves empty trailing columns, and passing more than three wraps to additional rows of three.
• Each value's icon badge only renders when value.icon is set, and its description paragraph only renders when value.description is set, so a value can be title-only with no icon or body text.