Mycelium unifies everything

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 (
+    <section className="relative overflow-hidden bg-[#121212]">
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div
+        id="get-started"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
+      >
+        <Container className="relative">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+              Join Mycelium Grid
+            </h2>
+
+            <p className="mt-6 text-lg text-gray-300">
+              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.
+            </p>
+
+            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button to="/host" variant="solid" color="cyan" className="mt-4">
+                  Join Mycelium
+                </Button>
+              </div>
+
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button to="/docs" variant="outline" color="white" className="mt-4">
+                  Explore docs
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
+    </section>
+  );
+}

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 = () => {
       <NodeBenefits />
       <NodeSteps />
       <NodeProducts />
+            <NodeSpecs />
+      <CallToAction />
     </>
   );
 };

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 (
+    <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>
+  );
+}