implement home page

src/constants/colors.js

@@ -22,4 +22,11 @@ export default {
   pink_new: '#FF8080',
   pastal_blue: '#7469B6',
   red: '#DC143C',
+  cadmium_Green: '#5EAAA8',
+  main_blue: '#6096B4',
+  dark_Pink: '#D885A3',
+  light_yellow: '#FFDBA4',
+  orange: '#C7B198',
+  pink_dark: '#FFC4E1',
+  light_gray: '#D3DEDC',
 };

src/constants/imgs.js

@@ -71,4 +71,9 @@ export default {
   play_pen: require('../assets/games/play_pen.png'),
   milk_bottle: require('../assets/games/milk_bottle.png'),
   high_chair: require('../assets/games/high_chair.png'),
+  home_exercises: require('../assets/running-pregnant-woman.png'),
+  home_mental_well_being: require('../assets/relaxing-mind.png'),
+  home_emotional_support: require('../assets/virtual-assistant.png'),
+  home_skin: require('../assets/home_skin.png'),
+  logo: require('../assets/foreground.png'),
 };

src/navigations/GameNavigator.js

@@ -58,7 +58,7 @@ function GameNavigator() {
         headerBackTitleVisible: false,
         headerShown: false,
       }}
-      initialRouteName={ROUTES.GAME_HOME}>
+      initialRouteName={ROUTES.GAME_WELCOME}>
       <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
       <Stack.Screen
         name={ROUTES.GAME_QUIZ_OPTIONS}

src/screens/home/Home.js

+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {Image, TouchableOpacity, Text, View} from 'react-native';
+import {Image, TouchableOpacity, Text, View, FlatList} from 'react-native';
 import {COLORS, IMGS, ROUTES} from '../../constants';
 import LinearGradient from 'react-native-linear-gradient';
 import Icon from 'react-native-vector-icons/Ionicons';
 
 const Home = ({navigation}) => {
+  const cards = [
+    {
+      id: '1',
+      name: 'Reduce Skin Diseases',
+      image: IMGS.home_skin,
+      backgroundColor: COLORS.orange,
+      navigateTo: ROUTES.SKIN_WELCOME,
+    },
+    {
+      id: '2',
+      name: 'Improve Mental Well-Being',
+      image: IMGS.home_mental_well_being,
+      backgroundColor: COLORS.cadmium_Green,
+      navigateTo: ROUTES.GAME_WELCOME,
+    },
+    {
+      id: '3',
+      name: 'Exercises Recommendations',
+      image: IMGS.home_exercises,
+      backgroundColor: COLORS.dark_Pink,
+      navigateTo: ROUTES.EXERCISE_HOME,
+    },
+    {
+      id: '4',
+      name: 'Get Emotional Support',
+      image: IMGS.home_emotional_support,
+      backgroundColor: COLORS.main_blue,
+      navigateTo: ROUTES.HOME,
+    },
+  ];
   return (
     <LinearGradient
       style={{
         flex: 1,
       }}
-      colors={[COLORS.dark_purple, COLORS.white, COLORS.dark_purple]}>
+      colors={[COLORS.light_gray, COLORS.white, COLORS.light_gray]}>
       <View>
-        <View>
-          <Image
-            source={IMGS.home_page}
-            style={{
-              height: 360,
-              width: '100%',
-              position: 'absolute',
-              top: 100,
-            }}
-          />
-        </View>
         <TouchableOpacity
           style={{
             position: 'absolute',
-            top: 25, // Adjust top and right values as needed
+            top: 20,
             right: 20,
-            zIndex: 5, // Ensure the icon is on top of other elements
+            zIndex: 5,
           }}
           onPress={() => navigation.navigate(ROUTES.PROFILE)}>
           <Icon name="person-circle-sharp" size={35} color={COLORS.black} />
         </TouchableOpacity>
         <View
           style={{
-            paddingHorizontal: 67,
-            position: 'absolute',
-            top: 510,
-            width: '100%',
+            marginTop: 70,
+            paddingHorizontal: 20,
+            paddingVertical: 10,
+            backgroundColor: COLORS.white,
+            borderRadius: 10,
+            flexDirection: 'row',
+            alignItems: 'center',
           }}>
+          <Image
+            source={IMGS.logo}
+            style={{width: 100, height: 120, marginRight: 50}}
+          />
+          <View>
+            <Text
+              style={{
+                fontSize: 24,
+                color: COLORS.navyBlue,
+                fontWeight: 'bold',
+                textAlign: 'right',
+                fontFamily: 'monospace',
+              }}>
+              Welcome to
+            </Text>
+            <Text
+              style={{
+                fontSize: 24,
+                color: COLORS.navyBlue,
+                fontWeight: 'bold',
+                textAlign: 'right',
+                fontFamily: 'monospace',
+              }}>
+              e-MidWife
+            </Text>
+          </View>
+        </View>
+        <View>
           <Text
             style={{
-              fontSize: 45,
-              color: COLORS.black,
-              fontWeight: 'bold',
-              textAlign: 'center',
-              fontFamily: 'monospace',
-            }}>
-            Welcome to
-          </Text>
-          <Text
-            style={{
-              fontSize: 45,
+              fontSize: 18,
               color: COLORS.black,
               fontWeight: 'bold',
-              textAlign: 'center',
+              textAlign: 'left',
               fontFamily: 'monospace',
+              marginTop: 60,
+              marginLeft: 25,
             }}>
-            e-MidWife
+            Features
           </Text>
+          <FlatList
+            data={cards}
+            keyExtractor={item => item.id}
+            contentContainerStyle={{
+              paddingHorizontal: 20,
+              paddingTop: 20,
+            }}
+            renderItem={({item}) => (
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  backgroundColor: item.backgroundColor,
+                  padding: 10,
+                  marginBottom: 10,
+                  borderRadius: 10,
+                  alignItems: 'center',
+                  height: 90,
+                }}
+                onPress={() => navigation.navigate(item.navigateTo)}>
+                <Image
+                  source={item.image}
+                  style={{width: 50, height: 50, marginRight: 18}}
+                />
+                <Text
+                  style={{
+                    fontSize: 18,
+                    color: COLORS.black,
+                    fontWeight: 'bold',
+                  }}>
+                  {item.name}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
         </View>
       </View>
     </LinearGradient>