diff --git a/mobile/src/screens/WelcomeScreen.tsx b/mobile/src/screens/WelcomeScreen.tsx index be90767c..5e104349 100644 --- a/mobile/src/screens/WelcomeScreen.tsx +++ b/mobile/src/screens/WelcomeScreen.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { View, Text, @@ -7,27 +7,34 @@ import { ScrollView, SafeAreaView, StatusBar, + Image, } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; import { useTranslation } from 'react-i18next'; -import { useLanguage } from '../contexts/LanguageContext'; -import { languages } from '../i18n'; +import AsyncStorage from '@react-native-async-storage/async-storage'; import { KurdistanColors } from '../theme/colors'; +import PrivacyPolicyModal from '../components/PrivacyPolicyModal'; +import TermsOfServiceModal from '../components/TermsOfServiceModal'; interface WelcomeScreenProps { - onLanguageSelected: () => void; + onContinue?: () => void; } -const WelcomeScreen: React.FC = ({ onLanguageSelected }) => { +const WelcomeScreen: React.FC = ({ onContinue }) => { const { t } = useTranslation(); - const { changeLanguage, currentLanguage } = useLanguage(); + const [agreed, setAgreed] = useState(false); + const [privacyModalVisible, setPrivacyModalVisible] = useState(false); + const [termsModalVisible, setTermsModalVisible] = useState(false); - const handleLanguageSelect = async (languageCode: string) => { - await changeLanguage(languageCode); - // Small delay for better UX - setTimeout(() => { - onLanguageSelected(); - }, 300); + const handleContinue = async () => { + if (!agreed) return; + + try { + await AsyncStorage.setItem('@pezkuwi/privacy_consent_accepted', 'true'); + onContinue && onContinue(); + } catch (error) { + if (__DEV__) console.error('Error saving privacy consent:', error); + } }; return ( @@ -46,66 +53,124 @@ const WelcomeScreen: React.FC = ({ onLanguageSelected }) => {/* Logo and Title */} - PZK + - {t('welcome.title')} - {t('welcome.subtitle')} + Pezkuwi Super App + The First Digital Nation - {/* Language Selection */} - - {t('welcome.selectLanguage')} - - {languages.map((language) => ( - handleLanguageSelect(language.code)} - activeOpacity={0.7} - > - - {language.nativeName} - - - {language.name} - - {language.rtl && ( - - RTL - - )} - - ))} + {/* Introduction */} + + + Welcome to Pezkuwi, where blockchain technology transcends financial applications to address fundamental human challenges — statelessness, governance, and social justice. + + + + Pezkuwi is a pioneering experiment in digital statehood, merging technology with sociology, economy with politics. Starting with the Kurdish digital nation, we are building the world's first territory-independent nation governed by algorithmic sovereignty and social trust rather than borders and bureaucracy. + + + + Our meritocratic TNPoS consensus and modular digital nation infrastructure represent a new paradigm for Web3 — proving that decentralization is not just a technical promise, but a pathway to true self-governance. + + + + + + Digital Citizenship & Identity + + + + Decentralized Governance + + + + Non-Custodial Wallet + + + + Community-Driven Economy + + {/* Privacy Consent Checkbox */} + + setAgreed(!agreed)} + activeOpacity={0.7} + > + + {agreed && } + + + I agree to the{' '} + { + e.stopPropagation(); + setPrivacyModalVisible(true); + }} + > + Privacy Policy + + {' '}and{' '} + { + e.stopPropagation(); + setTermsModalVisible(true); + }} + > + Terms of Service + + + + + {/* Continue Button */} - {currentLanguage && ( - onLanguageSelected()} - activeOpacity={0.8} - > - {t('welcome.continue')} - - )} + + Get Started + {/* Footer */} + setPrivacyModalVisible(true)}> + Privacy Policy + + + setTermsModalVisible(true)}> + Terms of Service + - Pezkuwi Blockchain • {new Date().getFullYear()} + Pezkuwi Blockchain • Est. 2024 • {new Date().getFullYear()} + + + Building the future of decentralized governance since the launch of PezkuwiChain testnet + + {/* Privacy Policy Modal */} + setPrivacyModalVisible(false)} + /> + + {/* Terms of Service Modal */} + setTermsModalVisible(false)} + /> ); @@ -129,23 +194,20 @@ const styles = StyleSheet.create({ marginBottom: 40, }, logoContainer: { - width: 100, - height: 100, - borderRadius: 50, + width: 120, + height: 120, + borderRadius: 60, backgroundColor: KurdistanColors.spi, justifyContent: 'center', alignItems: 'center', marginBottom: 20, - shadowColor: '#000', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.3, - shadowRadius: 8, + boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)', elevation: 8, + padding: 10, }, - logoText: { - fontSize: 32, - fontWeight: 'bold', - color: KurdistanColors.kesk, + logoImage: { + width: '100%', + height: '100%', }, title: { fontSize: 28, @@ -160,66 +222,81 @@ const styles = StyleSheet.create({ textAlign: 'center', opacity: 0.9, }, - languageSection: { + introSection: { + backgroundColor: 'rgba(255, 255, 255, 0.15)', + borderRadius: 16, + padding: 20, marginBottom: 30, + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.3)', }, - sectionTitle: { - fontSize: 20, - fontWeight: '600', + introText: { + fontSize: 15, + lineHeight: 24, color: KurdistanColors.spi, - marginBottom: 20, textAlign: 'center', + marginBottom: 16, }, - languageGrid: { + featuresList: { + marginTop: 12, gap: 12, }, - languageCard: { - backgroundColor: 'rgba(255, 255, 255, 0.2)', + featureItem: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 4, + }, + featureBullet: { + fontSize: 20, + color: KurdistanColors.zer, + marginRight: 12, + fontWeight: 'bold', + }, + featureText: { + fontSize: 15, + color: KurdistanColors.spi, + fontWeight: '500', + }, + consentContainer: { + marginBottom: 20, + backgroundColor: 'rgba(255, 255, 255, 0.15)', borderRadius: 12, padding: 16, + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.3)', + }, + checkboxContainer: { + flexDirection: 'row', + alignItems: 'flex-start', + }, + checkbox: { + width: 24, + height: 24, + borderRadius: 6, borderWidth: 2, - borderColor: 'transparent', + borderColor: KurdistanColors.spi, + marginRight: 12, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'transparent', }, - languageCardSelected: { + checkboxChecked: { backgroundColor: KurdistanColors.spi, - borderColor: KurdistanColors.zer, - shadowColor: KurdistanColors.zer, - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.5, - shadowRadius: 4, - elevation: 4, }, - languageName: { - fontSize: 18, - fontWeight: '600', - color: KurdistanColors.spi, - marginBottom: 4, - }, - languageNameSelected: { + checkmark: { color: KurdistanColors.kesk, - }, - languageCode: { - fontSize: 14, - color: KurdistanColors.spi, - opacity: 0.8, - }, - languageCodeSelected: { - color: KurdistanColors.reş, - opacity: 0.6, - }, - rtlBadge: { - position: 'absolute', - top: 8, - right: 8, - backgroundColor: KurdistanColors.zer, - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 4, - }, - rtlBadgeText: { - fontSize: 10, + fontSize: 16, fontWeight: 'bold', - color: KurdistanColors.reş, + }, + consentText: { + flex: 1, + fontSize: 14, + lineHeight: 20, + color: KurdistanColors.spi, + }, + consentLink: { + fontWeight: 'bold', + textDecorationLine: 'underline', }, continueButton: { backgroundColor: KurdistanColors.spi, @@ -227,12 +304,12 @@ const styles = StyleSheet.create({ padding: 16, alignItems: 'center', marginBottom: 20, - shadowColor: '#000', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.3, - shadowRadius: 6, + boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)', elevation: 6, }, + continueButtonDisabled: { + opacity: 0.4, + }, continueButtonText: { fontSize: 18, fontWeight: 'bold', @@ -241,11 +318,37 @@ const styles = StyleSheet.create({ footer: { alignItems: 'center', paddingTop: 20, + gap: 8, + }, + footerLink: { + paddingVertical: 4, + }, + footerLinkText: { + fontSize: 13, + color: KurdistanColors.spi, + fontWeight: '600', + textDecorationLine: 'underline', + }, + footerDivider: { + fontSize: 12, + color: KurdistanColors.spi, + opacity: 0.5, + marginHorizontal: 8, }, footerText: { fontSize: 12, color: KurdistanColors.spi, opacity: 0.7, + textAlign: 'center', + marginTop: 8, + }, + footerSubtext: { + fontSize: 11, + color: KurdistanColors.spi, + opacity: 0.6, + textAlign: 'center', + fontStyle: 'italic', + paddingHorizontal: 20, }, });