feat: init project SelfChckout

app/selfcheckout/PreCheckoutScreen.tsx

@@ -0,0 +1,36 @@
+"use client"
+import Title from "@atoms/Title"
+import { Tooltip } from "@atoms/Tooltip"
+import { Box, Button, Container } from "@mui/material"
+import React from "react"
+
+const PreCheckoutScreen: React.FC = () => {
+  const handleStartCheckout = () => {
+    console.log("Comenzar checkout")
+  }
+
+  return (
+    <Container maxWidth="md" sx={{ textAlign: "center", marginTop: "20vh" }}>
+      <Box sx={{ backgroundColor: "#f1f1f1", padding: "40px", borderRadius: "8px", boxShadow: 3 }}>
+        <Title text="Esta caja está" size="h4" />
+        <Title text="Abierta" size="h2" />
+
+        <Tooltip explainer="Escanee un producto o pulse el botón para comenzar" withArrow side="top">
+          <Title text="Escanee un producto o pulse aquí para comenzar" size="h6" />
+        </Tooltip>
+
+        <Button
+          variant="contained"
+          color="success"
+          size="large"
+          sx={{ marginTop: "40px" }}
+          onClick={handleStartCheckout}
+        >
+          Comenzar
+        </Button>
+      </Box>
+    </Container>
+  )
+}
+
+export default PreCheckoutScreen