From 6a33b9ccb14b52830b2f8deabb951b5aaa79d4d3 Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Mon, 16 Feb 2026 03:19:53 +0300
Subject: [PATCH] fix: hide hero background image on mobile, improve responsive
 sizing

---
 web/src/components/HeroSection.tsx | 34 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/src/components/HeroSection.tsx b/web/src/components/HeroSection.tsx
index bdfdacf2..165f2daa 100644
--- a/web/src/components/HeroSection.tsx
+++ b/web/src/components/HeroSection.tsx
@@ -100,7 +100,7 @@ const HeroSection: React.FC = () => {
         <img
           src="/DKstate.png"
           alt="DKstate Background"
-          className="w-full h-full object-cover opacity-30"
+          className="hidden md:block w-full h-full object-cover opacity-30"
         />
         <div className="absolute inset-0 bg-gradient-to-b from-green-600/20 via-gray-950/70 to-gray-950"></div>
       </div>
@@ -112,33 +112,33 @@ const HeroSection: React.FC = () => {
           <span className="text-yellow-400 text-sm font-medium">Digital Kurdistan State v1.0</span>
         </div>
 
-        <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
+        <h1 className="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent px-4">
           PezkuwiChain
         </h1>
 
-        <p className="text-xl md:text-2xl text-gray-300 mb-4 max-w-3xl mx-auto">
+        <p className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-4 max-w-3xl mx-auto px-4">
           {t('hero.title', 'Blockchain Governance Platform')}
         </p>
-        <p className="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
+        <p className="text-base sm:text-lg text-gray-400 mb-12 max-w-2xl mx-auto px-4">
           {t('hero.subtitle', 'Democratic and transparent governance with blockchain technology')}
         </p>
 
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 max-w-5xl mx-auto px-4">
-          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-6 hover:border-green-400/60 transition-all">
-            <div className="text-4xl font-bold text-green-400 mb-2">{stats.activeProposals}</div>
-            <div className="text-sm text-gray-300 font-medium">{t('hero.stats.activeProposals', 'Active Proposals')}</div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-6 mb-12 max-w-5xl mx-auto px-4">
+          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-4 sm:p-6 hover:border-green-400/60 transition-all">
+            <div className="text-2xl sm:text-4xl font-bold text-green-400 mb-2">{stats.activeProposals}</div>
+            <div className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.activeProposals', 'Active Proposals')}</div>
           </div>
-          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-yellow-400/40 p-6 hover:border-yellow-400/60 transition-all">
-            <div className="text-4xl font-bold text-yellow-400 mb-2">{stats.totalVoters.toLocaleString()}</div>
-            <div className="text-sm text-gray-300 font-medium">{t('hero.stats.totalVoters', 'Total Voters')}</div>
+          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-yellow-400/40 p-4 sm:p-6 hover:border-yellow-400/60 transition-all">
+            <div className="text-2xl sm:text-4xl font-bold text-yellow-400 mb-2">{stats.totalVoters.toLocaleString()}</div>
+            <div className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.totalVoters', 'Total Voters')}</div>
           </div>
-          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-red-500/40 p-6 hover:border-red-500/60 transition-all">
-            <div className="text-4xl font-bold text-red-400 mb-2">{stats.tokensStaked}</div>
-            <div className="text-sm text-gray-300 font-medium">{t('hero.stats.tokensStaked', 'Tokens Staked')}</div>
+          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-red-500/40 p-4 sm:p-6 hover:border-red-500/60 transition-all">
+            <div className="text-2xl sm:text-4xl font-bold text-red-400 mb-2 truncate">{stats.tokensStaked}</div>
+            <div className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.tokensStaked', 'Tokens Staked')}</div>
           </div>
-          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-6 hover:border-green-500/60 transition-all">
-            <div className="text-4xl font-bold text-green-400 mb-2">{stats.trustScore}%</div>
-            <div className="text-sm text-gray-300 font-medium">{t('hero.stats.trustScore', 'Trust Score')}</div>
+          <div className="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-4 sm:p-6 hover:border-green-500/60 transition-all">
+            <div className="text-2xl sm:text-4xl font-bold text-green-400 mb-2">{stats.trustScore}%</div>
+            <div className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.trustScore', 'Trust Score')}</div>
           </div>
         </div>