Enhance app functionality and localization

- Added new dependencies: expo-file-system and expo-sharing.
- Updated package versions for @babel/core and react-dom.
- Introduced a new index screen for displaying prayer times with city selection.
- Refactored ServicesGrid to accept a dynamic services array and improved layout.
- Updated localization for new phrases and service titles in Turkmen.
- Enhanced LostKeyModal with a close button and additional text.
- Improved PhrasebookModal to allow expandable phrases for better user interaction.

components/ServicesGrid.tsx

@@ -1,34 +1,42 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import Colors from '@/constants/Colors';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { router } from 'expo-router';
 import i18n from '@/i18n';
 
-const services = [
-  { name: 'quran', icon: 'book-open-variant' },
-  { name: 'hadith', icon: 'book-open-page-variant' },
-  { name: 'dua', icon: 'human-greeting' },
-];
-
-export default function ServicesGrid() {
-  const colorScheme = 'dark';
+type ServicesGridProps = {
+  services: {
+    name: string;
+    icon: any;
+  }[];
+};
+const ServicesGrid = ({ services }: ServicesGridProps) => {
+  const handlePress = (name: string) => {
+    if (name === 'quran') {
+      
+    }
+  };
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{i18n.t('servicesToEnrich')}</Text>
       <View style={styles.grid}>
-        {services.map((service, index) => (
-          <View key={index} style={styles.serviceItem}>
-            <View style={[styles.iconContainer, { backgroundColor: Colors[colorScheme].secondary }]}>
-              <MaterialCommunityIcons name={service.icon} size={30} color={Colors[colorScheme].tint} />
+        {services.map((service) => (
+          <TouchableOpacity
+            key={service.name}
+            style={styles.serviceItem}
+            onPress={() => handlePress(service.name)}>
+            <View style={[styles.iconContainer, { backgroundColor: Colors['dark'].secondary }]}>
+              <MaterialCommunityIcons name={service.icon} size={30} color={Colors['dark'].tint} />
             </View>
             <Text style={styles.serviceName}>{i18n.t(service.name)}</Text>
-          </View>
+          </TouchableOpacity>
         ))}
       </View>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -37,8 +45,8 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: Colors.dark.text,
-    marginBottom: 15,
+    color: 'white',
+    marginBottom: 10,
   },
   grid: {
     flexDirection: 'row',
@@ -50,13 +58,15 @@ const styles = StyleSheet.create({
   iconContainer: {
     width: 60,
     height: 60,
-    borderRadius: 15,
+    borderRadius: 30,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 10,
+    marginBottom: 5,
   },
   serviceName: {
-    color: Colors.dark.text,
-    fontSize: 14,
+    color: 'white',
+    textAlign: 'center',
   },
 });
+
+export default ServicesGrid;