feat: redesign cloud page with improved content structure and visual hierarchy

- Replaced CloudHostingNew with new CloudIntro component featuring tabbed interface for Kubernetes, VDC, and QSFS capabilities
- Added CloudCodeTabs component with interactive code examples and syntax highlighting
- Created CloudPros section highlighting platform architecture, reliability, compatibility, and scalability
- Updated hero section copy to emphasize sovereign edge infrastructure and simplified messaging
- Remove

src/pages/cloud/CloudIntro.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useState } from "react";
+import { CloudCodeTabs } from "./CloudCodeTabs";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const tabs = [
+  {
+    id: "kubernetes",
+    label: "Managed Kubernetes",
+    content: {
+      item: "Managed Kubernetes",
+      desc:
+        "Create and manage clusters across distributed environments using standard Kubernetes tools.",
+
+      bullets: [
+        "Create and manage clusters on distributed nodes",
+        "Run workloads at the edge or across enterprise sites",
+        "Keep full ownership of data and orchestration",
+        "Use the Kubernetes ecosystem without modification",
+      ],
+    },
+  },
+
+  {
+    id: "vdc",
+    label: "Virtual Data Centers",
+    content: {
+      item: "Virtual Data Centers",
+      desc:
+        "Provision and manage full cloud environments without owning or maintaining servers.",
+
+      bullets: [
+        "Create dedicated environments for applications, databases, and internal services",
+        "Add or remove compute and storage resources instantly",
+        "Migrate workloads from cloud or on-prem systems",
+        "Meet compliance requirements by selecting where data resides",
+        "Benefit from continuous monitoring and automated recovery",
+      ],
+    },
+  },
+
+  {
+    id: "qsfs",
+    label: "Quantum Safe File System (QSFS)",
+    content: {
+      item: "Quantum Safe File System (QSFS)",
+      desc:
+        "Encrypted, redundant storage designed for high-security and high-availability workloads. Data is distributed across independent nodes and remains accessible even during failures or outages.",
+
+      bullets: [
+        "Secure file storage with quantum-safe encryption",
+        "Distributed replication for durability",
+        "Standard protocol support: S3, IPFS, WebDAV",
+        "Automatic scaling as data grows",
+        "Consistent performance for research, enterprise, and AI workloads",
+      ],
+    },
+  },
+];
+
+export function CloudIntro() {
+  const [active, setActive] = useState("kubernetes");
+  const current = tabs.find((t) => t.id === active)!.content;
+
+  return (
+    <section className="relative w-full bg-[#121212] overflow-hidden">
+      {/* Top Spacing Border */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
+
+        {/* ================================
+            Header
+        ================================= */}
+        <div className="mb-16">
+          <Eyebrow color="accent">Capabilities</Eyebrow>
+
+          <H3 color="white">What You Can Run on Mycelium Cloud</H3>
+
+          <P className="max-w-3xl text-gray-400 mt-6">
+            Host nodes, deploy workloads, or build private AI systems — all on
+            infrastructure you own and control. Mycelium gives you scalable compute,
+            secure storage, and sovereign orchestration without depending on
+            hyperscalers.
+          </P>
+        </div>
+
+        {/* ================================
+            Two-column layout
+        ================================= */}
+        <div className="flex flex-col lg:flex-row gap-16">
+
+          {/* Left: Code UI */}
+          <div className="w-full lg:w-1/2">
+            <CloudCodeTabs />
+          </div>
+
+          {/* Right: Tabs */}
+          <div className="w-full lg:w-1/2 text-white">
+
+            {/* Tabs Navigation */}
+            <div className="flex gap-6 border-b border-white/10 pb-2">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActive(tab.id)}
+                  className={`text-sm font-medium tracking-wide pb-2 ${
+                    active === tab.id
+                      ? "border-b-2 border-cyan-500 text-white"
+                      : "text-gray-400 hover:text-white"
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Tab Content */}
+            <div className="mt-6 space-y-6">
+              <div>
+                <p className="text-lg font-medium text-white">{current.item}</p>
+                <p className="mt-2 text-base text-gray-400 leading-relaxed">
+                  {current.desc}
+                </p>
+              </div>
+
+              <div className="mt-4 space-y-2">
+                <p className="text-sm uppercase tracking-wide text-cyan-400 font-semibold">
+                  Key capabilities
+                </p>
+
+                <ul className="space-y-2">
+                  {current.bullets.map((b, i) => (
+                    <li key={i} className="text-base text-gray-300 flex gap-2">
+                      <span className="text-cyan-500">•</span>
+                      {b}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Borders */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-b border-gray-800" />
+    </section>
+  );
+}