forked from emre/www_projectmycelium_com
sasha-astiadi
e6b194e8c7
- Increased HomeAurora subtitle margin from mt-4 to mt-6 for better spacing - Added bg-white to HomeDesign content container for explicit background - Removed bg-white from HomeTab top separator div - Reduced network Hero title margin from mt-8 to mt-4 and second paragraph margin from mt-6 to mt-4 - Changed network Hero secondary button variant from cyan to dark - Reduced NetworkPros title margin from mt-4 to mt-2
141 lines
7.5 KiB
TypeScript
141 lines
7.5 KiB
TypeScript
"use client";
|
||
|
||
import { Link } from "react-router-dom";
|
||
import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
|
||
|
||
export function HomeTab() {
|
||
return (
|
||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||
|
||
{/* Top section separators */}
|
||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
|
||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||
|
||
{/* 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’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>
|
||
|
||
{/* 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 transition-transform duration-300 ease-in-out hover:scale-105">
|
||
<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>
|
||
|
||
<div className="pointer-events-none absolute inset-px rounded-lg border border-transparent shadow-sm outline outline-black/5 lg:rounded-l-4xl hover:border-cyan-500" />
|
||
</Link>
|
||
|
||
{/* ------------------ MIDDLE TOP ------------------ */}
|
||
<Link to="/pods" className="relative cursor-pointer max-lg:row-start-1 transition-transform duration-300 ease-in-out hover:scale-105">
|
||
<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 border border-transparent shadow-sm outline outline-black/5 max-lg:rounded-t-4xl hover:border-cyan-500" />
|
||
</Link>
|
||
|
||
{/* ------------------ MIDDLE BOTTOM ------------------ */}
|
||
<Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2 transition-transform duration-300 ease-in-out hover:scale-105">
|
||
<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 border border-transparent shadow-sm outline outline-black/5 hover:border-cyan-500" />
|
||
</Link>
|
||
|
||
{/* ------------------ RIGHT TALL ------------------ */}
|
||
<Link to="/cloud" className="relative lg:row-span-2 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-105">
|
||
<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 border border-transparent shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl hover:border-cyan-500" />
|
||
</Link>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* 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>
|
||
);
|
||
}
|