auto-commit for 674ce5d5-304b-42bb-8821-dcb58206a500

frontend/App.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LanguageScreen from './src/screens/LanguageScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <StatusBar style="dark" />
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Language" component={LanguageScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

frontend/src/screens/LanguageScreen.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  ScrollView,
+  Image,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+const LANGUAGES = [
+  { code: 'en', name: 'English', nativeName: 'English' },
+  { code: 'ku', name: 'Kurdish (Kurmanji)', nativeName: 'Kurdî (Kurmancî)' },
+  { code: 'ckb', name: 'Kurdish (Sorani)', nativeName: 'کوردی (سۆرانی)' },
+  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
+  { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
+  { code: 'fa', name: 'Persian', nativeName: 'فارسی' },
+];
+
+export default function LanguageScreen({ navigation }: any) {
+  const [selected, setSelected] = useState('en');
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.logoContainer}>
+          <View style={styles.sunLogo}>
+            <Text style={styles.sunEmoji}>☀️</Text>
+          </View>
+        </View>
+        <Text style={styles.title}>PezkuwiChain</Text>
+        <Text style={styles.subtitle}>Digital Citizenship Platform</Text>
+      </View>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        <Text style={styles.instruction}>Select Your Language</Text>
+        
+        {LANGUAGES.map((lang) => (
+          <TouchableOpacity
+            key={lang.code}
+            style={[
+              styles.languageCard,
+              selected === lang.code && styles.languageCardSelected,
+            ]}
+            onPress={() => setSelected(lang.code)}
+            activeOpacity={0.7}
+          >
+            <View>
+              <Text style={styles.languageName}>{lang.name}</Text>
+              <Text style={styles.languageNative}>{lang.nativeName}</Text>
+            </View>
+            {selected === lang.code && (
+              <Ionicons name="checkmark-circle" size={24} color="#00A651" />
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={styles.continueButton}
+          onPress={() => alert('Selected: ' + selected)}
+        >
+          <Text style={styles.continueText}>Continue</Text>
+          <Ionicons name="arrow-forward" size={20} color="#FFF" />
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA',
+  },
+  header: {
+    alignItems: 'center',
+    paddingTop: 40,
+    paddingBottom: 30,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  logoContainer: {
+    marginBottom: 20,
+  },
+  sunLogo: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#FFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  sunEmoji: {
+    fontSize: 50,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#1F2937',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  instruction: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 20,
+  },
+  languageCard: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 2,
+    borderColor: '#FFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  languageCardSelected: {
+    borderColor: '#00A651',
+    backgroundColor: '#F0FDF4',
+  },
+  languageName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 2,
+  },
+  languageNative: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  footer: {
+    padding: 20,
+    backgroundColor: '#FFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  continueButton: {
+    backgroundColor: '#EE2A35',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    borderRadius: 12,
+    gap: 8,
+  },
+  continueText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFF',
+  },
+});