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/Header.tsx

@@ -28,7 +28,7 @@ export function Header() {
   return (
     <header>
       <nav>
-                <Container className="relative z-50 flex justify-between py-4">
+                <Container className="relative z-50 flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />

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/HomeAurora.tsx

@@ -1,45 +1,65 @@
-import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-
-export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+export function HomeAurora() {
   return (
     <div
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      className="relative isolate overflow-hidden h-screen"
+      style={{
+        backgroundImage: "url('/images/cloud.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
     >
-      <div className="mx-auto max-w-7xl lg:px-4">
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-2xl lg:mx-0">
-            <div className="hidden sm:flex">
-              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-                Deploying at scale?{' '}
-                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-                  <span aria-hidden="true" className="absolute inset-0" />
-                  Book a call  <span>&rarr;</span>
-                </a>
+      <div className="relative isolate px-6 lg:px-8">
+        {/* Top cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
+          />
         </div>
       </div>
-            <H1 className="mt-8">
+
+      <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
+        <div className="mx-auto max-w-2xl text-center">
+          <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
             The Sovereign Agentic Cloud
-            </H1>
-            <H5 className="mt-8 text-lg text-gray-600">
+          </h1>
+
+          <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
             Host nodes, deploy workloads, or build private AI systems,
-all on infrastructure you own and control.
-            </H5>
-            <div className="mt-10 flex items-center gap-x-6">
-              <Button
-                variant="solid"
-                className=""
-                color="cyan"
-                onClick={onGetStartedClick}
-              >
+            all on infrastructure you own and control.
+          </p>
+
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Button variant="solid" color="cyan" href="#">
               Start Hosting
             </Button>
-              <Button to="#" variant="outline">
-                Deploy in Cloud <span aria-hidden="true"> →</span>
+
+            <Button href="#" variant="outline" color="gray">
+              Deploy in Cloud <span aria-hidden="true">→</span>
             </Button>
           </div>
+
+          {/* Bottom cyan soft blob */}
+          <div
+            aria-hidden="true"
+            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
+          >
+            <div
+              style={{
+                clipPath:
+                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+              }}
+              className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
+            />
           </div>
         </div>
       </div>

src/pages/home/HomeAuroracopy.tsx

@@ -0,0 +1,48 @@
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+  return (
+    <div
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
+    >
+      <div className="mx-auto max-w-7xl lg:px-4">
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <div className="hidden sm:flex">
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                Deploying at scale?{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Book a call  <span>&rarr;</span>
+                </a>
+              </div>
+            </div>
+            <H1 className="mt-8">
+              The Sovereign Agentic Cloud
+            </H1>
+            <H5 className="mt-8 text-lg text-gray-600">
+              Host nodes, deploy workloads, or build private AI systems, 
+all on infrastructure you own and control.
+            </H5>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                variant="solid"
+                className=""
+                color="cyan"
+                onClick={onGetStartedClick}
+              >
+                 Start Hosting 
+              </Button>
+              <Button to="#" variant="outline">
+                Deploy in Cloud <span aria-hidden="true"> →</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -66,8 +66,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
-                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CT color="light" className="uppercase tracking-wide ">CORES</CT></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
@@ -82,8 +82,8 @@ export function WorldMap() {
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
-                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
@@ -98,8 +98,8 @@ export function WorldMap() {
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
-                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
@@ -114,8 +114,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
-                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>

src/pages/home/HomeHosting.tsx

@@ -1,65 +1,158 @@
-import {
-  ArrowPathIcon,
-  CloudArrowUpIcon,
-  ServerIcon,
-  ShieldCheckIcon,
-} from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+import { Container } from '../../components/Container'
+import {Eyebrow, H3, P } from '../../components/Texts'
+
+/* ✅ Custom Icons */
+
+function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="M16 7
+           L23 11
+           L25 19
+           L19 25
+           L13 25
+           L7 19
+           L9 11
+           Z"
+        fill="#737373"
+      />
+      <circle cx={16} cy={16} r={2} fill="#171717" />
+      <line x1="16" y1="9"  x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="9"  y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
+      <line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <circle cx={16} cy={8} r={2} fill="#171717" />
+      <circle cx={13} cy={17} r={1.5} fill="#171717" />
+      <circle cx={19} cy={17} r={1.5} fill="#171717" />
+      <line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
+      <rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
+      <path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="
+          M16 8
+          l8 4
+          v6
+          c0 4 -3 7 -8 9
+          c-5 -2 -8 -5 -8 -9
+          v-6
+          l8 -4
+        "
+        fill="#737373"
+      />
+      <path
+        d="M13 18l2 2l4 -4"
+        stroke="#171717"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/* ✅ Updated Feature List */
 
 const features = [
   {
     name: 'Kubernetes Clusters',
     description: 'Deploy and scale containerized apps across your own hardware.',
-    icon: ServerIcon,
+    icon: KubernetesIcon,
   },
   {
     name: 'AI Agents & LLM Runtimes',
     description: 'Run open-source models locally, securely, and offline.',
-    icon: ArrowPathIcon,
+    icon: AIAgentsIcon,
   },
   {
     name: 'S3-Compatible Storage',
     description: 'Your own personal over-the-network drive, encrypted end-to-end.',
-    icon: CloudArrowUpIcon,
+    icon: S3StorageIcon,
   },
   {
     name: 'Mesh VPN & Zero-Trust Networking',
     description: 'Securely connect all your devices and remote locations.',
-    icon: ShieldCheckIcon,
+    icon: VPNIcon,
   },
 ]
 
+/* ✅ Component */
+
 export function HomeHosting() {
   return (
-    <div className="relative bg-white py-24 lg:py-32">
-      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
-        <Eyebrow>DEPLOY</Eyebrow>
-        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</H3>
-        <P className="mx-auto mt-5 max-w-prose">
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-          giving your data or control to anyone.
+    <section
+      id="comingsoon"
+      aria-label="Features"
+      className="py-20 sm:py-32 relative isolate overflow-hidden"
+      style={{
+        backgroundImage: "url('/images/bg2.jpg')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      {/* ✅ Soft overlay for readable text */}
+      <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
+
+      <Container className="relative z-10">
+        <div className="mx-auto max-w-4xl sm:text-center">
+          <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
+          <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Expanding the Network Layer
+          </H3>
+          <P className="mt-6 text-lg text-gray-600">
+            The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
+            These enhancements deepen autonomy and improve real-world usability.
           </P>
-        <div className="mt-16">
-          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
+        </div>
+
+        <ul
+          role="list"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm  sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
+        >
           {features.map((feature) => (
-              <div key={feature.name} className="relative">
-                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
-                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
-                    <feature.icon aria-hidden="true" className="size-8 text-white" />
-                  </span>
-                  <CT as="h3" className="mt-4">
-                    {feature.name}
-                  </CT>
-                  <CP color="secondary" className="mt-4">
-                    {feature.description}
-                  </CP>
-                </div>
-              </div>
+            <li
+              key={feature.name}
+              className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
+            >
+              <feature.icon className="h-12 w-12" />
+              <p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
+              <p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
+            </li>
           ))}
-          </div>
-        </div>
-      </div>
-    </div>
+        </ul>
+      </Container>
+    </section>
   )
 }

src/pages/home/HomePage.tsx

@@ -1,12 +1,12 @@
 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'
 import { HomeSlider } from './HomeSlider'
-import { HomeHostingDark } from './HomeHostingDark'
+import { HomeHosting } from './HomeHosting'
 
 
 export default function HomePage() {
@@ -18,7 +18,7 @@ export default function HomePage() {
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora onGetStartedClick={handleScrollToSlider} />
+        <HomeAurora/>
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -26,11 +26,11 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHostingDark   />
+        <HomeHosting />
       </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