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

src/pages/nodes/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 (
+    <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>
+  );
+}