feat: add a footer

src/components/AppHeader.jsx

@@ -12,7 +12,7 @@ export default function AppHeader({ zone = 'public' }) {
       <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 }} />
+            <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
           </IconButton>
           <Typography variant="h6" noWrap sx={{ ml: 1 }}>
             {isPrivate ? "Private" : isRestricted ? "Restricted" : "Fendi Casa Experience"}
@@ -37,7 +37,7 @@ export default function AppHeader({ zone = 'public' }) {
             />
           </Box>
         )}
-        
+
         {/* Login button only visible for public zone */}
         {isPublic && (
           <Box>

src/components/Footer.jsx

@@ -0,0 +1,32 @@
+import { Box, Typography } from '@mui/material';
+import fendiLogo from '/logo.png'
+
+export default function Footer({ zone = 'public' }) {
+    const bgColor = {
+        public: '#000000a0',
+        restricted: '#e0e0ff',
+        private: '#d0f0e0',
+    };
+
+    const year = new Date().getFullYear();
+
+    return (
+        <Box
+            component="footer"
+            sx={{
+                p: 2,
+                textAlign: 'center',
+                backgroundColor: bgColor[zone],
+                mt: 'auto',
+                fontSize: { xs: '0.75rem', md: '1rem' },
+            }}
+        >
+            <Typography variant="body2">
+                 <img src={fendiLogo} alt="Fendi logo" style={{ height: 10, marginRight:10 }} />
+                {zone === 'private'
+                    ? `Admin Panel - Fendi ${year}`
+                    : `© ${year} Fendi. All rights reserved.`}
+            </Typography>
+        </Box>
+    );
+}