feat: update cube component color scheme from cyan to blue

- Changed cube gradient colors from cyan to blue for better visual consistency
- Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan
- Modified background aura gradients in StackSection for enhanced depth perception
- Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout
- Added isolate property to StackSection to prevent gradient bleeding
- Enhanced background layer in StackSection with additional

src/pages/home/HomePage.tsx

@@ -5,6 +5,7 @@ import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
+import { HomeSlider } from './HomeSlider'
 
 
 export default function HomePage() {
@@ -24,7 +25,7 @@ export default function HomePage() {
 
 
       <AnimatedSection>
-        <HomeFeaturesDark />
+        <HomeSlider />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/home/HomeSlider.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
+import { H2, H3, P } from "@/components/Texts";
+
+export function HomeSlider() {
+  const cards = data.map((card, index) => (
+    <Card key={card.src} card={card} index={index} />
+  ));
+
+  return (
+    <div className="w-full h-full py-20 bg-black">
+      <div className="max-w-7xl mx-auto pl-4">
+        <H3 className="text-left text-white">
+          Discover the Mycelium Ecosystem
+        </H3>
+        <div className="mt-4 max-w-3xl">
+          <P className="text-left text-neutral-400">
+            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+          </P>
+        </div>
+      </div>
+      <Carousel items={cards} />
+    </div>
+  );
+}
+
+const DummyContent = () => {
+  return (
+    <div className="bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4 max-w-3xl">
+      <P className="text-neutral-400 text-base md:text-2xl font-sans  mx-auto">
+        Mycelium is a decentralized compute network that allows you to run AI models and other software on a global network of devices. Mycelium is built on top of the Mycelium Network, a decentralized network of devices that are connected to each other and to the internet.
+      </P>
+      <img
+        src="/images/gallery/1.webp"
+        alt="Macbook mockup from Aceternity UI"
+        height="500"
+        width="500"
+        className="md:w-1/2 md:h-1/2 h-full w-full mx-auto object-cover"
+      />
+    </div>
+  );
+};
+
+const data = [
+  {
+    category: "DePIN",
+    title: "Mycelium Network",
+    src: "/images/gallery/9.webp",
+    content: <DummyContent />,
+  },
+  {
+    category: "AI Agent",
+    title: "Mycelium Agent",
+    src: "/images/gallery/2.webp",
+    content: <DummyContent />,
+  },
+  {
+    category: "Cloud",
+    title: "Mycelium Cloud",
+    src: "/images/gallery/3.webp",
+    content: <DummyContent />,
+  },
+
+  {
+    category: "GPU",
+    title: "Mycelium GPU",
+    src: "/images/gallery/4.webp",
+    content: <DummyContent />,
+  },
+  {
+    category: "Compute",
+    title: "Mycelium Compute",
+    src: "/images/gallery/5.webp",
+    content: <DummyContent />,
+  },
+  {
+    category: "Storage",
+    title: "Mycelium Storage",
+    src: "/images/gallery/6.webp",
+    content: <DummyContent />,
+  },
+];

src/pages/home/StackSection.tsx

@@ -7,35 +7,53 @@ import { FadeIn } from "@/components/ui/FadeIn";
 
 export function StackSectionLight() {
   return (
-    <section className="relative w-full overflow-hidden py-24 lg:py-40">
+    <section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
       {/* === Background Layer === */}
-      <div className="absolute inset-0 -z-10 bg-transparent">
-       
-
-        {/* === Center Radial Glow Aura === */}
+      <div className="absolute inset-0 z-0 bg-transparent">
+        {/* Central main aura */}
         <motion.div
           className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
           style={{
             background:
-              "radial-gradient(circle, rgba(173,255,255,0.5) 0%, rgba(0,220,255,0.3) 30%, rgba(255,255,255,0) 70%)",
-            filter: "blur(120px)",
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
+            filter: "blur(140px)",
           }}
           animate={{
-            opacity: [0.6, 0.8, 0.6],
+            opacity: [0.5, 0.8, 0.5],
             scale: [1, 1.05, 1],
           }}
           transition={{
-            duration: 8,
+            duration: 9,
             repeat: Infinity,
             ease: "easeInOut",
           }}
         />
+
+        {/* Faint cyan mist in the back for depth */}
+        <motion.div
+          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 50%, rgba(255,255,255,0) 90%)",
+            filter: "blur(200px)",
+          }}
+          animate={{
+            opacity: [0.2, 0.35, 0.2],
+            scale: [1, 1.1, 1],
+          }}
+          transition={{
+            duration: 12,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 3,
+          }}
+        />
       </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">
+        <div className="text-center lg:text-left z-10">
           <FadeIn>
             <Eyebrow color="accent">Technology Layers</Eyebrow>
             <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
@@ -53,7 +71,7 @@ export function StackSectionLight() {
         </div>
 
         {/* Right Column - Animated Stack */}
-        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
           <motion.div
             initial={{ y: 30, opacity: 0 }}
             whileInView={{ y: 0, opacity: 1 }}