diff --git a/src/pages/node/CallToAction.tsx b/src/pages/node/CallToAction.tsx new file mode 100644 index 0000000..a82ca34 --- /dev/null +++ b/src/pages/node/CallToAction.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { Container } from "@/components/Container"; +import { Button } from "@/components/Button"; + +export function CallToAction() { + return ( +
+
+
+ +
+ +
+

+ Join Mycelium Grid +

+ +

+ Be part of a global network that powers private, distributed + infrastructure. Host a node, contribute resources, and earn rewards + while expanding the sovereign digital grid. +

+ +
+
+ +
+ +
+ +
+
+
+
+
+ +
+
+
+ ); +} diff --git a/src/pages/node/NodePage.tsx b/src/pages/node/NodePage.tsx index 19f51dd..f356d0e 100644 --- a/src/pages/node/NodePage.tsx +++ b/src/pages/node/NodePage.tsx @@ -3,6 +3,8 @@ import { NodeHero } from './NodeHero'; import { NodeBenefits } from './NodeBenefits'; import { NodeSteps } from './NodeSteps'; import { NodeProducts } from './NodeProducts'; +import { NodeSpecs } from './NodeSpecs'; +import { CallToAction } from './CallToAction'; const NodePage: React.FC = () => { return ( @@ -11,6 +13,8 @@ const NodePage: React.FC = () => { + + ); }; diff --git a/src/pages/node/NodeSpecs.tsx b/src/pages/node/NodeSpecs.tsx new file mode 100644 index 0000000..20ef621 --- /dev/null +++ b/src/pages/node/NodeSpecs.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { Eyebrow, H3, CT, CP, P } from "@/components/Texts"; + +const nodeSpecs = [ + { + id: "autonomous", + eyebrow: "Self-Running", + title: "Autonomous Operation", + description: "Runs autonomously with no central control.", + colSpan: "lg:col-span-3", + rounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl", + innerRounded: "max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]", + }, + { + id: "encrypted", + eyebrow: "Security", + title: "Encrypted by Default", + description: "Fully encrypted and identity-based.", + colSpan: "lg:col-span-3", + rounded: "lg:rounded-tr-4xl", + innerRounded: "lg:rounded-tr-[calc(2rem+1px)]", + }, + { + id: "efficient", + eyebrow: "Performance", + title: "Energy Efficient", + description: "Energy-efficient and quiet, designed for 24/7 uptime.", + colSpan: "lg:col-span-2", + rounded: "lg:rounded-bl-4xl", + innerRounded: "lg:rounded-bl-[calc(2rem+1px)]", + }, + { + id: "uptime", + eyebrow: "Reliability", + title: "Measured Uptime", + description: "Automatically measures uptime and contribution.", + colSpan: "lg:col-span-2", + rounded: "", + innerRounded: "", + }, + { + id: "fullstack", + eyebrow: "Compatibility", + title: "Full Mycelium Stack Support", + description: "Supports Mycelium Network, Cloud, Pods, and Agents.", + colSpan: "lg:col-span-2", + rounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl", + innerRounded: "max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]", + }, +]; + +export function NodeSpecs() { + return ( +
+
+ Node Specifications +

Built for Reliability and Control

+

+ Each node strengthens the network and helps build a more open, sovereign and + distributed internet. +

+ +
+ {nodeSpecs.map((item) => ( +
+ {/* BG LAYER */} +
+ + {/* CONTENT LAYER */} +
+
+

{item.eyebrow}

+ + {item.title} + + + {item.description} + +
+
+ + {/* OUTLINE OVERLAY */} +
+
+ ))} +
+
+
+ ); +}