added footer

G7DAO · Jan 10, 2025 · 8af3242 · 8af3242
1 parent a5f61b0
commit 8af3242
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 22 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/landing/Landing.module.css b/webapps/world-builder-dashboard/src/components/landing/Landing.module.css
@@ -44,11 +44,21 @@ body {
   align-self: stretch;
 }
 
+.navbarStickyContainer {
+  position: sticky;
+  z-index: 1005;
+  top: 24px;
+  padding: 12px 12px 12px 16px;
+  align-items: flex-start;
+  border-radius: 20px;
+  border: 1px solid var(--gray-500, #737373);
+  background: hsl(0, 0%, 3%);
+}
+
 .navbarSticky {
   position: sticky;
   z-index: 1005;
   top: 0px;
-  padding-top: 24px;
   padding: 12px 12px 12px 16px;
   align-items: flex-start;
   border-radius: 20px;

diff --git a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css
@@ -6,11 +6,20 @@ body {
   -webkit-scrollbar: none;
 }
 
+
+.sticky {
+  position: sticky;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+}
+
 .layout {
   display: flex;
   width: 100vw;
-  height: 100svh;
-  padding: 24px;
+  height: calc(100svh);
+  padding: 24px 24px 0px 24px;
   flex-direction: column;
   align-items: center;
   gap: 16px;

diff --git a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx
@@ -1,5 +1,5 @@
 // LandingPage.tsx
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styles from './LandingPage.module.css'
 import { useMediaQuery } from 'summon-ui/mantine'
@@ -19,18 +19,35 @@ const LandingPage: React.FC = () => {
   const [navbarOpen, setNavBarOpen] = useState<boolean>(false)
   const smallView = useMediaQuery('(max-width: 750px)')
   const isLargeView = useMediaQuery('(min-width: 1440px)')
-
+  const mainLayoutRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
   const [backgroundStyle, setBackgroundStyle] = useState<string | undefined>();
 
   useEffect(() => {
-    const img = new Image();
-    img.src = backgroundImage as string;
+    const img = new Image()
+    img.src = backgroundImage as string
 
     img.onload = () => {
-      setBackgroundStyle(`#1b1b1b url(${backgroundImage}) 50% / cover no-repeat`);
+      setBackgroundStyle(`#1b1b1b url(${backgroundImage}) 50% / cover no-repeat`)
+    }
+  }, [])
+
+  useEffect(() => {
+    const element = mainLayoutRef.current;
+    if (!element) return;
+
+    const handleScroll = () => {
+      const isAtBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
+      if (isAtBottom) {
+        footerRef.current?.scrollIntoView({ behavior: 'smooth' });
+      }
     };
+
+    element.addEventListener('scroll', handleScroll);
+    return () => element.removeEventListener('scroll', handleScroll);
   }, []);
 
+
   const startBuilding = () => {
     setSelectedNetworkType('Testnet')
     navigate('/faucet')
@@ -75,27 +92,28 @@ const LandingPage: React.FC = () => {
               <Navbar
                 navbarOpen={navbarOpen}
                 smallView={!!smallView}
-                  setIsNavbarOpen={setNavBarOpen}
-                  startBuilding={startBuilding}
-                  navigateLink={navigateLink}
-                  isContainer={false}
-                />
-                <div ref={mainLayoutRef} className={`${styles.mainLayout} ${navbarOpen ? styles.layoutDarkened : ''}`}
-                  style={backgroundStyle ? { background: backgroundStyle } : undefined}>
-                  <MainSection smallView={!!smallView} startBuilding={startBuilding} />
-                  <BenefitsSection />
+                setIsNavbarOpen={setNavBarOpen}
+                startBuilding={startBuilding}
+                navigateLink={navigateLink}
+                isContainer={false}
+              />
+              <div ref={mainLayoutRef} className={`${styles.mainLayout} ${navbarOpen ? styles.layoutDarkened : ''}`}
+                style={backgroundStyle ? { background: backgroundStyle } : undefined}>
+                <MainSection smallView={!!smallView} startBuilding={startBuilding} />
+                <BenefitsSection />
                 <AlliesSection />
                 <NetworkEssentials smallView={!!smallView} startBuilding={startBuilding} />
               </div>
               {smallView && (
                 <div className={styles.startBuildingCTA} onClick={startBuilding}>
-                    Start building
-                  </div>
-                )}
-              </div>
+                  Start building
+                </div>
+              )}
             </div>
           </div>
-          <Footer />
+          <div ref={footerRef}  >
+            <Footer />
+          </div>
         </div>
       </>
       )}