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

fix: move Start Citizenship button to top bar and Ready to Join card above benefits grid

Browse Source
This commit is contained in:
Kurdistan Tech Ministry
2026-02-24 23:56:07 +03:00
parent 25754d2224
commit 9c1ec82175
1 changed files with 41 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/BeCitizen.tsx
+41 -42
View File
@@ -39,6 +39,14 @@ const BeCitizen: React.FC = () => {
{t('beCitizen.backToHome')}
</Button>
<Button
onClick={() => setIsModalOpen(true)}
className="w-full sm:w-auto bg-gradient-to-r from-red-600 to-green-700 hover:from-red-700 hover:to-green-800 border-yellow-400 border-2 text-white font-semibold shadow-lg group"
>
<span>{t('beCitizen.startProcess')}</span>
<ChevronRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
</Button>
<Button
onClick={() => setIsInviteModalOpen(true)}
className="w-full sm:w-auto bg-green-600 hover:bg-green-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
@@ -61,6 +69,39 @@ const BeCitizen: React.FC = () => {
</p>
</div>
{/* Ready to Join CTA */}
<div className="max-w-4xl mx-auto mb-12">
<Card className="bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-400 backdrop-blur-lg border-red-600 border-4 shadow-2xl">
<CardContent className="pt-8 pb-8">
<div className="text-center space-y-6">
<div>
<h3 className="text-2xl font-bold text-red-700 mb-3">{t('beCitizen.readyToJoin')}</h3>
<p className="text-gray-800 font-medium">
{t('beCitizen.readyToJoinDesc')}
</p>
</div>
<div className="flex flex-col md:flex-row gap-4 justify-center items-center text-sm text-gray-700 font-medium">
<div className="flex items-center gap-2">
<Shield className="h-4 w-4 text-green-700" />
<span>{t('beCitizen.zkAuth')}</span>
</div>
<div className="hidden md:block text-red-600">•</div>
<div className="flex items-center gap-2">
<Award className="h-4 w-4 text-red-600" />
<span>{t('beCitizen.soulboundNft')}</span>
</div>
<div className="hidden md:block text-red-600">•</div>
<div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-green-700" />
<span>{t('beCitizen.decentralizedId')}</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Benefits Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<Card className="bg-red-50/90 backdrop-blur-md border-red-600/50 hover:border-red-600 transition-all shadow-lg">
@@ -104,48 +145,6 @@ const BeCitizen: React.FC = () => {
</Card>
</div>
{/* CTA Section */}
<div className="max-w-4xl mx-auto">
<Card className="bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-400 backdrop-blur-lg border-red-600 border-4 shadow-2xl">
<CardContent className="pt-8 pb-8">
<div className="text-center space-y-6">
<div>
<h3 className="text-2xl font-bold text-red-700 mb-3">{t('beCitizen.readyToJoin')}</h3>
<p className="text-gray-800 font-medium mb-6">
{t('beCitizen.readyToJoinDesc')}
</p>
</div>
<Button
onClick={() => setIsModalOpen(true)}
size="lg"
className="bg-gradient-to-r from-red-600 to-green-700 hover:from-red-700 hover:to-green-800 text-white font-bold px-8 py-6 text-lg group shadow-xl border-2 border-yellow-300"
>
<span>{t('beCitizen.startProcess')}</span>
<ChevronRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
</Button>
<div className="flex flex-col md:flex-row gap-4 justify-center items-center text-sm text-gray-700 font-medium pt-4">
<div className="flex items-center gap-2">
<Shield className="h-4 w-4 text-green-700" />
<span>{t('beCitizen.zkAuth')}</span>
</div>
<div className="hidden md:block text-red-600">•</div>
<div className="flex items-center gap-2">
<Award className="h-4 w-4 text-red-600" />
<span>{t('beCitizen.soulboundNft')}</span>
</div>
<div className="hidden md:block text-red-600">•</div>
<div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-green-700" />
<span>{t('beCitizen.decentralizedId')}</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Process Overview */}
<div className="mt-16 max-w-5xl mx-auto">
<h3 className="text-3xl font-bold text-red-700 text-center mb-8 drop-shadow-lg">{t('beCitizen.howItWorks')}</h3>