Base design done

components/FeatureCard.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '@/constants/Colors';
+import { FontAwesome } from '@expo/vector-icons';
+
+type FeatureCardProps = {
+  title: string;
+  description: string;
+  isNew?: boolean;
+};
+
+export default function FeatureCard({ title, description, isNew = false }: FeatureCardProps) {
+  const colorScheme = 'dark'; // Assuming a dark theme
+
+  return (
+    <View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}>
+      {isNew && (
+        <View style={styles.newBadge}>
+          <Text style={styles.newText}>New Experience</Text>
+        </View>
+      )}
+      <View style={styles.content}>
+        <View>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.description}>{description}</Text>
+        </View>
+        <FontAwesome name="plus-circle" size={24} color={Colors.dark.tint} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 15,
+    padding: 15,
+    marginVertical: 10,
+  },
+  newBadge: {
+    backgroundColor: Colors.dark.tint,
+    borderRadius: 7,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    alignSelf: 'flex-start',
+    marginBottom: 10,
+  },
+  newText: {
+    color: Colors.dark.secondary,
+    fontWeight: 'bold',
+    fontSize: 12,
+  },
+  content: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: Colors.dark.text,
+  },
+  description: {
+    fontSize: 14,
+    color: Colors.dark.textSecondary,
+    marginTop: 5,
+  },
+});