restructured the files and created skeleton for the Login component

src/components/App.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Button, Box } from "@mui/material"
+import variables from "@scss/variables.module.scss"
+import "@scss/style.scss"
+
+export default function App() {
+    let boxStyle = {
+        width: "50%",
+        height: "50%",
+        border: '1px dashed grey',
+        backgroundColor: variables.boxBg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    }
+
+    return (
+        <main id="root">
+            <h1>React with Webpack</h1>
+            <Button variant="contained">Hello world</Button>
+            <div id="container">
+                <Box sx={boxStyle}>
+                    This box should be centered <br />(and also this this text)
+                </Box>
+            </div>
+        </main>
+    );
+}

src/components/Login.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Card } from "@mui/material"
+
+export default function Login(){
+    return (
+        <main id="root">
+            
+        </main>
+    )
+}