tenext redesign

components/sections/MetricsSection.tsx

@@ -0,0 +1,34 @@
+import { RevealOnView } from "@/components/shared/RevealOnView";
+import { differentiators } from "@/data/site-content";
+
+export function MetricsSection() {
+  // Show the first four differentiators as a proof grid — real commitments
+  // in place of the template's unverified statistics.
+  const points = differentiators.slice(0, 4);
+
+  return (
+    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="grid grid-cols-1 gap-[50px] sm:grid-cols-2 md:gap-[60px]">
+          {points.map((point, index) => (
+            <RevealOnView
+              key={point.id}
+              delay={index * 90}
+              className="flex flex-col gap-[14px]"
+            >
+              <span className="gradient-text-purple text-[22px] font-bold font-[var(--font-sora)]">
+                0{index + 1}
+              </span>
+              <h3 className="text-[24px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
+                {point.title}
+              </h3>
+              <p className="text-[16px] leading-[1.8] text-tenext-text-muted">
+                {point.description}
+              </p>
+            </RevealOnView>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}