Marquee Stats & Team Split

About28: Marquee Stats & Team Split

A full-bleed, infinitely scrolling stats ticker sits above a split section: intro copy, body paragraph, and a leadership avatar row on the left, a full-height photo on the right. Built for SaaS and product companies with a longer list of headline numbers than a static row can comfortably hold.

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

Base UI flavor

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

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

Quick start

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

import { About28, about28Demo } from "@/components/beste/block/about28";

export default function AboutPage() {
  return <About28 {...about28Demo} />;
}

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

import { About28 } from "@/components/beste/block/about28";

export default function AboutPage() {
  return (
    <About28
      badge={{ label: "About Us", variant: "outline" }}
      heading="We design tools that respect your time"
      description="A small, focused team building software millions use every day."
      body="Founded in 2019 by former product designers and engineers who wanted less bloat."
      image={{
        src: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&h=700&fit=crop",
        alt: "Modern workspace",
      }}
      stats={[
        { value: "2.4M", label: "Active Users" },
        { value: "99.99%", label: "Uptime" },
        { value: "42", label: "Team Members" },
      ]}
      team={[
        {
          name: "Maya Torres",
          role: "CEO & Co-founder",
          avatar: {
            src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
            alt: "Maya Torres",
          },
        },
      ]}
      buttons={[{ label: "Open Positions", href: "https://beste.co" }]}
    />
  );
}

Props

type StatItem = { value: string; label: 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 stats ticker is rendered outside the max-w-6xl content wrapper (directly in the <section>), so it spans the full viewport width edge to edge, bordered top and bottom.
• The ticker triples the stats array ([...stats, ...stats, ...stats]) and animates a translateX(0) to translateX(-33.333%) loop over 30 seconds (linear infinite) via a scoped <style jsx> keyframe, so the strip appears to scroll infinitely with no visible seam as the first copy exits and the second begins.
• Team members require a non-optional avatar (unlike about23/about28's siblings that make avatar optional), so every entry always shows a photo, falling back to initials only if the image itself fails to load.
• The "Leadership" label above the team row is hardcoded text in the component, not a prop, so it cannot be relabeled without editing the source.
• On large screens the right-column image uses lg:aspect-auto so it stretches to match the height of the left column's content; below lg it falls back to a fixed aspect-[4/3] box.