feat: footer

components/company-info/CompanyInfo.jsx

 const CompanyInfo = () => {
   return (
     <>
-      <Box sx={{ display: 'flex', backgroundColor: 'primary.main' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          backgroundColor: 'primary.main',
+          height: '100%',
+        }}
+      >
         <Box
           sx={{
             width: '50%',
               textAlign: 'center',
               width: '100%',
               height: 70,
-              mt: 20,
+              mt: 13,
               color: 'white',
             }}
           >
           </Box>
         </Box>
         <Box sx={{ width: '50%' }}>
-          <Box sx={{ pt: 8 }}>
+          <Box sx={{ pt: 1 }}>
             <Image
               src="/images/maps 1.svg"
               alt="map"

components/features/Features.jsx

         sx={{
           display: 'flex',
           width: '100%',
-          height: '100%',
+
+          height: '100vh',
           flexDirection: 'column',
         }}
       >

components/hero/Hero.jsx

 const Hero = () => {
   return (
     <>
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', width: '100%', height: '100vh' }}>
         <Box
           sx={{
             width: '50%',

components/layout/base-layout/Layout.jsx

 import { Box } from '@mui/material';
+import Footer from '../footer/Footer';
 import Navbar from '../navbar/Navbar';
 
 function Layout(props) {
       <Box sx={{ width: '100%' }}>
         <Navbar />
         <main>{props.children}</main>
+        <Footer></Footer>
       </Box>
     </>
   );

components/layout/footer/Footer.jsx

+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Image from 'next/image';
+const pages = ['Home', 'Menu', 'About', 'Store', 'Contact'];
+
+const Footer = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        width: '100%',
+        height: 220,
+        flexDirection: 'column',
+        bottom: 0,
+        position: 'relative',
+      }}
+    >
+      <Typography
+        variant="h3"
+        sx={{
+          width: '100%',
+          textAlign: 'center',
+          color: 'primary.main',
+          height: 60,
+          mt: 4,
+        }}
+      >
+        Coffee Shop
+      </Typography>
+      <Box
+        sx={{
+          maxWidth: '100%',
+          height: 30,
+          mt: 1.5,
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        {pages.map((page) => (
+          <Typography
+            key={page}
+            sx={{
+              fontSize: 20,
+              fontWeight: 500,
+              px: 1.5,
+              color: 'primary.main',
+            }}
+          >
+            {page}
+          </Typography>
+        ))}
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          width: '100%',
+          height: 40,
+          mt: 4,
+          justifyContent: 'center',
+        }}
+      >
+        <Box sx={{ px: 2 }}>
+          <Image
+            src="/images/Instagram.svg"
+            alt="cart"
+            width={35}
+            height={35}
+          />
+        </Box>
+        <Box sx={{ px: 2 }}>
+          <Image src="/images/Facebook.svg" alt="cart" width={35} height={35} />
+        </Box>
+        <Box sx={{ px: 2 }}>
+          <Image src="/images/Twitter.svg" alt="cart" width={35} height={35} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;

components/products/featured-product/FeaturedProduct.jsx

     <Box
       sx={{
         width: '100%',
-        minHeight: 500,
+        maxHeight: 500,
+        height: 500,
         backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
         display: 'flex',
       }}

styles/globals.css

   height: 100%;
 }
 
+main {
+  height: auto;
+}
+
 h1,
 h2,
 h3,