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
This commit is contained in:
2025-11-06 21:30:17 +01:00
parent 0e6ecedf85
commit 15e81cb5cd
2 changed files with 4 additions and 4 deletions

View File

@@ -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"

View File

@@ -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">