Hero Stat With Supporting Copy

const supportingPoints = [
  "Onboarding that takes minutes, not weeks",
  "A support team that replies in under an hour",
  "No lock-in, export your data any time",
];

export default function StatsFigureSupporting() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2">
        <div>
          <p className="text-sm font-semibold uppercase tracking-widest text-emerald-600 dark:text-emerald-400">
            Customer satisfaction
          </p>
          <div className="mt-4 flex items-baseline gap-3">
            <span className="text-7xl font-bold tracking-tight text-zinc-900 sm:text-8xl dark:text-white">
              94
            </span>
            <span className="text-4xl font-bold tracking-tight text-zinc-400 dark:text-zinc-600">%</span>
          </div>
          <p className="mt-4 max-w-md text-lg text-zinc-600 dark:text-zinc-400">
            of teams renew after their first year with us. We think that says more
            than any sales pitch could about the value people find here.
          </p>
        </div>

        <div className="rounded-3xl border border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-800 dark:bg-zinc-900/50 sm:p-10">
          <h3 className="text-lg font-semibold text-zinc-900 dark:text-white">
            Why they stay
          </h3>
          <ul className="mt-6 space-y-4">
            {supportingPoints.map((point) => (
              <li key={point} className="flex items-start gap-3">
                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">
                  <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden>
                    <path
                      fillRule="evenodd"
                      d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 10.7a1 1 0 111.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                </span>
                <span className="text-zinc-700 dark:text-zinc-300">{point}</span>
              </li>
            ))}
          </ul>
          <div className="mt-8 border-t border-zinc-200 pt-6 dark:border-zinc-800">
            <p className="text-sm text-zinc-500 dark:text-zinc-400">
              Based on <span className="font-semibold text-zinc-900 dark:text-white">3,100 responses</span> collected across every plan tier.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}