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

@@ -1,47 +1,51 @@
-import { H3, H5, Eyebrow } from "@/components/Texts"
+import { H3, H5, Eyebrow, P } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-
-export function CloudHeroNew() {
+export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
   return (
-    <div
-      className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/cloudhero4.webp')" }}
-    >
-      <div className="mx-auto max-w-7xl lg:px-8">
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-2xl lg:mx-0">
+    <div className="px-4">
+      {/* Boxed container */}
+      <div
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/cloudhero4.webp')", backgroundSize: "contain" }}
+      >
+        {/* Inner padding */}
+        <div className="px-6 py-16 lg:py-16">
+          <div className="max-w-2xl lg:pl-6">
             <Eyebrow>
-             Mycelium Cloud
+              Mycelium Cloud
             </Eyebrow>
             <H3 className="mt-4">
               Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
-            <H5 className="mt-4 text-lg text-gray-600">
+            <p className="mt-6 text-lg">
               Deploy K3s clusters on a global, self-healing mesh network.
               Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
-            </H5>
-            <H5 className="mt-4 text-sm text-gray-600">
+            </p>
+            <p className="mt-4 lg:text-base italic text-gray-600 text-sm">
               Works Alone. Works Together.
               Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
               for sovereign connectivity.
-            </H5>
+            </p>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
-                to="#"
+                onClick={onGetStartedClick}
                 variant="solid"
-                className=""
                 color="cyan"
               >
                 Get started
               </Button>
               <Button to="#" variant="outline">
-                Documentation <span aria-hidden="true"> →</span>
+                Documentation <span aria-hidden="true">→</span>
               </Button>
             </div>
           </div>
         </div>
+        
       </div>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
     </div>
   )
 }

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

src/pages/cloud/CloudPage.tsx

@@ -6,6 +6,7 @@ import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
 import { CloudBluePrint } from './CloudBluePrint'
 import { CallToAction } from './CalltoAction'
+import { CloudHostingNew } from './CloudHostingNew'
 
 export default function CloudPage() {
   return (
@@ -15,6 +16,10 @@ export default function CloudPage() {
         <CloudHeroNew />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CloudHostingNew />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CloudHosting />
       </AnimatedSection>

src/pages/home/HomeAurora.tsx

@@ -10,7 +10,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
         style={{ backgroundImage: "url('/images/hero11.webp')" }}
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-24 ">
+        <div className="px-6 py-16 lg:py-32 ">
           <div className="max-w-2xl lg:pl-6">
             <div className="hidden sm:flex">
               <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">

src/pages/home/HomePage.tsx

@@ -9,6 +9,7 @@ import { HomeAurora } from './HomeAurora'
 import { HomeTab } from './HomeTab'
 
 
+
 export default function HomePage() {
   const sliderRef = useRef<HTMLDivElement>(null)