Make this look like AC wanted without using a background image as the white part.

src/screens/UserLoginScreen.tsx

 import Button from "@components/Button";
+import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
 import Input from "@components/Input";
-import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { Fontisto } from "@expo/vector-icons";
 import { containers } from "@styles/Commons";
-import { KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, View } from "react-native";
+import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
 
 const UserLoginScreen = () => {
 	return (
-		<BackgroundGreenWhiteContentArea>
-			<SafeAreaView style={{ flex: 1 }}>
-				<Box
-					px={"m"}
-					justifyContent={"space-between"}
-					flexDirection={"row"}
-					alignItems={"center"}
-				>
-					<Fontisto name="close-a" size={12} color="black" />
+		<BackgroundDefault>
+			<View style={containers.containerFull}>
+				<Box style={{ height: "20%" }} p={"l"} paddingTop={"x64"}>
+					<Box
+						px={"m"}
+						justifyContent={"space-between"}
+						flexDirection={"row"}
+						alignItems={"center"}
+					>
+						<Fontisto name="close-a" size={12} color="black" />
 
-					<TouchableOpacity>
-						<Text>Mot de passe oublie ?</Text>
-					</TouchableOpacity>
+						<TouchableOpacity>
+							<Text>Mot de passe oublie ?</Text>
+						</TouchableOpacity>
+					</Box>
 				</Box>
-				<Box
-					style={[containers.containerFull]}
-					p={"xl"}
-					paddingTop={"x240"}
-					flexDirection={"column"}
-					justifyContent={"space-between"}
-				>
-					<KeyboardAvoidingView
-						behavior={Platform.OS === "ios" ? "height" : "height"}
-						style={{ flex: 1 }}
-					>
-						<View>
-							<Box mb={"x100"}>
-								<Text fontSize={40} fontWeight={"bold"}>
-									Connexion
-								</Text>
-								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
-							</Box>
+				<ContainerBorderTopCurved>
+					<Box p={"l"} style={{ height: "70%" }} paddingTop={"x100"}>
+						<KeyboardAvoidingView
+							behavior={Platform.OS === "ios" ? "height" : "height"}
+							style={{ flex: 1 }}
+						>
+							<View>
+								<Box mb={"x64"}>
+									<Text fontSize={40} fontWeight={"bold"}>
+										Connexion
+									</Text>
+									<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
+								</Box>
 
-							<Box gap={"m"}>
-								<Input label="Email" />
-								<Input label="Mot de passe" secureTextEntry={true} />
-							</Box>
-						</View>
-					</KeyboardAvoidingView>
-					<Box mt={"xl"}>
+								<Box gap={"m"}>
+									<Input label="Email" />
+									<Input label="Mot de passe" secureTextEntry={true} />
+								</Box>
+							</View>
+						</KeyboardAvoidingView>
+					</Box>
+					<Box style={{ height: "20%" }} p={"s"}>
 						<Button
 							variant={"full"}
 							textVariants={"primary"}
@@ -62,9 +61,12 @@ const UserLoginScreen = () => {
 							onPress={() => {}}
 						/>
 					</Box>
-				</Box>
-			</SafeAreaView>
-		</BackgroundGreenWhiteContentArea>
+				</ContainerBorderTopCurved>
+			</View>
+			{/* <SafeAreaView style={containers.containerFlexUno}> */}
+
+			{/* </SafeAreaView> */}
+		</BackgroundDefault>
 	);
 };