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.

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,
+  }
 });