feat: redesign cloud hero section with new layout and capabilities component

- Updated CloudHeroNew with boxed container layout and improved visual hierarchy
- Added new CloudHostingNew component featuring accordion-style capabilities section with dark theme
- Included new cloud hosting images in webp and png formats

src/pages/cloud/CloudHostingNew.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react'
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+import { H1, H5, Eyebrow, H3, P } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const product = {
+  subtitle: 'capabilities',
+  name: 'What You Can Run on Mycelium Cloud',
+  description: '<p>Host nodes, deploy workloads, or build private AI systems, all on infrastructure you own and control.</p>',
+  details: [
+    {
+      name: 'Kubernetes Clusters',
+      description: 'Deterministic K3s workloads across sovereign hardware.',
+    },
+    {
+      name: 'Encrypted Mesh Networking',
+      description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    },
+    {
+      name: 'S3-Compatible Storage',
+      description: 'Distributed storage with erasure coding and residency control.',
+    },
+    {
+      name: 'GPU-Ready',
+      description: 'Scale inference & training on demand.',
+    },
+  ],
+}
+
+
+
+// ✅ keep your product + relatedProducts data above here …
+
+export function CloudHostingNew() {
+  return (
+    <div className="bg-[#121212] text-white">
+        {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
+      <div className="w-full border-t border-l border-r border-gray-600" />
+      {/* ✅ MAIN CONTENT */}
+      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-600">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+
+          {/* ✅ Product Section */}
+          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+            
+            {/* ✅ Image */}
+            <img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-full object-cover" />
+
+            {/* ✅ Product info */}
+            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+                <Eyebrow>{product.subtitle}</Eyebrow>
+              <H3 className=" text-white">{product.name}</H3>
+
+            
+             
+
+              <div className="mt-6 text-gray-300 text-xl"
+                dangerouslySetInnerHTML={{ __html: product.description }}
+              />
+
+
+              {/* ✅ Details accordion */}
+              <section className="mt-12">
+                <div className="divide-y divide-gray-800 border-t border-cyan-500">
+                  {product.details.map((detail) => (
+                    <Disclosure key={detail.name} as="div">
+                      <H3>
+                        <DisclosureButton className="group flex w-full items-center justify-between py-6 text-left">
+                          <span className="text-lg tracking-normal font-medium text-white">
+                            {detail.name}
+                          </span>
+                          <span className="ml-6 flex items-center">
+                            <PlusIcon className="block h-6 w-6 text-gray-500 group-open:hidden" />
+                            <MinusIcon className="hidden h-6 w-6 text-indigo-400 group-open:block" />
+                          </span>
+                        </DisclosureButton>
+                      </H3>
+                      <DisclosurePanel className="pb-6">
+                        <p className="text-gray-400 text-base tracking-normal">{detail.description}</p>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-600" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
+    </div>
+  )
+}