From a326e9700d554e7ea1fe9188c30b1e9b2ed89291 Mon Sep 17 00:00:00 2001
From: colStie <stiemsdev@gmail.com>
Date: Tue, 24 Dec 2024 16:29:49 +0100
Subject: [PATCH] update banner

---
 src/common/handleFullScreenBanner.js     | 51 ++++++++++++++++++++++++
 src/components/Home2023/Banner/index.jsx | 37 ++++++++---------
 src/components/HomeHero/index.jsx        |  2 +-
 3 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 src/common/handleFullScreenBanner.js

diff --git a/src/common/handleFullScreenBanner.js b/src/common/handleFullScreenBanner.js
new file mode 100644
index 0000000..5124c65
--- /dev/null
+++ b/src/common/handleFullScreenBanner.js
@@ -0,0 +1,51 @@
+const handleFullScreenBanner = () => {
+    function noScroll() {
+        window.scrollTo(0, 0);
+    }
+
+    const banner = document.getElementById('home--Banner');
+    if (banner) {
+        banner.style.position = 'fixed';
+        banner.style.top = '0';
+        banner.style.width = '100%';
+        banner.style.zIndex = '10';
+    }
+
+    window.addEventListener('scroll', () => {
+        const scrollPosition = window.scrollY;
+        const pageHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const scrollPercentage = (scrollPosition / pageHeight) * 100;
+
+        if (scrollPercentage >= 15) {
+            banner.style.display = 'none';
+        } else {
+            banner.style.display = 'block';
+        }
+    });
+
+};
+
+// const banner = document.getElementById('home--Banner');
+// const homeHero = document.getElementById('home--Hero');
+
+// if (banner && homeHero) {
+//     const observer = new IntersectionObserver(
+//         ([entry]) => {
+//             if (entry.isIntersecting) {
+//                 banner.style.position = 'fixed';
+//                 banner.style.top = '0';
+//                 banner.style.width = '100%';
+//                 banner.style.zIndex = '10';
+//                 banner.style.display = 'block';
+//             } else {
+//                 banner.style.display = 'none';
+//             }
+//         },
+//         { threshold: 0.1 }
+//     );
+
+//     observer.observe(homeHero);
+// }
+// };
+
+export default handleFullScreenBanner;
\ No newline at end of file
diff --git a/src/components/Home2023/Banner/index.jsx b/src/components/Home2023/Banner/index.jsx
index 7b95c14..413b19a 100644
--- a/src/components/Home2023/Banner/index.jsx
+++ b/src/components/Home2023/Banner/index.jsx
@@ -1,27 +1,28 @@
 import React from "react";
 import Split from "../../Split";
 import Link from 'next/link';
+import handleFullScreenBanner from "../../../common/handleFullScreenBanner";
 
-const Banner = () => {
+// const Banner = () => {
+const Banner = ({ theme, lr }) => {
+    React.useEffect(() => {
+        handleFullScreenBanner();
+    }, []);
     return (
-            <section id="home--Banner" className="section-2023 pt-40">
+            <section id="home--Banner" className="section-2023 pt-60">
                 <div className="container">
-                    {/* <div className="flex-box"> */}
-                        {/* <div className="flex-box__right__mw"> */}
-                            <div className="banner-container">
-                                <Link href="https://apps.apple.com/us/app/lto-universal-wallet/id6448051682" target="_blank">
-                                    <a>
-                                    <img className="banner-link" src="/img/home-2023/apple-store500x300.png" alt="Download on the App Store"/>
-                                    </a>
-                                </Link>
-                                <Link href="https://play.google.com/store/apps/details?id=com2.ltonetwork.universal" target="_blank">
-                                    <a>
-                                    <img className="banner-link" src="/img/home-2023/play-store500x300.png" alt="Download on the Play Store"/>
-                                    </a>
-                                </Link>
-                            </div>
-                        {/* </div> */}
-                    {/* </div> */}
+                    <div className="banner-container">
+                        <Link href="https://apps.apple.com/us/app/lto-universal-wallet/id6448051682" target="_blank">
+                            <a>
+                            <img className="banner-link" src="/img/home-2023/apple-store500x300.png" alt="Download on the App Store"/>
+                            </a>
+                        </Link>
+                        <Link href="https://play.google.com/store/apps/details?id=com2.ltonetwork.universal" target="_blank">
+                            <a>
+                            <img className="banner-link" src="/img/home-2023/play-store500x300.png" alt="Download on the Play Store"/>
+                            </a>
+                        </Link>
+                    </div>
                 </div>
             </section>
     );
diff --git a/src/components/HomeHero/index.jsx b/src/components/HomeHero/index.jsx
index a4506c2..070585b 100644
--- a/src/components/HomeHero/index.jsx
+++ b/src/components/HomeHero/index.jsx
@@ -139,7 +139,7 @@ class HomeHero extends React.Component {
 
     render() {
         return (
-            <div className="hero" onMouseMove={heroMouseMove} onTouchMove={heroMouseMove}>
+            <div id="home--Hero" className="hero" onMouseMove={heroMouseMove} onTouchMove={heroMouseMove}>
               <div className="hero__inner"> 
                 <div className="hero__image" data-x="0.05" data-y="0.05" data-scale="1.05"><img src="/img/hero/layer-sky.jpg"/></div>
                 <div className="hero__image hero__image--sun" data-x="0.065" data-y="0.065" data-scale="1.1"><img src="/img/hero/layer-sunNoSparkle.png"/></div>