Base design done

app/(tabs)/_layout.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { Link, Tabs } from 'expo-router';
-import { Pressable } from 'react-native';
+import { Tabs } from 'expo-router';
+import { useColorScheme } from 'react-native';
 
 import Colors from '@/constants/Colors';
-import { useColorScheme } from '@/components/useColorScheme';
-import { useClientOnlyValue } from '@/components/useClientOnlyValue';
 
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+/**
+ * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+ */
 function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
@@ -16,42 +15,30 @@ function TabBarIcon(props: {
 }
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = 'dark'; // Force dark mode
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        // Disable the static render of the header on web
-        // to prevent a hydration error in React Navigation v6.
-        headerShown: useClientOnlyValue(false, true),
+        tabBarActiveTintColor: Colors[colorScheme].tint,
+        tabBarStyle: {
+          backgroundColor: Colors[colorScheme].secondary,
+          borderTopColor: Colors[colorScheme].secondary,
+        },
+        headerShown: false, // Hide header globally for tabs
       }}>
       <Tabs.Screen
-        name="index"
+        name="home"
         options={{
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <Pressable>
-                {({ pressed }) => (
-                  <FontAwesome
-                    name="info-circle"
-                    size={25}
-                    color={Colors[colorScheme ?? 'light'].text}
-                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
-                  />
-                )}
-              </Pressable>
-            </Link>
-          ),
+          title: 'Home',
+          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
         }}
       />
       <Tabs.Screen
-        name="two"
+        name="services"
         options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Services',
+          tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
         }}
       />
     </Tabs>

app/(tabs)/home.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import { Text, View } from '@/components/Themed';
+import FeatureCard from '@/components/FeatureCard';
+import PrayerTimeCard from '@/components/PrayerTimeCard';
+import ServicesGrid from '@/components/ServicesGrid';
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        <View style={styles.innerContainer}>
+          <Text style={styles.title}>Home</Text>
+          <FeatureCard
+            isNew
+            title="Your Journey to Hajj"
+            description="Everything you need for Hajj essentials."
+          />
+          <View style={styles.cardRow}>
+            <View style={{ flex: 1, marginRight: 10 }}>
+              <FeatureCard
+                title="Umrah"
+                description="Book Permit"
+              />
+            </View>
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <FeatureCard
+                title="Noble Rawdah"
+                description="Book Permit"
+              />
+            </View>
+          </View>
+          <PrayerTimeCard />
+          <ServicesGrid />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  innerContainer: {
+    paddingHorizontal: 15,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginVertical: 15,
+  },
+  cardRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});

app/(tabs)/index.tsx

@@ -1,31 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { Redirect } from 'expo-router';
 
-import EditScreenInfo from '@/components/EditScreenInfo';
-import { Text, View } from '@/components/Themed';
-
-export default function TabOneScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab One</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="app/(tabs)/index.tsx" />
-    </View>
-  );
+export default function TabIndex() {
+  return <Redirect href="/(tabs)/home" />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

app/(tabs)/services.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import { Text, View } from '@/components/Themed';
+import AdhkarCard from '@/components/AdhkarCard';
+import SupplicationListItem from '@/components/SupplicationListItem';
+
+const adhkarCategories = [
+  'Thikr said in the morning and evening',
+  'Thikr before sleeping',
+  'Thikr after salam',
+];
+
+const supplications = [
+  'Upon breaking fast',
+  'Supplication said by one fasting when presented with food and does not break his fast',
+  'When insulted while fasting',
+  'Supplication upon seeing the early or premature fruit',
+  'Supplication upon sneezing',
+]
+
+export default function ServicesScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        <View style={styles.innerContainer}>
+          <Text style={styles.title}>Services</Text>
+          <Text style={styles.sectionTitle}>Adhkar</Text>
+          {adhkarCategories.map((title, index) => (
+            <AdhkarCard key={index} title={title} />
+          ))}
+
+          <Text style={styles.sectionTitle}>Hisn Al-Muslim</Text>
+          {supplications.map((text, index) => (
+            <SupplicationListItem key={index} text={text} onPress={() => {}} />
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  innerContainer: {
+    paddingHorizontal: 15,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginVertical: 15,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginVertical: 10,
+  }
+});

app/(tabs)/two.tsx

@@ -1,31 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '@/components/EditScreenInfo';
-import { Text, View } from '@/components/Themed';
-
-export default function TabTwoScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="app/(tabs)/two.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});