From 04b94367a9960a5859f1d112ffba80b93efab0fd Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 13:28:05 +0100
Subject: [PATCH] feat: improve cloud hosting page layout and spacing

- Restructured grid from 2-column to 5-column layout for better content distribution
- Adjusted spacing and margins throughout for improved visual hierarchy
- Updated heading component from h3 to H4 for consistent typography
---
 src/pages/cloud/CloudHostingNew.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/cloud/CloudHostingNew.tsx b/src/pages/cloud/CloudHostingNew.tsx
index 0e3d0d6..da576af 100644
--- a/src/pages/cloud/CloudHostingNew.tsx
+++ b/src/pages/cloud/CloudHostingNew.tsx
@@ -7,7 +7,7 @@ import {
 } from '@headlessui/react'
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
 
-import { Eyebrow, H3 } from "@/components/Texts"
+import { Eyebrow, H3, H4 } from "@/components/Texts"
 
 
 const product = {
@@ -49,26 +49,28 @@ export function CloudHostingNew() {
         <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">
+          <div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
             
             {/* ✅ Image */}
-            <img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-[600px] object-cover" />
+            <div className="lg:col-span-2 lg:mt-8 mt-2">
+              <img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-full object-cover" />
+            </div>
 
             {/* ✅ Product info */}
-            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <div className="mt-8 px-4  sm:px-0 lg:mt-0 lg:col-span-3">
                 <Eyebrow>{product.subtitle}</Eyebrow>
-              <h3 className="lg:text-4xl text-3xl text-white">{product.name}</h3>
+              <H4 className=" text-white">{product.name}</H4>
 
             
              
 
-              <div className="mt-6 text-gray-300 text-xl"
+              <div className="mt-4 text-gray-300 text-xl"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
 
 
               {/* ✅ Details accordion */}
-              <section className="mt-8">
+              <section className="mt-6">
                 <div className="divide-y divide-gray-800 border-t border-cyan-500">
                   {product.details.map((detail) => (
                     <Disclosure key={detail.name} as="div">