forked from emre/www_projectmycelium_com
refactor: rename Node page to Nodes and reorganize network page sections
- 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
This commit is contained in:
115
src/pages/nodes/NodeBenefits.tsx
Normal file
115
src/pages/nodes/NodeBenefits.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
type CircleIconProps = ComponentPropsWithoutRef<"svg">;
|
||||
|
||||
const CircleNumber1Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.83-.777-1.755-.394-1.701.404l-.006.114v8l.007.117a1 1 0 001.986 0l.007-.117V9l-.006-.114z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CircleNumber2Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-3a1 1 0 100 2h3v2h-2a2 2 0 00-2 2v2a2 2 0 002 2h3a1 1 0 100-2h-3v-2h2a2 2 0 002-2V9a2 2 0 00-2-2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CircleNumber3Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-2a2 2 0 00-2 2 1 1 0 102 0h2v2h-2c-1.39 0-2.103 1.67-1.11 2.588l.11.098h3v2h-2a1 1 0 100 2h2a2 2 0 002-2v-2a2 2 0 00-.25-.97l-.068-.115.068-.115A1.99 1.99 0 0015 11V9a2 2 0 00-2-2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: "Build Your Private Setup",
|
||||
description:
|
||||
"Run a node in your home or office and use it to host private workloads, models, and data. Experiment, deploy, or tinker locally, then offset your costs by sharing unused capacity with the network.",
|
||||
icon: CircleNumber1Icon,
|
||||
},
|
||||
{
|
||||
name: "Strengthen the Network",
|
||||
description:
|
||||
"Every node adds bandwidth, compute, and resilience to the Mycelium Grid. Together, hosts form the physical foundation for decentralized communication, storage, and AI.",
|
||||
icon: CircleNumber2Icon,
|
||||
},
|
||||
{
|
||||
name: "Earn Rewards",
|
||||
description:
|
||||
"Share storage, CPU, GPU, and bandwidth. When your resources are used, you earn network rewards based on real demand.",
|
||||
icon: CircleNumber3Icon,
|
||||
},
|
||||
];
|
||||
|
||||
export function NodeBenefits() {
|
||||
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" />
|
||||
|
||||
<div className="relative px-6 lg:px-12 py-12 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, amount: 0.3 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
|
||||
className="mx-auto max-w-5xl text-center"
|
||||
>
|
||||
<Eyebrow color="accent">Host</Eyebrow>
|
||||
<SectionHeader
|
||||
className="text-3xl font-medium tracking-tight"
|
||||
color="light"
|
||||
>
|
||||
Benefits of Hosting Nodes
|
||||
</SectionHeader>
|
||||
|
||||
<P className="mt-6" color="light">
|
||||
Hosting a node gives you private compute, contributes to the global
|
||||
Mycelium infrastructure, and unlocks ways to earn from real network
|
||||
usage — all while keeping sovereignty and control.
|
||||
</P>
|
||||
</motion.div>
|
||||
|
||||
{/* Features */}
|
||||
<motion.ul
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:mt-12 lg:max-w-7xl lg:grid-cols-3"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={feature.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{
|
||||
duration: 0.45,
|
||||
delay: 0.3 + index * 0.15,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
|
||||
>
|
||||
<feature.icon className="mb-4 h-8 w-8 text-white" />
|
||||
<CT as="span" className="text-left font-semibold" color="light">
|
||||
{feature.name}
|
||||
</CT>
|
||||
<CP className="mt-2 text-left text-sm" color="light">
|
||||
{feature.description}
|
||||
</CP>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</div>
|
||||
|
||||
<div className="w-full border-b border-gray-800 bg-[#121212]" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user