feat: add a footer

src/App.jsx

@@ -1,12 +1,8 @@
 import { useState } from 'react'
-import fendiLogo from '/favicon.png'
-import Button from '@mui/material/Button';
 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 AppHeader from './components/AppHeader';
+import Footer from './components/Footer';
+import Box from '@mui/material/Box';
 
 import './App.css'
 
@@ -16,21 +12,24 @@ function App() {
   return (
     <>
 
-      <Background imageName='background.jpg' opacity = {0.65} />
+      <Background imageName='background.jpg' opacity={0.65} />
 
-      <AppHeader zone={zone} />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh', // full height of the viewport
+        }}
+      >
 
-      {/* <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
+        <AppHeader zone={zone} />
-        <Toolbar>
+        <Box component="main" sx={{ flex: 1, p: 2 }}>
-          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
+          <h1>Welcome to the Fendi Casa Experience</h1>
-            <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
+          <p>This is a sample box.</p>
-          </IconButton>
+
-          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+        </Box>
-            Fendi Casa Experience
+        <Footer zone={zone} />
-          </Typography>
+      </Box>
-          <Button color="inherit">Login</Button>
-        </Toolbar>
-      </AppBar> */}
 
     </>
   )

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