feat: add the header

src/App.jsx

@@ -6,6 +6,7 @@ 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 AppHeader from './components/AppHeader';
 
 import './App.css'
 
@@ -17,17 +18,19 @@ function App() {
 
       <Background imageName='background.jpg' opacity = {0.65} />
 
-      <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
+      <AppHeader zone={zone} />
+
+      {/* <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
         <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
+            Fendi Casa Experience
           </Typography>
           <Button color="inherit">Login</Button>
         </Toolbar>
-      </AppBar>
+      </AppBar> */}
 
     </>
   )