forked from emre/www_projectmycelium_com
refactor: standardize vertical spacing across feature sections
- 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:
@@ -3,94 +3,147 @@
|
||||
import { useState } from "react";
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "cloud",
|
||||
label: "Kubernetes Clusters",
|
||||
title: "Mycelium Cloud",
|
||||
description: "Deploy Kubernetes clusters on sovereign infrastructure.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/cloud",
|
||||
},
|
||||
{
|
||||
id: "network",
|
||||
label: "Mesh Networking",
|
||||
title: "Mycelium Network",
|
||||
description: "Encrypted peer-to-peer mesh networking across the globe.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/network",
|
||||
},
|
||||
{
|
||||
id: "agent",
|
||||
label: "AI Agents",
|
||||
title: "Mycelium Agents",
|
||||
description: "Private, programmable AI systems that run on your hardware.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/agent",
|
||||
},
|
||||
{
|
||||
id: "compute",
|
||||
label: "Compute & Storage",
|
||||
title: "Hardware Resources",
|
||||
description: "The resource layers powering the stack.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/compute",
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeTab() {
|
||||
const [active, setActive] = useState("cloud");
|
||||
const current = tabs.find((t) => t.id === active)!;
|
||||
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-7xl py-24 border border-gray-200 bg-white">
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
<div className="text-center px-6 lg:px-8">
|
||||
<Eyebrow>Ecosystem</Eyebrow>
|
||||
<H3 className="text-gray-900 mt-2">Mycelium Components</H3>
|
||||
<P className="text-gray-500 max-w-4xl mx-auto mt-6">
|
||||
{/* ✅ Top spacer + full-width line */}
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-200 bg-white border-t-0 border-b-0" />
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
|
||||
|
||||
{/* ✅ Section with vertical borders */}
|
||||
<div className="mx-auto bg-white max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-200">
|
||||
<Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
|
||||
<H3 className="mt-2">Mycelium Components</H3>
|
||||
<P className="mt-6 max-w-lg">
|
||||
Each component can be used on its own or combined into a fully sovereign cloud.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ FULL-WIDTH NO PADDING CARD ROW */}
|
||||
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
|
||||
divide-y sm:divide-y-0 lg:divide-x divide-gray-200
|
||||
border-t border-b border-gray-200 w-full">
|
||||
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActive(tab.id)}
|
||||
className={`group transition-all text-left
|
||||
${active === tab.id ? "bg-gray-50" : "bg-white"}
|
||||
hover:bg-gray-50 focus:bg-gray-50
|
||||
w-full`}
|
||||
>
|
||||
{/* ✅ Spacing only inside the card, not outside */}
|
||||
<div className="p-6 flex flex-col gap-3">
|
||||
<div className="mt-8 grid grid-cols-1 gap-4 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
|
||||
|
||||
{/* ✅ TOP ROW */}
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-md bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
|
||||
<img
|
||||
src={tab.image}
|
||||
alt={tab.title}
|
||||
className="w-full h-32 object-cover rounded-md border border-gray-200 shadow-sm"
|
||||
alt=""
|
||||
src="/images/bento-network.png"
|
||||
className="h-50 object-cover object-center"
|
||||
/>
|
||||
|
||||
<h4 className="text-base font-semibold text-gray-900">
|
||||
{tab.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
{tab.description}
|
||||
</p>
|
||||
|
||||
<span className="text-sm font-medium text-gray-900 group-hover:text-cyan-600">
|
||||
Learn More →
|
||||
</span>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Network</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Network</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Encrypted peer-to-peer mesh networking across the globe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
|
||||
className="h-50 object-cover object-left lg:object-right"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Agents</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Agents</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Private, programmable AI systems that run on your hardware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
|
||||
</div>
|
||||
|
||||
{/* ✅ ✅ MIDDLE ROW (half-height, equal spacing) */}
|
||||
<div className="relative lg:col-span-6">
|
||||
<div className="absolute inset-0 bg-white rounded-[calc(var(--radius-lg)+1px)]" />
|
||||
<div className="relative flex flex-col items-center justify-center py-6 text-center rounded-[calc(var(--radius-lg)+1px)] shadow-sm">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
|
||||
className="h-50 object-cover object-left lg:object-right"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Agents</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Cloud</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Private, programmable AI systems that run on your hardware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
|
||||
{/* ✅ BOTTOM ROW */}
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png"
|
||||
className="h-50 object-cover object-left"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Compute</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Compute</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The Compute resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png"
|
||||
className="h-50 object-cover"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Storage</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Storage</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The Storage resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png"
|
||||
className="h-50 object-cover"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">GPU</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium GPU</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The GPU resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom full-width line + spacer */}
|
||||
<div className="w-full border-b border-gray-200" />
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-200 border-t-0 border-b-0" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user