Aero Metrics-1

Cards

About

This clean and modern metrics section showcases your key achievements and statistics in a minimalist grid layout. Large, bold numbers paired with clear labels make it easy for visitors to quickly grasp your impact and credibility.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aero Metrics-1 to your project and fits it to your theme.

Code

How Aero Metrics-1 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { Badge } from "@/demos/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://cdn.21st.dev/assets/mirror/45/45b237f74721b70d9940b4344f52a4c070c019968dffd575b1cdf3700b9975fc.jpg"
          width={1920}
        />
      </div>
    </section>
  );
}