component that render the default background of beasy with the white curved on top content area

src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx

+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
+import Box from "@components/bases/Box";
+import type { ReactElement } from "react";
+import {} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import BackgroundDefault from "./BackgroundDefault";
+
+const BackgroundWithBeasyIconAndWhiteContentArea = ({ children }: { children?: ReactElement }) => {
+	return (
+		<BackgroundDefault>
+			<SafeAreaView edges={["top", "left", "right"]}>
+				<Box
+					style={{
+						height: "100%",
+						width: "100%",
+					}}
+				>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+						mb={"m"}
+					>
+						<BeasyLogoIcon />
+					</Box>
+					<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
+				</Box>
+			</SafeAreaView>
+		</BackgroundDefault>
+	);
+};
+
+export default BackgroundWithBeasyIconAndWhiteContentArea;