Refactor FeatureCard component to include image and badge text props. Update HomeScreen to display a new FeatureCard with localized title and description, removing previous cards for a cleaner layout.

app/(tabs)/home.tsx

@@ -62,24 +62,12 @@ export default function HomeScreen() {
       <ScrollView>
         <View style={styles.innerContainer}>
           <FeatureCard
-            isNew
-            title={i18n.t('yourJourneyToHajj')}
-            description={i18n.t('hajjEssentials')}
+            badgeText="07:00"
+            title="Aýşe metjidi"
+            description="Oteldan ugraýar"
+            image={require('@/assets/images/splash-icon.png')}
           />
-          <View style={styles.cardRow}>
-            <View style={{ flex: 1, marginRight: 10 }}>
-              <FeatureCard
-                title={i18n.t('umrah')}
-                description={i18n.t('bookPermit')}
-              />
-            </View>
-            <View style={{ flex: 1, marginLeft: 10 }}>
-              <FeatureCard
-                title={i18n.t('nobleRawdah')}
-                description={i18n.t('bookPermit')}
-              />
-            </View>
-          </View>
+
           <PrayerTimeCard />
           <ServicesGrid />
         </View>

components/FeatureCard.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Image, ImageSourcePropType } from 'react-native';
 import Colors from '@/constants/Colors';
-import { FontAwesome } from '@expo/vector-icons';
 import i18n from '@/i18n';
 
 type FeatureCardProps = {
   title: string;
   description: string;
-  isNew?: boolean;
+  badgeText?: string;
+  image: ImageSourcePropType;
 };
 
-export default function FeatureCard({ title, description, isNew = false }: FeatureCardProps) {
+export default function FeatureCard({ title, description, badgeText, image }: FeatureCardProps) {
   const colorScheme = 'dark'; // Assuming a dark theme
 
   return (
     <View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}>
-      {isNew && (
+      {badgeText && (
         <View style={styles.newBadge}>
-          <Text style={styles.newText}>{i18n.t('newExperience')}</Text>
+          <Text style={styles.newText}>{badgeText}</Text>
         </View>
       )}
       <View style={styles.content}>
@@ -25,7 +25,7 @@ export default function FeatureCard({ title, description, isNew = false }: Featu
           <Text style={styles.title}>{title}</Text>
           <Text style={styles.description}>{description}</Text>
         </View>
-        <FontAwesome name="plus-circle" size={24} color={Colors.dark.tint} />
+        <Image source={image} style={styles.image} resizeMode="cover" />
       </View>
     </View>
   );
@@ -65,4 +65,9 @@ const styles = StyleSheet.create({
     color: Colors.dark.textSecondary,
     marginTop: 5,
   },
+  image: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  }
 });