Stats Chart

npx shadcn@latest add https://framebrick.co/r/spring-button.json https://framebrick.co/r/stat-bars.json

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

import { SpringButton } from "@/components/ui/spring-button";
import { StatBars } from "@/components/ui/stat-bars";
import { cn } from "@/lib/utils";

/*
 * Stats Chart — a short introduction (label, heading, paragraphs, action) centered above a chart of percentages whose
 * bars grow when it scrolls into view.
 * Source: marcframe/nitip → components/sections/AboutSection.tsx ("Who are we?") + design-system Chart.
 *
 * Layout kept from Framer: the text is centered in a 48rem column, the paragraphs and the button in a 400px column
 * under the heading; the chart runs the full container, 350px tall from 640px, stacked horizontal bars below.
 * Motion kept (stat-bars): bars grow once half the chart is in view, starting 50ms apart, their height and shade
 * following their value; stat-bars handles reduced motion. Dropped: Nitip's dotted section label (plain muted text
 * here) and the ring cursor over the bars.
 */

export type StatsChartProps = {
  /** Small line above the heading. */
  label?: string;
  title?: string;
  paragraphs?: string[];
  action?: { label: string; href: string };
  /** Percentages (0–100) with their labels. */
  stats?: { value: number; label: string }[];
  className?: string;
};

const defaults = {
  label: "Who we are",
  title: "We combine creativity, data and honest storytelling to build brands people remember.",
  paragraphs: [
    "Northstar is a digital marketing studio of strategists, writers, designers and analysts. Since 2019 we have helped more than a hundred brands find their audience and keep it.",
    "We work as one team with our clients: clear goals, weekly numbers and no work that doesn't earn its place.",
  ],
  action: { label: "More about us", href: "/about" },
  stats: [
    { value: 95, label: "Marketing strategy" },
    { value: 88, label: "Social media management" },
    { value: 100, label: "Search engine optimization" },
    { value: 76, label: "Paid advertising" },
    { value: 85, label: "Content & copywriting" },
  ],
};

export function StatsChart({
  label = defaults.label,
  title = defaults.title,
  paragraphs = defaults.paragraphs,
  action = defaults.action,
  stats = defaults.stats,
  className,
}: StatsChartProps) {
  return (
    <section className={cn("py-(--section-y)", className)}>
      <div className="mx-auto flex max-w-(--container) flex-col items-center gap-16 px-(--gutter) md:gap-20 lg:gap-24">
        <div className="flex w-full max-w-3xl flex-col gap-12">
          <div className="flex flex-col gap-5">
            {label && <p className="text-sm font-medium text-muted-foreground">{label}</p>}
            <h2 className="font-heading text-h2 font-semibold tracking-tight text-balance">{title}</h2>
          </div>
          <div className="flex max-w-100 flex-col items-start gap-12">
            <div className="flex flex-col gap-5 text-muted-foreground">
              {paragraphs.map((paragraph) => (
                <p key={paragraph}>{paragraph}</p>
              ))}
            </div>
            {action && (
              <SpringButton href={action.href} arrow={false}>
                {action.label}
              </SpringButton>
            )}
          </div>
        </div>
        <StatBars stats={stats} height={350} />
      </div>
    </section>
  );
}