refactor: move BackgroundIllustration to separate component and add new gradient styles

src/components/AboutSolutions.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+export function AboutSolutions() {
+  return (
+    <section
+      className="relative bg-[#121212] text-gray-200 overflow-hidden"
+      style={{
+        "--cell": "4rem",
+        height: "74vh",
+      } as React.CSSProperties}
+    >
+      {/* Square grid background */}
+      <div
+        className="absolute inset-0 z-0 grid"
+        style={{
+          gridTemplateColumns: "repeat(auto-fill, var(--cell))",
+          gridAutoRows: "var(--cell)",
+          justifyContent: "center", // ✅ centers grid horizontally
+        }}
+        aria-hidden="true"
+      >
+        {Array.from({ length: 2000 }).map((_, i) => (
+          <div
+            key={i}
+            className="border border-[#1f1f1f] hover:bg-[#00FFD1] transition-colors duration-300 cursor-pointer"
+          />
+        ))}
+      </div>
+
+      {/* Foreground content aligned to the same grid */}
+      <div
+        className="relative z-10 grid grid-cols-[repeat(auto-fill,var(--cell))] auto-rows-[var(--cell)] gap-0 pointer-events-none w-full h-full"
+        style={{
+          justifyContent: "center", // ✅ centers foreground grid too
+        }}
+      >
+        {/* Top-left card */}
+        <div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
+            <p className="text-sm text-gray-600 leading-snug">
+              Unlike traditional internet infrastructure, ThreeFold runs on a
+              global mesh of independent cloud providers, individuals and
+              organizations contributing compute, storage, and network power.
+            </p>
+          </div>
+        </div>
+
+        {/* Center card */}
+        <div className="col-start-9 row-start-3 col-span-6 row-span-5 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center justify-center text-center shadow-lg">
+            <p className="text-2xl md:text-3xl font-medium text-white leading-tight">
+              A Decentralized Foundation for the Internet.
+            </p>
+          </div>
+        </div>
+
+        {/* Bottom-right card */}
+        <div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
+            <p className="text-sm text-gray-600 leading-snug">
+              This physical decentralization removes bottlenecks, increases
+              resilience, and protects privacy. ThreeFold is a neutral, scalable
+              foundation for the next-generation internet, where digital
+              sovereignty and collaboration come first.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}