Base design done

components/PrayerTimeCard.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, Text, StyleSheet, ImageBackground } from 'react-native';
+import Colors from '@/constants/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const prayerTimes = [
+  { name: 'Al-fajr', time: '04:48 AM', icon: 'weather-sunset-up' },
+  { name: 'Sunrise', time: '06:20 AM', icon: 'weather-sunny' },
+  { name: 'Dhohr', time: '01:06 PM', icon: 'weather-partly-cloudy' },
+  { name: 'Asr', time: '04:50 PM', icon: 'weather-cloudy' },
+  { name: 'Maghreb', time: '07:51 PM', icon: 'weather-sunset-down' },
+  { name: 'Isha', time: '09:02 PM', icon: 'weather-night' },
+];
+
+export default function PrayerTimeCard() {
+  const colorScheme = 'dark';
+
+  return (
+    <ImageBackground
+      source={{ uri: 'https://i.imgur.com/your-image.jpg' }} // Replace with a real image URL
+      style={styles.container}
+      imageStyle={{ borderRadius: 15 }}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.header}>
+          <MaterialCommunityIcons name="refresh" size={16} color={Colors.dark.text} />
+          <Text style={styles.location}>Mashhad, Iran</Text>
+        </View>
+        <Text style={styles.remainingTimeLabel}>Left on Maghreb prayer</Text>
+        <Text style={styles.remainingTime}>49:44</Text>
+        <View style={styles.prayerTimesContainer}>
+          {prayerTimes.map((prayer, index) => (
+            <View key={index} style={styles.prayerTimeItem}>
+              <MaterialCommunityIcons name={prayer.icon} size={24} color={Colors.dark.text} />
+              <Text style={styles.prayerName}>{prayer.name}</Text>
+              <Text style={styles.prayerTime}>{prayer.time}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+    </ImageBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 20,
+    borderRadius: 15,
+  },
+  overlay: {
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    borderRadius: 15,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  location: {
+    color: Colors.dark.text,
+    marginLeft: 10,
+  },
+  remainingTimeLabel: {
+    color: Colors.dark.textSecondary,
+    textAlign: 'center',
+  },
+  remainingTime: {
+    color: Colors.dark.text,
+    fontSize: 48,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginVertical: 10,
+  },
+  prayerTimesContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 20,
+  },
+  prayerTimeItem: {
+    alignItems: 'center',
+  },
+  prayerName: {
+    color: Colors.dark.text,
+    marginTop: 5,
+  },
+  prayerTime: {
+    color: Colors.dark.textSecondary,
+    fontSize: 12,
+  },
+});