refactor: remade the user not logged in screen

src/screens/HomeUserNotLoggedIn.tsx

+import { asp as g } from "@asp/asp";
+import * as Button from "@components/ButtonNew";
+import { Image } from "expo-image";
+import { Text, View } from "react-native";
 import type { MainStackScreenComponentProps } from "@/navigations/Types";
-import Button from "@components/Button";
-import Box from "@components/bases/Box";
-import Text from "@components/bases/Text";
-import { Image, StyleSheet } from "react-native";
 
 const HomeUserNotLoggedIn: MainStackScreenComponentProps<"homeUserNotLoggedIn"> = ({
 	navigation,
 }) => {
 	return (
-		<>
-			<Box style={style.container} p={"xl"} backgroundColor={"white"}>
-				<Box mt={"s"}>
-					<Box
-						height={300}
-						width={300}
-						backgroundColor={"primary"}
-						mb={"l"}
-						alignItems={"center"}
-						justifyContent={"center"}
-					>
+		<View style={[g.flex_1, g.p_5xl, g.gap_lg]}>
+			<View style={[{ height: 400 }]}>
 				<Image
-							source={require("../../assets/payment_processing.png")}
-							style={style.image}
+					source={require("@assets/payment_processing.png")}
+					style={{ width: "100%", height: "100%" }}
+					contentFit="contain"
+					cachePolicy={"memory-disk"}
 				/>
-					</Box>
-					<Text color={"gray"} fontSize={16} textAlign={"center"}>
-						Acceptez des paiements en magasin et en ligne et recevez votre argent en
-						quelques secondes
+			</View>
+			<Text style={[g.text_center, { color: "gray" }]}>
+				Acceptez des paiements en magasin et en ligne et recevez votre argent en quelques
+				secondes
 			</Text>
-					<Box mt={"xl"}>
-						<Button
-							variant={"full"}
-							textVariants={"primary"}
-							label="Se connecter"
+
+			<Button.Container
 				onPress={() => navigation.navigate("userLoginScreen")}
-						/>
-						<Button
-							variant={"clean"}
-							textVariants={"secondary"}
-							label="Creer un compte"
-							onPress={() => {}}
-						/>
-					</Box>
-				</Box>
-			</Box>
-		</>
+				style={[g.mt_5xl]}
+			>
+				<Button.Label style={{ color: "white" }}>Se connecter</Button.Label>
+			</Button.Container>
+			<Button.Container style={[{ backgroundColor: "transparent" }]}>
+				<Button.Label style={{ color: "green" }}>Créer un compte</Button.Label>
+			</Button.Container>
+		</View>
 	);
 };
 
-const style = StyleSheet.create({
-	container: {
-		width: "100%",
-		height: "100%",
-		flex: 1,
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	image: {
-		width: "100%",
-		height: "100%",
-	},
-});
-
 export default HomeUserNotLoggedIn;