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

refactor: standardize vertical spacing across feature sections

Browse Source 
- Reduced py-10 to py-8 for consistent spacing in feature grids and carousels
- Restructured HomeHosting and HomeTab sections with full-width border layout pattern
- Replaced HomeTab card grid with bento-style component showcase layout
This commit is contained in:
sasha-astiadi
2025-11-06 19:46:09 +01:00
parent 7ee6da68fe
commit ae3e78f75a
12 changed files with 194 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/home/HomeHosting.tsx
View File

@@ -108,38 +108,51 @@ const features = [
export function HomeHosting() {
return (
<section className="mx-4 py-12 border-t-0 lg:mx-auto max-w-7xl border border-gray-200 lg:py-24">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Expanding the Network Layer
</H3>
<P className="mt-6 text-lg text-gray-600">
The Mycelium Network is evolving to support richer data movement, identity,
and application connectivity across the mesh. These enhancements deepen autonomy
and improve real-world usability.
</P>
</div>
<section className="w-full max-w-8xl mx-auto bg-transparent">
<ul
role="list"
className="mx-auto grid max-w-2xl grid-cols-1 gap-6 text-sm
lg:mt-12 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
>
{features.map((feature) => (
<li
key={feature.name}
className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
<div className="w-full border-t border-l border-r border-gray-200" />
{/* ✅ Inner content container */}
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Expanding the Network Layer
</H3>
<P className="mt-6 text-lg text-gray-600">
The Mycelium Network is evolving to support richer data movement, identity,
and application connectivity across the mesh. These enhancements deepen autonomy
and improve real-world usability.
</P>
</div>
<ul
role="list"
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
sm:grid-cols-2 lg:max-w-none lg:grid-cols-4 md:gap-y-10"
>
<feature.icon className="h-14 w-14" />
<h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
<p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
</li>
))}
</ul>
</Container>
{features.map((feature) => (
<li
key={feature.name}
className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
>
<feature.icon className="h-14 w-14" />
<h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
<p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
</li>
))}
</ul>
</Container>
</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>
</section>
)
}