143 footer

client/src/components/CarsFilter/style.css

@@ -14,7 +14,7 @@
     height: 620px;
     border-radius: 0.9rem;
     box-shadow: 4px 6px 9px 1px rgb(112, 112, 112);
-    position: fixed;
+    position: absolute;
 }
 
 .title {

client/src/components/footer/footer.tsx

@@ -0,0 +1,66 @@
+import { Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+import './style.css';
+
+function Footer() {
+  return (
+    <div
+      className="footer"
+    >
+      <Typography
+        variant="h6"
+        noWrap
+        sx={{
+          mr: 2,
+          display: { xs: 'none', md: 'flex' },
+          fontFamily: 'monospace',
+          fontWeight: 700,
+          fontSize: '27px',
+          letterSpacing: '.3rem',
+          color: '#fff',
+          textDecoration: 'none',
+        }}
+      >
+        GoodCar
+      </Typography>
+      <div style={{
+        display: 'flex',
+        width: '70%',
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        color: '#fff',
+      }}
+      >
+        <div
+          className="footerCont"
+        >
+          <div className="table">
+            <ol>
+              <h1>Used cars by brand</h1>
+              <Link to="/cars"><li>Toyota Cars </li></Link>
+              <Link to="/cars"><li>Nissan Cars </li></Link>
+              <Link to="/cars"><li>Ford Cars </li></Link>
+              <Link to="/cars"><li>BMW Cors </li></Link>
+              {' '}
+            </ol>
+            <ol>
+              <h1>Used cars by Type</h1>
+              <Link to="/cars"><li>Toyota Cars </li></Link>
+              <Link to="/cars"><li>Nissan Cars </li></Link>
+              <Link to="/cars"><li>Ford Cars </li></Link>
+              <Link to="/cars"><li>BMW Cors </li></Link>
+            </ol>
+            <ol>
+              <h1>Used Cars by Year</h1>
+              <Link to="/cars"><li>2020 </li></Link>
+              <Link to="/cars"><li>2021 </li></Link>
+              <Link to="/cars"><li>2023 </li></Link>
+              <Link to="/cars"><li>2019 </li></Link>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Footer;

client/src/components/footer/style.css

@@ -0,0 +1,67 @@
+.footer{
+  background-color: rgba(147, 147, 147, 0.763);
+  min-height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footerCont{
+  display: flex;
+  justify-content: flex-end;
+}
+.table{
+  min-height: 105px;
+  width: 70%;
+  display: flex;
+  justify-content: space-around;
+}
+.table ol h1{
+  font-size: 16px !important;
+  font-weight: bold !important;
+}
+.table ol li{
+  font-size: 14px;
+}
+.table ol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.flex{
+  width: 250px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.Contact{
+  font-size: 40px;
+  font-weight: bold;
+  color: #fff;
+}
+.label{
+  font-size: 35px;
+  font-weight: bold;
+  color: #fff;
+}
+.number{
+  font-size: 23px;
+  font-weight: bold;
+  color: #fff;
+}
+@media only screen and (max-width: 450px) {
+  .footer{
+      display: flex;
+      align-items: center;
+  }
+  .table{
+    display: flex;
+    height: 705px;
+    flex-direction: column-reverse;
+  }
+  .footerCont{
+    display: flex;
+    justify-content: center;
+  }
+}

client/src/pages/Cars/index.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import CarCard from '../../components/CarCard';
 import CarsFilter from '../../components/CarsFilter';
 import DrawerAppBar from '../../components/FilterSideInMobile';
+import Footer from '../../components/footer/footer';
 import { CarSkeleton } from '../../components/skeletons';
 import { CarsCount, CarsWithImagesRow } from '../../interfaces';
 import './style.css';
@@ -106,6 +107,7 @@ function Cars() {
           variant="outlined"
         />
       </div>
+      <Footer />
     </div>
   );
 }

client/src/pages/Cars/style.css

@@ -3,9 +3,14 @@
     display: flex;
     justify-content: space-between;
     align-content: center;
+    flex-direction: column;
+}
+.footers{
+  display: flex;
 }
 
-.cars_Container {
+.cars_Container{
+
     display: flex;
     flex-direction: column;
     align-items: center;

client/src/pages/Landing/index.tsx

@@ -3,6 +3,7 @@ import Brand from '../../components/brand';
 import Images from '../../assets';
 import HomeCardSection from '../../components/HomeCardSection';
 import HomeCard from '../../components/HomeCard';
+import Footer from '../../components/footer/footer';
 
 function Landing() {
   return (
@@ -62,6 +63,7 @@ function Landing() {
           alt="rating"
         />
       </HomeCardSection>
+      <Footer />
     </>
   );
 }