chore: remove Next.js dependencies and update UI components with standard React

src/pages/home/StackSection.tsx

@@ -1,66 +1,75 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
+"use client";
 
-const stackData = [
-  {
-    id: 'agent',
-    title: 'Agent Layer',
-    description:
-      'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
-  },
-  {
-    id: 'network',
-    title: 'Network Layer',
-    description:
-      'A global, end-to-end encrypted overlay that simply doesn\'t break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.',
-  },
-  {
-    id: 'cloud',
-    title: 'Cloud Layer',
-    description:
-      'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
-  },
-]
+import { motion } from "framer-motion";
+import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
+import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
+import { FadeIn } from "@/components/ui/FadeIn";
+import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 
-export function StackSection() {
+export function StackSectionLight() {
   return (
-    <section className="relative bg-black py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
-          {/* Left Column - Text */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-            className="lg:col-span-1"
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
-              The Mycelium Stack
-            </h2>
-            <p className="mt-6 text-lg 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>
-          </motion.div>
-
-          {/* Right Column - Stack Cards */}
-          <div className="lg:col-span-2 space-y-6">
-            {stackData.map((layer, index) => (
-              <motion.div
-                key={layer.id}
-                initial={{ opacity: 0, x: 20 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
-              >
-                <h3 className="text-xl font-semibold text-gray-900">{layer.title}</h3>
-                <p className="mt-3 text-gray-600">{layer.description}</p>
-              </motion.div>
-            ))}
-          </div>
+    <section className="relative w-full overflow-hidden py-24 lg:py-40">
+      {/* === Background Layer === */}
+      <div className="absolute inset-0 -z-10 bg-transparent">
+        {/* 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>
-      </Container>
+      </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>
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
+            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
+              The Mycelium Stack
+            </SectionHeader>
+          </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>
+
+        {/* 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 />
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
     </section>
-  )
+  );
 }