feat: create the app header draft

src/App.jsx

@@ -1,34 +1,34 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
+import fendiLogo from '/favicon.png'
-import fendiLogo from '/logo.png'
 import Button from '@mui/material/Button';
-import VimeoEmbed from "./components/VimeoEmbed";
-
 import Background from "./components/Background";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 
 import './App.css'
 
 function App() {
+  const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
+
   return (
     <>
 
-    {/* Static image background */}
+      <Background imageName='background.jpg' opacity = {0.65} />
-    {/* <Background imageName='background.jpg' opacity = {0.65} /> */}
 
-    {/* Video background */}
+      <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
-    <VimeoEmbed videoId="1066622045" opacity={0.65} />
+        <Toolbar>
+          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
+            <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
+          </IconButton>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+            Fendi Home Experience
+          </Typography>
+          <Button color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
 
-      <div>
-        <a href="https://www.fendicasa.com/en/" target="_blank">
-          <img src={fendiLogo} className="logo" alt="Fendi logo" />
-        </a>
-      </div>
-     
-      <div className="card">
-        <Button variant="contained" >
-          Login
-        </Button>
-      </div>
     </>
   )
 }

src/index.css

@@ -24,10 +24,9 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  display: block;
 }
 
 h1 {