From 15e81cb5cd37a4eae730a2aea18a9682ca7ff85f Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 6 Nov 2025 21:30:17 +0100
Subject: [PATCH] refactor: adjust CloudHostingNew layout spacing and styling

- Changed image width from full-width to fixed 600px
- Replaced H3 component with native h3 element with responsive text sizing
- Reduced top margin on details section from mt-12 to mt-8
---
 src/pages/cloud/CloudHeroNew.tsx    | 2 +-
 src/pages/cloud/CloudHostingNew.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx
index 7ffc364..bea8cb7 100644
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/Button"
 
 export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
   return (
-    <div className="px-4">
+    <div className="">
       {/* 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"
diff --git a/src/pages/cloud/CloudHostingNew.tsx b/src/pages/cloud/CloudHostingNew.tsx
index 9f213e2..a872939 100644
--- a/src/pages/cloud/CloudHostingNew.tsx
+++ b/src/pages/cloud/CloudHostingNew.tsx
@@ -56,12 +56,12 @@ export function CloudHostingNew() {
           <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" />
+            <img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-[600px] 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>
+              <h3 className="lg:text-4xl text-3xl text-white">{product.name}</h3>
 
             
              
@@ -72,7 +72,7 @@ export function CloudHostingNew() {
 
 
               {/* ✅ Details accordion */}
-              <section className="mt-12">
+              <section className="mt-8">
                 <div className="divide-y divide-gray-800 border-t border-cyan-500">
                   {product.details.map((detail) => (
                     <Disclosure key={detail.name} as="div">