Implemented footer

client/src/components/Footer.jsx

@@ -1,9 +1,24 @@
 import React from "react";
+import { Link } from "react-router-dom"
 
 export default function Footer(props) {
     return (
         <section id="footer" >
-            <h4>Developed by Afshan Ahmed Khan</h4>
+            <div className="info">
+                <img alt="logo" src="/assets/images/CovidMart logo no background.png" className="logo"/>
+                <p>CovidMart strives to fulfill all the demands of its customer<br/> and protect them in this tough time</p>
+                <h5><Link to="/">CovidMart</Link> © All Rights Reserved</h5>
+            </div>
+            <div className="contact">
+                <div>
+                    <img className="social" alt="facebook" src="/assets/images/facebook-icon.png"/>
+                    <img className="social" alt="twitter" src="/assets/images/twitter-icon.png"/>
+                    <img className="social" alt="instagram" src="/assets/images/instagram-icon.png"/>
+                    <img className="social" alt="linkedin" src="/assets/images/linkedin-icon.png"/>
+                    <a href="mailto:[email protected]"><img className="social" alt="linkedin" src="/assets/images/email-icon.png"/></a>
+                </div>
+                <h5>Developed by <a href="https://www.linkedin.com/in/afshan-ak">Afshan Ahmed Khan</a></h5>
+            </div>
         </section>
     );
 }

client/src/index.css

@@ -990,9 +990,9 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
   width: 100%;
 }
 /* ----------- Main -------------- */
-/* #main {
-  padding-top: var(--space-from-top);
-} */
+#main {
+  min-height: 85vh;
+}
 
 /* ------------ UserAdminAuth Section------------ */
 #useradminauth {
@@ -1422,5 +1422,41 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
 
 /* ------- Footer -----*/
 #footer{
-  background-color: rgba(var(--primary-grey),1);
+  background-color: rgba(var(--primary-white),1);
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 1rem;
+  box-shadow: 0rem 0rem 4px 0.8px grey;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#footer div{
+  text-align: center;
+}
+
+#footer div h5{
+  font-size: 1.4rem;
+  margin-top: 0.5rem;
+}
+
+#footer div.info img.logo{
+  height: 5.2rem;
+}
+
+#footer div.contact{
+  margin-top: 1rem;
+}
+
+#footer div.contact div img.social{
+  background-color: rgb(var(--primary-blue));
+  border-radius: 55%;
+  border: 2px solid transparent;
+  height: 4rem;
+  margin-right: 2rem;
 }

client/src/screens/Home.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
-//import { fetchAllProducts } from "../redux/ActionCreators/fetchAllProducts";
 import { applyFilter } from '../redux/ActionCreators/filter'
 import { connect } from "react-redux";
-// import { Card, Row, Divider, Col, Button, Spin, Rate } from 'antd';
 import Card from "../components/Card";
 import { showInfoToast,showErrorToast } from 'toast';
 import { useEffect } from 'react';

server/assets/index.handlebars

@@ -413,7 +413,7 @@ table, td { color: #000000; } #u_body a { color: #161a39; text-decoration: under
       <td style="overflow-wrap:break-word;word-break:break-word;padding:5px 10px 10px;font-family:'Lato',sans-serif;" align="left">
 
   <div style="font-size: 14px; line-height: 140%; text-align: left; word-wrap: break-word;">
-    <p style="line-height: 140%; font-size: 14px;"><span style="font-size: 14px; line-height: 19.6px;"><span style="color: #ecf0f1; font-size: 14px; line-height: 19.6px;"><span style="line-height: 19.6px; font-size: 14px;">Company &copy;&nbsp; All Rights Reserved</span></span></span></p>
+    <p style="line-height: 140%; font-size: 14px;"><span style="font-size: 14px; line-height: 19.6px;"><span style="color: #ecf0f1; font-size: 14px; line-height: 19.6px;"><span style="line-height: 19.6px; font-size: 14px;">CovidMart &copy;&nbsp; All Rights Reserved</span></span></span></p>
   </div>
 
       </td>