From 9372c1483dcaa9ec2212febe3f8a1ed15fc0ae50 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Tue, 3 Oct 2023 16:19:48 +0100
Subject: [PATCH] Dark Cover when scrolled down

---
 public/assets/css/style.css             |   2 +-
 src/assets/css/style.css                |   2 +-
 src/component/Footer/Main.js            |  87 ++++++-------
 src/component/Home/Main.js              |  59 +++------
 src/component/HomeMain/Download/Main.js | 158 +++++++++++++-----------
 src/routes/index.js                     |  56 +++++----
 6 files changed, 173 insertions(+), 191 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 5a1da91..042d36e 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1733,7 +1733,7 @@ iframe#youtubevideo {
     padding: 20px 100px;
     padding-bottom: 50px;
     position: relative;
-    z-index: 999999;
+    /* z-index: 999999; */
 }
 
 /* download app dark background */
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 47a9783..3fa713e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1758,7 +1758,7 @@ iframe#youtubevideo {
   padding: 20px 100px;
   padding-bottom: 50px;
   position: relative;
-  z-index: 999999;
+  /* z-index: 999999; */
 }
 
 /* download app dark background */
diff --git a/src/component/Footer/Main.js b/src/component/Footer/Main.js
index bd03cf6..1c3e49f 100644
--- a/src/component/Footer/Main.js
+++ b/src/component/Footer/Main.js
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { HashLink } from 'react-router-hash-link';
+import { HashLink } from "react-router-hash-link";
 import React from "react";
 import line from "../../assets/images/anim_line.png";
 import blueapp from "../../assets/images/appstore_blue.png";
