pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-06-13 23:51:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve mobile UI across all pages for 360px screens

Browse Source 
- AppLayout: tighter button grid, smaller icons/fonts, centered dropdowns, narrower mobile menu
- HeroSection: smaller stats padding/gap, compact CTA buttons
- GovernmentEntrance: responsive title/tabs/vote layout, smaller action buttons
- Citizens: smaller portal title and announcement header
- GovernanceInterface: 2-col tab grid on mobile
This commit is contained in:
Kurdistan Tech Ministry
2026-02-25 04:39:05 +03:00
parent 05280cbd45
commit 60bdf84816
5 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AppLayout.tsx
+30 -30
View File
@@ -153,50 +153,50 @@ const AppLayout: React.FC = () => {
{/* Button Grid (logged in only) */} {/* Button Grid (logged in only) */}
{user && ( {user && (
<div ref={gridRef} className="fixed top-16 w-full z-30 bg-gray-950/95 backdrop-blur-md border-b border-gray-800"> <div ref={gridRef} className="fixed top-16 w-full z-30 bg-gray-950/95 backdrop-blur-md border-b border-gray-800">
<div className="max-w-5xl mx-auto grid grid-cols-4 gap-1.5 sm:gap-2 px-2 sm:px-4 py-1.5 sm:py-2"> <div className="max-w-5xl mx-auto grid grid-cols-4 gap-1 sm:gap-2 px-1 sm:px-4 py-1 sm:py-2">
{/* Dashboard */} {/* Dashboard */}
<button <button
onClick={() => { setOpenMenu(null); navigate('/dashboard'); }} onClick={() => { setOpenMenu(null); navigate('/dashboard'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<LayoutDashboard className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" /> <LayoutDashboard className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-green-400" />
{t('nav.dashboard')} {t('nav.dashboard')}
</button> </button>
{/* Wallet */} {/* Wallet */}
<button <button
onClick={() => { setOpenMenu(null); navigate('/wallet'); }} onClick={() => { setOpenMenu(null); navigate('/wallet'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-yellow-400/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-yellow-400/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<Wallet className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" /> <Wallet className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-yellow-400" />
{t('nav.wallet')} {t('nav.wallet')}
</button> </button>
{/* Be Citizen */} {/* Be Citizen */}
<button <button
onClick={() => { setOpenMenu(null); navigate('/be-citizen'); }} onClick={() => { setOpenMenu(null); navigate('/be-citizen'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-cyan-400/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-cyan-400/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<Users className="w-4 h-4 sm:w-5 sm:h-5 text-cyan-400" /> <Users className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-cyan-400" />
{t('nav.beCitizen')} {t('nav.beCitizen')}
</button> </button>
{/* Settings */} {/* Settings */}
<button <button
onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }} onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<Settings className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" /> <Settings className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-gray-400" />
{t('nav.settings')} {t('nav.settings')}
</button> </button>
{/* Trading (dropdown) */} {/* Trading (dropdown) */}
<div className="relative"> <div className="relative">
<button <button
onClick={() => setOpenMenu(openMenu === 'trading' ? null : 'trading')} onClick={() => setOpenMenu(openMenu === 'trading' ? null : 'trading')}
className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-red-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-red-500/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<ArrowRightLeft className="w-4 h-4 sm:w-5 sm:h-5 text-red-400" /> <ArrowRightLeft className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-red-400" />
<span className="flex items-center gap-0.5">{t('nav.trading')} <ChevronDown className="w-3 h-3" /></span> <span className="flex items-center gap-0.5">{t('nav.trading')} <ChevronDown className="w-3 h-3" /></span>
</button> </button>
{openMenu === 'trading' && ( {openMenu === 'trading' && (
<div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50"> <div className="absolute left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0 top-full mt-1 w-44 sm:w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
<button onClick={() => { setShowDEX(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg"> <button onClick={() => { setShowDEX(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg">
<Droplet className="w-4 h-4" /> {t('trading.dexPools')} <Droplet className="w-4 h-4" /> {t('trading.dexPools')}
</button> </button>
@@ -218,22 +218,22 @@ const AppLayout: React.FC = () => {
{/* Education */} {/* Education */}
<button <button
onClick={() => { setOpenMenu(null); setShowEducation(true); navigate('/education'); }} onClick={() => { setOpenMenu(null); setShowEducation(true); navigate('/education'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-yellow-400/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-yellow-400/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<Award className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" /> <Award className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-yellow-400" />
{t('nav.education')} {t('nav.education')}
</button> </button>
{/* Governance (dropdown) */} {/* Governance (dropdown) */}
<div className="relative"> <div className="relative">
<button <button
onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')} onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')}
className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<FileEdit className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" /> <FileEdit className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-green-400" />
<span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span> <span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span>
</button> </button>
{openMenu === 'governance' && ( {openMenu === 'governance' && (
<div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50"> <div className="absolute left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0 top-full mt-1 w-44 sm:w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
<button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg"> <button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg">
<FileEdit className="w-4 h-4" /> {t('governance.proposals')} <FileEdit className="w-4 h-4" /> {t('governance.proposals')}
</button> </button>
@@ -255,9 +255,9 @@ const AppLayout: React.FC = () => {
{/* Logout */} {/* Logout */}
<button <button
onClick={async () => { setOpenMenu(null); await signOut(); navigate('/login'); }} onClick={async () => { setOpenMenu(null); await signOut(); navigate('/login'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-red-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white" className="flex flex-col items-center gap-0.5 sm:gap-1 p-1 sm:p-2 rounded-xl bg-gray-900/70 border border-red-500/40 text-[9px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
> >
<LogIn className="w-4 h-4 sm:w-5 sm:h-5 text-red-400 rotate-180" /> <LogIn className="w-3.5 h-3.5 sm:w-5 sm:h-5 text-red-400 rotate-180" />
{t('nav.logout')} {t('nav.logout')}
</button> </button>
</div> </div>
@@ -271,7 +271,7 @@ const AppLayout: React.FC = () => {
className="fixed inset-0 bg-black/60 backdrop-blur-sm" className="fixed inset-0 bg-black/60 backdrop-blur-sm"
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
/> />
<div className="fixed top-16 right-0 bottom-0 w-72 bg-gray-900 border-l border-gray-800 overflow-y-auto"> <div className="fixed top-16 right-0 bottom-0 w-64 sm:w-72 bg-gray-900 border-l border-gray-800 overflow-y-auto">
<div className="p-4 space-y-2"> <div className="p-4 space-y-2">
{user ? ( {user ? (
<> <>
@@ -408,13 +408,13 @@ const AppLayout: React.FC = () => {
<main> <main>
{/* Conditional Rendering for Features */} {/* Conditional Rendering for Features */}
{showDEX ? ( {showDEX ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<DEXDashboard /> <DEXDashboard />
</div> </div>
</div> </div>
) : showProposalWizard ? ( ) : showProposalWizard ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<ProposalWizard <ProposalWizard
onComplete={(proposal) => { onComplete={(proposal) => {
@@ -426,25 +426,25 @@ const AppLayout: React.FC = () => {
</div> </div>
</div> </div>
) : showDelegation ? ( ) : showDelegation ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<DelegationManager /> <DelegationManager />
</div> </div>
</div> </div>
) : showForum ? ( ) : showForum ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<ForumOverview /> <ForumOverview />
</div> </div>
</div> </div>
) : showModeration ? ( ) : showModeration ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<ModerationPanel /> <ModerationPanel />
</div> </div>
</div> </div>
) : showTreasury ? ( ) : showTreasury ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent"> <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
@@ -494,7 +494,7 @@ const AppLayout: React.FC = () => {
</div> </div>
</div> </div>
) : showStaking ? ( ) : showStaking ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent"> <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
@@ -508,7 +508,7 @@ const AppLayout: React.FC = () => {
</div> </div>
</div> </div>
) : showMultiSig ? ( ) : showMultiSig ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<div className="max-w-full mx-auto px-4"> <div className="max-w-full mx-auto px-4">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent"> <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
@@ -522,11 +522,11 @@ const AppLayout: React.FC = () => {
</div> </div>
</div> </div>
) : showEducation ? ( ) : showEducation ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<EducationPlatform /> <EducationPlatform />
</div> </div>
) : showP2P ? ( ) : showP2P ? (
<div className="pt-[8rem] sm:pt-[8.5rem] min-h-screen bg-gray-950"> <div className="pt-20 sm:pt-[8.5rem] min-h-screen bg-gray-950">
<P2PDashboard /> <P2PDashboard />
</div> </div>
) : ( ) : (
web/src/components/GovernanceInterface.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const GovernanceInterface: React.FC = () => {
</div> </div>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid grid-cols-3 lg:grid-cols-6 gap-2 bg-gray-900/50 p-1 rounded-lg overflow-x-auto scrollbar-hide"> <TabsList className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 bg-gray-900/50 p-1 rounded-lg overflow-x-auto scrollbar-hide">
<TabsTrigger value="overview" className="flex items-center space-x-2"> <TabsTrigger value="overview" className="flex items-center space-x-2">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
<span>{t('governance.overview')}</span> <span>{t('governance.overview')}</span>
web/src/components/HeroSection.tsx
+7 -7
View File
@@ -127,20 +127,20 @@ const HeroSection: React.FC = () => {
{t('hero.subtitle', 'Democratic and transparent governance with blockchain technology')} {t('hero.subtitle', 'Democratic and transparent governance with blockchain technology')}
</p> </p>
<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="grid grid-cols-2 md:grid-cols-4 gap-2 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="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-3 sm:p-6 hover:border-green-400/60 transition-all">
<div className="text-base sm:text-2xl font-bold text-green-400 mb-2">{stats.activeProposals}</div> <div className="text-base sm:text-2xl 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 className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.activeProposals', 'Active Proposals')}</div>
</div> </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="bg-gray-900/70 backdrop-blur-md rounded-xl border border-yellow-400/40 p-3 sm:p-6 hover:border-yellow-400/60 transition-all">
<div className="text-base sm:text-2xl font-bold text-yellow-400 mb-2">{stats.totalVoters.toLocaleString()}</div> <div className="text-base sm:text-2xl 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 className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.totalVoters', 'Total Voters')}</div>
</div> </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="bg-gray-900/70 backdrop-blur-md rounded-xl border border-red-500/40 p-3 sm:p-6 hover:border-red-500/60 transition-all">
<div className="text-base sm:text-2xl font-bold text-red-400 mb-2 truncate">{stats.tokensStaked}</div> <div className="text-base sm:text-2xl 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 className="text-xs sm:text-sm text-gray-300 font-medium">{t('hero.stats.tokensStaked', 'Tokens Staked')}</div>
</div> </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="bg-gray-900/70 backdrop-blur-md rounded-xl border border-green-500/40 p-3 sm:p-6 hover:border-green-500/60 transition-all">
<div className="text-base sm:text-2xl font-bold text-green-400 mb-2">{stats.citizenCount !== null ? stats.citizenCount.toLocaleString() : '...'}</div> <div className="text-base sm:text-2xl font-bold text-green-400 mb-2">{stats.citizenCount !== null ? stats.citizenCount.toLocaleString() : '...'}</div>
<div className="text-xs sm:text-sm text-gray-300 font-medium">Hejmara Kurd Lê Cîhanê</div> <div className="text-xs sm:text-sm text-gray-300 font-medium">Hejmara Kurd Lê Cîhanê</div>
</div> </div>
@@ -149,14 +149,14 @@ const HeroSection: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center px-4"> <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
<button <button
onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })} onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
className="px-8 py-4 bg-gradient-to-r from-green-500 via-yellow-400 to-yellow-500 text-gray-900 font-bold rounded-lg hover:shadow-lg hover:shadow-yellow-400/50 transition-all transform hover:scale-105 flex items-center justify-center group" className="px-5 py-3 sm:px-8 sm:py-4 bg-gradient-to-r from-green-500 via-yellow-400 to-yellow-500 text-gray-900 font-bold rounded-lg hover:shadow-lg hover:shadow-yellow-400/50 transition-all transform hover:scale-105 flex items-center justify-center group"
> >
{t('hero.exploreGovernance', 'Explore Governance')} {t('hero.exploreGovernance', 'Explore Governance')}
<ChevronRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" /> <ChevronRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
</button> </button>
<button <button
onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })} onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
className="px-8 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="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')} {t('hero.learnMore', 'Learn More')}
</button> </button>
web/src/pages/Citizens.tsx
+2 -2
View File
@@ -338,7 +338,7 @@ export default function Citizens() {
{/* Title Section */} {/* Title Section */}
<div className="text-center mb-4 sm:mb-8"> <div className="text-center mb-4 sm:mb-8">
<h1 className="text-3xl sm:text-5xl md:text-6xl font-bold text-red-700 mb-3 drop-shadow-lg"> <h1 className="text-2xl sm:text-4xl md:text-6xl font-bold text-red-700 mb-3 drop-shadow-lg">
{t('citizens.portalTitle')} {t('citizens.portalTitle')}
</h1> </h1>
<p className="text-base sm:text-xl text-gray-800 font-semibold drop-shadow-md"> <p className="text-base sm:text-xl text-gray-800 font-semibold drop-shadow-md">
@@ -362,7 +362,7 @@ export default function Citizens() {
<div className="flex-1 text-center px-3 sm:px-6"> <div className="flex-1 text-center px-3 sm:px-6">
<div className="flex items-center justify-center mb-3"> <div className="flex items-center justify-center mb-3">
<Bell className="h-5 w-5 sm:h-7 sm:w-7 text-white mr-2 sm:mr-3 animate-pulse" /> <Bell className="h-5 w-5 sm:h-7 sm:w-7 text-white mr-2 sm:mr-3 animate-pulse" />
<h3 className="text-xl sm:text-3xl font-bold text-white">{t('citizens.announcements')}</h3> <h3 className="text-lg sm:text-3xl font-bold text-white">{t('citizens.announcements')}</h3>
</div> </div>
<h4 className="text-base sm:text-xl font-bold text-white mb-2 sm:mb-3">{currentAnnouncement.title}</h4> <h4 className="text-base sm:text-xl font-bold text-white mb-2 sm:mb-3">{currentAnnouncement.title}</h4>
<p className="text-white/90 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto">{currentAnnouncement.description}</p> <p className="text-white/90 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto">{currentAnnouncement.description}</p>
web/src/pages/citizens/GovernmentEntrance.tsx
+13 -13
View File
@@ -660,10 +660,10 @@ export default function GovernmentEntrance() {
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-5xl md:text-6xl font-bold text-green-700 mb-3 drop-shadow-lg"> <h1 className="text-2xl sm:text-4xl md:text-6xl font-bold text-green-700 mb-3 drop-shadow-lg">
Deriyê Hikûmetê (Government Entrance) Deriyê Hikûmetê (Government Entrance)
</h1> </h1>
<p className="text-xl text-gray-800 font-semibold drop-shadow-md"> <p className="text-base sm:text-xl text-gray-800 font-semibold drop-shadow-md">
Beşdariya Demokratîk (Democratic Participation) Beşdariya Demokratîk (Democratic Participation)
</p> </p>
</div> </div>
@@ -671,16 +671,16 @@ export default function GovernmentEntrance() {
{/* Tabs */} {/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-3 mb-6 bg-white/90 backdrop-blur"> <TabsList className="grid w-full grid-cols-3 mb-6 bg-white/90 backdrop-blur">
<TabsTrigger value="legislation" className="text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-green-600 data-[state=active]:text-white data-[state=active]:hover:bg-green-700"> <TabsTrigger value="legislation" className="text-xs sm:text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-green-600 data-[state=active]:text-white data-[state=active]:hover:bg-green-700">
<FileText className="h-5 w-5 mr-2" /> <FileText className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
Yasalar (Legislation) Yasalar (Legislation)
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="parliament" className="text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:hover:bg-blue-700"> <TabsTrigger value="parliament" className="text-xs sm:text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:hover:bg-blue-700">
<Users className="h-5 w-5 mr-2" /> <Users className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
Parleman (Parliament) Parleman (Parliament)
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="president" className="text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-yellow-600 data-[state=active]:text-white data-[state=active]:hover:bg-yellow-700"> <TabsTrigger value="president" className="text-xs sm:text-lg font-semibold text-gray-800 hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-yellow-600 data-[state=active]:text-white data-[state=active]:hover:bg-yellow-700">
<Crown className="h-5 w-5 mr-2" /> <Crown className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
Serok (President) Serok (President)
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@@ -690,7 +690,7 @@ export default function GovernmentEntrance() {
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<Button <Button
onClick={() => setShowProposeModal(true)} onClick={() => setShowProposeModal(true)}
className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 text-lg" className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 sm:py-3 sm:px-6 text-sm sm:text-lg"
> >
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Pêşniyareke Nû (New Proposal) Pêşniyareke Nû (New Proposal)
@@ -712,7 +712,7 @@ export default function GovernmentEntrance() {
<CardHeader> <CardHeader>
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<CardTitle className="text-2xl text-gray-900 mb-2">{proposal.title}</CardTitle> <CardTitle className="text-lg sm:text-2xl text-gray-900 mb-2">{proposal.title}</CardTitle>
<CardDescription className="text-sm text-gray-600"> <CardDescription className="text-sm text-gray-600">
Proposal #{proposal.id} • Block #{proposal.blockNumber} Proposal #{proposal.id} • Block #{proposal.blockNumber}
</CardDescription> </CardDescription>
@@ -726,7 +726,7 @@ export default function GovernmentEntrance() {
<CardContent> <CardContent>
<p className="text-gray-800 mb-4 whitespace-pre-wrap">{proposal.description}</p> <p className="text-gray-800 mb-4 whitespace-pre-wrap">{proposal.description}</p>
<div className="flex items-center gap-4"> <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
size="sm" size="sm"
@@ -767,7 +767,7 @@ export default function GovernmentEntrance() {
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<Button <Button
onClick={() => setShowNominateParliamentModal(true)} onClick={() => setShowNominateParliamentModal(true)}
className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 text-lg" className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 sm:py-3 sm:px-6 text-sm sm:text-lg"
> >
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Berjewendî Bike (Nominate Candidate) Berjewendî Bike (Nominate Candidate)
@@ -822,7 +822,7 @@ export default function GovernmentEntrance() {
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<Button <Button
onClick={() => setShowNominatePresidentModal(true)} onClick={() => setShowNominatePresidentModal(true)}
className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 text-lg" className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 sm:py-3 sm:px-6 text-sm sm:text-lg"
> >
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Berjewendî Bike (Nominate Candidate) Berjewendî Bike (Nominate Candidate)