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

@@ -0,0 +1,69 @@
+import { Small } from '@/components/Texts'
+
+const highlights = [
+  {
+    label: 'Platform Architecture',
+    title: 'Unified compute, storage & orchestration.',
+    description:
+      'One unified platform for compute, storage, and orchestration.',
+  },
+  {
+    label: 'Reliability',
+    title: 'Consistent performance everywhere.',
+    description:
+      'Runs reliably across distributed environments.',
+  },
+  {
+    label: 'Compatibility',
+    title: 'Works with your existing stack.',
+    description:
+      'Works with your existing tools and workflows.',
+  },
+  {
+    label: 'Scalability',
+    title: 'Grows with your needs.',
+    description:
+      'Scales from small projects to full environments.',
+  },
+]
+
+export  function CloudPros() {
+  return (
+    <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
+      {/* Top spacing line */}
+      <div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      <div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
+        <div className="grid lg:grid-cols-4">
+          {highlights.map((item) => (
+            <div
+              key={item.title}
+              className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
+            >
+              {/* Hover glow */}
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
+                  {item.label}
+                </Small>
+
+                <h3 className="mt-4 text-lg font-semibold leading-tight text-black">
+                  {item.title}
+                </h3>
+
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
+    </section>
+  )
+}