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/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>
+  );
+}