forked from emre/www_projectmycelium_com
sasha-astiadi
326efc9fbd
- Renamed NodePage component and directory to NodesPage/nodes for consistency - Updated all navigation links from "Node" to "Nodes" across headers and footer - Replaced anchor tags with React Router Link components for proper SPA navigation - Reorganized NetworkPage component order and added NetworkPros section - Converted NetworkUsecases from horizontal slider to responsive grid layout - Added new use cases for adaptive mesh and compute fabric - Update
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Eyebrow, H3, P, CT, CP } from "@/components/Texts";
|
|
import {
|
|
CloudArrowDownIcon,
|
|
CpuChipIcon,
|
|
WalletIcon,
|
|
BoltIcon,
|
|
} from "@heroicons/react/24/solid";
|
|
|
|
const steps = [
|
|
{
|
|
name: "Buy a Node",
|
|
description:
|
|
"Choose your hardware setup. You can use your own device or one of the recommended models below.",
|
|
icon: CpuChipIcon,
|
|
},
|
|
{
|
|
name: "Download Mycelium OS",
|
|
description:
|
|
"Install the Mycelium OS to prepare your node for network access.",
|
|
icon: CloudArrowDownIcon,
|
|
},
|
|
{
|
|
name: "Link Your Wallet",
|
|
description:
|
|
"Connect your private key from your Mycelium account to enable rewards and authentication.",
|
|
icon: WalletIcon,
|
|
},
|
|
{
|
|
name: "Plug In and Go",
|
|
description:
|
|
"Connect to power and to the internet. Your node will join automatically and start contributing.",
|
|
icon: BoltIcon,
|
|
},
|
|
];
|
|
|
|
export function NodeSteps() {
|
|
return (
|
|
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
|
{/* Top line */}
|
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
|
<div className="w-full border-t border-l border-r border-gray-100" />
|
|
|
|
<div className="max-w-7xl bg-white mx-auto py-16 border border-t-0 border-b-0 border-gray-100">
|
|
<div className="mx-auto max-w-4xl sm:text-center">
|
|
<Eyebrow className="text-cyan-500">HOW IT WORKS</Eyebrow>
|
|
|
|
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
|
Host a Node
|
|
</H3>
|
|
|
|
<P className="mt-6 text-lg text-gray-600">
|
|
Hosting a node takes minutes, and it runs automatically once online.
|
|
</P>
|
|
</div>
|
|
|
|
{/* 🔹 Horizontal Stepper */}
|
|
<div className="relative mt-16 px-6 flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
|
|
{steps.map((step, i) => (
|
|
<div key={step.name} className="relative flex-1 px-4">
|
|
{/* 🔹 Horizontal connector line (desktop only) */}
|
|
{i < steps.length - 1 && (
|
|
<div className="hidden lg:block absolute top-5 left-[55%] w-full h-[4px] bg-gray-400 -z-10" />
|
|
)}
|
|
|
|
{/* 🔹 Step header with icon */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-cyan-100 text-cyan-600">
|
|
<step.icon className="w-5 h-5" />
|
|
</div>
|
|
<CT>{step.name}</CT>
|
|
</div>
|
|
|
|
{/* 🔹 Description */}
|
|
<CP className="mt-3">{step.description}</CP>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* bottom line */}
|
|
{/* ✅ Bottom horizontal line with spacing */}
|
|
<div className="w-full border-b border-gray-100" />
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
</section>
|
|
);
|
|
}
|