Change donor portal footer section (#245)

* footer upgrade * added animation to footer bottom links on hover
LSFLK · Jul 25, 2022 · c5ed027 · c5ed027
1 parent 4730273
commit c5ed027
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 24 deletions.
diff --git a/donor-portal/src/components/footer/index.tsx b/donor-portal/src/components/footer/index.tsx
@@ -6,10 +6,35 @@ import { FaFacebookF, FaTwitter, FaInstagram, FaYoutube } from "react-icons/fa";
 export default function Footer() {
   return (
     <footer className="footer">
+      <div className="footer-red">
+        <h1>Can&apos;t decide which aid package to support?</h1>
+        <p>
+          You don&apos;t have to! The red Cross team in collaboration with
+          various teams on the ground are continously reviewing the countries
+          needs and prioritizing based on severity and criticality.
+        </p>
+        <p>Your donation will be used to fund various aid packages</p>
+        <p>Donate to</p>
+        <div className="actions">
+          <button className="btn" type="button">
+            Sri Lanka Red Cross
+          </button>
+          <span>Or</span>
+          <button className="btn" type="button">
+            Local Registered Charity
+          </button>
+        </div>
+      </div>
       <div className="footer-black">
         <div className="footer-black-top">
           <img src="/assets/images/about-us/sl-red-cross-logo.jpg" alt="" />
-          <p>{/* TODO: add content here */}</p>
+          <p>
+            {/* TODO: add content here */}
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+            Repudiandae molestiae labore tempora maiores officiis odio facilis
+            eligendi quae quos fuga, facere explicabo accusantium qui sequi ad,
+            suscipit nisi! Quas, repellendus.
+          </p>
           <div className="icons">
             <p>FOLLOW</p>
             <a href="https://www.facebook.com/pages/Sri-Lanka-Red-Cross-Society/133902706641597">
@@ -30,20 +55,15 @@ export default function Footer() {
           <Link to="/about-us" className="text-link">
             About
           </Link>
-          <span>|</span>
           <Link to="/donors" className="text-link">
             Donors
           </Link>
-          <span>|</span>
-
           <Link to="/suppliers" className="text-link">
-            Hospital and Suppliers
+            Hospital & Suppliers
           </Link>
-          <span>|</span>
           <Link to="/news-room" className="text-link">
             Newsroom
           </Link>
-          <span>|</span>
           <Link to="/login" className="text-link">
             Login
           </Link>
@@ -54,12 +74,12 @@ export default function Footer() {
           Copyright © <a href="www.elixir.redcross.lk">elixir.redcross.lk </a>|
           All rights reserved
         </p>
-        <div>
-          {/* <a href="">Privacy</a>
-          <span className="dot"></span>
-          <a href="">Terms</a>
-          <span className="dot"></span>
-          <a href="">Cookies</a> */}
+        <div className="nav">
+          <a href="/">Privacy</a>
+          <span className="dot">&nbsp;</span>
+          <a href="/">Terms</a>
+          <span className="dot">&nbsp;</span>
+          <a href="/">Cookies</a>
         </div>
       </div>
     </footer>

diff --git a/donor-portal/src/components/footer/styles.css b/donor-portal/src/components/footer/styles.css
@@ -6,27 +6,39 @@
 
 .footer .footer-red {
   background-color: var(--elixir-color-red);
-  height: 210px;
-  padding: 40px;
+  min-height: 210px;
+  padding: 40px 0 20px 0;
 }
 
 .footer .footer-red h1 {
   color: rgb(255, 255, 255);
+  margin-bottom: 25px;
+}
+
+.footer-red .actions .btn {
+  min-width: 250px;
+  font-weight: 600;
+  padding: 12px;
+  height: auto;
 }
 
 .footer p {
   color: white;
   font-size: 18px;
-  width: 60%;
+  width: 30%;
   margin: auto;
+  font-weight: 600;
+  margin-bottom: 15px;
 }
 
 .footer .footer-black {
-  height: 70px;
+  /* height: 70px; */
+  position: relative;
+  padding: 2rem 0;
   background-color: black;
   /* padding: 40px; */
-  padding-top: 100px;
-  padding-bottom: 40px;
+  /* padding-top: 100px; */
+  /* padding-bottom: 40px; */
 }
 
 .footer .footer-red button {
@@ -46,7 +58,9 @@
 }
 
 .footer .footer-black img {
-  height: 100px;
+  position: absolute;
+  top: -50%;
+  height: 150px;
   border-radius: 50%;
 }
 
@@ -59,12 +73,17 @@
 .footer .footer-black .footer-black-top {
   display: flex;
   align-items: center;
-  margin-top: -70px;
+  width: 50%;
+  margin: 0 auto;
+  /* margin-top: -70px; */
   width: 60%;
-  margin-left: 250px;
+  /* margin-left: 250px; */
   margin-bottom: 30px;
 }
 
+/* .footer-black-top p {
+} */
+
 .icons {
   display: flex;
   font-size: 17px;
@@ -76,20 +95,41 @@
   margin: 10px;
 }
 
+.icons p {
+  letter-spacing: 3px;
+  color: var(--elixir-color-gray-600);
+}
+
 .footer-black-bottom {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   text-decoration: none;
   font-size: 18px;
   margin: auto;
   width: 65%;
+  font-weight: 600;
+}
+
+.footer-black-bottom:hover a {
+  padding: 0 18px;
 }
 
 .footer-black-bottom span {
   color: white;
 }
+
 .text-link {
   color: white;
+  padding: 0 25px;
+  transition: all 0.5s;
+}
+
+a.text-link:hover {
+  padding: 0 60px;
+}
+
+.text-link:not(:last-child) {
+  border-right: 1px solid white;
 }
 
 .footer-gray {
@@ -115,11 +155,17 @@
   font-weight: 500;
 }
 
+.footer-gray .nav {
+  display: flex;
+  align-items: center;
+}
+
 .dot {
   height: 5px;
   width: 5px;
   background-color: black;
   border-radius: 50%;
-  display: inline-block;
+  /* display: inline-flex;
+  align-items: center; */
   margin: 0 8px;
 }