ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: improve cloud hosting page layout and spacing

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-07 13:28:05 +01:00
parent cdd6e3104b
commit 04b94367a9
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/cloud/CloudHostingNew.tsx
View File

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