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
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
"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 (
|
|
<div className="bg-white py-24 sm:py-32">
|
|
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
|
<Eyebrow>Node Specifications</Eyebrow>
|
|
<H3 className="mt-2">Built for Reliability and Control</H3>
|
|
<P className="mt-6 max-w-xl">
|
|
Each node strengthens the network and helps build a more open, sovereign and
|
|
distributed internet.
|
|
</P>
|
|
|
|
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
|
{nodeSpecs.map((item) => (
|
|
<div key={item.id} className={`relative ${item.colSpan}`}>
|
|
{/* BG LAYER */}
|
|
<div
|
|
className={`absolute inset-0 rounded-lg bg-white ${item.rounded}`}
|
|
/>
|
|
|
|
{/* CONTENT LAYER */}
|
|
<div
|
|
className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${item.innerRounded}`}
|
|
>
|
|
<div className="p-10 pt-6">
|
|
<h3 className="text-sm/4 font-semibold text-cyan-600">{item.eyebrow}</h3>
|
|
<CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
|
{item.title}
|
|
</CT>
|
|
<CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
{item.description}
|
|
</CP>
|
|
</div>
|
|
</div>
|
|
|
|
{/* OUTLINE OVERLAY */}
|
|
<div
|
|
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${item.rounded}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|