Refactor ServicesScreen to use a dynamic services array and improve layout

- Introduced a services array to dynamically render service cards with localized titles and icons.
- Updated layout styles for a grid display of service cards, enhancing visual organization.
- Added new localization keys for services in English, Russian, and Turkmen.

app/(tabs)/services.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, SafeAreaView, View, TouchableOpacity, Dimensions } from 'react-native';
 import { Text } from '@/components/Themed';
 import i18n from '@/i18n';
 import { FontAwesome5 } from '@expo/vector-icons';
@@ -9,18 +9,36 @@ import CurrencyConverterModal from '@/components/CurrencyConverterModal';
 export default function ServicesScreen() {
   const [modalVisible, setModalVisible] = useState(false);
 
+  const services = [
+    {
+      title: 'currencyConverter',
+      icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
+      onPress: () => setModalVisible(true),
+    },
+    {
+      title: 'hotelCard',
+      icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
+    },
+    {
+      title: 'lostKey',
+      icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
+    },
+    {
+      title: 'translator',
+      icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
+    },
+  ];
+
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>{i18n.t('services')}</Text>
 
-      <View style={styles.row}>
-        <TouchableOpacity onPress={() => setModalVisible(true)}>
-          <ServiceCard title="Real Manat hasaplama" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
-        </TouchableOpacity>
-
-        <ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
-        <ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
-        <ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
+      <View style={styles.grid}>
+        {services.map((service, index) => (
+          <TouchableOpacity key={index} style={styles.cardContainer} onPress={service.onPress}>
+            <ServiceCard title={i18n.t(service.title)} icon={service.icon} />
+          </TouchableOpacity>
+        ))}
       </View>
       <CurrencyConverterModal
         visible={modalVisible}
@@ -33,7 +51,6 @@ export default function ServicesScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 15,
   },
   title: {
     fontSize: 22,
@@ -41,11 +58,13 @@ const styles = StyleSheet.create({
     marginVertical: 15,
     marginLeft: 15,
   },
-  row: {
-    flex: 1,
-    justifyContent: 'space-around',
+  grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    rowGap: 0,
+    marginLeft: 15,
+  },
+  cardContainer: {
+    width: '50%',
+    marginBottom: 15,
   },
 });