feat: update UI styling and add new overview sections

- Changed DarkCard border radius from rounded-3xl to rounded-xl for more subtle styling
- Added ComputeOverview section to compute page
- Replaced StackSectionLight with new StackSectionDark component featuring enhanced aurora effects and improved visual hierarchy

src/components/ui/cards.tsx

@@ -8,7 +8,7 @@ const DarkCard = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
+      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
       className
     )}
     {...props}

src/pages/compute/ComputePage.tsx

@@ -6,6 +6,7 @@ import { ComputeUseCases } from './ComputeUseCases'
 import { CallToAction } from './CallToAction'
 import { ComputeCapabilities } from './ComputeCapabilities'
 import { ComputeDesign } from './ComputeDesign'
+import { ComputeOverview } from './ComputeOverview'
 
 
 export default function ComputePage() {
@@ -35,6 +36,10 @@ export default function ComputePage() {
         <ComputeUseCases />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <ComputeOverview />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/home/HomeHosting.tsx

@@ -1,6 +1,6 @@
-import { useId } from 'react'
+
 import { Container } from '../../components/Container'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+import {Eyebrow, H3, P } from '../../components/Texts'
 
 /* ✅ Custom Icons */
 

src/pages/home/HomePage.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { StackSectionLight } from './StackSection'
+import { StackSectionDark } from './StackSectionDark'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
@@ -18,7 +18,7 @@ export default function HomePage() {
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora onGetStartedClick={handleScrollToSlider} />
+        <HomeAurora/>
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -30,7 +30,7 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <StackSectionLight />
+        <StackSectionDark />
       </AnimatedSection>
 
       <AnimatedSection ref={sliderRef}>

src/pages/home/StackSectionDark.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { StackedCubes } from "@/components/ui/StackedCubes";
+import { P, Eyebrow, H3 } from "@/components/Texts";
+import { FadeIn } from "@/components/ui/FadeIn";
+
+export function StackSectionDark() {
+  return (
+    <section className="relative w-full bg-[#121212] overflow-hidden py-24 isolate">
+      {/* === Background Layer === */}
+      <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(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
+            filter: "blur(140px)",
+          }}
+          animate={{
+            opacity: [0.5, 0.8, 0.5],
+            scale: [1, 1.05, 1],
+          }}
+          transition={{
+            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) 20§§%, rgba(255,255,255,0) 30%)",
+            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 pt-12">
+        {/* Left Column - Text */}
+        <div className="text-center lg:text-left z-10">
+          <FadeIn>
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
+            <H3 color="white" className="">
+              Mycelium Stack
+            </H3>
+          </FadeIn>
+
+          <FadeIn>
+            <P color="dark" className="mt-6  text-gray-200">
+              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
+            </P>
+          </FadeIn>
+        </div>
+
+        {/* Right Column - Animated Stack */}
+        <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 }}
+            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"
+            >
+              <StackedCubes />
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/storage/StorageOverview.tsx

@@ -26,6 +26,7 @@ export function StorageOverview() {
   return (
     <section className="bg-gray-950 py-24 sm:py-32">
       <Container>
+        
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
             Platform Overview