button adjustments

changes for better view of buttons, fade out and bit more opacity
ltonetwork · Jan 29, 2025 · c873fd1 · c873fd1
1 parent e1f6a7c
commit c873fd1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 32 deletions.
diff --git a/public/css/dark.css b/public/css/dark.css
@@ -315,11 +315,47 @@ b, strong {
 }
 
 .hero__image--text h1 {
-  font-size: 115px;
+  font-size: 85px;
   line-height: 1;
   text-shadow: 0px 0px 5px rgba(255,255,255,0.5);
 }
 
+.hero__buttons {
+  margin-top: 20px; /* Space above the buttons */
+  display: flex; /* Align buttons in a row */
+  justify-content: center; /* Center the buttons horizontally */
+}
+
+.hero__button {
+  padding: 10px 20px; /* Padding inside the button */
+  margin: 0 10px; /* Space between buttons */
+  border: none; /* Remove default border */
+  border-radius: 5px; /* Rounded corners */
+  cursor: pointer; /* Pointer cursor on hover */
+  font-size: 16px; /* Font size */
+  transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
+}
+
+.hero__button--primary {
+  background-color: #0070f3; /* Primary button color */
+  color: white; /* Text color */
+}
+
+.hero__button--primary:hover {
+  background-color: #005bb5; /* Darker shade on hover */
+  transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+.hero__button--secondary {
+  background-color: #eaeaea; /* Secondary button color */
+  color: #333; /* Text color */
+}
+
+.hero__button--secondary:hover {
+  background-color: #d4d4d4; /* Darker shade on hover */
+  transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
 .hero__link {
   position: absolute;
   z-index: 4;
@@ -2813,7 +2849,7 @@ body {
   left: 0;
   width: 100%;
   z-index: 999999;
-  padding: 20px 0;
+  padding: 10px 0;
   color: #fff;
   -webkit-transition: all 0.7s;
   -o-transition: all 0.7s;
@@ -7072,7 +7108,9 @@ body {
 
 .banner-link{
   margin: 0 10px;
-  max-width: 200px; 
+  max-width: 180px; 
+  opacity: 0.9;
+  /* transition: opacity 1.3s ease;  */
 }
 
 #home--YourWalletIsYou {

diff --git a/src/common/handleFullScreenBanner.js b/src/common/handleFullScreenBanner.js
@@ -4,48 +4,36 @@ const handleFullScreenBanner = () => {
     }
 
     const banner = document.getElementById('home--Banner');
+
+
     if (banner) {
         banner.style.position = 'fixed';
         banner.style.top = '0';
         banner.style.width = '100%';
-        banner.style.zIndex = '10';
+        banner.style.zIndex = '100';
+        banner.style.transition = 'opacity 0.5s ease'
     }
 
+
     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';
+        if (scrollPercentage >= 8) {
+            banner.style.opacity = '0';
         } else {
+            banner.style.opacity = '1';
             banner.style.display = 'block';
         }
     });
 
-};
+    banner.addEventListener('transitionend', () => {
+        if (banner.style.opacity === '0') {
+            banner.style.display = 'none';
+        }
+    });
 
-// 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;
diff --git a/src/components/Home2023/Banner/index.jsx b/src/components/Home2023/Banner/index.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Split from "../../Split";
 import Link from 'next/link';
 import handleFullScreenBanner from "../../../common/handleFullScreenBanner";
 
@@ -9,7 +8,7 @@ const Banner = ({ theme, lr }) => {
         handleFullScreenBanner();
     }, []);
     return (
-            <section id="home--Banner" className="section-2023 pt-60">
+            <section id="home--Banner" className="section-2023 pt-45">
                 <div className="container">
                     <div className="banner-container">
                         <Link href="https://apps.apple.com/us/app/lto-universal-wallet/id6448051682" target="_blank">

diff --git a/src/components/HomeHero/index.jsx b/src/components/HomeHero/index.jsx
@@ -146,7 +146,12 @@ class HomeHero extends React.Component {
                 <div className="hero__image hero__image--sparkle" data-x="0.065" data-y="0.065" data-scale="1.1"><img src="/img/hero/layer-sunSparkle.png"/></div>
                 <div className="hero__image" data-x="0.09" data-y="0.09" data-scale="1.15"><img src="/img/hero/layer-smallField.png"/></div>
                 <div className="hero__image" data-x="0.13" data-y="0.13" data-scale="1.15"><img src="/img/hero/layer-bigField.png"/></div>
-                <div className="hero__image hero__image--text" data-x="0.15" data-y="1.5" data-scale="1"><h1 className="hero__title">L<br/>T<br/>O</h1></div>
+                <div className="hero__image hero__image--text" data-x="0.15" data-y="1.5" data-scale="1"><h1 className="hero__title">L<br/>T<br/>O</h1>
+                  {/* <div className="hero__buttons">
+                      <button className="hero__button hero__button--primary">Button 1</button>
+                      <button className="hero__button hero__button--secondary">Button 2</button>
+                  </div> */}
+                </div>
                 <div className="hero__image hero__image--leaf7 nudge-left" data-x="0.17" data-y="0.17" data-scale="1.19"><img src="/img/hero/layer-leaf7Trans.png"/></div>
                 <div className="hero__image hero__image--leaf6 nudge-left" data-x="0.22" data-y="0.22" data-scale="1.2"><img src="/img/hero/layer-leaf6Trans.png"/></div>
                 <div className="hero__image hero__image--leaf5 nudge-left stay-top" data-x="0.25" data-y="0.25" data-scale="1.2"><img src="/img/hero/layer-leaf5.png"/></div>