fix scrolling issues

aait/web/group-3/starter_project_group3/app/layout.tsx

@@ -5,6 +5,7 @@ import Header from "@/components/header/Header";
 import Footer from "@/components/footer/Footer";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
+import { ScrollToTop } from "@/components/home/ScrollToTop";
 
 export const metadata: Metadata = {
   title: "A2SV",
@@ -33,6 +34,7 @@ export default function RootLayout({
             pauseOnHover
           />
         </ReduxProvider>
+        <ScrollToTop />
         <Footer />
       </body>
     </html>

aait/web/group-3/starter_project_group3/app/page.tsx

@@ -1,13 +1,14 @@
 import HeadLineSection from "@/components/home/HeadLineSection";
 import ProgramSection from "@/components/home/ProgramSection";
 import RateSection from "@/components/home/RateSection";
+import { ScrollToTop } from "@/components/home/ScrollToTop";
 import StorySection from "@/components/home/StorySection";
 import TeamSection from "@/components/home/TeamSection";
 import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center mx-8 md:mx-20 gap-56 ">
+    <div className="flex flex-col items-center mx-8 md:mx-20 gap-56 animate-fade-up">
       <HeadLineSection />
       <TeamSection />
       <RateSection />

aait/web/group-3/starter_project_group3/components/home/ScrollToTop.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { useEffect, useState } from "react";
+import { BiArrowFromBottom } from "react-icons/bi";
+
+export const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div className="fixed bottom-4 right-4">
+      <button
+        type="button"
+        onClick={scrollToTop}
+        className={`
+          ${isVisible ? "opacity-100" : "opacity-0"}
+          bg-primary hover:bg-white hover:text-primary focus:ring-primary inline-flex items-center rounded-full p-4 text-white shadow-sm transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2
+        `}
+      >
+        <BiArrowFromBottom className="h-6 w-6" aria-hidden="true" />
+      </button>
+    </div>
+  );
+};

aait/web/group-3/starter_project_group3/components/home/TeamSection.tsx

@@ -1,38 +1,38 @@
 import Image from "next/image";
 
-const TeamSection : React.FC = () => {
-    return ( 
-        <div className="text-center flex flex-col items-center gap-10">
-        <h1 className="capitalize text-2xl nav_bar_screen:text-3xl font-semibold text-black_text_color leading-relaxed min-[1100px]:w-1/6">
-          Lets build a better tomorrow
-        </h1>
-
-        <p className="text-light_gray_text_color font-normal text-lg nav_bar_screen:text-xl">
-          A2SV upskills high-potential university students, connects them with
-          opportunities at top tech companies around the world, and creates
-          digital solutions to urgent problems in their home countries. The
-          program is free for students, making the opportunity available for
-          youth who have talent but lack the means to use it.
-        </p>
-        <button className="flex gap-3 justify-center items-center px-5 py-3 rounded-md bg-primary text-white font-medium">
-          <Image
-            src="/assets/landing_page_message.svg"
-            width={30}
-            height={30}
-            alt="arrow"
-          />
-          Connect to our team
-        </button>
+const TeamSection: React.FC = () => {
+  return (
+    <div className="text-center flex flex-col items-center gap-10">
+      <h1 className="capitalize text-2xl nav_bar_screen:text-3xl font-semibold text-black_text_color leading-relaxed min-[1100px]:w-1/6">
+        Lets build a better tomorrow
+      </h1>
 
+      <p className="text-light_gray_text_color font-normal text-lg nav_bar_screen:text-xl">
+        A2SV upskills high-potential university students, connects them with
+        opportunities at top tech companies around the world, and creates
+        digital solutions to urgent problems in their home countries. The
+        program is free for students, making the opportunity available for youth
+        who have talent but lack the means to use it.
+      </p>
+      <button className="flex gap-3 justify-center items-center px-5 py-3 rounded-md bg-primary text-white font-medium">
         <Image
-          objectFit="cover"
-          src="/assets/landing_page_people.png"
-          alt="people"
-          width={1500}
-          height={800}
+          src="/assets/landing_page_message.svg"
+          width={30}
+          height={30}
+          alt="arrow"
         />
-      </div>
-    );
-}
-
-export default TeamSection;
+        Connect to our team
+      </button>
+
+      <Image
+        objectFit="cover"
+        src="/assets/landing_page_people.jpg"
+        alt="people"
+        width={1500}
+        height={800}
+      />
+    </div>
+  );
+};
+
+export default TeamSection;

aait/web/group-3/starter_project_group3/package.json

@@ -21,11 +21,14 @@
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.10.1",
     "react-quill": "^2.0.0",
     "react-redux": "^8.1.2",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "tailwindcss": "3.3.3",
+    "tailwindcss-animation": "^1.0.1",
+    "taos": "^1.0.5",
     "typescript": "5.1.6"
   },
   "devDependencies": {

aait/web/group-3/starter_project_group3/tailwind.config.ts

@@ -41,7 +41,7 @@ const config: Config = {
     },
   },
   plugins: [
-    require('tailwindcss-animated')
+    require('tailwindcss-animated'),
   ],
 };
 export default config;