color page design

frontend/src/component/ImageButton.js

+import { useNavigation } from "@react-navigation/native";
+import React from "react";
+import {Text, TouchableOpacity, StyleSheet} from 'react-native'
+
+export default function ImageButton({ title}){
+
+    const navigation = useNavigation();
+
+    return(
+        <TouchableOpacity onPress={()=> {navigation.navigate("Color")}} style={styles.ImageButton}>
+            <Text style={styles.text}>{title}</Text>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+
+    ImageButton:{
+        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        width: "100%",
+        height: "30%",
+        position: "absolute",
+        marginTop: 120,
+        // bottom: 0,
+        left: 0,
+    },
+    text: {
+        fontSize: 40,
+        justifyContent: "center",
+        textAlign: "center",
+        color:'#ffff',
+        fontWeight: "bold",
+        
+    },
+})
\ No newline at end of file

frontend/src/router/router.js

@@ -7,6 +7,7 @@ import Start from "../screen/Start"
 import Register from "../screen/auth/Register";
 import Login from "../screen/auth/Login";
 import Splash from "../screen/splash/Splash";
+import Color from "../screen/Color";
 
 const Stack = createNativeStackNavigator();
 
@@ -19,6 +20,7 @@ return(
         <Stack.Screen options={{headerShown:false}} name="Register" component={Register} />
         <Stack.Screen options={{headerShown:false}} name="Login" component={Login} />
         <Stack.Screen options={{headerShown:false}} name="Start" component={Start} />
+        <Stack.Screen options={{headerShown:true}} name="Color" component={Color} />
       </Stack.Navigator>
     </NavigationContainer>
 )

frontend/src/screen/Color.js

+import { useNavigation } from "@react-navigation/native";
+import React from "react";
+import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground } from 'react-native';
+
+export default function Color(){
+
+    const navigation = useNavigation();
+
+    return (
+        <SafeAreaView>
+            <ScrollView>
+                <View>
+                    <ImageBackground style={styles.imagebackground} source={require('../assets/login/login_background.png')} resizeMode="contain">
+                    </ImageBackground>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    )
+
+    
+
+}
+
+const styles = StyleSheet.create({
+    imagebackground:{
+        width: "100%",
+        height: "100%",
+    }
+
+})
\ No newline at end of file

frontend/src/screen/home.js

 import React from "react";
 import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image } from 'react-native';
+import ImageButton from "../component/ImageButton";
 
 export default function Home({ navigation }){
 
@@ -14,7 +15,7 @@ export default function Home({ navigation }){
                     <View style={styles.imageView}>
                         <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain">
                         </Image>
-                        <Text style={styles.text}>Color And Shape</Text>
+                        <ImageButton title="Color And Sape"/>
                     </View>
                 </View>
             </ScrollView>
@@ -42,13 +43,6 @@ const styles = StyleSheet.create({
         height: "100%",
         borderRadius: 50
     },
-    text: {
-        fontSize: 40,
-        justifyContent: "center",
-        textAlign: "center",
-        marginTop: -190,
-        color:'#ffff',
-        fontWeight: "bold"
-    },
+    
 
 })
\ No newline at end of file