auto-commit for bcad8a5d-af23-4eef-9c8f-3057e6eb8e4a

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 (
-    <PolkadotProvider>
+    <NavigationContainer>
       <StatusBar style="auto" />
-      <RootNavigator />
-    </PolkadotProvider>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="LanguageSelection" component={LanguageSelectionScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }

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 (
+    <SafeAreaView style={styles.container}>
+      <LinearGradient
+        colors={['#00A651', '#EE2A35', '#FFD700', '#FFFFFF']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.gradient}
+      >
+        <View style={styles.content}>
+          {/* Header with Kurdistan Sun */}
+          <View style={styles.header}>
+            <View style={styles.sunContainer}>
+              <Text style={styles.sunEmoji}>☀️</Text>
+            </View>
+            <Text style={styles.title}>PezkuwiChain</Text>
+            <Text style={styles.subtitle}>Your Digital Citizenship Platform</Text>
+          </View>
+
+          {/* Language Selection Grid */}
+          <View style={styles.languagesContainer}>
+            <Text style={styles.sectionTitle}>Select Your Language</Text>
+            <View style={styles.languagesGrid}>
+              {LANGUAGES.map((lang) => (
+                <TouchableOpacity
+                  key={lang.code}
+                  style={[
+                    styles.languageCard,
+                    selectedLanguage === lang.code && styles.languageCardSelected,
+                  ]}
+                  onPress={() => setSelectedLanguage(lang.code)}
+                  activeOpacity={0.7}
+                >
+                  <Text style={styles.languageFlag}>{lang.flag}</Text>
+                  <Text style={styles.languageName}>{lang.name}</Text>
+                  {selectedLanguage === lang.code && (
+                    <View style={styles.checkmark}>
+                      <Ionicons name="checkmark-circle" size={24} color="#00A651" />
+                    </View>
+                  )}
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {/* Continue Button */}
+          <TouchableOpacity
+            style={styles.continueButton}
+            onPress={handleContinue}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.continueButtonText}>Get Started</Text>
+            <Ionicons name="arrow-forward" size={24} color="#FFF" />
+          </TouchableOpacity>
+        </View>
+      </LinearGradient>
+    </SafeAreaView>
+  );
+}
+
+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',
+  },
+});