refactor: consolidate cloud and agents page components

- Removed duplicate hero component variations (AgentsHero/AgentsHeroAlt, CloudHero/CloudHeroAlt)
- Deleted unused CloudCTA, CloudGettingStarted, and CloudDesign components
- Cleaned up empty files and legacy page structure

src/pages/agents/archive/AgentsHero.tsx

@@ -2,9 +2,9 @@
 
 import { useId, useState } from 'react'
 
-import { Button } from '../../components/Button'
-import { Container } from '../../components/Container'
-import ContactForm from '../../components/ContactForm'
+import { Button } from '../../../components/Button'
+import { Container } from '../../../components/Container'
+import ContactForm from '../../../components/ContactForm'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()

src/pages/compute/archive/ComputeDeveloperExperience.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const codeSamples = [
   {

src/pages/compute/archive/ComputeDifferentiators.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const differentiators = [
   {

src/pages/compute/archive/ComputeUseCasesArchived.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const primaryUseCases = [
   {
@@ -112,7 +112,7 @@ export function ComputeUseCases() {
             {computeSpecific.map((useCase) => (
               <div
                 key={useCase.title}
-                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
+                className="rounded-3xl border border-cyan-400/20 bg-linear-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
               >
                 <h3 className="text-xl font-semibold text-white">
                   {useCase.title}

src/pages/compute/archive/ComputeZeroImage.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const zeroImageBenefits = [
   'Metadata-only artifacts replace heavy images for ultra-fast delivery.',
@@ -10,11 +10,11 @@ const zeroImageBenefits = [
 
 export function ComputeZeroImage() {
   return (
-    <section className="relative overflow-hidden bg-gradient-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
+    <section className="relative overflow-hidden bg-linear-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <div className="absolute -top-32 right-1/4 h-72 w-72 rounded-full bg-cyan-500/30 blur-[120px]" />
         <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-[140px]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,_rgba(8,145,178,0.18),_transparent_55%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,rgba(8,145,178,0.18),transparent_55%)]" />
       </div>
       <Container className="relative">
         <div className="grid items-center gap-12 lg:grid-cols-[0.85fr_1.15fr]">

src/pages/gpu/archive/GpuArchitectureArchive.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const architectureSections = [
   {

src/pages/gpu/archive/GpuDifferentiators.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const differentiators = [
   {
@@ -52,7 +52,7 @@ export function GpuDifferentiators() {
           {differentiators.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
             >
               <h3 className="text-lg font-semibold text-white">{item.title}</h3>
               <p className="mt-4 text-sm leading-relaxed text-gray-300">
@@ -61,7 +61,7 @@ export function GpuDifferentiators() {
             </div>
           ))}
         </div>
-        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-8 text-left backdrop-blur-sm">
           <h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
           <p className="mt-4 text-sm leading-relaxed text-gray-300">
             Transparent economics makes capacity planning simple while keeping

src/pages/gpu/archive/GpuGettingStarted.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../../components/Texts'
 
 const steps = [
   {
@@ -44,7 +44,7 @@ export function GpuGettingStarted() {
       id="gpu-getting-started"
       className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
     >
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.12),transparent_60%)]" />
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
@@ -63,7 +63,7 @@ export function GpuGettingStarted() {
           {steps.map((step) => (
             <div
               key={step.title}
-              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/6"
             >
               <div className="flex items-center justify-between">
                 <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
@@ -91,7 +91,7 @@ export function GpuGettingStarted() {
             </div>
           ))}
         </div>
-        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center backdrop-blur-sm">
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-6 text-center backdrop-blur-sm">
           <p className="text-sm font-medium uppercase tracking-[0.3em] text-cyan-200">
             Basic Workflow
           </p>

src/pages/gpu/archive/GpuIntegration.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const integrationPoints = [
   'Unified Mycelium networking provides secure access to GPU nodes.',
@@ -50,7 +50,7 @@ export function GpuIntegration() {
           </P>
         </div>
         <div className="mt-16 grid gap-10 lg:grid-cols-2">
-          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
+          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/4 p-8 text-left backdrop-blur-sm">
             <h3 className="text-lg font-semibold text-white">
               Platform alignment
             </h3>
@@ -66,7 +66,7 @@ export function GpuIntegration() {
               ))}
             </ul>
           </div>
-          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
+          <div className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm">
             <h3 className="text-lg font-semibold text-white">
               Kubernetes deployment example
             </h3>

src/pages/home/HomeBenefits.tsx

@@ -34,7 +34,7 @@ export function HomeBenefits() {
     },
   ];
   return (
-    <div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
+    <div className="relative z-20 bg-blackpy-10 lg:py-24 max-w-7xl mx-auto">
       <div className="px-12">
         <Eyebrow className="text-center text-cyan-500">
          Benefits
@@ -207,7 +207,7 @@ export const SkeletonTwo = () => {
             }}
             whileHover="whileHover"
             whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-black s border-neutral-100 shrink-0 overflow-hidden"
           >
             <img
               src={image}

src/pages/home/HomeHosting.tsx

@@ -1,4 +1,3 @@
-
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P } from '../../components/Texts'
 
@@ -82,8 +81,6 @@ function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-/* ✅ Updated Feature List */
-
 const features = [
   {
     name: 'Kubernetes Clusters',
@@ -107,48 +104,40 @@ const features = [
   },
 ]
 
-/* ✅ Component */
-
 export function HomeHosting() {
   return (
     <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',
-      }}
+      className="py-20 sm:py-32"
     >
-      {/* ✅ Soft overlay for readable text */}
-      <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
-
-      <Container className="relative z-10">
+      <Container>
         <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.
+            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>
 
         <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"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm 
+                     sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
         >
           {features.map((feature) => (
             <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"
+              className="rounded-2xl border border-gray-200 p-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"
             >
-              <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>
+              <feature.icon className="h-14 w-14" />
+              <h3 className="mt-6 font-semibold text-gray-900">{feature.name}</h3>
+              <p className="mt-2 text-gray-700">{feature.description}</p>
             </li>
           ))}
         </ul>

src/pages/home/HomePage.tsx

@@ -1,13 +1,13 @@
 
 import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-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'
 import { HomeAurora } from './HomeAurora'
+import { HomeTab } from './HomeTab'
 
 
 export default function HomePage() {
@@ -27,15 +27,15 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHostingDark   />
+        <HomeHosting />
       </AnimatedSection>
 
       <AnimatedSection>
-        <StackSectionLight />
+        <StackSectionDark />
       </AnimatedSection>
 
-      <AnimatedSection ref={sliderRef}>
-        <HomeSlider />
+      <AnimatedSection>
+        <HomeTab />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/home/HomeTab.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/Button";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+import cloudImage from "/images/pages/cloud.png";
+import networkImage from "/images/pages/network.png";
+import agentImage from "/images/pages/agent.png";
+import computeImage from "/images/pages/compute.png";
+
+const tabs = [
+  {
+    id: "cloud",
+    label: "Kubernetes Clusters",
+    title: "Mycelium Cloud",
+    description: "Deploy Kubernetes clusters on sovereign infrastructure.",
+    image: "/images/pages/cloud.png",
+    bg: cloudImage,
+    link: "/cloud",
+  },
+  {
+    id: "network",
+    label: "Mesh Networking",
+    title: "Mycelium Network",
+    description: "Encrypted peer-to-peer mesh networking across the globe.",
+    image: "/images/pages/network.png",
+    bg: networkImage,
+    link: "/network",
+  },
+  {
+    id: "agent",
+    label: "AI Agents",
+    title: "Mycelium Agents",
+    description: "Private, programmable AI systems that run on your hardware.",
+    image: "/images/pages/agent.png",
+    bg: agentImage,
+    link: "/agent",
+  },
+  {
+    id: "compute",
+    label: "Compute & Storage",
+    title: "Hardware Resources",
+    description: "The resource layers powering the stack.",
+    image: "/images/pages/compute.png",
+    bg: computeImage,
+    link: "/compute",
+  },
+];
+
+export function HomeTab() {
+  const [active, setActive] = useState("cloud");
+  const current = tabs.find((t) => t.id === active)!;
+
+  return (
+    <section className="mx-4 px-6 lg:px-8 lg:mx-auto max-w-7xl py-24">
+      <div className="space-y-12 text-center">
+
+        {/* ✅ Replaced H1 + P with Eyebrow + H3 + P */}
+        <Eyebrow className="text-gray-500">Ecosystem</Eyebrow>
+
+        <H3 className="text-gray-900">
+          Mycelium Components
+        </H3>
+
+        <P className="text-gray-500 max-w-4xl mx-auto">
+          Each component can be used on its own or combined into a fully sovereign cloud.
+        </P>
+
+        {/* ✅ Tabs & content centered */}
+        <div className="flex justify-center">
+          <div className="space-y-10 max-w-5xl w-full">
+
+            {/* ✅ Tabs */}
+            <div className="flex justify-center">
+              <div className="flex flex-wrap gap-3 bg-gray-50 rounded-full p-2 border border-gray-200">
+                {tabs.map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActive(tab.id)}
+                    className={`px-5 py-2 rounded-full text-sm font-medium transition-all
+                    ${
+                      active === tab.id
+                        ? "bg-white border border-gray-300 shadow-sm"
+                        : "text-gray-500 hover:text-gray-900"
+                    }`}
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* ✅ 2-column layout */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+
+              {/* Left content */}
+              <div className="space-y-4 text-left mx-auto">
+                <h4 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">
+                  {current.title}
+                </h4>
+
+                <p className="text-sm text-gray-500 leading-relaxed max-w-md">
+                  {current.description}
+                </p>
+
+                <Button
+                  variant="outline"
+                  color="gray"
+                  asChild
+                  className="mt-2"
+                >
+                  <a href={current.link}>Learn More</a>
+                </Button>
+              </div>
+
+              {/* Right content */}
+              <div className="flex items-center justify-center">
+                <img
+                  src={current.image}
+                  alt={current.title}
+                  className="w-full max-w-xs object-contain rounded-xl border border-gray-200 shadow-sm"
+                />
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/home/archive/HomeComparisonTable.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { Eyebrow, H3, P, CT } from '../../components/Texts'
+import { Eyebrow, H3, P, CT } from '../../../components/Texts'
 
 const features = [
   { name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },

src/pages/storage/archive/StorageDeveloperExperience.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 type Experience = {
   title: string
@@ -95,7 +95,7 @@ export function StorageDeveloperExperience() {
           {experiences.map((experience) => (
             <div
               key={experience.title}
-              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
             >
               <div>
                 <h3 className="text-xl font-semibold text-white">

src/pages/storage/archive/StorageDifferentiators.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
 
 const differentiators = [
   {
@@ -50,7 +50,7 @@ export function StorageDifferentiators() {
           {differentiators.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
             >
               <h3 className="text-lg font-semibold text-white">{item.title}</h3>
               <p className="mt-4 text-sm leading-relaxed text-gray-300">

src/pages/storage/archive/StorageFeatures.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Container } from '../../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../../components/Texts'
 
 const features = [
   {