refactor: improve NodeProducts, NodeSpecs, and NodeSteps layout and styling with optimized images

- Optimized binary images: agent1.png, ainode.png, autonomous.png, edge.png, edgenode.png, encryptednode.png, energy.png, fullstack.png, uptime.png
- Changed NodeProducts grid gap from gap-16 lg:gap-24 to gap-4 lg:gap-24 for tighter mobile spacing
- Added order-2 lg:order-1 to text area and order-1 lg:order-2 to image for mobile layout swap
- Replaced custom button styles with Button component using

src/pages/nodes/NodeProducts.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { Eyebrow, SectionHeader, P } from "@/components/Texts";
+import { Button } from "@/components/Button";
 import {
   QuestionMarkCircleIcon,
   CheckIcon,
@@ -96,7 +97,7 @@ export function NodeProducts() {
           </P>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 max-w-6xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-24 max-w-6xl mx-auto">
 
           {/* ------------------------------ */}
           {/*        LEFT — TEXT AREA        */}
@@ -106,7 +107,7 @@ export function NodeProducts() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.4 }}
-            className="flex flex-col justify-center"
+            className="order-2 lg:order-1 flex flex-col justify-center"
           >
             <h1 className="text-3xl font-semibold text-white">
               {selectedNode.name}
@@ -168,29 +169,35 @@ export function NodeProducts() {
             {/* ------------------------ */}
             {/*     BUTTONS AREA         */}
             {/* ------------------------ */}
-            <div className="mt-10 flex flex-col sm:flex-row gap-4">
+            <div className="mt-8 flex flex-col sm:flex-row gap-8">
 
-              {/* Outline Button */}
+               {/* Solid Cyan Button */}
-              <a
+              <Button
-                href={selectedNode.learnUrl}
+                as="a"
+                to={selectedNode.buyUrl}
+                variant="solid"
+                color="cyan"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex-1 sm:flex-none text-center border border-gray-700 hover:border-gray-500
+                className="flex-1 sm:flex-none text-center"
-                           text-gray-300 hover:text-white px-8 py-3 rounded-lg transition"
-              >
-                Learn More
-              </a>
-
-              {/* Solid Cyan Button */}
-              <a
-                href={selectedNode.buyUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex-1 sm:flex-none text-center bg-cyan-600 hover:bg-cyan-700
-                           text-white px-8 py-3 rounded-lg font-medium transition"
               >
                 Purchase Node
-              </a>
+              </Button>
+
+              {/* Outline Button */}
+              <Button
+                as="a"
+                to={selectedNode.learnUrl}
+                variant="outline"
+                color="white"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-1 sm:flex-none text-center"
+              >
+                Learn More
+              </Button>
+
+             
             </div>
 
            
@@ -204,12 +211,12 @@ export function NodeProducts() {
             initial={{ opacity: 0, scale: 0.92 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.35 }}
-            className="flex justify-center"
+            className="order-1 lg:order-2 flex justify-center"
           >
             <img
               src={selectedNode.image}
               alt={selectedNode.name}
-              className="max-w-md rounded-2xl "
+              className="max-w-md rounded-2xl  object-contain lg:px-0 px-6 lg:top-0 -top-10"
             />
           </motion.div>
 

src/pages/nodes/NodeSpecs.tsx

@@ -4,7 +4,7 @@ import { Eyebrow, H3, P, Small, CT, CP } from "@/components/Texts";
 
 const cards = [
   {
-    category: "Autonomous",
+    category: "AUTONOMY",
     title: "Autonomous Operation",
     description: "Runs autonomously with no central control.",
     image: "/images/autonomous.png",
@@ -12,13 +12,13 @@ const cards = [
     innerRounded: "lg:rounded-tl-[calc(2rem+1px)]",
   },
   {
-    category: "Security",
+    category: "SECURITY",
     title: "Encrypted by Default",
     description: "Fully encrypted and identity-based.",
     image: "/images/encryptednode.png",
   },
   {
-    category: "Efficiency",
+    category: "EFFICIENCY",
     title: "Energy Efficient",
     description: "Energy-efficient and quiet, designed for 24/7 uptime.",
     image: "/images/energy.png",
@@ -26,7 +26,7 @@ const cards = [
     innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
   },
   {
-    category: "Monitoring",
+    category: "MONITORING",
     title: "Measured Uptime",
     description: "Automatically measures uptime and contribution.",
     image: "/images/uptime.png",
@@ -34,13 +34,13 @@ const cards = [
     innerRounded: "lg:rounded-bl-[calc(2rem+1px)]",
   },
   {
-    category: "Full Stack",
+    category: "SUPPORT",
     title: "Full Mycelium Stack Support",
     description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
     image: "/images/fullstack.png",
   },
   {
-    category: "Edge & Home",
+    category: "DEPLOYMENT",
     title: "Edge & Home Ready",
     description:
       "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
@@ -52,9 +52,15 @@ const cards = [
 
 export function NodeSpecs() {
   return (
-    <section className="bg-white py-24 sm:py-32">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
 
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+      
+
+      {/* ✅ Inner content container */}
+        <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100 px-6 lg:px-8">
         <Eyebrow>Node Specifications</Eyebrow>
         <H3 className="mt-2">Built for Reliability and Control</H3>
         <P className="mt-4 max-w-2xl">
@@ -63,7 +69,7 @@ export function NodeSpecs() {
         </P>
 
         {/* BENTO GRID */}
-        <div className="mt-12 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
+        <div className="mt-8 grid grid-cols-1 gap-4  lg:grid-cols-3 lg:grid-rows-2">
           {cards.map((item, index) => (
             <div key={index} className="relative">
 
@@ -76,7 +82,7 @@ export function NodeSpecs() {
 
               {/* INNER CARD */}
               <div
-                className={`relative flex h-full flex-row items-center gap-6 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] p-8 ${
+                className={`relative flex h-full flex-row items-center gap-3 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] px-8 py-4 transition-transform duration-300 hover:scale-102 hover:shadow-lg hover:shadow-cyan-500/20 ${
                   item.innerRounded || ""
                 }`}
               >
@@ -89,9 +95,9 @@ export function NodeSpecs() {
 
                 {/* RIGHT TEXT */}
                 <div className="flex flex-col">
-                  <Small className="text-gray-500">{item.category}</Small>
+                  <Small className="text-cyan-500 uppercase tracking-[0.16em]">{item.category}</Small>
                   <CT className="mt-1">{item.title}</CT>
-                  <CP className="mt-2 max-w-sm">{item.description}</CP>
+                  <CP className="mt-1 max-w-sm">{item.description}</CP>
                 </div>
               </div>
 
@@ -105,6 +111,9 @@ export function NodeSpecs() {
           ))}
         </div>
       </div>
+       {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   );
 }

src/pages/nodes/NodeSteps.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Eyebrow, H3, P, CT, CP } from "@/components/Texts";
+import { Eyebrow, H3, P, CT } from "@/components/Texts";
 import {
   CloudArrowDownIcon,
   CpuChipIcon,
@@ -16,7 +16,7 @@ const steps = [
     icon: CpuChipIcon,
   },
   {
-    name: "Download Mycelium OS",
+    name: "Download Mycelium",
     description:
       "Install the Mycelium OS to prepare your node for network access.",
     icon: CloudArrowDownIcon,
@@ -38,50 +38,74 @@ const steps = [
 export function NodeSteps() {
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
-      {/* Top line */}
+
+      {/* Header spacing + borders */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
       <div className="w-full border-t border-l border-r border-gray-100" />
 
-      <div className="max-w-7xl bg-white mx-auto py-16 border border-t-0 border-b-0 border-gray-100">
+      {/* Content */}
+      <div className="max-w-7xl bg-white mx-auto px-6 lg:px-6 py-16 border border-t-0 border-b-0 border-gray-100">
+
+        {/* HEADER */}
         <div className="mx-auto max-w-4xl sm:text-center">
           <Eyebrow className="text-cyan-500">HOW IT WORKS</Eyebrow>
-
+          <H3 className="text-gray-900">Host a Node</H3>
-          <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <P className="mt-4 text-gray-600">
-            Host a Node
-          </H3>
-
-          <P className="mt-6 text-lg text-gray-600">
             Hosting a node takes minutes, and it runs automatically once online.
           </P>
         </div>
 
-        {/* 🔹 Horizontal Stepper */}
+        {/* STEPS */}
-        <div className="relative mt-16 px-6 flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+        <ul className="relative mt-12 flex flex-col gap-14 max-w-md mx-auto lg:max-w-none lg:flex-row lg:gap-6">
-          {steps.map((step, i) => (
-            <div key={step.name} className="relative flex-1 px-4">
-              {/* 🔹 Horizontal connector line (desktop only) */}
-              {i < steps.length - 1 && (
-                <div className="hidden lg:block absolute top-5 left-[55%] w-full h-[4px] bg-gray-400 -z-10" />
-              )}
 
-              {/* 🔹 Step header with icon */}
+          {steps.map((step, i) => (
-              <div className="flex items-center gap-3">
+            <li key={step.name} className="relative flex lg:flex-col lg:items-center">
-                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-cyan-100 text-cyan-600">
+
-                  <step.icon className="w-5 h-5" />
+              {/* LEFT COLUMN — circle + MOBILE vertical line */}
+              <div className="relative flex flex-col items-center">
+
+                {/* Circle */}
+                <div className="w-10 h-10 bg-white border border-gray-300 rounded-full shadow-sm flex items-center justify-center z-10">
+                  {i + 1}
                 </div>
-                <CT>{step.name}</CT>
+
               </div>
 
-              {/* 🔹 Description */}
+              {/* CONTENT */}
-              <CP className="mt-3">{step.description}</CP>
+              <div className="ml-4 lg:ml-0 lg:mt-8 max-w-xs">
-            </div>
+                <div className="flex items-center gap-2 lg:justify-center">
+                  <step.icon className="w-6 h-6 text-cyan-500" />
+                  <CT>{step.name}</CT>
+                </div>
+                <p className="mt-2 text-base leading-snug text-gray-600 lg:text-center">
+                  {step.description}
+                </p>
+              </div>
+
+              {/* DESKTOP horizontal line — perfectly centered */}
+              {i < steps.length - 1 && (
+                <span
+                  className="
+                    hidden lg:block
+                    absolute 
+                    top-[20px]    /* Circle center */
+                    left-[50%] 
+                    w-full 
+                    h-[1px] 
+                    bg-gray-200
+                  "
+                />
+              )}
+            </li>
           ))}
-        </div>       
+
+        </ul>
       </div>
-       {/* bottom line */}
+
-        {/* ✅ Bottom horizontal line with spacing */}
+      {/* Bottom border */}
-      <div className="w-full border-b  border-gray-100" />
+      <div className="w-full border-b border-gray-100" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
+
     </section>
   );
 }