feat: add dotted glow background and enhance stack section animations

src/components/StackSectionLight.tsx

@@ -1,60 +1,72 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { H1, H2, P } from '@/components/Texts';
+import { H2, P } from "@/components/Texts";
 import { FadeIn } from "./FadeIn";
+import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 
 export function StackSectionLight() {
-
   return (
-        <section className="w-full bg-white lg:px-0 py-12 lg:py-24 px-6 relative lg:pt-32">
-      <div className="mx-auto max-w-7xl">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-center">
-            <div
-          aria-hidden="true"
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-blue-300 to-blue-600 opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
-          />
+    <section className="relative w-full overflow-hidden py-24 lg:py-40">
+      {/* === Background Layer === */}
+      <div className="absolute inset-0 -z-10 bg-white">
+        {/* Dotted Glow Background */}
+        <DottedGlowBackground
+          gap={15}
+          radius={2}
+          color="rgba(0,0,0,0.4)"
+          glowColor="rgba(0,170,255,0.85)"
+          opacity={0.2}
+        />
+        {/* Faint 3D grid floor */}
+        <div className="absolute inset-0 flex items-end justify-center overflow-hidden">
+          <div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
+        </div>
+      </div>
+
+      {/* === Content === */}
+      <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
+        {/* Left Column - Text */}
+        <div className="text-center lg:text-left">
+          <FadeIn>
+            <H2 color="dark" className="text-4xl sm:text-5xl font-semibold">
+              The Mycelium Stack
+            </H2>
+          </FadeIn>
+
+          <FadeIn>
+            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
+              Built with Mycelium technology, our AI infrastructure ensures
+              unbreakable networks, complete data sovereignty, ultra-secure
+              agent-human communication, and unhackable data storage systems.
+            </P>
+          </FadeIn>
         </div>
 
-         <div
-          aria-hidden="true"
-          className="absolute inset-x-0 bottom-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:bottom-[calc(100%-30rem)]"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(30%-3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-blue-200 to-blue-400 opacity-15 sm:left-[calc(50%-36rem)] sm:w-288.75"
-          />
-        </div>
-          {/* Left Column - Text (1/3 width) */}
-            <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1 pt-12">
-            <FadeIn>
-              <H2 className="" color="dark">
-                The Mycelium Stack
-              </H2>
-            </FadeIn>
-            
-            <FadeIn>
-              <P className="mx-auto mt-8 max-w-3xl" color="dark">
-                Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
-              </P>
-            </FadeIn>
-          </div>
-          {/* Right Column - Stacked Cubes (2/3 width) */}
-          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2 mt-8 lg:mt-0">
-            <FadeIn>
+        {/* Right Column - Animated Stack */}
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
+          <motion.div
+            initial={{ y: 30, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 1.2, ease: "easeOut" }}
+            viewport={{ once: true }}
+          >
+            <motion.div
+              animate={{
+                y: [0, -10, 0],
+                rotateZ: [0, 0.5, -0.5, 0],
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                ease: "easeInOut",
+              }}
+              className="relative"
+            >
               <StackedCubesLight />
-            </FadeIn>
-          </div>
+            </motion.div>
+          </motion.div>
         </div>
       </div>
     </section>