@@ -14,33 +14,11 @@ const Main = ({ footer }) => {
         <footer>
           <div className="top_footer" id="contact">
             <div className="anim_line dark_bg">
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
+              {[...Array(9)].map((_, index) => (
+                <span key={index}>
+                  <img src={line} alt="anim_line" />
+                </span>
+              ))}
             </div>
             <div className="container">
               <div className="row">
@@ -55,7 +33,9 @@ const Main = ({ footer }) => {
                         {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </Link> */}
-                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                        <a
+                          href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
+                        >
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </a>
                       </li>
@@ -73,7 +53,7 @@ const Main = ({ footer }) => {
                         </a>
                       </li>
                       <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
                         </a>
                       </li>
@@ -87,7 +67,6 @@ const Main = ({ footer }) => {
                       <li>
                         {/* <Link to="/">Home</Link> */}
                         <HashLink to="/#">Home</HashLink>
-
                       </li>
                       <li>
                         <Link to="/about">About us</Link>
@@ -200,7 +179,9 @@ const Main = ({ footer }) => {
                         {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </Link> */}
-                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                        <a
+                          href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
+                        >
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </a>
                       </li>
@@ -212,15 +193,15 @@ const Main = ({ footer }) => {
                       </li>
                     </ul>
                     <ul className="social_media">
-                     <li>
-                          <a href={process.env.REACT_APP_FACEBOOK}>
-                            <i className="icofont-facebook"></i>
-                          </a>
+                      <li>
+                        <a href={process.env.REACT_APP_FACEBOOK}>
+                          <i className="icofont-facebook"></i>
+                        </a>
                       </li>
                       <li>
-                          <a href ={process.env.REACT_APP_TWITTER}>
-                            <i className="icofont-twitter"></i>
-                          </a>
+                        <a href={process.env.REACT_APP_TWITTER}>
+                          <i className="icofont-twitter"></i>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -329,7 +310,9 @@ const Main = ({ footer }) => {
                         {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </Link> */}
-                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                        <a
+                          href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
+                        >
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </a>
                       </li>
@@ -347,7 +330,7 @@ const Main = ({ footer }) => {
                         </a>
                       </li>
                       <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
                         </a>
                       </li>
@@ -388,7 +371,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                         <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -404,7 +387,7 @@ const Main = ({ footer }) => {
                   <div className="try_out">
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
-                     <li>
+                      <li>
                         <a href={process.env.REACT_APP_ANDROID_URL}>
                           <img src={blueapp} alt="image" />
                         </a>
@@ -460,7 +443,9 @@ const Main = ({ footer }) => {
                         {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </Link> */}
-                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                        <a
+                          href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
+                        >
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </a>
                       </li>
@@ -478,7 +463,7 @@ const Main = ({ footer }) => {
                         </a>
                       </li>
                       <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
                         </a>
                       </li>
@@ -519,7 +504,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                          <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -599,7 +584,9 @@ const Main = ({ footer }) => {
                         {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </Link> */}
-                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                        <a
+                          href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
+                        >
                           {process.env.REACT_APP_SUPPORT_EMAIL}
                         </a>
                       </li>
@@ -617,7 +604,7 @@ const Main = ({ footer }) => {
                         </a>
                       </li>
                       <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
                         </a>
                       </li>
@@ -657,7 +644,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                         <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -672,7 +659,7 @@ const Main = ({ footer }) => {
                   <div className="try_out">
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
-                     <li>
+                      <li>
                         <a href={process.env.REACT_APP_ANDROID_URL}>
                           <img src={blueapp} alt="image" />
                         </a>
diff --git a/src/component/Home/Main.js b/src/component/Home/Main.js
index d37b212..2a14546 100644
--- a/src/component/Home/Main.js
+++ b/src/component/Home/Main.js
@@ -56,33 +56,11 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
       <section className="banner_section home-banner">
         <div className="container">
           <div className="anim_line">
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
+            {[...Array(9)].map((_, index) => (
+              <span key={index}>
+                <img src={anim} alt="anim_line" />
+              </span>
+            ))}
           </div>
           <div className="row">
             <div
@@ -103,21 +81,20 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 </p>
               </div>
               <ul className="app_btn">
-                  <li>
-                      <a href={process.env.REACT_APP_ANDROID_URL}>
-                        <img src={blueapp} alt="image" />
-                        <img className="white_img" src={whiteapp} alt="image" />
-                      </a>
-                  </li>
-                  <li>
-                      <a href={process.env.REACT_APP_IOS_URL}>
-                        <img src={blue} alt="image" />
-                        <img className="white_img" src={white} alt="image" />
-                      </a>
-                  </li>
+                <li>
+                  <a href={process.env.REACT_APP_ANDROID_URL}>
+                    <img src={blueapp} alt="image" />
+                    <img className="white_img" src={whiteapp} alt="image" />
+                  </a>
+                </li>
+                <li>
+                  <a href={process.env.REACT_APP_IOS_URL}>
+                    <img src={blue} alt="image" />
+                    <img className="white_img" src={white} alt="image" />
+                  </a>
+                </li>
               </ul>
 
-
               {/* <ul className="app_btn">
                 <li>
                   <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
@@ -132,8 +109,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                   </Link>
                 </li>
               </ul> */}
-
-
             </div>
             <div
               className="col-lg-6 col-md-12"
diff --git a/src/component/HomeMain/Download/Main.js b/src/component/HomeMain/Download/Main.js
index e702003..afbf878 100644
--- a/src/component/HomeMain/Download/Main.js
+++ b/src/component/HomeMain/Download/Main.js
@@ -1,81 +1,97 @@
-import { Link } from 'react-router-dom'
-import React, {useState} from 'react'
-import img from '../../../assets/images/anim_line.png'
-import blueapp from '../../../assets/images/appstore_blue.png'
-import blue from '../../../assets/images/googleplay_blue.png'
-import screen from '../../../assets/images/download-screen01.png'
-import screen1 from '../../../assets/images/download-screen02.png'
-
+import { Link } from "react-router-dom";
+import React, { useState } from "react";
+import img from "../../../assets/images/anim_line.png";
+import blueapp from "../../../assets/images/appstore_blue.png";
+import blue from "../../../assets/images/googleplay_blue.png";
+import screen from "../../../assets/images/download-screen01.png";
+import screen1 from "../../../assets/images/download-screen02.png";
 
 const Main = () => {
-    const [animate, setanimate] = useState()
-   
+  const [animate, setAnimate] = useState(false);
+  const [purple, setPurple] = useState(false);
 
-    const [purple, setpurple] = useState()
-    window.addEventListener('scroll', function() {
-        const element = document.getElementsByClassName('free_text');
-        const position = element[0].getBoundingClientRect();
-        
-        if(position.top < window.innerHeight && position.bottom >= 0) {
-            const elm = document.getElementsByClassName("purple_backdrop");
-            elm[0].style.opacity = "1"; 
-        }else{
-            const elm = document.getElementsByClassName("purple_backdrop");
-            elm[0].style.opacity = "0"; 
+//   useEffect(() => {
+//     const handleScroll = () => {
+//       const element = document.getElementsByClassName("free_text")[0];
+//       const position = element.getBoundingClientRect();
 
-        }
-    });
+//       if (position.top < window.innerHeight && position.bottom >= 0) {
+//         document.getElementsByClassName("purple_backdrop")[0].style.opacity =
+//           "1";
+//       } else {
+//         document.getElementsByClassName("purple_backdrop")[0].style.opacity =
+//           "0";
+//       }
+//     };
+
+//     window.addEventListener("scroll", handleScroll);
+
+//     return () => {
+//       window.removeEventListener("scroll", handleScroll);
+//     };
+//   }, []);
 
   return (
     <>
-        <section className="row_am free_app_section review_freeapp" id="getstarted">
-            <div className="container">
-                <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
-                    <div className="anim_line dark_bg">
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                    </div>
-                    <div className="row">
-                        <div className="col-md-6">
-                            <div className="free_text">
-                                <div className="section_title">
-                                    <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
-                                </div>
-                                <ul className="app_btn">
-                                <li>
-                                    <a href={process.env.REACT_APP_ANDROID_URL}>
-                                    <img src={blueapp} alt="image" />
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href={process.env.REACT_APP_IOS_URL}>
-                                    <img src={blue} alt="image" />
-                                    </a>
-                                </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-md-6">
-                            <div className="free_img">
-                                <img src={screen} alt="image" />
-                                <img className="mobile_mockup" src={screen1} alt="image" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
+      <section
+        className={`row_am free_app_section review_freeapp ${
+          animate && "aos-animate"
+        }`}
+        id="getstarted"
+      >
+        <div className="container">
+          <div
+            className="free_app_inner"
+            data-aos="fade-in"
+            data-aos-duration="1500"
+            data-aos-delay="100"
+          >
+            <div className="anim_line dark_bg">
+              {[...Array(9)].map((_, index) => (
+                <span key={index}>
+                  <img src={img} alt="anim_line" />
+                </span>
+              ))}
             </div>
-        </section>
-        <div className="purple_backdrop"></div>
+            <div className="row">
+              <div className="col-md-6">
+                <div className="free_text">
+                  <div className="section_title">
+                    <h2>Let’s download free from apple and play store</h2>
+                    <p>
+                      Instant free download from apple and play store. All you
+                      need is an iPhone or Android device to enjoy all
+                      personalized metrics for personal use. Welcome to myFit
+                      App.
+                    </p>
+                  </div>
+                  <ul className="app_btn">
+                    <li>
+                      <a href={process.env.REACT_APP_ANDROID_URL}>
+                        <img src={blueapp} alt="image" />
+                      </a>
+                    </li>
+                    <li>
+                      <a href={process.env.REACT_APP_IOS_URL}>
+                        <img src={blue} alt="image" />
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="col-md-6">
+                <div className="free_img">
+                  <img src={screen} alt="image" />
+                  <img className="mobile_mockup" src={screen1} alt="image" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* <div className="purple_backdrop"></div> */}
     </>
-  )
-}
+  );
+};
 
-export default Main
\ No newline at end of file
+export default Main;
diff --git a/src/routes/index.js b/src/routes/index.js
index 4d8afb8..12aeb8d 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -17,46 +17,51 @@ import BlogSingle from "../component/Blog/BlogSingle/Main";
 import Terms from "../component/Terms/Main";
 import Privacy from "../component/Privacy/Main";
 
+/**
+ * Renders the appropriate component based on the current URL path.
+ * Manages the state of the navbar and footer components based on the current path.
+ * @returns {JSX.Element} The rendered components based on the current URL path.
+ */
 const Routing = () => {
-  const [homepage, sethomepage] = useState(false);
+  const [homepage, setHomepage] = useState(false);
+  const [footerpage, setFooterpage] = useState(false);
+  const [footer, setFooter] = useState({ f1: true });
+  const [navbar, setNavbar] = useState({ n1: true });
+  const [brdcum, setBrdcum] = useState({ n1: true });
   const location = useLocation();
 
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      sethomepage(false);
+      setHomepage(false);
     } else {
-      sethomepage(true);
+      setHomepage(true);
     }
   }, [location]);
 
-  const [footerpage, setfooterpage] = useState(false);
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      setfooterpage(false);
+      setFooterpage(false);
     } else {
-      setfooterpage(true);
+      setFooterpage(true);
     }
   }, [location]);
 
   useEffect(() => {
-    if (localStorage.getItem("navbar") === "darkhome") {
-      setfooter({ f2: true });
-      setnavbar({ n3: true });
-      setbrdcum({ b2: true });
-    } else if (localStorage.getItem("navbar") === "home") {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
-      setbrdcum({ b1: true });
+    const navbarValue = localStorage.getItem("navbar");
+    if (navbarValue === "darkhome") {
+      setFooter({ f2: true });
+      setNavbar({ n3: true });
+      setBrdcum({ b2: true });
+    } else if (navbarValue === "home") {
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
+      setBrdcum({ b1: true });
     } else {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
     }
   }, []);
 
-  const [footer, setfooter] = useState({ f1: true });
-  const [navbar, setnavbar] = useState({ n1: true });
-  const [brdcum, setbrdcum] = useState({ n1: true });
-
   return (
     <>
       {homepage && <Navbar navbar={navbar} />}
@@ -65,19 +70,19 @@ const Routing = () => {
           path="/"
           element={
             <Home
-              setfooter={setfooter}
-              setnavbar={setnavbar}
-              setbrdcum={setbrdcum}
+              setfooter={setFooter}
+              setnavbar={setNavbar}
+              setbrdcum={setBrdcum}
             />
           }
         />
         <Route
           path="/about"
-          element={<AboutUs setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<AboutUs setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route
           path="/review"
-          element={<Review setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<Review setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route path="/contact" element={<Contact brdcum={brdcum} />} />
         <Route path="/faq" element={<Faq brdcum={brdcum} />} />
@@ -88,7 +93,6 @@ const Routing = () => {
         <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
         <Route path="/terms" element={<Terms brdcum={brdcum} />} />
         <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
-
       </Routes>
       {footerpage && <Footer footer={footer} />}
     </>
-- 
2.34.1