RealEskalate · surafel58 · Sep 4, 2023 · Sep 4, 2023 · Sep 4, 2023 · Sep 4, 2023
@@ -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>

@@ -21,10 +21,11 @@ const LogIn: React.FC = () => {
     login({ email, password })
       .unwrap()
       .then((response: any) => {
+        if (typeof window !== 'undefined'){
         localStorage.setItem("user", JSON.stringify(response));
         setisLoggedIN(true);
         dipatch(setLogInStatus());
-        router.push("/");
+        router.push("/");}
       })
       .catch((err) => {
         seterrorMessage(err.data.message);

@@ -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 />

@@ -19,6 +19,7 @@ const PersonalInformation = () => {
   const [preveImageLink, setPrevImageLink] = useState("");
 
   useEffect(() => {
+    if (typeof window !== 'undefined'){
     const userString = localStorage.getItem("user");
     const user: authTypes | null = userString ? JSON.parse(userString) : null;
     if (user) {
@@ -32,7 +33,7 @@ const PersonalInformation = () => {
     const updated_user: any | null = updated_userString
       ? JSON.parse(updated_userString)
       : null;
-    setPrevImageLink(updated_user?.image || "");
+    setPrevImageLink(updated_user?.image || "");}
   }, []);
 
   const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,12 +68,13 @@ const PersonalInformation = () => {
     try {
       const response:any = await updateProfile(formData);
       if (response) {
+        if (typeof window !== 'undefined'){
         setIssuccessfull(true);
         localStorage.setItem(
           "updated-user",
           JSON.stringify(response?.data?.body)
         );
-        router.push("/");
+        router.push("/");}
       } else {
         handleDeleteImage();
         setImage(null);

@@ -19,9 +19,10 @@ const Register: React.FC = () => {
     register({ name, email, password })
       .unwrap()
       .then((response) => {
+        if (typeof window !== 'undefined'){
         localStorage.setItem("user", JSON.stringify(response));
         router.push("/login");
-        setisLoggedIN(true);
+        setisLoggedIN(true);}
       })
       .catch((err:any) => {
         seterrorMessage(err?.data?.message);

@@ -19,7 +19,6 @@ const Teams: React.FC = () => {
   }
 
   if (teams) {
-
     const itemsPerPage = 6;
     const indexOfLast = currentPage * itemsPerPage;
     const indexOfFirst = indexOfLast - itemsPerPage;
@@ -39,44 +38,52 @@ const Teams: React.FC = () => {
         {/* <div className="flex flex-row gap-4 flex-wrap justify-center "> */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
           {currentTeam.map((team) => (
-          <div className="flex flex-col gap-6 shadow-lg items-center border-2 p-6">
-            <Image src="/assets/Teams_user_profile.png" width={100} height={100} alt="teams" />
-            <div className="flex flex-col gap-2 justify-center text-center">
-              <p className="font-bold text-2xl">{team.name}</p>
-              <p className="font-semibold text-lg">{team.department}</p>
-            </div>
-            <p>{team.bio}</p>
-            <hr className="w-full" />
-            <div className="flex justify-between w-full">
-              <a href={`https://${team.socialMedia.facebook}`}>
-                <Image
-                  src="/assets/facebook.svg"
-                  width={30}
-                  height={30}
-                  alt="social media"
-                />
-              </a>
+            <div
+              className="flex flex-col gap-6 shadow-lg items-center border-2 p-6"
+              key={team._id}
+            >
+              <Image
+                src="/assets/Teams_user_profile.png"
+                width={100}
+                height={100}
+                alt="teams"
+              />
+              <div className="flex flex-col gap-2 justify-center text-center">
+                <p className="font-bold text-2xl">{team.name}</p>
+                <p className="font-semibold text-lg">{team.department}</p>
+              </div>
+              <p>{team.bio}</p>
+              <hr className="w-full" />
+              <div className="flex justify-between w-full">
+                <a href={`https://${team.socialMedia.facebook}`}>
+                  <Image
+                    src="/assets/facebook.svg"
+                    width={30}
+                    height={30}
+                    alt="social media"
+                  />
+                </a>
 
-              <a href={`https://${team.socialMedia.linkedin}`}>
-                <Image
-                  src="/assets/linkedin.svg"
-                  width={30}
-                  height={30}
-                  alt="social media"
-                />
-              </a>
+                <a href={`https://${team.socialMedia.linkedin}`}>
+                  <Image
+                    src="/assets/linkedin.svg"
+                    width={30}
+                    height={30}
+                    alt="social media"
+                  />
+                </a>
 
-              <a href = {`https://${team.socialMedia.instagram}`}>
-                <Image
-                  src="/assets/instagram.svg"
-                  width={30}
-                  height={30}
-                  alt="social media"
-                />
-              </a>
+                <a href={`https://${team.socialMedia.instagram}`}>
+                  <Image
+                    src="/assets/instagram.svg"
+                    width={30}
+                    height={30}
+                    alt="social media"
+                  />
+                </a>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
         </div>
 
         <div className="mb-16 -mt-16 flex justify-center">

@@ -10,7 +10,7 @@ const HeadLineSection: React.FC = () => {
 
         <p className="text-lg nav_bar_screen:text-xl text-left leading-relaxed">
           A2SV is a social enterprise that enables high-potential university
-          students to create digital solutions to Africa's most pressing
+          students to create digital solutions to Africa&apos;s most pressing
           problems.
         </p>
 
@@ -20,7 +20,7 @@ const HeadLineSection: React.FC = () => {
 
         <p className="italic font-light text-sm nav_bar_screen:text-lg">
           A2SV is a social enterprise that enables high-potential university
-          students to create digital solutions to Africa's most pressing
+          students to create digital solutions to Africa&apos;s most pressing
           problems.
         </p>
       </div>

@@ -19,12 +19,12 @@ const ProblemSection: React.FC = () => {
               />
             </div>
             <p className="mt-5 text-light_gray_text_color font-Nunito">
-              Africa's future depends on innovation. Transformative technologies
-              can drive rapid economic growth and lift millions of people out of
-              poverty. However, university computer science education is
-              misaligned with global market needs and fails to incorporate
-              practice-based learning, leaving students unable to apply their
-              skills in real-world contexts.
+              Africa&apos;s future depends on innovation. Transformative
+              technologies can drive rapid economic growth and lift millions of
+              people out of poverty. However, university computer science
+              education is misaligned with global market needs and fails to
+              incorporate practice-based learning, leaving students unable to
+              apply their skills in real-world contexts.
             </p>
           </div>
 
@@ -38,12 +38,12 @@ const ProblemSection: React.FC = () => {
               />
             </div>
             <p className="mt-5 text-light_gray_text_color font-Nunito">
-              Africa's future depends on innovation. Transformative technologies
-              can drive rapid economic growth and lift millions of people out of
-              poverty. However, university computer science education is
-              misaligned with global market needs and fails to incorporate
-              practice-based learning, leaving students unable to apply their
-              skills in real-world contexts.
+              Africa&apos;s future depends on innovation. Transformative
+              technologies can drive rapid economic growth and lift millions of
+              people out of poverty. However, university computer science
+              education is misaligned with global market needs and fails to
+              incorporate practice-based learning, leaving students unable to
+              apply their skills in real-world contexts.
             </p>
           </div>
         </div>

@@ -9,8 +9,8 @@ const SessionSection: React.FC = () => {
       </h1>
 
       <div className="grid md:grid-cols-2 lg:grid-cols-3 font-Poppins gap-6">
-        {aboutUs.map((data) => (
-          <div className="flex flex-col gap-4 shadow-lg items-start border-2 p-6">
+        {aboutUs.map((data, i) => (
+          <div className="flex flex-col gap-4 shadow-lg items-start border-2 p-6" key={i}>
             <div className="about-us-avatar rounded-full p-4">
               <Image src={data.imageUrl} width={40} height={40} alt="icons" />
             </div>

@@ -1,10 +1,15 @@
 "use client";
 
 import React from "react";
-import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import { tags } from "@/data/blog/blog";
 import Chip from "./Chip";
+import dynamic from "next/dynamic";
+
+// Dynamically import React Quill
+const ReactQuill = dynamic(() => import("react-quill"), {
+  ssr: false, // Set to false to disable server-side rendering
+});
 
 interface Props {
   title: string;

@@ -3,7 +3,9 @@ import Link from 'next/link'
 import React from 'react'
 
 const SearchBar = () => {
-    const userString = localStorage.getItem("user");
+    let userString = null;
+    if (typeof window !== 'undefined'){
+    userString = localStorage.getItem("user");}
     const user: authTypes | null = userString ? JSON.parse(userString) : null;
     const token = user?.token
 

@@ -15,9 +15,11 @@ const Header: React.FC = () => {
   const loginStatu = useSelector((state: any) => state.LogInState.status);
 
   const handleLogout = () => {
-    localStorage.clear();
-    dispath(removeLogInStatus());
-    window.location.href = "/";
+    if (typeof window !== "undefined") {
+      localStorage.clear();
+      dispath(removeLogInStatus());
+      window.location.href = "/";
+    }
   };
 
   // Function to toggle the mobile menu state
@@ -116,8 +118,12 @@ const Header: React.FC = () => {
 export default Header;
 
 export function checkLocalStorage(): boolean {
-  const userString = window.localStorage.getItem("user");
-  const user: authTypes | null = userString ? JSON.parse(userString) : null;
+  let userString = null;
+  let user: authTypes | null = null;
+  if (typeof window !== "undefined") {
+    userString = window.localStorage.getItem("user");
+    user = userString ? JSON.parse(userString) : null;
+  }
   if (user) return true;
   else return false;
 }
@@ -4,8 +4,11 @@ import Image from "next/image";
 const ProgramSection: React.FC = () => {
   return (
     <div className="training_programs flex flex-col gap-36">
-      {training_programs.map((training_program) => (
-        <div className="flex flex-col justify-center min-[1265px]:flex-row min-[1265px]:justify-between items-center gap-9">
+      {training_programs.map((training_program, i) => (
+        <div
+          className="flex flex-col justify-center min-[1265px]:flex-row min-[1265px]:justify-between items-center gap-9"
+          key={i}
+        >
           <Image
             className={`${
               training_program.isOrderLast ? "min-[1265px]:order-last" : ""

@@ -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>
+  );
+};
@@ -19,17 +19,17 @@ const StorySection: React.FC = () => {
 
           <p className="text-lg nav_bar_screen:text-2xl nav_bar_screen:w-3/4">
             “ When I joined A2SV in 2019, I found the concept of data structures
-            and algorithms quite challenging. A2SV's smooth learning process and
-            dedicated team molded me to see the peak of my abilities. Through
-            A2SV's effective education and continual support, I passed Google's
-            internship interviews and attended a summer internship at Google in
-            Amsterdam. However, the A2SV program and training is beyond
-            technical education and interview preparation. As an A2SVian, I also
-            learned the values of putting humanity first, giving back to our
-            community, and utilizing teamwork with my colleagues, which I can
-            now consider my big family. After completing three remarkable months
-            at Google, I was offered a full-time position at Google's London
-            office for 2022. “
+            and algorithms quite challenging. A2SV&apos;s smooth learning
+            process and dedicated team molded me to see the peak of my
+            abilities. Through A2SV&apos;s effective education and continual
+            support, I passed Google&apos;s internship interviews and attended a
+            summer internship at Google in Amsterdam. However, the A2SV program
+            and training is beyond technical education and interview
+            preparation. As an A2SVian, I also learned the values of putting
+            humanity first, giving back to our community, and utilizing teamwork
+            with my colleagues, which I can now consider my big family. After
+            completing three remarkable months at Google, I was offered a
+            full-time position at Google&apos;s London office for 2022. “
           </p>
 
           <button className="bg-primary rounded-lg text-white py-5 px-11">