HomePageWithPaymentOptions containing the top part + balance viewer

App.tsx

 import theme from "@/themes/Theme";
-import UserLoginScreen from "@screens/UserLoginScreen";
+import HomePageWithPaymentOptions from "@screens/HomePageWithPaymentOptions";
 import { ThemeProvider } from "@shopify/restyle";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet } from "react-native";
@@ -11,7 +11,7 @@ export default function App() {
 			{/* <View style={styles.container}> */}
 			<SafeAreaProvider>
 				<StatusBar style="auto" />
-				<UserLoginScreen />
+				<HomePageWithPaymentOptions />
 			</SafeAreaProvider>
 			{/* </View> */}
 		</ThemeProvider>

src/screens/HomePageWithPaymentOptions.tsx

+import BalanceContainer from "@components/BalanceContainer";
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import NotificationIconButton from "@components/NotificationIconButton";
+import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import Box from "@components/bases/Box";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+const HomePageWithPaymentOptions = () => {
+	return (
+		<BackgroundGreenWhiteContentArea>
+			<SafeAreaView>
+				<Box
+					p={"l"}
+					flexDirection={"row"}
+					justifyContent={"space-between"}
+					alignItems={"center"}
+				>
+					{/* <Text>HomePageWithPaymentOptions</Text> */}
+					<BeasyLogoIcon />
+					<NotificationIconButton />
+				</Box>
+				<Box
+					height={150}
+					alignItems={"center"}
+					justifyContent={"center"}
+					position={"relative"}
+				>
+					<BalanceContainer balance={78000} label="Total des ventes" />
+				</Box>
+			</SafeAreaView>
+		</BackgroundGreenWhiteContentArea>
+	);
+};
+
+export default HomePageWithPaymentOptions;