Company Heritage & Features

About24: Company Heritage & Features

Centered header followed by a story split (image beside a large pull quote paragraph), a two-column grid of border-accented feature highlights, and a stats panel on a muted background. Built for craft, heritage, and product-focused brands with a longer founding narrative to tell.

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

Base UI flavor

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

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

Quick start

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

import { About24, about24Demo } from "@/components/beste/block/about24";

export default function AboutPage() {
  return <About24 {...about24Demo} />;
}

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

import { About24 } from "@/components/beste/block/about24";

export default function AboutPage() {
  return (
    <About24
      badge={{ label: "Since 1987", variant: "secondary" }}
      heading="Crafting dreams on the open water"
      description="Three decades of custom sailing yachts built without compromise."
      image={{
        src: "https://images.unsplash.com/photo-1540946485063-a40da27545f8?w=800&h=600&fit=crop",
        alt: "Luxury sailing yacht on the ocean",
      }}
      story="Founded on the rugged coast of Maine, our yard combines traditional craftsmanship with modern naval architecture."
      features={[
        { title: "Custom Design", description: "Every yacht begins as a conversation." },
        { title: "Master Craftsmanship", description: "Hand-laid carbon and teak interiors." },
      ]}
      stats={[
        { value: "35+", label: "Years of Heritage" },
        { value: "500+", label: "Yachts Delivered" },
      ]}
      buttons={[{ label: "Schedule a Visit", href: "https://beste.co" }]}
    />
  );
}

Props

type FeatureItem = { title: string; description: string };
type StatItem = { value: string; label: string };

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

Behavior notes

• The image/story split, feature grid, and stats panel each render only when their data is present ((image || story), features.length > 0, stats.length > 0 guards), so any of the three sections can be omitted independently.
• The feature grid is a fixed sm:grid-cols-2 layout regardless of how many features are supplied; it does not switch to 3 or 4 columns for larger sets.
• Feature cards are plain left-border accents (border-l-2 border-primary pl-4), not bordered boxes, so they read as an inline list rather than discrete cards.
• The stats panel is a fixed grid-cols-2 sm:grid-cols-4 grid on a bg-muted/50 rounded panel, centered text per stat.
• The demo's story text contains a literal em dash ("...carries that philosophy forward — combining traditional craftsmanship...") reproduced here exactly as it appears in the source.