Stats Row

npx shadcn@latest add https://framebrick.co/r/blocks/tokens.json

import * as React from "react";
import { cn } from "@/lib/utils";

/*
 * Stats Row — three figures, each with a title and a line of text, split by thin lines on an inverted band.
 * Source: marcframe/findit → components/sections/FactsSection.tsx (+ design-system FactList).
 *
 * Layout kept from Framer: figures stack below 768px with a line between them, and sit in three equal columns with
 * vertical lines from 768px. The band is compact: half the usual section padding. No motion, as on Framer.
 * The band inverts the theme (foreground behind background-coloured text), so it reads dark on a light page and light
 * on a dark one. The heading is for screen readers — the figures speak for themselves.
 */

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

export type StatsRowProps = {
  /** Section heading, visually hidden. */
  title?: string;
  stats?: StatItem[];
  className?: string;
};

const defaults = {
  title: "Our track record",
  stats: [
    { value: "$150M+", title: "Properties sold", text: "Homes and investments closed for our clients since we opened our doors." },
    { value: "1,200+", title: "Happy families", text: "Buyers and renters who found a place they love to come home to." },
    { value: "20 yrs", title: "In the market", text: "Two decades of local knowledge in every neighbourhood we cover." },
  ],
};

export function StatsRow({ title = defaults.title, stats = defaults.stats, className }: StatsRowProps) {
  return (
    <section className={cn("bg-foreground py-[calc(var(--section-y)/2)] text-background", className)}>
      <h2 className="sr-only">{title}</h2>
      <div className="mx-auto flex max-w-(--container) flex-col gap-5 px-(--gutter) md:flex-row">
        {stats.map((stat, i) => (
          <React.Fragment key={stat.value + stat.title}>
            {i > 0 && <div aria-hidden className="h-px shrink-0 bg-background/15 md:h-auto md:w-px" />}
            <div className="flex flex-1 flex-col gap-5">
              <p className="font-heading text-h1 font-semibold tracking-tight">{stat.value}</p>
              <div className="flex flex-col gap-2.5">
                <p className="font-medium">{stat.title}</p>
                <p className="text-sm opacity-80">{stat.text}</p>
              </div>
            </div>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}