From 3df73ec41814211be9be7cd1730fcd878044afe7 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 12:32:07 +0100
Subject: [PATCH] refactor: add mobile hero images to AgentHeroAlt, NodeHero,
 and Homepod and adjust padding

- Added mobile-only hero images with mb-8 spacing and md:hidden visibility
  - AgentHeroAlt: /images/mobile/agents.jpg
  - NodeHero: /images/mobile/nodes.jpg
  - Homepod: /images/mobile/pods.jpg
- Changed vertical padding from py-16 to pb-12 pt-4 for mobile, maintaining lg:py-24 for desktop
- Positioned mobile images above content with w-full and object-cover styling
---
 src/pages/agents/AgentHeroAlt.tsx | 9 ++++++++-
 src/pages/nodes/NodeHero.tsx      | 9 ++++++++-
 src/pages/pods/Homepod.tsx        | 9 ++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx
index 2e24175..11af5ab 100644
--- a/src/pages/agents/AgentHeroAlt.tsx
+++ b/src/pages/agents/AgentHeroAlt.tsx
@@ -11,7 +11,14 @@ export function AgentHeroAlt() {
         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/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-24">
+        <div className="px-6 pt-4 pb-12 lg:py-24">
+          {/* Mobile-only hero image */}
+          <img
+            src="/images/mobile/agents.jpg"
+            alt="Mycelium Agents visual"
+            className="mb-8 w-full object-cover md:hidden"
+          />
+
           <div className="max-w-2xl lg:pl-6">
             <Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
             <H3 as="h1" className="mt-4">
diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index deea5a8..306ba08 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -11,7 +11,14 @@ export function NodeHero() {
         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">
+        <div className="px-6 pt-4 pb-12 lg:py-24">
+          {/* Mobile-only hero image */}
+          <img
+            src="/images/mobile/nodes.jpg"
+            alt="Mycelium Nodes visual"
+            className="mb-8 w-full object-cover md:hidden"
+          />
+
           <div className="max-w-2xl lg:pl-6">
             <Eyebrow>MYCELIUM NODES</Eyebrow>
             <H3 as="h1" className="mt-4">
diff --git a/src/pages/pods/Homepod.tsx b/src/pages/pods/Homepod.tsx
index 2e3344c..0fe88ce 100644
--- a/src/pages/pods/Homepod.tsx
+++ b/src/pages/pods/Homepod.tsx
@@ -12,7 +12,14 @@ export default function Homepod() {
         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/computehero11.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-24">
+        <div className="px-6 pt-4 pb-12  lg:py-24">
+          {/* Mobile-only hero image */}
+          <img
+            src="/images/mobile/pods.jpg"
+            alt="Mycelium Pods visual"
+            className="mb-8 w-full object-cover md:hidden"
+          />
+
           <div className="max-w-2xl lg:pl-6">
             <Eyebrow>
               Mycelium Pods - Coming Soon