forked from emre/www_projectmycelium_com
sasha-astiadi
d7769a5ecd
- Added new component sections including globe visualization, statistics dashboard, interactive stack explorer, and product showcase - Replaced existing homepage sections with updated components featuring improved visual hierarchy and user engagement - Removed footer border and adjusted hero section spacing for cleaner visual flow
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-200">
|
||
<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-200 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-200 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>
|
||
);
|
||
}
|