Merge pull request #73 from masterHAWK99/improve-section

Improve footer section
roopeshsn · Oct 5, 2022 · a61c420 · a61c420
2 parents 2c58092 + 30b9770
commit a61c420
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
@@ -1,12 +1,51 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Container, Row, Col, Nav } from 'react-bootstrap'
 
 const Footer = () => {
   return (
     <footer>
       <Container>
-        <Row>
-          <Col className="text-center py-3">Copyright &copy; FreshBey</Col>
+        <Row className="flex-column flex-lg-row">
+          <Col className="py-3 order-1">
+            <ul className="list-unstyled d-flex li-separator justify-content-center align-items-center">
+              <li className="d-flex px-1">
+                <Nav.Link className="p-0" href="#" target="_blank">
+                  Returns Policy
+                </Nav.Link>
+              </li>
+              <li className="d-flex px-1">
+                <Nav.Link className="p-0" href="#" target="_blank">
+                  Terms of Use
+                </Nav.Link>
+              </li>
+              <li>
+                <Nav.Link className="p-0" href="#" target="_blank">
+                  Privacy Policy
+                </Nav.Link>
+              </li>
+            </ul>
+          </Col>
+          <Col className="text-center py-3 order-3 order-lg-2">
+            Copyright &copy; Freshbey
+          </Col>
+          <Col className="text-center py-3 d-flex justify-content-center order-2 order-lg-2">
+            Need help? Visit the
+            <Nav.Link
+              className="py-0 px-1 text-decoration-underline"
+              href="#"
+              target="_blank"
+            >
+              Help Center
+            </Nav.Link>
+            or
+            <Nav.Link
+              className="py-0 px-1 text-decoration-underline"
+              href="#"
+              target="_blank"
+            >
+              Contact Us
+            </Nav.Link>
+          </Col>
         </Row>
       </Container>
     </footer>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -166,6 +166,11 @@ h2 {
   font-family: 'League Spartan', sans-serif;
 }
 
+.li-separator > li:not(:last-child)::after {
+  content: "|";
+  margin-left: 0.25rem;
+}
+
 @media only screen and (min-width: 768px) and (max-width: 1200px) {
   .product-page-section {
     min-width: 350px;