mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-28 17:47:56 +00:00
236 lines
11 KiB
TypeScript
236 lines
11 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { CitizenshipModal } from '@/components/citizenship/CitizenshipModal';
|
||
import { InviteUserModal } from '@/components/referral/InviteUserModal';
|
||
import { Shield, Users, Award, Globe, ChevronRight, ArrowLeft, UserPlus } from 'lucide-react';
|
||
|
||
const BeCitizen: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
|
||
const [referrerAddress, setReferrerAddress] = useState<string | null>(null);
|
||
|
||
// Check for referral parameter on mount
|
||
useEffect(() => {
|
||
const ref = searchParams.get('ref');
|
||
if (ref) {
|
||
setReferrerAddress(ref);
|
||
// Auto-open modal if coming from referral link
|
||
setIsModalOpen(true);
|
||
}
|
||
}, [searchParams]);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-green-700 via-white to-red-600">
|
||
<div className="container mx-auto px-4 py-16">
|
||
{/* Back to Home Button and Invite Friend */}
|
||
<div className="mb-8 flex justify-between items-center">
|
||
<Button
|
||
onClick={() => navigate('/')}
|
||
variant="outline"
|
||
className="bg-red-600 hover:bg-red-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
|
||
>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
Back to Home
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={() => setIsInviteModalOpen(true)}
|
||
className="bg-green-600 hover:bg-green-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
|
||
>
|
||
<UserPlus className="mr-2 h-4 w-4" />
|
||
Invite Friend
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Hero Section */}
|
||
<div className="text-center mb-16">
|
||
<h1 className="text-5xl md:text-6xl font-bold text-red-700 mb-6 drop-shadow-lg">
|
||
🏛️ Digital Kurdistan
|
||
</h1>
|
||
<h2 className="text-3xl md:text-4xl font-semibold text-green-700 mb-4 drop-shadow-lg">
|
||
Bibe Welati / Be a Citizen
|
||
</h2>
|
||
<p className="text-xl text-gray-800 font-semibold max-w-3xl mx-auto drop-shadow-md">
|
||
Join the Digital Kurdistan State as a sovereign citizen. Receive your Welati Tiki NFT and unlock governance, trust scoring, and community benefits.
|
||
</p>
|
||
</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">
|
||
<CardHeader>
|
||
<Shield className="h-12 w-12 text-red-600 mb-3" />
|
||
<CardTitle className="text-red-700 font-bold">Privacy Protected</CardTitle>
|
||
<CardDescription className="text-gray-700 font-medium">
|
||
Your data is encrypted with ZK-proofs. Only hashes are stored on-chain.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
|
||
<Card className="bg-yellow-50/90 backdrop-blur-md border-yellow-600/50 hover:border-yellow-600 transition-all shadow-lg">
|
||
<CardHeader>
|
||
<Award className="h-12 w-12 text-yellow-700 mb-3" />
|
||
<CardTitle className="text-yellow-800 font-bold">Welati Tiki NFT</CardTitle>
|
||
<CardDescription className="text-gray-700 font-medium">
|
||
Receive your unique soulbound citizenship NFT after KYC approval.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
|
||
<Card className="bg-green-50/90 backdrop-blur-md border-green-600/50 hover:border-green-600 transition-all shadow-lg">
|
||
<CardHeader>
|
||
<Users className="h-12 w-12 text-green-600 mb-3" />
|
||
<CardTitle className="text-green-700 font-bold">Trust Scoring</CardTitle>
|
||
<CardDescription className="text-gray-700 font-medium">
|
||
Build trust through referrals, staking, and community contributions.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
|
||
<Card className="bg-red-50/90 backdrop-blur-md border-red-600/50 hover:border-red-600 transition-all shadow-lg">
|
||
<CardHeader>
|
||
<Globe className="h-12 w-12 text-red-600 mb-3" />
|
||
<CardTitle className="text-red-700 font-bold">Governance Access</CardTitle>
|
||
<CardDescription className="text-gray-700 font-medium">
|
||
Participate in on-chain governance and shape the future of Digital Kurdistan.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</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">Ready to Join?</h3>
|
||
<p className="text-gray-800 font-medium mb-6">
|
||
Whether you're already a citizen or want to become one, start your journey here.
|
||
</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>Start Citizenship Process</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>Secure ZK-Proof Authentication</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>Soulbound NFT Citizenship</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>Decentralized Identity</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">How It Works</h3>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{/* Existing Citizens */}
|
||
<Card className="bg-red-50/90 backdrop-blur-md border-red-600/50 shadow-lg">
|
||
<CardHeader>
|
||
<div className="bg-red-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
|
||
<span className="text-2xl font-bold text-white">1</span>
|
||
</div>
|
||
<CardTitle className="text-red-700 font-bold">Already a Citizen?</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-gray-700 font-medium space-y-2 text-sm">
|
||
<p>✓ Enter your Welati Tiki NFT number</p>
|
||
<p>✓ Verify NFT ownership on-chain</p>
|
||
<p>✓ Sign authentication challenge</p>
|
||
<p>✓ Access your citizen dashboard</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* New Citizens */}
|
||
<Card className="bg-yellow-50/90 backdrop-blur-md border-yellow-600/50 shadow-lg">
|
||
<CardHeader>
|
||
<div className="bg-yellow-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
|
||
<span className="text-2xl font-bold text-white">2</span>
|
||
</div>
|
||
<CardTitle className="text-yellow-800 font-bold">New to Citizenship?</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-gray-700 font-medium space-y-2 text-sm">
|
||
<p>✓ Fill detailed KYC application</p>
|
||
<p>✓ Data encrypted with ZK-proofs</p>
|
||
<p>✓ Submit for admin approval</p>
|
||
<p>✓ Receive your Welati Tiki NFT</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* After Citizenship */}
|
||
<Card className="bg-green-50/90 backdrop-blur-md border-green-600/50 shadow-lg">
|
||
<CardHeader>
|
||
<div className="bg-green-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
|
||
<span className="text-2xl font-bold text-white">3</span>
|
||
</div>
|
||
<CardTitle className="text-green-700 font-bold">Citizen Benefits</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-gray-700 font-medium space-y-2 text-sm">
|
||
<p>✓ Trust score calculation enabled</p>
|
||
<p>✓ Governance voting rights</p>
|
||
<p>✓ Referral tree participation</p>
|
||
<p>✓ Staking multiplier bonuses</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Security Notice */}
|
||
<div className="mt-12 max-w-3xl mx-auto">
|
||
<Card className="bg-yellow-50/90 border-yellow-600/50 shadow-lg">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-start gap-3">
|
||
<Shield className="h-6 w-6 text-yellow-700 mt-1 flex-shrink-0" />
|
||
<div className="text-sm text-gray-700">
|
||
<p className="font-bold text-yellow-800 mb-2">Privacy & Security</p>
|
||
<p className="font-medium">
|
||
Your personal data is encrypted using AES-GCM with your wallet-derived keys.
|
||
Only commitment hashes are stored on the blockchain. Encrypted data is stored
|
||
on IPFS and locally on your device. No personal information is ever publicly visible.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Citizenship Modal */}
|
||
<CitizenshipModal
|
||
isOpen={isModalOpen}
|
||
onClose={() => setIsModalOpen(false)}
|
||
referrerAddress={referrerAddress}
|
||
/>
|
||
|
||
{/* Invite Friend Modal */}
|
||
<InviteUserModal isOpen={isInviteModalOpen} onClose={() => setIsInviteModalOpen(false)} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BeCitizen;
|