pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-04-22 21:47:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide hero background image on mobile, improve responsive sizing

Browse Source
This commit is contained in:
Kurdistan Tech Ministry
2026-02-16 03:19:53 +03:00
parent e9d5fef39a
commit 6c9fb35d5a
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/HeroSection.tsx
+17 -17
View File
@@ -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>