Refactor: moved said logic into custom hooks

app/(root)/(home)/page.jsx

@@ -1,6 +1,5 @@
 "use client";
 import React from 'react'
-import { useRef } from 'react'
 import herotext from '@/content/homehero.json'
 import whoweare from '@/content/whoweare.json'
 import Contact from '../contact/page';
@@ -14,19 +13,18 @@ import companies_data from "@/content/companies";
 import summerschools_data from "@/content/summerschools";
 import InfiniteSlider from '@/components/achievements/infiniteSlider';
 import ScrollDownButton from '@/components/shared/ScrollDown';
+import useScrollRef from '@/lib/hooks/useScrollRef';
+import useAnimationVariants from '@/lib/hooks/useAnimationVariants';
 
 const page = () => {
   const baseText = herotext.hero;
-  const scrollRef = useRef(null);
-
-  const clubLife1Varients = {
-    initial: { opacity: 0, x: 50 },
-    animate: { opacity: 1, x: 0 }
-  }
-  const clubLife2Varients = {
-    initial: { opacity: 0, x: -50 },
-    animate: { opacity: 1, x: 0 }
-  }
+  const { scrollRef } = useScrollRef();
+  const { 
+    clubLife1Variants: clubLife1Varients,
+    clubLife2Variants: clubLife2Varients,
+    imageVariants: imageVarients,
+    textAnimationVariants
+  } = useAnimationVariants();
 
   const companies_slices = [
     { data: companies_data, direction: true },
@@ -36,28 +34,14 @@ const page = () => {
     { data: summerschools_data, direction: false },
   ];
 
-  const imageVarients={
-    initial: { opacity: 0, x: -50 },
-    animate: { opacity: 1, x: 0 }
-  }
-
   return (
     <div className="flex-col flex-center justify-center overflow-clip items-center">
       <div className="max-sm:py-8 md:text-left text-center max-md:justify-center md:py-32 py-72 md:h-screen mx-auto max-w-screen-2xl px-6 xs:px-8 sm:px-16 flex items-center">
         <h1 className="text-7xl max-md-custom:text-5xl max-sm:text-3xl tracking-wide leading-[110px] md:text-left">
           {baseText.split(" ").map((word, index) => (
             <motion.span
               key={index}
-              variants={{
-                initial: {
-                  opacity: 0,
-                  y: 20,
-                },
-                animate: {
-                  opacity: 1,
-                  y: 0,
-                },
-              }}
+              variants={textAnimationVariants}
               initial="initial"
               whileInView="animate"
               viewport={{ once: true, }}

app/(root)/about/page.jsx

@@ -1,15 +1,15 @@
 "use client";
 import React from "react";
 import Hero from "@/components/about/Hero";
-import { useRef } from "react";
 import OurMission from "@/components/about/OurMission";
 import Modus from "@/components/about/Modus";
 import Contact from "../contact/page";
 import { motion } from 'framer-motion'
 import ScrollDownButton from "@/components/shared/ScrollDown";
+import useScrollRef from '@/lib/hooks/useScrollRef';
 
 const About = () => {
-  const scrollRef = useRef(null);
+  const { scrollRef } = useScrollRef();
   const baseText = "ABOUT";
 
   return (

app/(root)/achievements/page.jsx

@@ -1,17 +1,17 @@
 "use client";
 import React from "react";
-import { useRef } from "react";
 import { motion } from "framer-motion";
 import GSOCComponent from "@/components/achievements/gsocComponent/gsocComponent";
 import HackathonsComponent from "@/components/achievements/hackathonsComponent/hackathonsComponent";
 import TalksComponent from "@/components/achievements/talks/talksComponent"
 import Contact from "../contact/page";
 import ScrollDownButton from "@/components/shared/ScrollDown";
 import OpenSourceComponent from "@/components/achievements/openSourceComponent/openSourceComponent";
+import useScrollRef from '@/lib/hooks/useScrollRef';
 
 const page = () => {
   const baseText = "ACHIEVEMENTS";
-  const scrollRef = useRef(null);
+  const { scrollRef } = useScrollRef();
 
   return (
     <div className="overflow-hidden">

app/(root)/clublife/page.jsx

@@ -1,25 +1,24 @@
 "use client";
+
 import React from "react";
-import { useRef } from "react";
-import data from "@/content/clublife.json";
 import Title from "../../(root)/../../components/ui/title";
 import TaskForcesComponent from "@/components/clublife/taskForcesComponent";
 import ActivitiesComponent from "@/components/clublife/activitiesComponent";
 import Contact from "../contact/page";
 import { motion } from "framer-motion";
 import ScrollDownButton from "@/components/shared/ScrollDown";
+import useScrollRef from '@/lib/hooks/useScrollRef';
+import useAnimationVariants from '@/lib/hooks/useAnimationVariants';
+import clubLifeData from '@/content/clublife.json';
 
-const page = () => {
-  const scrollRef = useRef(null);
+const Page = () => {
+  const { scrollRef } = useScrollRef();
+  const { 
+    slideUpVariant: clubLife1Varients, 
+    slideInLeftVariant: clubLife2Varients,
+    textAnimationVariants
+  } = useAnimationVariants();
   const baseText = "LIFE IN THE CLUB";
-  const clubLife1Varients = {
-    initial: { opacity: 0, y: 50 },
-    animate: { opacity: 1, y: 0 },
-  };
-  const clubLife2Varients = {
-    initial: { opacity: 0, x: -50 },
-    animate: { opacity: 1, x: 0 },
-  };
 
   return (
     <>
@@ -29,16 +28,7 @@ const page = () => {
             {baseText.split(" ").map((word, index) => (
               <motion.span
                 key={index}
-                variants={{
-                  initial: {
-                    opacity: 0,
-                    y: 20,
-                  },
-                  animate: {
-                    opacity: 1,
-                    y: 0,
-                  },
-                }}
+                variants={textAnimationVariants}
                 initial="initial"
                 whileInView="animate"
                 viewport={{ once: true }}
@@ -66,7 +56,7 @@ const page = () => {
               whileInView="animate"
               viewport={{ once: true }}
             >
-              <Title title={data.fosslab.title} />
+              <Title title={clubLifeData.fosslab.title} />
             </motion.div>
 
             <motion.div
@@ -78,7 +68,7 @@ const page = () => {
               viewport={{ once: true }}
             >
               <p className="h-full flex justify-center items-center text-white md:text-2xl p-5 text-justify">
-                {data.fosslab.description}
+                {clubLifeData.fosslab.description}
               </p>
             </motion.div>
             <motion.img
@@ -101,15 +91,15 @@ const page = () => {
             />
           </div>
         </div>  
-        </div>
-        {/* taskforces */}
-        <TaskForcesComponent />
-        {/* activities */}
-        <ActivitiesComponent />
-        {/* Contact Us */ } 
+      </div>
+      {/* taskforces */}
+      <TaskForcesComponent />
+      {/* activities */}
+      <ActivitiesComponent />
+      {/* Contact Us */ } 
       <div className='pt-5 md:pt-40'><Contact /></div>     
     </>
   );
 };
 
-export default page;
+export default Page;

app/(root)/gallery/page.jsx

@@ -1,18 +1,18 @@
 "use client";
 import React from "react";
-import { useRef } from "react";
 import { useRouter } from "next/navigation";
 import Component1 from "@/components/gallery/Component1";
 import Component2 from "@/components/gallery/Component2";
 import Component3 from "@/components/gallery/Component3";
 import Contact from "../contact/page";
 import { motion } from "framer-motion";
 import ScrollDownButton from "@/components/shared/ScrollDown";
+import useScrollRef from '@/lib/hooks/useScrollRef';
 
 const Gallery = () => {
   const baseText = "GALLERY";
   const router = useRouter();
-  const scrollRef = useRef(null);
+  const { scrollRef } = useScrollRef();
 
   return (
     <>

app/(root)/story/page.jsx

@@ -1,17 +1,17 @@
 "use client";
 import React from "react";
-import { useRef } from "react";
 import { useRouter } from "next/navigation";
 import Component1 from "@/components/story/Component1";
 import Component2 from "@/components/story/Component2";
 import Component3 from "@/components/story/Component3";
 import { motion } from "framer-motion";
 import ScrollDownButton from "@/components/shared/ScrollDown";
+import useScrollRef from '@/lib/hooks/useScrollRef';
 
 const OurStory = () => {
   const baseText = "OUR STORY";
   const router = useRouter();
-  const scrollRef = useRef(null);
+  const { scrollRef } = useScrollRef();
 
   return (
     <>

app/(root)/team/page.jsx

@@ -1,19 +1,17 @@
 "use client";
 import React from "react";
-import { useRef } from "react";
 import TeamHero from "@/components/team/teamHero";
 import MembersAndAlumni from "@/components/team/membersAndAlumni";
 import { motion } from 'framer-motion'
 import Contact from "../contact/page";
 import ScrollDownButton from "@/components/shared/ScrollDown";
+import useScrollRef from '@/lib/hooks/useScrollRef';
+import useAnimationVariants from '@/lib/hooks/useAnimationVariants';
 
 const page = () => {
   const baseText = "MEET THE TEAM";
-  const scrollRef = useRef(null);
-  const imgVariants = {
-    initial: { opacity: 0, x: -50 },
-    animate: { opacity: 1, x: 0 }
-  }
+  const { scrollRef } = useScrollRef();
+  const { imageVariants: imgVariants, textAnimationVariants } = useAnimationVariants();
   return (
     <>
       <div className="flex-col flex-center justify-center items-center">
@@ -22,16 +20,7 @@ const page = () => {
             {baseText.split(" ").map((word, index) => (
               <motion.span
                 key={index}
-                variants={{
-                  initial: {
-                    opacity: 0,
-                    y: 20,
-                  },
-                  animate: {
-                    opacity: 1,
-                    y: 0,
-                  },
-                }}
+                variants={textAnimationVariants}
                 initial="initial"
                 whileInView="animate"
                 viewport={{ once: true, }}

components/shared/Navbar.jsx

@@ -3,56 +3,17 @@ import Image from "next/image";
 import Link from "next/link";
 import NavbarData from "@/content/navbartab.json";
 import Socials from "@/content/socials.json";
-import { useState, useEffect } from "react";
 import MenuDrawer from "./MenuDrawer";
-import { motion, useScroll } from "framer-motion";
+import { motion } from "framer-motion";
+import { useDrawerState } from "@/lib/hooks/useDrawerState";
+import { useScrollDirection } from "@/lib/hooks/useScrollDirection";
+import { useNavbarColor } from "@/lib/hooks/useNavbarColor";
 
 const Navbar = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [navColor, setNavColor] = useState(false)
-  const { scrollY } = useScroll();
+  const { isDrawerOpen, openDrawer, closeDrawer } = useDrawerState();
+  const hidden = useScrollDirection(isDrawerOpen, closeDrawer);
+  const navColor = useNavbarColor();
 
-  const openDrawer = () => {
-    setIsDrawerOpen(true);
-  };
-
-  const closeDrawer = () => {
-    setIsDrawerOpen(false);
-  };
-
-  function handleNavColor(latest) {
-    setNavColor((prevNavColor) => {
-      if (latest+93 <= window.innerHeight && prevNavColor === true) {
-        return false;
-      } else if (latest+93 > window.innerHeight && prevNavColor === false) {
-        return true;
-      }
-      return prevNavColor;
-    });
-  }
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const latest = window.scrollY;
-      const previous = scrollY.getPrevious();
-      if (latest > previous && latest > 150) {
-        setHidden(true);
-      } else {
-        setHidden(false);
-      }
-      if (isDrawerOpen && window.innerHeight>424) {
-        closeDrawer();
-      }
-      handleNavColor(latest);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [isDrawerOpen, scrollY]);
-
   return (
     <>
     <motion.nav

components/team/membersAndAlumni.jsx

@@ -5,43 +5,12 @@ import data from "@/content/team.json";
 import members from "@/content/members.json";
 import alumni from "@/content/alumni.json";
 import { motion } from "framer-motion";
+import { useResponsiveGrid } from "@/lib/hooks/useResponsiveGrid";
 
 const MembersAndAlumni = ({ contentFor }) => {
   const dataFinal = contentFor === "members" ? members : alumni;
-  const [visibleMembers, setVisibleMembers] = useState(dataFinal.slice(0, 6));
-  const [showAllMembers, setShowAllMembers] = useState(false);
-
-  const updateVisibleMembers = () => {
-    const screenSize = window.innerWidth;
-    if (screenSize >= 768) {
-      setVisibleMembers(dataFinal.slice(0, 9));
-    } else {
-      setVisibleMembers(dataFinal.slice(0, 6));
-    }
-  };
-
-  useEffect(() => {
-    updateVisibleMembers();
-
-    const handleResize = () => {
-      updateVisibleMembers();
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  const toggleMembersVisibility = () => {
-    setShowAllMembers(!showAllMembers);
-    if (showAllMembers) {
-      updateVisibleMembers();
-    } else {
-      setVisibleMembers(dataFinal);
-    }
-  };
+  const { visibleMembers, showAllMembers, toggleMembersVisibility } =
+    useResponsiveGrid(dataFinal);
 
   return (
     <>