Vercep 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 Vercep Metrics-1 to your project and fits it to your theme.

Code

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

Usage.tsx

"use client";

import { Square } from "lucide-react";
import { Badge } from "@/demos/ui/badge";

const metrics = [
  {
    description: "Years in business consulting",
    details: ["8+ industries served", "5+ countries reached"],
    label: "Experience",
    suffix: "+",
    value: "15",
  },
  {
    description: "Companies launched",
    details: ["90% client satisfaction rate", "30-45 days average launch time"],
    label: "Client Success",
    suffix: "+",
    value: "200",
  },
  {
    description: "Earned by clients",
    details: ["80% client return rate", "300+ founders launched"],
    label: "Impact",
    suffix: "M+",
    value: "$25",
  },
];

export default function Metrics() {
  return (
    <section className="relative w-full dark:text-black">
      <div className="bg-yellow-50 pt-12 pb-32 sm:pt-20 sm:pb-40">
        <div className="mx-auto max-w-full px-4 sm:px-8 lg:px-16">
          <div className="border-neutral-300 border-b">
            <Badge
              className="flex w-fit items-center rounded-none border-none bg-secondary px-4 py-0.5 font-medium text-neutral-800"
              size="lg"
              variant="outline"
            >
              <Square className="size-3 bg-neutral-800 text-neutral-800" /> BY THE
              NUMBERS
            </Badge>
          </div>

          <h2 className="mt-8 max-w-2xl text-3xl leading-[1.15] tracking-tight sm:text-4xl lg:text-5xl">
            Numbers don&apos;t lie — and ours say{" "}
            <span className="bg-black px-2 text-[#e3fd79]">
              you&apos;re in good hands.
            </span>
          </h2>
        </div>
      </div>

      <div className="bg-neutral-950 pb-12 sm:pb-20">
        <div className="mx-auto max-w-full px-4 sm:px-8 lg:px-16">
          <div className="-mt-4 mb-6 flex">
            <div className="size-4 bg-neutral-950" />
          </div>

          <div className="-mt-24 grid grid-cols-1 gap-px bg-neutral-700 sm:-mt-32 md:grid-cols-3">
            {metrics.map((metric) => (
              <div
                className="flex flex-col bg-neutral-900 px-6 pt-6 pb-8 sm:px-8"
                key={metric.label}
              >
                <Badge
                  className="flex w-fit items-center rounded-none bg-[#e3fd79]/10 px-3 py-0.5 font-medium text-[#e3fd79] uppercase tracking-[0.15em]"
                  size="lg"
                >
                  <Square className="size-2.5 bg-[#e3fd79]" />{" "}
                  {metric.label.toUpperCase()}
                </Badge>

                <p className="mt-6 bg-neutral-900 font-medium text-6xl text-[#e3fd79] tracking-tight sm:text-7xl md:text-8xl">
                  {metric.value}
                  <span className="text-4xl sm:text-5xl md:text-6xl">
                    {metric.suffix}
                  </span>
                </p>

                <p className="mt-2 font-medium text-lg text-white">
                  {metric.description}
                </p>

                <div className="mt-4 flex flex-col gap-2">
                  {metric.details.map((detail) => (
                    <div className="flex items-center gap-2.5" key={detail}>
                      <div className="size-2 shrink-0 rounded-full bg-[#e3fd79]" />
                      <span className="text-neutral-300">{detail}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}