ok

src/components/GridStats.tsx

@@ -3,6 +3,7 @@
 import CountUp from "react-countup";
 import React from "react";
 import { Button } from "@/components/Button";
+import { H2, P } from "@/components/Texts";
 
 export function GridStats() {
   return (
@@ -15,17 +16,17 @@ export function GridStats() {
         backgroundPosition: "center",
       }}
     >
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
-        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
+      <div className="max-w-2xl px-6 lg:max-w-7xl lg:px-6">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-3">
           {/* Column 1: Title & Description */}
           <div className="flex flex-col space-y-10">
             <div>
-              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+              <H2 color="light">
                 Robust Infrastructure for your Intellegence Needs
-              </h2>
-              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+              </H2>
+              <P color="light" className="mt-6">
                 Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
-              </p>
+              </P>
               <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
             </div>
           </div>
@@ -63,7 +64,7 @@ export function GridStats() {
 function StatCard({
   label,
   description,
-  className = "",
+  className = "border border-white/10 hover:border-white/40 hover:bg-black/40",
 }: {
   label: string;
   description: string;