Add 'Programs' tab to TabLayout and refactor ServicesScreen to use FlatList for service cards

- Introduced a new 'Programs' tab in the TabLayout with localized title and icon.
- Refactored ServicesScreen to replace ScrollView with FlatList for improved performance and layout, displaying service cards with icons.
- Updated localization files to include new keys for services and programs.

app/(tabs)/services.tsx

@@ -1,40 +1,39 @@
-import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
-import { Text, View } from '@/components/Themed';
-import AdhkarCard from '@/components/AdhkarCard';
-import SupplicationListItem from '@/components/SupplicationListItem';
+import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { Text } from '@/components/Themed';
 import i18n from '@/i18n';
+import { FontAwesome5 } from '@expo/vector-icons';
+import ServiceCard from '@/components/ServiceCard';
 
-const adhkarCategories = [
-  'morningEveningThikr',
-  'beforeSleepingThikr',
-  'afterSalamThikr',
+const services = [
+  {
+    key: 'sarToTmt',
+    icon: <FontAwesome5 name="exchange-alt" size={24} color="#D4AF37" />,
+  },
+  {
+    key: 'hotelBusinessCard',
+    icon: <FontAwesome5 name="vcard" size={24} color="#D4AF37" />,
+  },
+  {
+    key: 'masterkeyBox',
+    icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
+  },
+  {
+    key: 'translator',
+    icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
+  },
 ];
 
-const supplications = [
-  'breakingFastSupplication',
-  'fastingPersonSupplication',
-  'insultedWhileFasting',
-  'seeingFruitSupplication',
-  'sneezingSupplication',
-]
-
 export default function ServicesScreen() {
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView>
-        <View style={styles.innerContainer}>
-          <Text style={styles.title}>{i18n.t('services')}</Text>
-          <Text style={styles.sectionTitle}>{i18n.t('adhkar')}</Text>
-          {adhkarCategories.map((titleKey, index) => (
-            <AdhkarCard key={index} title={i18n.t(titleKey)} />
-          ))}
-
-          <Text style={styles.sectionTitle}>{i18n.t('hisnAlMuslim')}</Text>
-          {supplications.map((textKey, index) => (
-            <SupplicationListItem key={index} text={i18n.t(textKey)} onPress={() => {}} />
-          ))}
-        </View>
-      </ScrollView>
+      <Text style={styles.title}>{i18n.t('services')}</Text>
+      <FlatList
+        data={services}
+        renderItem={({ item }) => <ServiceCard title={i18n.t(item.key)} icon={item.icon} />}
+        keyExtractor={(item) => item.key}
+        numColumns={2}
+        columnWrapperStyle={styles.row}
+      />
     </SafeAreaView>
   );
 }
@@ -42,8 +41,6 @@ export default function ServicesScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-  },
-  innerContainer: {
     paddingHorizontal: 15,
   },
   title: {
@@ -51,10 +48,8 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginVertical: 15,
   },
-  sectionTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#fff',
-    marginVertical: 10,
-  }
+  row: {
+    flex: 1,
+    justifyContent: 'space-around',
+  },
 });