feat: add the header

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>
+  );
+}