diff --git a/frontend/App.tsx b/frontend/App.tsx
index 4ea5b64c..6ddf2e92 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -1,13 +1,18 @@
import React from 'react';
import { StatusBar } from 'expo-status-bar';
-import RootNavigator from './src/navigation/RootNavigator';
-import { PolkadotProvider } from './src/contexts/PolkadotContext';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LanguageSelectionScreen from './src/screens/LanguageSelectionScreen';
+
+const Stack = createNativeStackNavigator();
export default function App() {
return (
-
+
-
-
+
+
+
+
);
}
diff --git a/frontend/src/screens/LanguageSelectionScreen.tsx b/frontend/src/screens/LanguageSelectionScreen.tsx
new file mode 100644
index 00000000..000d04e2
--- /dev/null
+++ b/frontend/src/screens/LanguageSelectionScreen.tsx
@@ -0,0 +1,213 @@
+import React, { useState } from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ SafeAreaView,
+ Dimensions,
+ Image,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+
+const { width, height } = Dimensions.get('window');
+
+const LANGUAGES = [
+ { code: 'en', name: 'English', flag: '🇬🇧' },
+ { code: 'ku', name: 'Kurdî (Kurmancî)', flag: '☀️' },
+ { code: 'ckb', name: 'کوردی (سۆرانی)', flag: '☀️' },
+ { code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
+ { code: 'ar', name: 'العربية', flag: '🇸🇦' },
+ { code: 'fa', name: 'فارسی', flag: '🇮🇷' },
+];
+
+export default function LanguageSelectionScreen({ navigation }: any) {
+ const [selectedLanguage, setSelectedLanguage] = useState('en');
+
+ const handleContinue = () => {
+ // TODO: Save language preference
+ // navigation.navigate('HumanVerification');
+ alert('Language selected: ' + selectedLanguage);
+ };
+
+ return (
+
+
+
+ {/* Header with Kurdistan Sun */}
+
+
+ ☀️
+
+ PezkuwiChain
+ Your Digital Citizenship Platform
+
+
+ {/* Language Selection Grid */}
+
+ Select Your Language
+
+ {LANGUAGES.map((lang) => (
+ setSelectedLanguage(lang.code)}
+ activeOpacity={0.7}
+ >
+ {lang.flag}
+ {lang.name}
+ {selectedLanguage === lang.code && (
+
+
+
+ )}
+
+ ))}
+
+
+
+ {/* Continue Button */}
+
+ Get Started
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ gradient: {
+ flex: 1,
+ },
+ content: {
+ flex: 1,
+ padding: 20,
+ justifyContent: 'space-between',
+ },
+ header: {
+ alignItems: 'center',
+ marginTop: 40,
+ },
+ sunContainer: {
+ width: 100,
+ height: 100,
+ borderRadius: 50,
+ backgroundColor: 'rgba(255,255,255,0.9)',
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: 20,
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 4 },
+ shadowOpacity: 0.2,
+ shadowRadius: 8,
+ elevation: 8,
+ },
+ sunEmoji: {
+ fontSize: 60,
+ },
+ title: {
+ fontSize: 32,
+ fontWeight: 'bold',
+ color: '#FFF',
+ textShadowColor: 'rgba(0,0,0,0.3)',
+ textShadowOffset: { width: 0, height: 2 },
+ textShadowRadius: 4,
+ },
+ subtitle: {
+ fontSize: 16,
+ color: '#FFF',
+ marginTop: 8,
+ textShadowColor: 'rgba(0,0,0,0.2)',
+ textShadowOffset: { width: 0, height: 1 },
+ textShadowRadius: 2,
+ },
+ languagesContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ },
+ sectionTitle: {
+ fontSize: 20,
+ fontWeight: '700',
+ color: '#FFF',
+ marginBottom: 20,
+ textAlign: 'center',
+ textShadowColor: 'rgba(0,0,0,0.2)',
+ textShadowOffset: { width: 0, height: 1 },
+ textShadowRadius: 2,
+ },
+ languagesGrid: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'space-between',
+ gap: 15,
+ },
+ languageCard: {
+ width: (width - 60) / 2,
+ backgroundColor: 'rgba(255,255,255,0.95)',
+ borderRadius: 16,
+ padding: 20,
+ alignItems: 'center',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.15,
+ shadowRadius: 4,
+ elevation: 4,
+ },
+ languageCardSelected: {
+ backgroundColor: '#FFF',
+ borderWidth: 3,
+ borderColor: '#00A651',
+ },
+ languageFlag: {
+ fontSize: 40,
+ marginBottom: 10,
+ },
+ languageName: {
+ fontSize: 14,
+ fontWeight: '600',
+ color: '#333',
+ textAlign: 'center',
+ },
+ checkmark: {
+ position: 'absolute',
+ top: 10,
+ right: 10,
+ },
+ continueButton: {
+ backgroundColor: '#EE2A35',
+ borderRadius: 16,
+ padding: 18,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 10,
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 4 },
+ shadowOpacity: 0.3,
+ shadowRadius: 8,
+ elevation: 8,
+ },
+ continueButtonText: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: '#FFF',
+ },
+});