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> */}
 
     </>
   )

src/components/AppHeader.jsx

@@ -0,0 +1,55 @@
+import fendiLogo from '/favicon.png'
+import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+
+export default function AppHeader({ zone = 'public' }) {
+  const isPrivate = zone === 'private';
+  const isRestricted = zone === 'restricted';
+  const isPublic = zone === 'public';
+
+  return (
+    <AppBar position="static" backgroundColor={isPrivate ? "primary" : isRestricted ? "secondary" : "transparent"} sx={{ backgroundColor: '#000000a0' }}>
+      <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <Box display="flex" alignItems="center">
+          <IconButton edge="start" color="inherit">
+           <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
+          </IconButton>
+          <Typography variant="h6" noWrap sx={{ ml: 1 }}>
+            {isPrivate ? "Private" : isRestricted ? "Restricted" : "Fendi Casa Experience"}
+          </Typography>
+        </Box>
+
+        {/* Search only visible for restricted or private zones */}
+        {(isRestricted || isPrivate || isPublic) && (
+          <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
+            <SearchIcon sx={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }} />
+            <InputBase
+              placeholder="Search…"
+              sx={{
+                pl: 4,
+                pr: 2,
+                py: 0.5,
+                borderRadius: 1,
+                backgroundColor: '#000000a0',
+                color: 'gray',
+                width: { md: '300px', lg: '400px' }
+              }}
+            />
+          </Box>
+        )}
+        
+        {/* Login button only visible for public zone */}
+        {isPublic && (
+          <Box>
+            <IconButton color="inherit">
+              <Typography variant="button" color="inherit">
+                Login
+              </Typography>
+            </IconButton>
+          </Box>
+        )}
+
+      </Toolbar>
+    </AppBar>
+  );
+}