# Metrics 2

> metrics

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/metrics-2).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/metrics-2
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/metrics-2/light.png
- Registry item: https://blocks.cnippet.dev/r/metrics-2.json
- Categories: metrics
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/metrics-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/badge`

## Files

### `registry/default/sections/metrics-2.tsx`

```tsx
"use client";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";

const stats = [
  { label: "Years of Experience", value: "13" },
  { label: "Team Members", value: "200+" },
  { label: "Global Offices", value: "6" },
  { label: "Carbon Reduction", value: "47%" },
];

export default function StatsSection() {
  const [inView, setInView] = useState(false);
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) setInView(true);
      },
      { threshold: 0.3 },
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className="relative w-full overflow-hidden pt-16 dark:bg-white dark:text-black"
      ref={ref}
    >
      <div className="mx-auto max-w-full px-5 md:px-0">
        <div className="flex flex-col items-center justify-center text-center">
          <Badge className="mb-4 rounded-none px-3 py-0.5 font-medium text-[#122023] text-sm">
            Company Stats
          </Badge>
          <h2 className="font-kanturmuy font-medium text-4xl tracking-tight md:text-5xl">
            The Foundation of Our Success
          </h2>
          <div className="mt-10 grid w-full grid-cols-2 gap-0 border-[#122023]/20 border-t md:grid-cols-4">
            {stats.map((s, i) => (
              <div
                className={[
                  "py-10",
                  i % 2 !== 0
                    ? "border-[#122023]/20 border-l pl-6 md:pl-10"
                    : "",
                  i % 2 === 0 && i > 0
                    ? "md:border-[#122023]/20 md:border-l md:pl-10"
                    : "",
                ].join(" ")}
                key={s.label}
              >
                <div
                  className="font-medium text-[#122023] text-[clamp(36px,5vw,64px)] transition-all duration-700 ease-out"
                  style={{
                    opacity: inView ? 1 : 0,
                    transform: inView ? "translateY(0)" : "translateY(20px)",
                    transitionDelay: `${i * 0.15}s`,
                  }}
                >
                  {s.value}
                </div>
                <div className="mt-2 font-mono text-[#122023]/60 text-[11px] uppercase tracking-[0.15em]">
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div>
        <Image
          alt=""
          className="h-[40vh] w-full object-cover object-bottom md:h-[60vh]"
          height={1080}
          src="https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770400411/img_14002.jpg"
          width={1920}
        />
      </div>
    </section>
  );
}
```