Base design done

components/AdhkarCard.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '@/constants/Colors';
+
+type AdhkarCardProps = {
+  title: string;
+};
+
+export default function AdhkarCard({ title }: AdhkarCardProps) {
+  const colorScheme = 'dark';
+
+  return (
+    <View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 15,
+    padding: 20,
+    marginVertical: 10,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: Colors.dark.text,
+  },
+});

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

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

components/ServicesGrid.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '@/constants/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const services = [
+  { name: 'Qur\'an', icon: 'book-open-variant' },
+  { name: 'Hadith', icon: 'book-open-page-variant' },
+  { name: 'Du\'a', icon: 'human-greeting' },
+];
+
+export default function ServicesGrid() {
+  const colorScheme = 'dark';
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Services to Enrich Your Spiritual Experience</Text>
+      <View style={styles.grid}>
+        {services.map((service, index) => (
+          <View key={index} style={styles.serviceItem}>
+            <View style={[styles.iconContainer, { backgroundColor: Colors[colorScheme].secondary }]}>
+              <MaterialCommunityIcons name={service.icon} size={30} color={Colors[colorScheme].tint} />
+            </View>
+            <Text style={styles.serviceName}>{service.name}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: Colors.dark.text,
+    marginBottom: 15,
+  },
+  grid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  serviceItem: {
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  serviceName: {
+    color: Colors.dark.text,
+    fontSize: 14,
+  },
+});

components/SupplicationListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Colors from '@/constants/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type SupplicationListItemProps = {
+  text: string;
+  onPress: () => void;
+};
+
+export default function SupplicationListItem({ text, onPress }: SupplicationListItemProps) {
+  const colorScheme = 'dark';
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <Text style={styles.text}>{text}</Text>
+      <MaterialCommunityIcons name="chevron-right" size={24} color={Colors[colorScheme].textSecondary} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.dark.secondary,
+  },
+  text: {
+    fontSize: 16,
+    color: Colors.dark.text,
+    flex: 1,
+  },
+});