forked from emre/www_projectmycelium_com
feat: add node setup guide and product recommendations
- Created NodeSteps component with 4-step horizontal stepper showing node hosting process - Added NodeProducts component displaying recommended Edge AI and Edge Compute nodes - Integrated new components into NodePage with supporting product images
This commit is contained in:
@@ -1,12 +1,16 @@
|
||||
import React from 'react';
|
||||
import { NodeHero } from './NodeHero';
|
||||
import { NodeBenefits } from './NodeBenefits';
|
||||
import { NodeSteps } from './NodeSteps';
|
||||
import { NodeProducts } from './NodeProducts';
|
||||
|
||||
const NodePage: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<NodeHero />
|
||||
<NodeBenefits />
|
||||
<NodeSteps />
|
||||
<NodeProducts />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
96
src/pages/node/NodeProducts.tsx
Normal file
96
src/pages/node/NodeProducts.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Eyebrow, SectionHeader, P, CT, CP } from "@/components/Texts";
|
||||
|
||||
const nodes = [
|
||||
{
|
||||
name: "Edge AI Node",
|
||||
subtitle: "Based on Ryzen AI MAX+ 395 platform",
|
||||
image: "/images/ainode.png",
|
||||
},
|
||||
{
|
||||
name: "Edge Compute Node",
|
||||
subtitle: "Based on GMKtec NUCBox M6 Ultra (Ryzen 5 7640HS)",
|
||||
image: "/images/edgenode.png",
|
||||
},
|
||||
];
|
||||
|
||||
export function NodeProducts() {
|
||||
return (
|
||||
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
||||
{/* Top spacing + border */}
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
{/* MAIN CONTAINER */}
|
||||
<div className="relative px-6 lg:px-12 py-16 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
|
||||
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className="mx-auto max-w-4xl text-center"
|
||||
>
|
||||
<Eyebrow color="accent">Recommended</Eyebrow>
|
||||
|
||||
<SectionHeader
|
||||
className="text-3xl font-medium tracking-tight"
|
||||
color="light"
|
||||
>
|
||||
Recommended Nodes to Buy
|
||||
</SectionHeader>
|
||||
|
||||
<P className="mt-6" color="light">
|
||||
The best entry-level and performance-balanced hardware for hosting
|
||||
Mycelium nodes, running agents, and contributing compute to the network.
|
||||
</P>
|
||||
</motion.div>
|
||||
|
||||
{/* Node cards */}
|
||||
<div className="mx-auto mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl">
|
||||
|
||||
{nodes.map((node, i) => (
|
||||
<motion.div
|
||||
key={node.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.45, delay: 0.15 * i }}
|
||||
className="rounded-2xl border border-gray-800 bg-white/5 p-8 backdrop-blur-sm
|
||||
hover:border-cyan-400 hover:shadow-xl hover:shadow-cyan-500/20
|
||||
transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
src={node.image}
|
||||
alt={node.name}
|
||||
className="w-full rounded-xl border border-gray-700 object-cover"
|
||||
/>
|
||||
|
||||
<CT as="h3" className="mt-6 font-semibold text-white">
|
||||
{node.name}
|
||||
</CT>
|
||||
|
||||
<CP className="mt-2 text-sm text-gray-300">
|
||||
{node.subtitle}
|
||||
</CP>
|
||||
|
||||
<button
|
||||
className="mt-6 w-full rounded-lg bg-indigo-600 hover:bg-indigo-700
|
||||
text-white text-sm font-medium py-3 transition"
|
||||
>
|
||||
View Specs
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom border */}
|
||||
<div className="w-full border-b border-gray-800 bg-[#121212]" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
87
src/pages/node/NodeSteps.tsx
Normal file
87
src/pages/node/NodeSteps.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user