feat: add animated grid background with randomly activating cells in AboutSolutions

src/components/AboutSolutions.tsx

@@ -1,38 +1,56 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 export function AboutSolutions() {
+  const totalCells = 2000;
+  const [active, setActive] = useState<number[]>([]);
+
+  // randomly activate some squares every 0.8 s
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const newActive = Array.from({ length: 20 }, () =>
+        Math.floor(Math.random() * totalCells)
+      );
+      setActive(newActive);
+    }, 800);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <section
       className="relative bg-[#121212] text-gray-200 overflow-hidden"
-      style={{
+      style={
+        {
           "--cell": "4rem",
           height: "74vh",
-      } as React.CSSProperties}
+        } as React.CSSProperties
+      }
     >
-      {/* Square grid background */}
+      {/* Animated 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
+          justifyContent: "center",
         }}
         aria-hidden="true"
       >
-        {Array.from({ length: 2000 }).map((_, i) => (
+        {Array.from({ length: totalCells }).map((_, i) => (
           <div
             key={i}
-            className="border border-[#1f1f1f] hover:bg-[#00FFD1] transition-colors duration-300 cursor-pointer"
+            className={`border border-[#1f1f1f] transition-colors duration-500 cursor-pointer ${
+              active.includes(i) ? "bg-[#00FFD1]" : "bg-transparent"
+            }`}
           />
         ))}
       </div>
 
-      {/* Foreground content aligned to the same grid */}
+      {/* Foreground content aligned to 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
-        }}
+        style={{ justifyContent: "center" }}
       >
         {/* Top-left card */}
         <div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">