From 2bd277501df81cef851171b7cea7d98c7c9ef04f Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Sun, 15 Mar 2026 04:50:31 +0300
Subject: [PATCH] feat: mobile layout - hide Learn More button, show Mainnet
 card after hero

Mobile users now see ChainSpecs (Mainnet card) right below the hero
section instead of scrolling far down. "Learn More" button hidden on
mobile since Mainnet card replaces its function.
---
 web/src/components/AppLayout.tsx   | 11 ++++++++---
 web/src/components/HeroSection.tsx |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/components/AppLayout.tsx b/web/src/components/AppLayout.tsx
index a2091391..c0f7bb8f 100644
--- a/web/src/components/AppLayout.tsx
+++ b/web/src/components/AppLayout.tsx
@@ -548,15 +548,20 @@ const AppLayout: React.FC = () => {
         ) : (
           <>
             <HeroSection />
+            {/* ChainSpecs (Mainnet card) - show right after hero on mobile */}
+            <div id="chain-specs" className="block sm:hidden">
+              <ChainSpecs />
+            </div>
             <NetworkStats key="network-stats-live" />
             <PalletsGrid />
             <TokenomicsSection />
-            
-            
+
+
             <div id="trust-calculator">
               <TrustScoreCalculator />
             </div>
-            <div id="chain-specs">
+            {/* ChainSpecs - original position for desktop */}
+            <div id="chain-specs-desktop" className="hidden sm:block">
               <ChainSpecs />
             </div>
             <div id="governance">
diff --git a/web/src/components/HeroSection.tsx b/web/src/components/HeroSection.tsx
index db9db5df..de56dd44 100644
--- a/web/src/components/HeroSection.tsx
+++ b/web/src/components/HeroSection.tsx
@@ -156,7 +156,7 @@ const HeroSection: React.FC = () => {
           </button>
           <button
             onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
-            className="px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
+            className="hidden sm:inline-flex px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
           >
             {t('hero.learnMore', 'Learn More')}
           </button>