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/home/HomeDesign.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+const benefits = [
+  {
+    id: 1,
+    title: "For Integrators & Builders",
+    description:
+      "Deploy sovereign infrastructure for organizations, governments, and large-scale systems.",
+    image: "/images/dev.png",
+  },
+  {
+    id: 2,
+    title: "For Enterprises & Institutions",
+    description:
+      "Protect data, meet local compliance, and unlock new AI capabilities across distributed environments.",
+    image: "/images/cons.png",
+  },
+  {
+    id: 3,
+    title: "For Sovereignty Seekers",
+    description:
+      "Run nodes, build applications, and connect directly without relying on centralized platforms.",
+    image: "/images/seekers.png",
+  },
+];
+
+export function HomeDesign() {
+  return (
+    <section className="w-full max-w-8xl mx-auto bg-white dark:bg-transparent">
+
+      {/* Top spacing line */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 dark:border-gray-800" />
+      <div className="w-full border border-l border-r border-gray-200 dark:border-gray-800" />
+
+      {/* Content */}
+      <div className="mx-auto max-w-7xl border-gray-200 dark:border-gray-800">
+        <dl className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-0">
+          {benefits.map((item) => (
+            <div
+              key={item.id}
+              className="group flex items-start gap-2 bg-white/40 dark:bg-black/40 px-8 py-12 border border-gray-200 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+            >
+              {/* Image on the LEFT */}
+              <img
+                src={item.image}
+                alt={item.title}
+                className="h-30 w-30 object-contain opacity-90"
+              />
+
+              {/* Text on the RIGHT */}
+              <div className="text-left">
+                <h3 className="text-base  font-semibold tracking-wide text-gray-900 dark:text-white mb-2">
+                  {item.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed max-w-xs">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </dl>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-t border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </section>
+  );
+}