refactor: convert NodeSpecs from image-based bento grid to icon-based horizontal layout

- Replaced placeholder Tailwind images with local image assets (/images/*.png)
- Changed card layout from vertical image-over-text to horizontal icon-beside-text
- Reduced image size from h-80 full-width to h-16 w-16 icon size with object-contain
- Updated flex direction from flex-col to flex-row with items-center alignment
- Adjusted padding and spacing (p-8 on card, reduced mt-2 to mt-1 on title)
- Removed "

src/pages/nodes/NodeSpecs.tsx

@@ -7,8 +7,7 @@ const cards = [
     category: "Autonomous",
     title: "Autonomous Operation",
     description: "Runs autonomously with no central control.",
-    image:
+    image: "/images/autonomous.png",
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-performance.png",
     rounded: "lg:rounded-tl-4xl",
     innerRounded: "lg:rounded-tl-[calc(2rem+1px)]",
   },
@@ -16,15 +15,13 @@ const cards = [
     category: "Security",
     title: "Encrypted by Default",
     description: "Fully encrypted and identity-based.",
-    image:
+    image: "/images/encryptednode.png",
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png",
   },
   {
     category: "Efficiency",
     title: "Energy Efficient",
     description: "Energy-efficient and quiet, designed for 24/7 uptime.",
-    image:
+    image: "/images/energy.png",
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png",
     rounded: "lg:rounded-tr-4xl",
     innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
   },
@@ -32,26 +29,22 @@ const cards = [
     category: "Monitoring",
     title: "Measured Uptime",
     description: "Automatically measures uptime and contribution.",
-    image:
+    image: "/images/uptime.png",
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png",
     rounded: "lg:rounded-bl-4xl",
     innerRounded: "lg:rounded-bl-[calc(2rem+1px)]",
   },
   {
     category: "Full Stack",
     title: "Full Mycelium Stack Support",
-    description:
+    description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
-      "Supports Mycelium Network, Cloud, Pods, and Agents.",
+    image: "/images/fullstack.png",
-    image:
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png",
   },
   {
     category: "Edge & Home",
     title: "Edge & Home Ready",
     description:
       "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
-    image:
+    image: "/images/edge.png",
-      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png",
     rounded: "lg:rounded-br-4xl",
     innerRounded: "lg:rounded-br-[calc(2rem+1px)]",
   },
@@ -62,7 +55,6 @@ export function NodeSpecs() {
     <section className="bg-white py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
 
-        {/* Header */}
         <Eyebrow>Node Specifications</Eyebrow>
         <H3 className="mt-2">Built for Reliability and Control</H3>
         <P className="mt-4 max-w-2xl">
@@ -75,7 +67,7 @@ export function NodeSpecs() {
           {cards.map((item, index) => (
             <div key={index} className="relative">
 
-              {/* OUTER WHITE PLATE */}
+              {/* OUTER BACKPLATE */}
               <div
                 className={`absolute inset-0 rounded-lg bg-white ${
                   item.rounded || ""
@@ -84,28 +76,26 @@ export function NodeSpecs() {
 
               {/* INNER CARD */}
               <div
-                className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${
+                className={`relative flex h-full flex-row items-center gap-6 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] p-8 ${
                   item.innerRounded || ""
                 }`}
               >
-                {/* IMAGE */}
+                {/* LEFT IMAGE */}
                 <img
-                  alt=""
                   src={item.image}
-                  className="h-80 w-full object-cover object-left"
+                  alt={item.title}
+                  className="h-16 w-16 object-contain"
                 />
 
-                {/* TEXT AREA */}
+                {/* RIGHT TEXT */}
-                <div className="p-10 pt-4">
+                <div className="flex flex-col">
-                  <div className="block">
+                  <Small className="text-gray-500">{item.category}</Small>
-                    <Small className="block text-gray-500">{item.category}</Small>
+                  <CT className="mt-1">{item.title}</CT>
-                    <CT className="block mt-2">{item.title}</CT>
+                  <CP className="mt-2 max-w-sm">{item.description}</CP>
-                    <CP className="block mt-2 max-w-lg">{item.description}</CP>
-                  </div>
                 </div>
               </div>
 
-              {/* OUTLINE + SHADOW */}
+              {/* OUTLINE */}
               <div
                 className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${
                   item.rounded || ""