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} /> */}
+
-  
+      <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
-    {/* Video background */}
+        <Toolbar>
-    <VimeoEmbed videoId="1066622045" opacity={0.65} />
+          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
-     
+            <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
-      <div>
+          </IconButton>
-        <a href="https://www.fendicasa.com/en/" target="_blank">
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
-          <img src={fendiLogo} className="logo" alt="Fendi logo" />
+            Fendi Home Experience
-        </a>
+          </Typography>
-      </div>
+          <Button color="inherit">Login</Button>
-     
+        </Toolbar>
-      <div className="card">
+      </AppBar>
-        <Button variant="contained" >
+
-          Login
-        </Button>
-      </div>
     </>
   )
 }

src/components/Background.jsx

@@ -1,4 +1,4 @@
-import Box  from "@mui/material/Box";
+import Box from "@mui/material/Box";
 
 export default function Background({ imageName = "background.jpg", opacity = 0.5 }) {
 

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 {