feat: implement light theme version of stack section with hover animations

src/app/(main)/page.tsx

@@ -7,7 +7,7 @@ import { HomeHeroLight } from '@/components/HomeHeroLight'
 import { HomeHeroLight2 } from '@/components/HomeHeroLight2'
 import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
-import { StackSectionPreview } from '@/components/StackSection'
+import { StackSectionLight } from '@/components/StackSectionLight'
 import { Companies } from '@/components/Companies'
 import { CallToAction } from '@/components/CallToAction'
 import { ScrollDown } from '@/components/ui/ScrollDown'
@@ -27,7 +27,7 @@ export default function Home() {
         <WorldMap />
       </section>
       <section id="technologies">
-        <StackSectionPreview />
+        <StackSectionLight />
       </section>
       <section id="deploy">
         <Steps />

src/components/StackSectionLight.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
+import { H1, H2, P } from '@/components/Texts';
+import { FadeIn } from "./FadeIn";
+
+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">
+          {/* 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>
+              <StackedCubesLight />
+            </FadeIn>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Texts.tsx

@@ -8,6 +8,7 @@ const colorVariants = {
   secondary: 'text-gray-200',
   custom: 'text-[#015eff]',
   light: '[#fcfcfc]',
+  dark: 'text-gray-800',
 } as const
 
 type TextOwnProps = {

src/components/ui/CubeLight.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+  onClick: () => void;
+}
+
+const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="507"
+    height="234"
+    fill="none"
+    viewBox="0 0 507 234"
+    {...props}
+  >
+    <path
+      fill={`url(#cube-gradient-${index})`}
+      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+    />
+    <defs>
+      <linearGradient
+        id={`cube-gradient-${index}`}
+        x1="185.298"
+        x2="185.298"
+        y1="-27.5515"
+        y2="206.448"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#E5E7EB" />
+        <stop offset="1" stopColor="#9CA3AF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        onClick={onClick}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* SVG Cube */}
+        <CubeSvg 
+          index={index}
+          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
+          style={{
+            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <h3 
+            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
+            style={{ 
+              transform: 'rotate(0deg) skewX(0deg)',
+              transformOrigin: 'center'
+            }}
+          >
+            {title}
+          </h3>
+        </div>
+
+        {/* Description with arrow line - Desktop */}
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
+          >
+            {/* Arrow line */}
+            <svg
+              className="absolute left-0 top-1/2 -translate-y-1/2"
+              width="120"
+              height="2"
+              viewBox="0 0 120 2"
+              fill="none"
+            >
+              <line
+                x1="0"
+                y1="1"
+                x2="120"
+                y2="1"
+                stroke="black"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80">
+              <h4 className="text-black text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <p className="text-gray-800 text-sm leading-relaxed font-light">
+                {description}
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Description for Mobile - Below cube */}
+              </motion.div>
+    </div>
+  );
+}

src/components/ui/StackedCubesLight.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { CubeLight } from "@/components/ui/CubeLight"
+
+const stackData = [
+  {
+    id: "agent",
+    title: "Agent Layer",
+    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
+    description:
+      "Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
+    position: "top",
+  },
+  {
+    id: "network",
+    title: "Network Layer",
+    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
+    description:
+      "Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
+    position: "middle",
+  },
+  {
+    id: "cloud",
+    title: "Cloud Layer",
+    descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
+    description:
+      "Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
+    position: "bottom",
+  },
+];
+
+export function StackedCubesLight() {
+  const [active, setActive] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+
+  const handleCubeClick = (id: string) => {
+    setSelectedForMobile(prev => (prev === id ? null : id));
+  };
+
+  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
+
+  return (
+    <div className="flex flex-col items-center">
+    <div 
+      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
+      onMouseLeave={() => setActive("agent")}
+    >
+      <motion.div
+        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
+        animate={{ y: ["-8px", "8px"] }}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+      >
+        {stackData.map((layer, index) => (
+          <div
+            key={layer.id}
+            className="absolute"
+            style={{
+              top: `calc(${index * 30}% - ${index * 10}px)`,
+              zIndex: active === layer.id ? 20 : 10 - index,
+            }}
+          >
+            <CubeLight
+              title={layer.title}
+              descriptionTitle={layer.descriptionTitle}
+              description={layer.description}
+              isActive={active === layer.id}
+              index={index}
+              onHover={() => setActive(layer.id)}
+              onLeave={() => {}}
+              onClick={() => handleCubeClick(layer.id)}
+            />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+    {selectedMobileLayer && (
+      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
+        <h4 className="text-black text-lg font-semibold mb-2 text-center">
+          {selectedMobileLayer.descriptionTitle}
+        </h4>
+        <p className="text-gray-700 text-sm leading-relaxed text-center">
+          {selectedMobileLayer.description}
+        </p>
+      </div>
+    )}
+    </div>
+  );
+}