forked from emre/www_projectmycelium_com
120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
// ✅ IMPORT HEROICONS
|
||
import {
|
||
CubeIcon,
|
||
SparklesIcon,
|
||
ServerStackIcon,
|
||
ShieldCheckIcon,
|
||
} from "@heroicons/react/20/solid";
|
||
|
||
const tabs = [
|
||
{
|
||
id: "ai",
|
||
label: "K8s Clusters",
|
||
title: "K8s Clusters",
|
||
description:
|
||
"Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
|
||
link: "#",
|
||
icon: CubeIcon,
|
||
},
|
||
{
|
||
id: "web",
|
||
label: "AI Agents",
|
||
title: "AI Agents",
|
||
description: "Run open-source models locally, securely, and offline.",
|
||
link: "#",
|
||
icon: SparklesIcon,
|
||
},
|
||
{
|
||
id: "ecommerce",
|
||
label: "S3-Compatible Storage",
|
||
title: "S3-Compatible Storage",
|
||
description:
|
||
"Your own personal over-the-network drive, encrypted end-to-end.",
|
||
link: "#",
|
||
icon: ServerStackIcon,
|
||
},
|
||
{
|
||
id: "platforms",
|
||
label: "Mesh VPN & 0-Trust Networking",
|
||
title: "Mesh VPN & 0-Trust Networking",
|
||
description:
|
||
"Securely connect all your devices and remote locations.",
|
||
link: "#",
|
||
icon: ShieldCheckIcon,
|
||
},
|
||
];
|
||
|
||
export function HomeApplication() {
|
||
const [active, setActive] = useState("ai");
|
||
const current = tabs.find((t) => t.id === active)!;
|
||
const Icon = current.icon; // ✅ dynamic icon
|
||
|
||
return (
|
||
<section className="mx-4 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
|
||
|
||
{/* ✅ VERTICAL DIVIDER ON DESKTOP */}
|
||
<div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-100 pointer-events-none"></div>
|
||
|
||
{/* LEFT COLUMN */}
|
||
<div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
|
||
<h1 className="text-3xl lg:text-3xl font-semibold tracking-tight text-gray-900 leading-tight">
|
||
Run Real Infrastructure on Your Own Hardware
|
||
</h1>
|
||
|
||
<p className="text-sm text-gray-500 leading-relaxed max-w-2xl">
|
||
Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
|
||
</p>
|
||
|
||
{/* TABS */}
|
||
<div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-100 w-auto">
|
||
{tabs.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActive(tab.id)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all
|
||
${
|
||
active === tab.id
|
||
? "bg-white border border-gray-300 shadow-sm"
|
||
: "text-gray-500 hover:text-cyan-500"
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
|
||
<div className="space-y-3 lg:pr-6 py-12">
|
||
|
||
{/* ✅ ICON WITH BLACK BG */}
|
||
<div className="h-10 w-10 flex items-center justify-center rounded-full bg-black">
|
||
<Icon className="h-5 w-5 text-white" />
|
||
</div>
|
||
|
||
<h4 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
|
||
{current.title}
|
||
</h4>
|
||
|
||
<p className="text-sm text-gray-500 leading-tight">
|
||
{current.description}
|
||
</p>
|
||
|
||
<a
|
||
href={current.link}
|
||
className="text-gray-700 font-semibold hover:text-cyan-600 text-sm"
|
||
>
|
||
Learn more →
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|