color and shape card add to home page

frontend/src/screen/home.js

 import React from "react";
-import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image } from 'react-native';
 
 export default function Home({ navigation }){
 
@@ -8,9 +8,47 @@ export default function Home({ navigation }){
     }
 
     return (
-        <View>
-            <Text>Home</Text>
-        </View>
+        <SafeAreaView>
+            <ScrollView>
+                <View style={styles.imageContainer}>
+                    <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>
+                    </View>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
     )
 
-}
+}
\ No newline at end of file
+
+const styles = StyleSheet.create({
+
+    imageContainer:{
+        flexDirection: "row",
+        marginTop: 70,
+    },
+    imageView: {
+        width: 180,
+        height: 300,
+        // borderWidth:1,
+        // borderColor: "#000",
+        marginHorizontal: 15,
+        borderRadius: 50
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+        borderRadius: 50
+    },
+    text: {
+        fontSize: 40,
+        justifyContent: "center",
+        textAlign: "center",
+        marginTop: -190,
+        color:'#ffff',
+        fontWeight: "bold"
+    },
+
+})
\ No newline at end of file