restyle a little bit around the use of cardvariant, dimensions and background

src/screens/HomePageWithPaymentOptions.tsx

 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import getPaymentTypes from "@/utils/requests/getPaymentTypes";
+import BalanceContainer from "@components/BalanceContainer";
 import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import PaymentOption from "@components/PaymentOption";
 import Box from "@components/bases/Box";
@@ -35,18 +36,21 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 		);
 
 		return (
-			// <BeasyDefaultBackgroundWrapper>
 			<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 				<Box style={{ height: "100%" }} flexDirection={"column"}>
 					<BarWithBeasyAndNotificationsIcon />
 					<Card
 						variant={"curvedTopContainer"}
 						height={Dimensions.get("window").height / 2 + 150}
-						// marginTop={"auto"}
 						style={{ marginTop: "auto" }}
 						padding={"l"}
 					>
-						<Box height={100}>
+						<Box position={"relative"} top={-120}>
+							<Box alignSelf={"center"}>
+								<BalanceContainer balance={78000} label="Total des ventes" />
+							</Box>
+
+							<Box marginVertical={"l"}>
 								<Text fontSize={20} fontWeight={"bold"}>
 									Types de paiement
 								</Text>
@@ -72,22 +76,22 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										<PaymentOptionContainer key={paymentType.id}>
 											<PaymentOption
 												onPress={() =>
-												navigation.navigate("paymentAmountInputScreen", {
+													navigation.navigate(
+														"paymentAmountInputScreen",
+														{
 															paymentType: paymentType.code,
-												})
+														},
+													)
 												}
 												paymentMethod={paymentType.code}
 											/>
 										</PaymentOptionContainer>
 									))}
 							</Box>
+						</Box>
 					</Card>
-					{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
-							<BalanceContainer balance={78000} label="Total des ventes" />
-						</Box> */}
 				</Box>
 			</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
-			// </BeasyDefaultBackgroundWrapper>
 		);
 	};