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' }}>
-        <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 Casa Experience
-          </Typography>
-          <Button color="inherit">Login</Button>
-        </Toolbar>
-      </AppBar> */}
+        <AppHeader zone={zone} />
+        <Box component="main" sx={{ flex: 1, p: 2 }}>
+          <h1>Welcome to the Fendi Casa Experience</h1>
+          <p>This is a sample box.</p>
+
+        </Box>
+        <Footer zone={zone} />
+      </Box>
 
     </>
   )