forked from emre/www_projectmycelium_com
refactor: simplify navigation structure and update homepage content
- Removed Cloud dropdown menu and flattened navigation to direct links (Network, Cloud, Pods, Agents, Node) - Reordered navigation items for better flow and renamed "Nodes" to "Node" for consistency - Updated homepage hero and CTA sections with clearer messaging focused on digital sovereignty and infrastructure control - Added new bento grid images for visual refresh
This commit is contained in:
@@ -3,125 +3,136 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
const bentoCards = [
|
||||
{
|
||||
id: 'network',
|
||||
title: 'Mycelium Network',
|
||||
eyebrow: 'Network',
|
||||
description: 'Encrypted peer-to-peer mesh networking across the globe.',
|
||||
image: '/images/bento-network.png',
|
||||
link: '/network',
|
||||
colSpan: 'lg:col-span-3',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'lg:rounded-tl-4xl max-lg:rounded-t-4xl',
|
||||
innerRounded: 'lg:rounded-tl-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]'
|
||||
},
|
||||
{
|
||||
id: 'agents',
|
||||
title: 'Mycelium Agents',
|
||||
eyebrow: 'Agents',
|
||||
description: 'Private, programmable AI systems that run on your hardware.',
|
||||
image: '/images/bento-agent.jpg',
|
||||
link: '/agents',
|
||||
colSpan: 'lg:col-span-3',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'lg:rounded-tr-4xl',
|
||||
innerRounded: 'lg:rounded-tr-[calc(2rem+1px)]'
|
||||
},
|
||||
{
|
||||
id: 'cloud',
|
||||
title: 'Mycelium Cloud',
|
||||
eyebrow: 'Cloud',
|
||||
description: 'Deploy Kubernetes clusters on sovereign infrastructure.',
|
||||
image: '/images/bento-cloud.jpg',
|
||||
link: '/cloud',
|
||||
colSpan: 'lg:col-span-6',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'rounded-lg',
|
||||
innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
|
||||
},
|
||||
{
|
||||
id: 'compute',
|
||||
title: 'Mycelium Compute',
|
||||
eyebrow: 'Compute',
|
||||
description: 'The Compute resource layers powering the stack.',
|
||||
image: '/images/bento-compute.png',
|
||||
link: '/compute',
|
||||
colSpan: 'lg:col-span-2',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'lg:rounded-bl-4xl',
|
||||
innerRounded: 'lg:rounded-bl-[calc(2rem+1px)]'
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
title: 'Mycelium Storage',
|
||||
eyebrow: 'Storage',
|
||||
description: 'The Storage resource layers powering the stack.',
|
||||
image: '/images/bento-storage.png',
|
||||
link: '/storage',
|
||||
colSpan: 'lg:col-span-2',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'rounded-lg',
|
||||
innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
|
||||
},
|
||||
{
|
||||
id: 'gpu',
|
||||
title: 'Mycelium GPU',
|
||||
eyebrow: 'GPU',
|
||||
description: 'The GPU resource layers powering the stack.',
|
||||
image: '/images/bento-gpu.jpg',
|
||||
link: '/gpu',
|
||||
colSpan: 'lg:col-span-2',
|
||||
rowSpan: 'lg:row-span-1',
|
||||
rounded: 'lg:rounded-br-4xl max-lg:rounded-b-4xl',
|
||||
innerRounded: 'lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]'
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeTab() {
|
||||
return (
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top spacer + full-width line */}
|
||||
{/* Top section separators */}
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
|
||||
{/* ✅ 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-100">
|
||||
<Eyebrow className="pt-12 ">Components</Eyebrow>
|
||||
{/* Main content */}
|
||||
<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-100">
|
||||
<Eyebrow className="pt-12">Components</Eyebrow>
|
||||
<H3 className="mt-2">Explore the Stack</H3>
|
||||
<P className="mt-6 max-w-4xl">
|
||||
Mycelium unifies everything the next generation internet needs — communication, cloud, and intelligence — into one seamless, privacy-first network anyone can join.
|
||||
From encrypted peer-to-peer communication to decentralized cloud and sovereign AI — everything runs on one seamless system.
|
||||
|
||||
Mycelium’s technology stack gives you everything you need to build and run applications
|
||||
on a distributed network, from connectivity and compute to personal environments and AI.
|
||||
</P>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
|
||||
{bentoCards.map((card) => (
|
||||
<Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}>
|
||||
<div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} />
|
||||
<div className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}>
|
||||
<img
|
||||
alt={card.title}
|
||||
src={card.image}
|
||||
className="h-50 object-cover object-center"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-6">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
|
||||
<CT className="mt-2 text-lg lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
|
||||
<CP className="mt-1 max-w-lg text-gray-600">
|
||||
{card.description}
|
||||
</CP>
|
||||
{/* BENTO GRID LAYOUT — EXACT MATCH */}
|
||||
<div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2 pb-12">
|
||||
|
||||
{/* ------------------ LEFT TALL CARD ------------------ */}
|
||||
<Link to="/network" className="relative lg:row-span-2 cursor-pointer">
|
||||
<div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
|
||||
|
||||
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
|
||||
<CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Network</CT>
|
||||
<CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Peer-to-peer connectivity between users, nodes, and devices. The foundation for secure
|
||||
communication and collaboration.
|
||||
</CP>
|
||||
</div>
|
||||
|
||||
{/* Tall image container */}
|
||||
<div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
|
||||
<div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden
|
||||
rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw]
|
||||
border-gray-700 bg-gray-900 shadow-2xl">
|
||||
<img
|
||||
src="/images/bento-network.jpg"
|
||||
className="size-full object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
|
||||
</Link>
|
||||
|
||||
{/* ------------------ MIDDLE TOP ------------------ */}
|
||||
<Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
|
||||
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
|
||||
|
||||
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
|
||||
<CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Pods</CT>
|
||||
<CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Personal digital environments that never reset and stay under your control. Build, deploy,
|
||||
and connect on your own terms.
|
||||
</CP>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 sm:px-10 lg:pb-2">
|
||||
<img
|
||||
src="/images/bento-gpu.jpg"
|
||||
className="w-full max-lg:max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
|
||||
</Link>
|
||||
|
||||
{/* ------------------ MIDDLE BOTTOM ------------------ */}
|
||||
<Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
|
||||
<div className="absolute inset-px rounded-lg bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
|
||||
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
|
||||
<CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Agents</CT>
|
||||
<CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Peer-to-peer AI that serves you, not your data. Train, deploy, and own your AI end-to-end.
|
||||
</CP>
|
||||
</div>
|
||||
|
||||
<div className="@container flex flex-1 items-center justify-center max-lg:py-6 lg:pb-2">
|
||||
<img
|
||||
src="/images/bento-agent.jpg"
|
||||
className="h-[min(200px,40cqw)] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
|
||||
</Link>
|
||||
|
||||
{/* ------------------ RIGHT TALL ------------------ */}
|
||||
<Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
|
||||
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-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-r-[calc(2rem+1px)]">
|
||||
|
||||
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>
|
||||
<CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Cloud</CT>
|
||||
<CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Decentralized compute, storage, and orchestration. A full cloud service without a central operator.
|
||||
</CP>
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-120 w-full grow">
|
||||
<div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden
|
||||
rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
|
||||
<img
|
||||
src="/images/cloud/reserve.png"
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom full-width line + spacer */}
|
||||
{/* Bottom separators */}
|
||||
<div className="w-full border-b border-gray-100" />
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user