Add HotelBusinessCardModal and LostKeyModal to ServicesScreen; update localization for 'Lost room key'

components/HotelBusinessCardModal.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Modal, View, Image, StyleSheet, TouchableOpacity, Dimensions, SafeAreaView } from 'react-native';
+import { FontAwesome5 } from '@expo/vector-icons';
+
+const { width, height } = Dimensions.get('window');
+
+interface HotelBusinessCardModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const HotelBusinessCardModal: React.FC<HotelBusinessCardModalProps> = ({ visible, onClose }) => {
+  return (
+    <Modal
+      animationType="slide"
+      transparent={false}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <SafeAreaView style={styles.container}>
+        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+          <FontAwesome5 name="times" size={30} color="#333" />
+        </TouchableOpacity>
+        <View style={styles.cardsContainer}>
+          <View style={styles.card}>
+            <Image source={require('@/assets/images/aisha.jpg')} style={styles.image} />
+          </View>
+          <View style={styles.card}>
+            <Image source={require('@/assets/images/aisha.jpg')} style={styles.image} />
+          </View>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    zIndex: 1,
+  },
+  cardsContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+  },
+  card: {
+    backgroundColor: '#e3e3e3',
+    borderRadius: 10,
+    padding: 10,
+    marginVertical: 15,
+    width: width * 0.8,
+    height: height * 0.3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+});
+
+export default HotelBusinessCardModal;

components/LostKeyModal.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Modal, View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+interface LostKeyModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const LostKeyModal: React.FC<LostKeyModalProps> = ({ visible, onClose }) => {
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onClose}>
+        <View style={styles.modalContainer}>
+          <Text style={styles.text}>Mastercard</Text>
+          <Text style={[styles.text, styles.arabicText]}>ماستركارد</Text>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    width: width * 0.6,
+    padding: 20,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  text: {
+    fontSize: 40,
+    marginBottom: 10,
+  },
+  arabicText: {
+    fontFamily: 'System',
+    writingDirection: 'rtl',
+  }
+});
+
+export default LostKeyModal;