From 1a7a52aaf489d427137a8d27c57663ef1e86198f Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 16 Oct 2025 17:48:58 +0200
Subject: [PATCH] feat: add animated grid background with randomly activating
 cells in AboutSolutions

---
 src/components/AboutSolutions.tsx | 42 ++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/AboutSolutions.tsx b/src/components/AboutSolutions.tsx
index f2a83f8..470c749 100644
--- a/src/components/AboutSolutions.tsx
+++ b/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={{
-        "--cell": "4rem",
-        height: "74vh",
-      } as React.CSSProperties}
+      style={
+        {
+          "--cell": "4rem",
+          height: "74vh",
+        } 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">