From a8d91a16244a1ad46cb62a1ba78170ee9fd8ce81 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 12:59:48 +0100
Subject: [PATCH] refactor: improve NodeHero and NodeBenefits typography and
 layout with AnimatedSection wrappers

- Changed NodeBenefits from SectionHeader to H3 component with mt-2 and text-white
- Updated NodeBenefits description from P color="light" to text-gray-200
- Changed benefit cards border-radius from rounded-2xl to rounded-md
- Added responsive padding to benefit cards: lg:p-8 p-6
- Updated benefit description from text-gray-200 to font-light text-gray-300
- Removed NodeHero background image inline style in
---
 src/pages/nodes/NodeBenefits.tsx | 15 +++++++--------
 src/pages/nodes/NodeHero.tsx     |  9 ++++-----
 src/pages/nodes/NodesPage.tsx    | 30 ++++++++++++++++++++++++------
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/pages/nodes/NodeBenefits.tsx b/src/pages/nodes/NodeBenefits.tsx
index 36e2803..7912dfb 100644
--- a/src/pages/nodes/NodeBenefits.tsx
+++ b/src/pages/nodes/NodeBenefits.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
+import { H3, P, Eyebrow, CT, CP } from "@/components/Texts";
 import type { ComponentPropsWithoutRef } from "react";
 
 type CircleIconProps = ComponentPropsWithoutRef<"svg">;
@@ -62,14 +62,13 @@ export function NodeBenefits() {
           className="mx-auto max-w-5xl text-center"
         >
           <Eyebrow color="accent">Host</Eyebrow>
-          <SectionHeader
-            className="text-3xl font-medium tracking-tight"
-            color="light"
+          <H3
+            className="mt-2 text-white"
           >
             Benefits of Hosting Nodes
-          </SectionHeader>
+          </H3>
 
-          <P className="mt-6" color="light">
+          <P className="mt-6 text-gray-200">
             Hosting a node gives you private compute, contributes to the global
             Mycelium infrastructure, and unlocks ways to earn from real network
             usage, all while keeping sovereignty and control.
@@ -95,13 +94,13 @@ export function NodeBenefits() {
                 delay: 0.3 + index * 0.15,
                 ease: "easeOut",
               }}
-              className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
+              className="rounded-md border border-gray-300 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
             >
               <feature.icon className="mb-4 h-8 w-8 text-white" />
               <CT as="span" className="text-left font-semibold" color="light">
                 {feature.name}
               </CT>
-              <CP className="mt-2 text-left text-gray-200">
+              <CP className="mt-2 text-left font-light text-gray-300">
                 {feature.description}
               </CP>
             </motion.li>
diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index f2609e5..deea5a8 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -1,15 +1,14 @@
 'use client'
 
 import { Button } from '@/components/Button'
-import { Eyebrow, H3 } from '@/components/Texts'
+import { Eyebrow, H3, P } from '@/components/Texts'
 
 export function NodeHero() {
   return (
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
-        style={{ backgroundImage: "url('/images/gpuhero2.png')", backgroundSize: "contain" }}
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/gpuhero2.png')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-24">
@@ -18,9 +17,9 @@ export function NodeHero() {
             <H3 as="h1" className="mt-4">
               Host a Node. Power the Network.
             </H3>
-            <p className="mt-6 text-lg text-gray-800">
+            <P className="mt-6 text-gray-600">
               The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
-            </p>
+            </P>
             <div className="mt-10 flex items-center gap-x-6">
               <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
                 How it works
diff --git a/src/pages/nodes/NodesPage.tsx b/src/pages/nodes/NodesPage.tsx
index 9d43e33..1422eee 100644
--- a/src/pages/nodes/NodesPage.tsx
+++ b/src/pages/nodes/NodesPage.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { AnimatedSection } from '@/components/AnimatedSection';
 import { NodeHero } from './NodeHero';
 import { NodeBenefits } from './NodeBenefits';
 import { NodeSteps } from './NodeSteps';
@@ -9,12 +10,29 @@ import { CallToAction } from './CallToAction';
 const NodesPage: React.FC = () => {
   return (
     <>
-      <NodeHero />
-      <NodeBenefits />
-      <NodeSteps />
-      <NodeProducts />
-            <NodeSpecs />
-      <CallToAction />
+      <AnimatedSection>
+        <NodeHero />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <NodeBenefits />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <NodeSteps />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <NodeProducts />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <NodeSpecs />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
     </>
   );
 };