From 3604b47137dd5de21395426637d5d5a0297da25f Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 17 Nov 2025 17:10:47 +0100
Subject: [PATCH] refactor: convert NodeSpecs to bento grid layout with updated
 typography components

- Replaced Heroicons with typography components (Eyebrow, H3, P, Small, CT, CP)
- Changed from card grid to bento grid layout with image-based cards
- Added category labels and placeholder images to each specification card
- Removed hover effects and icon-based design in favor of image-focused layout
- Updated container structure from Container component to standard section with max-w-7xl
- Removed border decorations an
---
 src/pages/nodes/NodeSpecs.tsx | 148 ++++++++++++++++++----------------
 1 file changed, 77 insertions(+), 71 deletions(-)

diff --git a/src/pages/nodes/NodeSpecs.tsx b/src/pages/nodes/NodeSpecs.tsx
index e7e3fc5..396009d 100644
--- a/src/pages/nodes/NodeSpecs.tsx
+++ b/src/pages/nodes/NodeSpecs.tsx
@@ -1,114 +1,120 @@
 "use client";
 
-import { Container } from "@/components/Container";
+import { Eyebrow, H3, P, Small, CT, CP } from "@/components/Texts";
 
-// Heroicons
-import {
-  ShieldCheckIcon,
-  BoltIcon,
-  GlobeAltIcon,
-  ServerStackIcon,
-  CheckBadgeIcon,
-  CpuChipIcon,
-} from "@heroicons/react/24/solid";
-
-const nodeSpecs = [
+const cards = [
   {
+    category: "Autonomous",
     title: "Autonomous Operation",
     description: "Runs autonomously with no central control.",
-    icon: ServerStackIcon,
+    image:
+      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-performance.png",
+    rounded: "lg:rounded-tl-4xl",
+    innerRounded: "lg:rounded-tl-[calc(2rem+1px)]",
   },
   {
+    category: "Security",
     title: "Encrypted by Default",
     description: "Fully encrypted and identity-based.",
-    icon: ShieldCheckIcon,
+    image:
+      "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.",
-    icon: BoltIcon,
+    image:
+      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png",
+    rounded: "lg:rounded-tr-4xl",
+    innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
   },
   {
+    category: "Monitoring",
     title: "Measured Uptime",
     description: "Automatically measures uptime and contribution.",
-    icon: CheckBadgeIcon,
+    image:
+      "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: "Supports Mycelium Network, Cloud, Pods, and Agents.",
-    icon: GlobeAltIcon,
+    description:
+      "Supports Mycelium Network, Cloud, Pods, and Agents.",
+    image:
+      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png",
   },
-
-  // ✅ NEW 6th card (to complete the grid)
   {
+    category: "Edge & Home",
     title: "Edge & Home Ready",
     description:
       "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
-    icon: CpuChipIcon,
+    image:
+      "https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png",
+    rounded: "lg:rounded-br-4xl",
+    innerRounded: "lg:rounded-br-[calc(2rem+1px)]",
   },
 ];
 
 export function NodeSpecs() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
-      {/* Top horizontal spacing */}
-      <div className="max-w-7xl 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" />
+    <section className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
 
-      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
         {/* Header */}
-        <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">
-            NODE SPECIFICATIONS
-          </h2>
+        <Eyebrow>Node Specifications</Eyebrow>
+        <H3 className="mt-2">Built for Reliability and Control</H3>
+        <P className="mt-4 max-w-2xl">
+          Each node strengthens the network and helps build a more open,
+          sovereign and distributed internet.
+        </P>
 
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Built for Reliability and Control
-          </p>
+        {/* BENTO GRID */}
+        <div className="mt-12 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
+          {cards.map((item, index) => (
+            <div key={index} className="relative">
 
-          <p className="mt-6 text-lg text-gray-600">
-            Each node strengthens the network and helps build a more open,
-            sovereign and distributed internet.
-          </p>
-        </div>
+              {/* OUTER WHITE PLATE */}
+              <div
+                className={`absolute inset-0 rounded-lg bg-white ${
+                  item.rounded || ""
+                }`}
+              />
 
-        {/* Cards */}
-        <ul
-          role="list"
-          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
-                     sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
-        >
-          {nodeSpecs.map((item) => {
-            const Icon = item.icon;
-
-            return (
-              <li
-                key={item.title}
-                className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
-                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
+              {/* INNER CARD */}
+              <div
+                className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${
+                  item.innerRounded || ""
+                }`}
               >
-                {/* Title + label */}
-                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold text-gray-900">
-                    {item.title}
-                  </h3>
+                {/* IMAGE */}
+                <img
+                  alt=""
+                  src={item.image}
+                  className="h-80 w-full object-cover object-left"
+                />
 
-                  <Icon className="h-6 w-6 text-cyan-500" />
+                {/* TEXT AREA */}
+                <div className="p-10 pt-4">
+                  <div className="block">
+                    <Small className="block text-gray-500">{item.category}</Small>
+                    <CT className="block mt-2">{item.title}</CT>
+                    <CP className="block mt-2 max-w-lg">{item.description}</CP>
+                  </div>
                 </div>
+              </div>
 
-                {/* Short description */}
-                <p className="mt-4 text-gray-700 leading-snug">
-                  {item.description}
-                </p>
-              </li>
-            );
-          })}
-        </ul>
-      </Container>
-
-      {/* Bottom spacing */}
-      <div className="w-full border-b border-gray-100" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+              {/* OUTLINE + SHADOW */}
+              <div
+                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${
+                  item.rounded || ""
+                }`}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
     </section>
   );
 }