new version

Author: SamGu-NRX

src/App.jsx

@@ -103,36 +103,43 @@ const App = () => {
 export default App;
 
 */
-
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import Routing from './Routing';
 import LocomotiveScroll from 'locomotive-scroll';
 import 'locomotive-scroll/dist/locomotive-scroll.css';
-import './styles/Aos.css';
-import './styles/Header.css';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
 
 import Header from './components/Header';
+import Footer from './components/Footer';
 import getMode from './utils/getMode';
+import './styles/Header.css';
 
 const App = () => {
   const [showProgressBar, setShowProgressBar] = useState(false);
 
   useEffect(() => {
     const scrollEl = document.querySelector('#main-container');
     const headerEl = document.querySelector('header');
+    const footerEl = document.querySelector('footer');
 
     const scroll = new LocomotiveScroll({
       el: scrollEl,
       smooth: true,
     });
 
+    AOS.init({
+      duration: 1000,
+      once: true,
+      easing: 'ease-in-out',
+    });
+
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           entry.target.classList.add('aos-animate');
-        } else {
-          entry.target.classList.remove('aos-animate');
+          observer.unobserve(entry.target);
         }
       });
     });
@@ -163,10 +170,30 @@ const App = () => {
       if (headerEl) {
         if (scrollPosition > windowHeight / 2.5) {
           headerEl.style.opacity = '1';
+          headerEl.classList.add('visible');
         } else {
           headerEl.style.opacity = '0';
+          headerEl.classList.remove('visible');
+        }
+      }
+
+      if (footerEl) {
+        if (scrollPosition + windowHeight >= totalHeight) {
+          footerEl.style.opacity = '1';
+          footerEl.classList.add('visible');
+        } else {
+          footerEl.style.opacity = '0';
+          footerEl.classList.remove('visible');
         }
       }
+
+      // Reset animations when reaching the top
+      if (scrollPosition === 0) {
+        document.querySelectorAll('[data-aos]').forEach((aosElem) => {
+          aosElem.classList.remove('aos-animate');
+          observer.observe(aosElem);
+        });
+      }
     };
 
     scroll.on('scroll', handleScroll);
@@ -182,8 +209,7 @@ const App = () => {
     <BrowserRouter basename={process.env.PUBLIC_URL}>
       <>
         {showProgressBar && (
-          <div
-            id="progress-bar"
+          <div id="progress-bar"
             className={(getMode() === "dark") ? "scroll-watcher-dark" : "scroll-watcher-light"}
             style={{ width: '0%' }}
           ></div>
@@ -193,11 +219,11 @@ const App = () => {
           <main id="main-container" data-scroll-container>
             <Routing />
           </main>
+          <Footer />
         </div>
       </>
     </BrowserRouter>
   );
 };
 
 export default App;
-

src/Routing.jsx

@@ -42,14 +42,15 @@ import Home from './pages/Home';
 import Syllabus from './pages/Syllabus';
 import Staff from './pages/Staff';
 import Inquiry from './pages/Inquiry';
-import AOS from 'locomotive-aos';
+import 'aos/dist/aos.css';
+import Aos from 'aos';
 import Popup from './components/Popup';
 
 const Routing = () => {
   useEffect(() => {
-    AOS.init({
+    Aos.init({
       easing: 'ease-in-out',
-      duration: 1300,
+      duration: 1000,
       once: true,
     });
   }, []);
@@ -69,3 +70,4 @@ const Routing = () => {
 };
 
 export default Routing;
+

src/components/Footer.jsx

@@ -4,7 +4,7 @@ const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-gray-800 text-white text-center p-3 mt-8 text-sm"
+    <footer className="bg-gray-800 text-white text-center p-3 mt-8 text-sm hidden"
     style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
       <p>&copy; {currentYear} LuminAI Innovate Scholars. All rights reserved.</p>
     </footer>

src/components/Header.jsx

@@ -6,7 +6,7 @@ import getMode from '../utils/getMode';
 
 const Header = () => (
   <div>
-    <header className={"bg-blue-600 text-white p-4" + (getMode() === "dark") ? "header-dark" : "header-light"} 
+    <header className={"bg-blue-600 text-white p-4 hidden" + (getMode() === "dark") ? "header-dark" : "header-light"} 
       style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
       <div className="container mx-auto flex justify-between items-center">
         <h1 className="text-2xl">LuminAI Innovate Scholars</h1>

src/styles/App.css

@@ -41,6 +41,17 @@ main {
 }
 
 
+.hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+
 .flex-container {
   display: flex;
   flex-direction: column;