Add new screens with proper headers and AppsScreen MiniApps Store

- Add 13 new placeholder screens with back button headers:
  Assembly, Bank, Certificates, Events, Help, Justice,
  Music, Polls, Research, University, VPN, WhatsKURD
- Update AppNavigator with all new screen routes
- Redesign AppsScreen with MiniApps Store:
  - Search bar for app discovery
  - Horizontal scrolling categories
  - Build on Pezkuwichain section with submission form
  - Professional submission modal
  - Featured apps section
This commit is contained in:
2026-01-17 01:52:11 +03:00
parent f89fd43855
commit 6065ff5515
14 changed files with 2501 additions and 205 deletions
+84
View File
@@ -31,6 +31,18 @@ import IdentityScreen from '../screens/IdentityScreen';
import KurdMediaScreen from '../screens/KurdMediaScreen';
import PerwerdeScreen from '../screens/PerwerdeScreen';
import B2BScreen from '../screens/B2BScreen';
import BankScreen from '../screens/BankScreen';
import AssemblyScreen from '../screens/AssemblyScreen';
import JusticeScreen from '../screens/JusticeScreen';
import PollsScreen from '../screens/PollsScreen';
import WhatsKURDScreen from '../screens/WhatsKURDScreen';
import EventsScreen from '../screens/EventsScreen';
import HelpScreen from '../screens/HelpScreen';
import MusicScreen from '../screens/MusicScreen';
import VPNScreen from '../screens/VPNScreen';
import UniversityScreen from '../screens/UniversityScreen';
import CertificatesScreen from '../screens/CertificatesScreen';
import ResearchScreen from '../screens/ResearchScreen';
export type RootStackParamList = {
Welcome: undefined;
@@ -57,6 +69,18 @@ export type RootStackParamList = {
KurdMedia: undefined;
Perwerde: undefined;
B2B: undefined;
Bank: undefined;
Assembly: undefined;
Justice: undefined;
Polls: undefined;
WhatsKURD: undefined;
Events: undefined;
Help: undefined;
Music: undefined;
VPN: undefined;
University: undefined;
Certificates: undefined;
Research: undefined;
};
const Stack = createStackNavigator<RootStackParamList>();
@@ -239,6 +263,66 @@ const AppNavigator: React.FC = () => {
component={B2BScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Bank"
component={BankScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Assembly"
component={AssemblyScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Justice"
component={JusticeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Polls"
component={PollsScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="WhatsKURD"
component={WhatsKURDScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Events"
component={EventsScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Help"
component={HelpScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Music"
component={MusicScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="VPN"
component={VPNScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="University"
component={UniversityScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Certificates"
component={CertificatesScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Research"
component={ResearchScreen}
options={{ headerShown: false }}
/>
</>
)}
</Stack.Navigator>
+597 -205
View File
@@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import React, { useState } from 'react';
import {
View,
Text,
@@ -7,191 +7,340 @@ import {
ScrollView,
TouchableOpacity,
TextInput,
Image,
Modal,
Alert,
Dimensions,
FlatList,
StatusBar,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
// Import Images (Reusing existing assets)
import qaEducation from '../../../shared/images/quick-actions/qa_education.png';
import qaExchange from '../../../shared/images/quick-actions/qa_exchange.png';
import qaForum from '../../../shared/images/quick-actions/qa_forum.jpg';
import qaGovernance from '../../../shared/images/quick-actions/qa_governance.jpg';
import qaTrading from '../../../shared/images/quick-actions/qa_trading.jpg';
import qaB2B from '../../../shared/images/quick-actions/qa_b2b.png';
import qaBank from '../../../shared/images/quick-actions/qa_bank.png';
import qaKurdMedia from '../../../shared/images/quick-actions/qa_kurdmedia.jpg';
import qaUniversity from '../../../shared/images/quick-actions/qa_university.png';
const { width } = Dimensions.get('window');
const COLUMN_COUNT = 3;
const ITEM_WIDTH = (width - 48) / COLUMN_COUNT; // 48 = padding (16*2) + gaps
type CategoryType = 'All' | 'Finance' | 'Governance' | 'Social' | 'Education';
type CategoryType = 'All' | 'Finance' | 'Governance' | 'Social' | 'Education' | 'Health' | 'Entertainment' | 'Tools' | 'Gaming';
interface MiniApp {
id: string;
name: string;
icon: any;
isEmoji: boolean;
category: CategoryType;
icon: string;
developer: string;
category: Exclude<CategoryType, 'All'>;
description: string;
status: 'live' | 'coming_soon';
}
const APPS_DATA: MiniApp[] = [
// FINANCE
{ id: 'wallet', name: 'Wallet', icon: '👛', isEmoji: true, category: 'Finance', description: 'Crypto Wallet' },
{ id: 'bank', name: 'Bank', icon: qaBank, isEmoji: false, category: 'Finance', description: 'Digital Banking' },
{ id: 'exchange', name: 'Exchange', icon: qaExchange, isEmoji: false, category: 'Finance', description: 'Swap & Trade' },
{ id: 'p2p', name: 'P2P', icon: qaTrading, isEmoji: false, category: 'Finance', description: 'Peer to Peer' },
{ id: 'b2b', name: 'B2B', icon: qaB2B, isEmoji: false, category: 'Finance', description: 'Business Market' },
{ id: 'tax', name: 'Tax', icon: '📊', isEmoji: true, category: 'Finance', description: 'Tax & Zekat' },
{ id: 'launchpad', name: 'Launchpad', icon: '🚀', isEmoji: true, category: 'Finance', description: 'Startup Funding' },
{ id: 'cards', name: 'Cards', icon: '💳', isEmoji: true, category: 'Finance', description: 'Pezkuwi Cards' },
const FEATURED_APPS: MiniApp[] = [
{
id: 'pezkuwi-b2b-ai',
name: 'PezkuwiB2B AI',
icon: '🤖',
developer: 'Dijital Kurdistan Tech Inst',
category: 'Finance',
description: 'B2B marketplace specialized AI',
status: 'coming_soon',
},
{
id: 'kurd-health',
name: 'KurdHealth',
icon: '🏥',
developer: 'Health Ministry',
category: 'Health',
description: 'Digital health records & telemedicine',
status: 'coming_soon',
},
{
id: 'kurd-games',
name: 'KurdGames',
icon: '🎮',
developer: 'Dijital Kurdistan Tech Inst',
category: 'Gaming',
description: 'Play-to-earn Kurdish games',
status: 'coming_soon',
},
];
// GOVERNANCE
{ id: 'president', name: 'President', icon: '👑', isEmoji: true, category: 'Governance', description: 'Presidency Office' },
{ id: 'assembly', name: 'Assembly', icon: qaGovernance, isEmoji: false, category: 'Governance', description: 'National Assembly' },
{ id: 'vote', name: 'Vote', icon: '🗳️', isEmoji: true, category: 'Governance', description: 'Decentralized Voting' },
{ id: 'validators', name: 'Validators', icon: '🛡️', isEmoji: true, category: 'Governance', description: 'Network Security' },
{ id: 'justice', name: 'Justice', icon: '⚖️', isEmoji: true, category: 'Governance', description: 'Digital Court' },
{ id: 'proposals', name: 'Proposals', icon: '📜', isEmoji: true, category: 'Governance', description: 'Law Proposals' },
{ id: 'polls', name: 'Polls', icon: '📊', isEmoji: true, category: 'Governance', description: 'Public Surveys' },
{ id: 'identity', name: 'Identity', icon: '🆔', isEmoji: true, category: 'Governance', description: 'Digital ID' },
// SOCIAL
{ id: 'whatskurd', name: 'whatsKURD', icon: '💬', isEmoji: true, category: 'Social', description: 'Messenger' },
{ id: 'forum', name: 'Forum', icon: qaForum, isEmoji: false, category: 'Social', description: 'Community Talk' },
{ id: 'kurdmedia', name: 'KurdMedia', icon: qaKurdMedia, isEmoji: false, category: 'Social', description: 'News & Media' },
{ id: 'events', name: 'Events', icon: '🎭', isEmoji: true, category: 'Social', description: 'Çalakî' },
{ id: 'help', name: 'Help', icon: '🤝', isEmoji: true, category: 'Social', description: 'Harîkarî' },
{ id: 'music', name: 'Music', icon: '🎵', isEmoji: true, category: 'Social', description: 'Kurdish Stream' },
{ id: 'vpn', name: 'VPN', icon: '🛡️', isEmoji: true, category: 'Social', description: 'Secure Net' },
{ id: 'referral', name: 'Referral', icon: '👥', isEmoji: true, category: 'Social', description: 'Invite Friends' },
// EDUCATION
{ id: 'university', name: 'University', icon: qaUniversity, isEmoji: false, category: 'Education', description: 'Higher Ed' },
{ id: 'perwerde', name: 'Perwerde', icon: qaEducation, isEmoji: false, category: 'Education', description: 'Academy' },
{ id: 'library', name: 'Library', icon: '📚', isEmoji: true, category: 'Education', description: 'Pirtûkxane' },
{ id: 'language', name: 'Language', icon: '🗣️', isEmoji: true, category: 'Education', description: 'Ziman / Learn' },
{ id: 'kids', name: 'Kids', icon: '🧸', isEmoji: true, category: 'Education', description: 'Zarok TV' },
{ id: 'certificates', name: 'Certificates', icon: '🏆', isEmoji: true, category: 'Education', description: 'NFT Diplomas' },
{ id: 'research', name: 'Research', icon: '🔬', isEmoji: true, category: 'Education', description: 'Scientific Data' },
{ id: 'history', name: 'History', icon: '🏺', isEmoji: true, category: 'Education', description: 'Kurdish History' },
const CATEGORIES: { name: CategoryType; icon: string }[] = [
{ name: 'All', icon: '📱' },
{ name: 'Finance', icon: '💰' },
{ name: 'Governance', icon: '🏛️' },
{ name: 'Social', icon: '💬' },
{ name: 'Education', icon: '📚' },
{ name: 'Health', icon: '🏥' },
{ name: 'Entertainment', icon: '🎬' },
{ name: 'Tools', icon: '🛠️' },
{ name: 'Gaming', icon: '🎮' },
];
const AppsScreen: React.FC = () => {
const navigation = useNavigation<any>();
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<CategoryType>('All');
const [showSubmitModal, setShowSubmitModal] = useState(false);
const [appName, setAppName] = useState('');
const [appDescription, setAppDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactName, setContactName] = useState('');
const filteredApps = useMemo(() => {
return APPS_DATA.filter(app => {
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = selectedCategory === 'All' || app.category === selectedCategory;
return matchesSearch && matchesCategory;
});
}, [searchQuery, selectedCategory]);
const filteredApps = FEATURED_APPS.filter(app => {
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
app.description.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = selectedCategory === 'All' || app.category === selectedCategory;
return matchesSearch && matchesCategory;
});
const handleConnectWallet = () => {
navigation.navigate('Wallet');
};
const handleSubmitApp = () => {
if (!appName.trim() || !appDescription.trim() || !contactEmail.trim() || !contactName.trim()) {
Alert.alert('Missing Information', 'Please fill in all fields to submit your mini app.');
return;
}
setShowSubmitModal(false);
setAppName('');
setAppDescription('');
setContactEmail('');
setContactName('');
const handleAppPress = (appName: string) => {
Alert.alert(
'Di bin çêkirinê de ye / Under Maintenance',
`The "${appName}" mini-app is currently under development. Please check back later.\n\nSpas ji bo sebra we.`,
[{ text: 'Temam (OK)' }]
'Application Submitted ✅',
'Dijital Kurdistan Tech Inst officials will contact you as soon as possible.\n\nSpas bo xebata te!',
[{ text: 'Temam' }]
);
};
const renderCategoryChip = (category: CategoryType) => (
const renderMiniAppCard = (app: MiniApp) => (
<TouchableOpacity
key={category}
style={[
styles.categoryChip,
selectedCategory === category && styles.categoryChipActive
]}
onPress={() => setSelectedCategory(category)}
>
<Text style={[
styles.categoryText,
selectedCategory === category && styles.categoryTextActive
]}>
{category}
</Text>
</TouchableOpacity>
);
const renderAppItem = ({ item }: { item: MiniApp }) => (
<TouchableOpacity
style={styles.appCard}
onPress={() => handleAppPress(item.name)}
key={app.id}
style={styles.miniAppCard}
activeOpacity={0.7}
onPress={() => Alert.alert(app.name, `${app.description}\n\nby ${app.developer}\n\nStatus: Coming Soon`)}
>
<View style={styles.iconContainer}>
{item.isEmoji ? (
<Text style={styles.emojiIcon}>{item.icon}</Text>
) : (
<Image source={item.icon} style={styles.imageIcon} resizeMode="cover" />
)}
<View style={styles.miniAppIconContainer}>
<Text style={styles.miniAppIcon}>{app.icon}</Text>
</View>
<View style={styles.miniAppInfo}>
<View style={styles.miniAppHeader}>
<Text style={styles.miniAppName}>{app.name}</Text>
{app.status === 'coming_soon' && (
<View style={styles.comingSoonBadge}>
<Text style={styles.comingSoonText}>Coming Soon</Text>
</View>
)}
</View>
<Text style={styles.miniAppDescription}>{app.description}</Text>
<Text style={styles.miniAppDeveloper}>by {app.developer}</Text>
</View>
<Text style={styles.appName} numberOfLines={1}>{item.name}</Text>
<Text style={styles.appDesc} numberOfLines={1}>{item.description}</Text>
</TouchableOpacity>
);
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#F5F5F5" />
<View style={styles.header}>
<Text style={styles.headerTitle}>Apps Store</Text>
<Text style={styles.headerSubtitle}>Discover Pezkuwi Ecosystem</Text>
</View>
{/* Search Bar */}
<View style={styles.searchContainer}>
<View style={styles.searchBar}>
<Text style={styles.searchIcon}>🔍</Text>
<TextInput
style={styles.searchInput}
placeholder="Search apps..."
value={searchQuery}
onChangeText={setSearchQuery}
placeholderTextColor="#999"
/>
{searchQuery.length > 0 && (
<TouchableOpacity onPress={() => setSearchQuery('')}>
<Text style={styles.clearIcon}></Text>
<ScrollView showsVerticalScrollIndicator={false}>
{/* Header */}
<View style={styles.header}>
<View style={styles.headerTop}>
<View>
<Text style={styles.headerTitle}>MiniApps Store</Text>
<Text style={styles.headerSubtitle}>Discover & Build on Pezkuwichain</Text>
</View>
<TouchableOpacity style={styles.connectButton} onPress={handleConnectWallet}>
<Text style={styles.connectButtonText}>Connect</Text>
</TouchableOpacity>
</View>
</View>
{/* Search Bar */}
<View style={styles.searchContainer}>
<View style={styles.searchBar}>
<Text style={styles.searchIcon}>🔍</Text>
<TextInput
style={styles.searchInput}
placeholder="Search mini apps..."
value={searchQuery}
onChangeText={setSearchQuery}
placeholderTextColor="#999"
/>
{searchQuery.length > 0 && (
<TouchableOpacity onPress={() => setSearchQuery('')}>
<Text style={styles.clearIcon}></Text>
</TouchableOpacity>
)}
</View>
</View>
{/* Categories - Horizontal Scroll */}
<View style={styles.categoriesContainer}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.categoriesContent}
>
{CATEGORIES.map((cat) => (
<TouchableOpacity
key={cat.name}
style={[
styles.categoryChip,
selectedCategory === cat.name && styles.categoryChipActive
]}
onPress={() => setSelectedCategory(cat.name)}
>
<Text style={styles.categoryEmoji}>{cat.icon}</Text>
<Text style={[
styles.categoryText,
selectedCategory === cat.name && styles.categoryTextActive
]}>
{cat.name}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
{/* Build on Pezkuwichain Section */}
<View style={styles.buildSection}>
<View style={styles.buildContent}>
<View style={styles.buildTextContainer}>
<Text style={styles.buildTitle}>Build on Pezkuwichain</Text>
<Text style={styles.buildSubtitle}>Submit your mini app to the ecosystem</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => setShowSubmitModal(true)}
activeOpacity={0.8}
>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
</View>
{/* Featured Apps */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>
{selectedCategory === 'All' ? 'Featured Mini Apps' : `${selectedCategory} Apps`}
</Text>
{filteredApps.length > 0 ? (
filteredApps.map(renderMiniAppCard)
) : (
<View style={styles.emptyState}>
<Text style={styles.emptyIcon}>🔍</Text>
<Text style={styles.emptyText}>No apps found in this category yet</Text>
<Text style={styles.emptySubtext}>Be the first to submit one!</Text>
</View>
)}
</View>
</View>
{/* Category Filter */}
<View style={styles.categoriesContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.categoriesContent}>
{['All', 'Finance', 'Governance', 'Social', 'Education'].map((cat) =>
renderCategoryChip(cat as CategoryType)
)}
</ScrollView>
</View>
{/* Footer Note */}
<View style={styles.footerNote}>
<Text style={styles.footerIcon}>💡</Text>
<Text style={styles.footerText}>
Access all other apps from Home screen
</Text>
</View>
</ScrollView>
{/* Apps Grid */}
<FlatList
data={filteredApps}
renderItem={renderAppItem}
keyExtractor={item => item.id}
numColumns={COLUMN_COUNT}
contentContainerStyle={styles.listContent}
columnWrapperStyle={styles.columnWrapper}
showsVerticalScrollIndicator={false}
ListEmptyComponent={
<View style={styles.emptyContainer}>
<Text style={styles.emptyText}>No apps found matching "{searchQuery}"</Text>
{/* Submit App Modal */}
<Modal
visible={showSubmitModal}
animationType="slide"
transparent={true}
onRequestClose={() => setShowSubmitModal(false)}
>
<View style={styles.modalOverlay}>
<View style={styles.modalContent}>
<View style={styles.modalHeader}>
<View>
<Text style={styles.modalTitle}>Submit Your Mini App</Text>
<Text style={styles.modalSubtitle}>Join the Pezkuwichain ecosystem</Text>
</View>
<TouchableOpacity
style={styles.modalCloseButton}
onPress={() => setShowSubmitModal(false)}
>
<Text style={styles.modalClose}></Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.modalBody} showsVerticalScrollIndicator={false}>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>App Name *</Text>
<TextInput
style={styles.input}
placeholder="e.g., KurdPay"
value={appName}
onChangeText={setAppName}
placeholderTextColor="#999"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>Description *</Text>
<TextInput
style={[styles.input, styles.textArea]}
placeholder="Briefly describe what your app does and its value to the community..."
value={appDescription}
onChangeText={setAppDescription}
multiline
numberOfLines={4}
placeholderTextColor="#999"
textAlignVertical="top"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>Your Name *</Text>
<TextInput
style={styles.input}
placeholder="Full name or organization"
value={contactName}
onChangeText={setContactName}
placeholderTextColor="#999"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>Contact Email *</Text>
<TextInput
style={styles.input}
placeholder="your@email.com"
value={contactEmail}
onChangeText={setContactEmail}
keyboardType="email-address"
autoCapitalize="none"
placeholderTextColor="#999"
/>
</View>
<View style={styles.infoBox}>
<Text style={styles.infoIcon}>📧</Text>
<View style={styles.infoTextContainer}>
<Text style={styles.infoTitle}>Review Process</Text>
<Text style={styles.infoText}>
Your submission will be reviewed by Dijital Kurdistan Tech Inst. We'll contact you within 5-7 business days.
</Text>
</View>
</View>
</ScrollView>
<View style={styles.modalFooter}>
<TouchableOpacity
style={styles.cancelButton}
onPress={() => setShowSubmitModal(false)}
>
<Text style={styles.cancelButtonText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}
onPress={handleSubmitApp}
>
<Text style={styles.submitButtonText}>Submit Application</Text>
</TouchableOpacity>
</View>
</View>
}
/>
</View>
</Modal>
</SafeAreaView>
);
};
@@ -200,132 +349,375 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom: 10,
paddingTop: 16,
paddingBottom: 12,
},
headerTop: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
},
headerTitle: {
fontSize: 28,
fontSize: 26,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
headerSubtitle: {
fontSize: 14,
fontSize: 13,
color: '#666',
marginTop: 4,
marginTop: 2,
},
connectButton: {
backgroundColor: KurdistanColors.kesk,
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
},
connectButtonText: {
color: KurdistanColors.spi,
fontSize: 13,
fontWeight: '600',
},
searchContainer: {
paddingHorizontal: 20,
marginBottom: 16,
marginBottom: 12,
},
searchBar: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: KurdistanColors.spi,
borderRadius: 12,
paddingHorizontal: 12,
height: 48,
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)',
paddingHorizontal: 14,
height: 46,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 2,
},
searchIcon: {
fontSize: 18,
marginRight: 8,
fontSize: 16,
marginRight: 10,
opacity: 0.5,
},
searchInput: {
flex: 1,
fontSize: 16,
fontSize: 15,
color: '#333',
height: '100%',
},
clearIcon: {
fontSize: 16,
fontSize: 14,
color: '#999',
padding: 4,
},
categoriesContainer: {
marginBottom: 10,
marginBottom: 16,
},
categoriesContent: {
paddingHorizontal: 20,
gap: 8,
},
categoryChip: {
paddingHorizontal: 16,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 14,
paddingVertical: 8,
borderRadius: 20,
backgroundColor: '#E0E0E0',
backgroundColor: KurdistanColors.spi,
marginRight: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
categoryChipActive: {
backgroundColor: KurdistanColors.kesk,
},
categoryText: {
categoryEmoji: {
fontSize: 14,
marginRight: 6,
},
categoryText: {
fontSize: 13,
fontWeight: '600',
color: '#555',
},
categoryTextActive: {
color: KurdistanColors.spi,
},
listContent: {
paddingHorizontal: 16,
paddingBottom: 40,
paddingTop: 8,
},
columnWrapper: {
justifyContent: 'flex-start',
gap: 8,
},
appCard: {
width: ITEM_WIDTH,
backgroundColor: KurdistanColors.spi,
buildSection: {
marginHorizontal: 20,
marginBottom: 20,
backgroundColor: KurdistanColors.kesk,
borderRadius: 16,
padding: 12,
marginBottom: 12,
alignItems: 'center',
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)',
elevation: 2,
padding: 18,
shadowColor: KurdistanColors.kesk,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 5,
},
iconContainer: {
width: 48,
height: 48,
borderRadius: 12,
backgroundColor: '#F8F9FA',
buildContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
buildTextContainer: {
flex: 1,
},
buildTitle: {
fontSize: 17,
fontWeight: 'bold',
color: KurdistanColors.spi,
marginBottom: 3,
},
buildSubtitle: {
fontSize: 12,
color: 'rgba(255,255,255,0.85)',
},
addButton: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: KurdistanColors.spi,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 8,
marginLeft: 12,
},
imageIcon: {
width: 32,
height: 32,
borderRadius: 8,
addButtonText: {
fontSize: 26,
fontWeight: '600',
color: KurdistanColors.kesk,
marginTop: -2,
},
emojiIcon: {
fontSize: 24,
section: {
paddingHorizontal: 20,
marginBottom: 16,
},
appName: {
fontSize: 13,
fontWeight: '700',
color: '#333',
marginBottom: 2,
textAlign: 'center',
sectionTitle: {
fontSize: 17,
fontWeight: 'bold',
color: KurdistanColors.reş,
marginBottom: 12,
},
appDesc: {
fontSize: 10,
color: '#888',
textAlign: 'center',
miniAppCard: {
flexDirection: 'row',
backgroundColor: KurdistanColors.spi,
borderRadius: 14,
padding: 14,
marginBottom: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 2,
},
emptyContainer: {
padding: 40,
miniAppIconContainer: {
width: 52,
height: 52,
borderRadius: 13,
backgroundColor: '#F0F8F0',
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
},
miniAppIcon: {
fontSize: 26,
},
miniAppInfo: {
flex: 1,
justifyContent: 'center',
},
miniAppHeader: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 3,
},
miniAppName: {
fontSize: 15,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
comingSoonBadge: {
backgroundColor: KurdistanColors.zer,
paddingHorizontal: 7,
paddingVertical: 2,
borderRadius: 6,
marginLeft: 8,
},
comingSoonText: {
fontSize: 9,
fontWeight: '600',
color: KurdistanColors.reş,
},
miniAppDescription: {
fontSize: 12,
color: '#666',
marginBottom: 2,
},
miniAppDeveloper: {
fontSize: 10,
color: '#999',
},
emptyState: {
alignItems: 'center',
paddingVertical: 32,
backgroundColor: KurdistanColors.spi,
borderRadius: 14,
},
emptyIcon: {
fontSize: 40,
marginBottom: 12,
opacity: 0.5,
},
emptyText: {
fontSize: 14,
color: '#666',
marginBottom: 4,
},
emptySubtext: {
fontSize: 12,
color: '#999',
fontSize: 16,
},
footerNote: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 16,
marginBottom: 16,
},
footerIcon: {
fontSize: 14,
marginRight: 6,
},
footerText: {
fontSize: 12,
color: '#888',
},
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.5)',
justifyContent: 'flex-end',
},
modalContent: {
backgroundColor: KurdistanColors.spi,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
maxHeight: '90%',
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#F0F0F0',
},
modalTitle: {
fontSize: 20,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
modalSubtitle: {
fontSize: 13,
color: '#666',
marginTop: 2,
},
modalCloseButton: {
padding: 4,
},
modalClose: {
fontSize: 20,
color: '#999',
},
modalBody: {
padding: 20,
maxHeight: 400,
},
inputGroup: {
marginBottom: 16,
},
inputLabel: {
fontSize: 13,
fontWeight: '600',
color: KurdistanColors.reş,
marginBottom: 6,
},
input: {
backgroundColor: '#F5F5F5',
borderRadius: 10,
padding: 12,
fontSize: 14,
color: KurdistanColors.reş,
borderWidth: 1,
borderColor: '#E8E8E8',
},
textArea: {
height: 90,
paddingTop: 12,
},
infoBox: {
flexDirection: 'row',
backgroundColor: '#F0F8F0',
borderRadius: 12,
padding: 14,
marginTop: 8,
},
infoIcon: {
fontSize: 20,
marginRight: 12,
},
infoTextContainer: {
flex: 1,
},
infoTitle: {
fontSize: 13,
fontWeight: '600',
color: KurdistanColors.kesk,
marginBottom: 4,
},
infoText: {
fontSize: 12,
color: '#666',
lineHeight: 18,
},
modalFooter: {
flexDirection: 'row',
padding: 20,
paddingTop: 12,
borderTopWidth: 1,
borderTopColor: '#F0F0F0',
gap: 12,
},
cancelButton: {
flex: 1,
padding: 14,
borderRadius: 12,
backgroundColor: '#F0F0F0',
alignItems: 'center',
},
cancelButtonText: {
fontSize: 15,
fontWeight: '600',
color: '#666',
},
submitButton: {
flex: 2,
padding: 14,
borderRadius: 12,
backgroundColor: KurdistanColors.kesk,
alignItems: 'center',
},
submitButtonText: {
fontSize: 15,
fontWeight: '600',
color: KurdistanColors.spi,
},
});
export default AppsScreen;
export default AppsScreen;
+151
View File
@@ -0,0 +1,151 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const AssemblyScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Assembly</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🏛</Text>
<Text style={styles.title}>Di bin çêkirinê de ye</Text>
<Text style={styles.titleEn}>Under Maintenance</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Ev taybetmendî niha di bin çêkirinê de ye. Ji kerema xwe paşê vegerin.
</Text>
<Text style={styles.messageEn}>
This feature is currently under maintenance. Please check back later.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Digital Kurdistan Parliament</Text>
<Text style={styles.featureItem}> Legislative proposals</Text>
<Text style={styles.featureItem}> Assembly voting sessions</Text>
<Text style={styles.featureItem}> Public deliberations</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default AssemblyScreen;
+151
View File
@@ -0,0 +1,151 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const BankScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Bank</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🏦</Text>
<Text style={styles.title}>Li benda damezrandinê</Text>
<Text style={styles.titleEn}>Awaiting Establishment</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Duaye helbejartina hukumeta Komara Dijitaliya Kurdistanê yên beta damezrandin.
</Text>
<Text style={styles.messageEn}>
Awaiting the beta elections and establishment of the Digital Kurdistan Republic government.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Digital savings accounts</Text>
<Text style={styles.featureItem}> Decentralized lending</Text>
<Text style={styles.featureItem}> Community treasury</Text>
<Text style={styles.featureItem}> Cross-border payments</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default BankScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const CertificatesScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Certificates</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🏆</Text>
<Text style={styles.title}>Li benda Wezareta Perwerdê</Text>
<Text style={styles.titleEn}>Awaiting Ministry of Education</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Duaye damezrandina Wezareta Perwerdê yên aktîv bibin.
</Text>
<Text style={styles.messageEn}>
Awaiting the establishment of an active Ministry of Education.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Blockchain-verified certificates</Text>
<Text style={styles.featureItem}> Professional credentials</Text>
<Text style={styles.featureItem}> Course completion badges</Text>
<Text style={styles.featureItem}> Skill verification NFTs</Text>
<Text style={styles.featureItem}> Employment verification</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default CertificatesScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const EventsScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Events</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🎭</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>Çalakî / Events</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Çalakî / Events will be available soon!
</Text>
<Text style={styles.messageEn}>
Discover and participate in Kurdish community events.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Cultural events calendar</Text>
<Text style={styles.featureItem}> NFT-based event tickets</Text>
<Text style={styles.featureItem}> Virtual gatherings</Text>
<Text style={styles.featureItem}> Community meetups</Text>
<Text style={styles.featureItem}> Newroz celebrations</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default EventsScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const HelpScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Help</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🤝</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>Harîkarî / Help</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Harîkarî / Help will be available soon!
</Text>
<Text style={styles.messageEn}>
Community support and mutual aid platform.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Community support requests</Text>
<Text style={styles.featureItem}> Mutual aid coordination</Text>
<Text style={styles.featureItem}> Emergency assistance</Text>
<Text style={styles.featureItem}> Resource sharing</Text>
<Text style={styles.featureItem}> Volunteer matching</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default HelpScreen;
+151
View File
@@ -0,0 +1,151 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const JusticeScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Justice</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}></Text>
<Text style={styles.title}>Li benda hilbijartinên çalak</Text>
<Text style={styles.titleEn}>Awaiting Active Elections</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Duaye hilbijartinên Serokî yên çalak bibin.
</Text>
<Text style={styles.messageEn}>
Awaiting active Presidential elections to be initiated.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Decentralized dispute resolution</Text>
<Text style={styles.featureItem}> Community arbitration</Text>
<Text style={styles.featureItem}> Smart contract enforcement</Text>
<Text style={styles.featureItem}> Transparent judicial records</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default JusticeScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const MusicScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Music</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🎵</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>Music Stream</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Music Stream will be available soon!
</Text>
<Text style={styles.messageEn}>
Decentralized Kurdish music streaming platform.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Kurdish music library</Text>
<Text style={styles.featureItem}> Artist direct support via HEZ</Text>
<Text style={styles.featureItem}> Playlist creation</Text>
<Text style={styles.featureItem}> Music NFTs</Text>
<Text style={styles.featureItem}> Live streaming concerts</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default MusicScreen;
+151
View File
@@ -0,0 +1,151 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const PollsScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Polls</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>📊</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>Public Polls</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Public Polls will be available soon!
</Text>
<Text style={styles.messageEn}>
Rapirsiyên giştî tên!
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Community opinion polls</Text>
<Text style={styles.featureItem}> Anonymous voting options</Text>
<Text style={styles.featureItem}> Real-time results</Text>
<Text style={styles.featureItem}> Weighted voting by Tiki</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default PollsScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const ResearchScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>Research</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🔬</Text>
<Text style={styles.title}>Li benda Wezareta Perwerdê</Text>
<Text style={styles.titleEn}>Awaiting Ministry of Education</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Duaye damezrandina Wezareta Perwerdê yên aktîv bibin.
</Text>
<Text style={styles.messageEn}>
Awaiting the establishment of an active Ministry of Education.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Kurdish research database</Text>
<Text style={styles.featureItem}> Academic paper repository</Text>
<Text style={styles.featureItem}> Research funding via DAO</Text>
<Text style={styles.featureItem}> Collaboration tools</Text>
<Text style={styles.featureItem}> Open access publications</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default ResearchScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const UniversityScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>University</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🎓</Text>
<Text style={styles.title}>Li benda Wezareta Perwerdê</Text>
<Text style={styles.titleEn}>Awaiting Ministry of Education</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Duaye damezrandina Wezareta Perwerdê yên aktîv bibin.
</Text>
<Text style={styles.messageEn}>
Awaiting the establishment of an active Ministry of Education.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Digital Kurdistan University</Text>
<Text style={styles.featureItem}> Accredited online courses</Text>
<Text style={styles.featureItem}> Blockchain-verified degrees</Text>
<Text style={styles.featureItem}> Kurdish language curriculum</Text>
<Text style={styles.featureItem}> Scholarship programs</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default UniversityScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const VPNScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>VPN</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>🛡</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>Decentralized VPN</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
Decentralized VPN will be available soon!
</Text>
<Text style={styles.messageEn}>
Privacy-first, community-powered VPN network.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> Decentralized relay network</Text>
<Text style={styles.featureItem}> Pay-per-use with HEZ tokens</Text>
<Text style={styles.featureItem}> No-logs policy guaranteed</Text>
<Text style={styles.featureItem}> Community node operators</Text>
<Text style={styles.featureItem}> Bypass censorship</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default VPNScreen;
+152
View File
@@ -0,0 +1,152 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
TouchableOpacity,
Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
const WhatsKURDScreen: React.FC = () => {
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Text style={styles.backButtonText}> Back</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>whatsKURD</Text>
<View style={styles.placeholder} />
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.icon}>💬</Text>
<Text style={styles.title}>Coming Soon</Text>
<Text style={styles.titleEn}>whatsKURD</Text>
<View style={styles.messageBox}>
<Text style={styles.message}>
whatsKURD will be available soon!
</Text>
<Text style={styles.messageEn}>
Decentralized messaging for the Kurdish community.
</Text>
</View>
<View style={styles.featureList}>
<Text style={styles.featureTitle}>Planned Features:</Text>
<Text style={styles.featureItem}> End-to-end encrypted messaging</Text>
<Text style={styles.featureItem}> Decentralized infrastructure</Text>
<Text style={styles.featureItem}> Group chats and channels</Text>
<Text style={styles.featureItem}> Voice and video calls</Text>
<Text style={styles.featureItem}> Kurdish language support</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
paddingVertical: 4,
paddingRight: 8,
},
backButtonText: {
fontSize: 16,
color: KurdistanColors.kesk,
fontWeight: '500',
},
headerTitle: {
fontSize: 18,
fontWeight: 'bold',
color: KurdistanColors.reş,
},
placeholder: {
width: 60,
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 32,
},
icon: {
fontSize: 80,
marginBottom: 24,
},
title: {
fontSize: 22,
fontWeight: 'bold',
color: KurdistanColors.reş,
textAlign: 'center',
marginBottom: 4,
},
titleEn: {
fontSize: 18,
color: '#666',
textAlign: 'center',
marginBottom: 24,
},
messageBox: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 24,
width: '100%',
},
message: {
fontSize: 15,
color: '#444',
textAlign: 'center',
lineHeight: 24,
marginBottom: 12,
},
messageEn: {
fontSize: 14,
color: '#888',
textAlign: 'center',
lineHeight: 22,
},
featureList: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
width: '100%',
},
featureTitle: {
fontSize: 16,
fontWeight: 'bold',
color: KurdistanColors.kesk,
marginBottom: 12,
},
featureItem: {
fontSize: 14,
color: '#555',
marginBottom: 8,
lineHeight: 20,
},
});
export default WhatsKURDScreen;