ok

src/app/(main)/page.tsx

@@ -10,12 +10,14 @@ import { About } from '@/components/About'
 import { HomeHero } from '@/components/HomeHero'
 import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
+import { StackSectionPreview } from '@/components/StackSection'
 
 export default function Home() {
   return (
     <>
       <HomeHero />  
       <HomeAbout />
+      <StackSectionPreview />
       <ClickableGallery />
       <Benefits />
       <PrimaryFeatures />

src/components/Candy.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Image from 'next/image'
+
+export function Candy() {
+  return (
+    <div className="hidden lg:block absolute bottom-4 left-1/6 -translate-x-1/2">
+      <Image
+        src="/images/candy.gif"
+        alt="Candy"
+        width={600}
+        height={600}
+        unoptimized
+      />
+    </div>
+  )
+}

src/components/HomeAbout.tsx

@@ -7,6 +7,8 @@ import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import diamondSvg from '@/images/diamond.svg'
+import { Container } from '@/components/Container'
+import { Candy } from '@/components/Candy'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -73,6 +75,8 @@ export function HomeAbout() {
             With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
           </motion.p>
           
+          <Candy />
+
           <div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
             <div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
               {[...features, ...features].map((feature, index) => (

src/components/HomeHero.tsx

@@ -58,7 +58,7 @@ export function HomeHero() {
           <div className="text-center max-w-5xl">
             <TypeAnimation
               sequence={[
-                'Decentralized Agentic Cloud.',
+                'Decentralized Autonomous Agentic Cloud',
                 1000,
               ]}
               wrapper="h1"
@@ -73,7 +73,7 @@ export function HomeHero() {
             transition={{ duration: 1, delay: 1 }}
           >
             <p className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl">
-              Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty.
+              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
             </p>
           </motion.div>
           <a href="#about" className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-3xl animate-bounce-y">

src/components/StackSection.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { StackedCubes } from "@/components/ui/StackedCubes";
+import { Button } from "@/components/Button";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+export function StackSectionPreview() {
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+
+  return (
+    <section ref={ref} className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
+    {/* Gradient Blob Component */}
+      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
+      <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
+      <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-start">
+          {/* Left Column - Text (1/3 width) */}
+          <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
+            <motion.h2
+              className="text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              Next-Gen AI Infrastructure
+            </motion.h2>
+            <motion.p
+              className="mx-auto mt-8 max-w-3xl text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            >
+              Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <Button className="mt-12" variant="outline"  href="https://threefold.io/build" >Discover How It Works →</Button>
+            </motion.div>
+          </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">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+            >
+              <StackedCubes />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ui/Cube.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+}
+
+
+export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* Image Cube */}
+        <Image
+          src="/images/cube.png"
+          alt="Cube"
+          width={507}
+          height={234}
+          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg"
+          style={{
+            filter: isActive
+              ? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
+              : 'brightness(0.9) drop-shadow(0 10px 15px rgba(144, 137, 252, 0.2))',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <h3 
+            className="text-[#2F3178] text-sm lg:text-base font-semibold text-center px-4 drop-shadow-lg"
+            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="currentColor"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <p className="text-sm leading-relaxed font-light">
+                {description}
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Description for Mobile - Below cube */}
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ duration: 0.3 }}
+            className="lg:hidden absolute top-full left-1/2 -translate-x-1/2 mt-8 z-50"
+          >
+            <div className="w-64 sm:w-80 px-4 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2 text-center">
+                {descriptionTitle}
+              </h4>
+              <p className="text-sm leading-relaxed font-light text-center">
+                {description}
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+}

src/components/ui/StackedCubes.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Cube } from "@/components/ui/Cube";
+
+const stackData = [
+  {
+    id: "agent",
+    title: "Agent Layer",
+    descriptionTitle: "Personal Agents - Secure & Sovereign",
+    description:
+      "Personal AI agents operate as secure digital twins, providing tailored intelligent assistance. They interact with existing chat, MCP agents, and coding tools while maintaining sovereignty and ecosystem compatibility.",
+    position: "top",
+  },
+  {
+    id: "ai",
+    title: "AI Layer",
+    descriptionTitle: "AI Agents & AI Brains + Mycelium Code & Compute Sandboxes",
+    description:
+      "Intelligence core combining LLMs with specialized AI agents. Mycelium-powered sandboxes provide secure environments for development, testing, and compilation with active memory systems and unbreakable network architecture.",
+    position: "middle",
+  },
+  {
+    id: "cloud",
+    title: "Cloud Layer",
+    descriptionTitle: "Mycelium Compute & Storage - Decentralized Infrastructure Layer",
+    description:
+      "Foundation runs bare metal Zero OS enabling autonomous cloud. Decentralized infrastructure supports Web2, Web3, AI workloads with superior scalability. Built on twenty years cloud experience.",
+    position: "bottom",
+  },
+];
+
+export function StackedCubes() {
+  const [active, setActive] = useState<string | null>("agent");
+
+  return (
+    <div 
+      className="relative w-full flex items-center justify-center lg:justify-start min-h-[600px] sm:min-h-[700px] lg:min-h-[600px]"
+      onMouseLeave={() => setActive("agent")}
+    >
+      <motion.div
+        className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
+        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: `${index * 100}px`,
+              zIndex: active === layer.id ? 20 : 10 - index,
+            }}
+          >
+            <Cube
+              title={layer.title}
+              descriptionTitle={layer.descriptionTitle}
+              description={layer.description}
+              isActive={active === layer.id}
+              index={index}
+              onHover={() => setActive(layer.id)}
+              onLeave={() => {}}
+            />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}