GSAP animation implemented on home page

backend/src/app.ts

@@ -10,6 +10,7 @@ import { config } from "./configurations/envConfig";
 import { RootRoutes } from "./routes/root.route";
 import globalErrorHandler from "./middlewares/globalErrorHandler";
 import initializeDTOMapper from "./configurations/dtoMapper";
+import { redisClient } from "./configurations/redis";
 
 const app = express();
 
@@ -78,7 +79,7 @@ passport.deserializeUser((user: any, done) => {
 });
 
 // Connecting to Socket.IO
-io.on("connection", (socket) => {
+io.on("connection", async (socket) => {
   console.log("A user connected");
 
   // messaging room for a team
@@ -112,7 +113,7 @@ io.on("connection", (socket) => {
     socket.to(data.project).emit("task", data);
   });
 
-  socket.on("disconnect", () => {
+  socket.on("disconnect", async () => {
     console.log("User disconnected");
   });
 });

frontend/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-     "@next/next/no-img-element": "off"
+     "@next/next/no-img-element": "off",
+     "@react-hooks" : {
+      "exhaustive-deps" : "off"
+     }
   }
 }

frontend/src/components/pages/LandingPage/features/FeatureCard.tsx

@@ -9,7 +9,7 @@ type Props = {
 const FeatureCard = ({ feature }: Props) => {
   const { title, description, image } = feature;
   return (
-    <div className="p-6 rounded-lg shadow-md lg:flex flex-col gap-4">
+    <div className="features-card p-6 rounded-lg shadow-md lg:flex flex-col gap-4">
       <img className="w-full h-60 rounded-lg" src={image} alt={title} />
       <h3 className="text-xl font-bold">{title}</h3>
       <p>{description}</p>

frontend/src/components/pages/LandingPage/features/FeaturePage.tsx

@@ -1,16 +1,24 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import FeatureCard from "./FeatureCard";
 import featureData from "@/constants/featureData";
 import Link from "next/link";
 import { IFeature } from "@/interfaces/feature.interface";
+import useCardAnimation from "@/hooks/useCardAnimation";
 
 type Props = {
   limit?: number;
 };
 
 const FeaturesSection = ({ limit = 3 }: Props) => {
+  const sectionRef = useRef<any>(null);
+  const handleAnimation = useCardAnimation();
+
+  useEffect(() => {
+    handleAnimation(sectionRef, "features-card");
+  }, []);
+
   return (
-    <section className="lg:py-16 p-4 text-center">
+    <section ref={sectionRef} className="lg:py-16 p-4 text-center">
       <h2 className="lg:text-3xl text-xl font-bold mb-8">
         Powerful Features Tailored for Effective Team Management
       </h2>

frontend/src/components/pages/LandingPage/pricing/PricingCard.tsx

@@ -10,7 +10,7 @@ type Props = {
 const PricingCard = ({ data }: Props) => {
   const { id, plan, price, features } = data;
   return (
-    <div className="p-6 rounded-lg shadow-md">
+    <div className="pricing-card p-6 rounded-lg shadow-md">
       <h3 className="text-xl font-bold mb-4">{plan}</h3>
       <p className="text-2xl mb-4 font-bold">${price} /month</p>
       <ul className="text-left">

frontend/src/components/pages/LandingPage/pricing/PricingSection.tsx

@@ -1,13 +1,20 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import PricingCard from "./PricingCard";
 import { IPrice } from "@/interfaces/price.interface";
 import { useGetPricingQuery } from "@/features/pricing";
+import useCardAnimation from "@/hooks/useCardAnimation";
 
 const PricingSection = () => {
   const { data } = useGetPricingQuery({});
   const pricingData = data?.data;
+  const sectionRef = useRef(null);
+  const handleAnimation = useCardAnimation();
+
+  useEffect(() => {
+    handleAnimation(sectionRef, "pricing-card");
+  }, []);
   return (
-    <section className="lg:py-16 p-4 text-center">
+    <section ref={sectionRef} className="lg:py-16 p-4 text-center">
       <h2 className="lg:text-3xl text-xl font-bold mb-8">
         Choose the Right Plan for Your Team
       </h2>

frontend/src/components/pages/LandingPage/testimonials/TestimonialCard.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const TestimonialCard = ({ quote, name, position, userImage }: Props) => {
   return (
-    <div className="p-6 rounded-lg shadow-md">
+    <div className="testimonial-card p-6 rounded-lg shadow-md">
       <p className="text-lg mb-4">{quote}</p>
       <div className="flex items-center justify-center space-x-4">
         <img src={userImage} alt={name} className="w-12 h-12 rounded-full" />

frontend/src/components/pages/LandingPage/testimonials/TestimonialsSection.tsx

@@ -1,11 +1,19 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import TestimonialCard from "./TestimonialCard";
 import testimonialData from "@/constants/testimonialData";
 import Link from "next/link";
+import useCardAnimation from "@/hooks/useCardAnimation";
 
 const TestimonialsSection = () => {
+  const sectionRef = useRef(null);
+  const handleAnimation = useCardAnimation();
+
+  useEffect(() => {
+    handleAnimation(sectionRef, "testimonial-card", "left-to-right");
+  }, []);
+
   return (
-    <section className="lg:p-16 p-4 text-center">
+    <section ref={sectionRef} className="lg:p-16 p-4 text-center">
       <h2 className="lg:text-3xl text-xl font-bold mb-8">
         See What Our Users Have to Say
       </h2>

frontend/src/components/pages/LandingPage/works/HowItWorksCard.tsx

@@ -11,7 +11,7 @@ type Props = {
 const HowItWorksCard = ({ steps }: Props) => {
   const { step, title, description } = steps;
   return (
-    <div className="p-6 rounded-lg shadow-md">
+    <div className="how-it-works-card p-6 rounded-lg shadow-md">
       <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white font-bold mb-4">
         {step}
       </div>

frontend/src/components/pages/LandingPage/works/HowItWorksSection .tsx

@@ -1,10 +1,18 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import HowItWorksCard from "./HowItWorksCard";
 import howItWorkData from "@/constants/howItWorkData";
+import useCardAnimation from "@/hooks/useCardAnimation";
 
 const HowItWorksSection = () => {
+  const sectionRef = useRef(null);
+  const handleAnimation = useCardAnimation();
+
+  useEffect(() => {
+    handleAnimation(sectionRef, "how-it-works-card", "right-to-left");
+  }, []);
+
   return (
-    <section className="lg:py-16 p-4 text-center">
+    <section ref={sectionRef} className="lg:py-16 p-4 text-center">
       <h2 className="lg:text-3xl text-xl font-bold mb-8">
         How Team Manager Works
       </h2>

frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx

@@ -26,6 +26,7 @@ const ShowMessages = ({ messages }: Props) => {
   const [editedMessage, setEditedMessage] = useState<string | undefined>("");
   const [imageModalOpen, setImageModalOpen] = useState<boolean>(false);
   const [selectedImage, setSelectedImage] = useState<string>("");
+  const [onlineUsers, setOnlineUsers] = useState({});
   const [isEditMessage, setIsEditMessage] = useState<{
     id: string | undefined;
     status: boolean;

frontend/src/context/SocketContext.tsx

@@ -25,12 +25,26 @@ const SocketProvider = ({ children }: Props) => {
   const [realTimeMessages, setRealTimeMessages] = useState<IMessage[]>([]);
   const [refetchTask, setRefetchTask] = useState<any>(false);
   const user: IUser = useGetLoggedInUser();
+  const [activeUsers, setActiveUsers] = useState([]);
 
   // connect to socket notification room
   useEffect(() => {
     socket.emit("notification-room", user?.id);
   }, [socket, user?.id]);
 
+  // connect to socket active
+  useEffect(() => {
+    socket.emit("active", user?.id);
+  }, [socket, user?.id]);
+
+  // connect to socket active
+  useEffect(() => {
+    socket.on("activeUsers", (data: any) => {
+      setActiveUsers(data);
+      console.log("Active users", data);
+    });
+  }, [socket]);
+
   const values: IContext = {
     socket,
     realTimeMessages,

frontend/src/hooks/useCardAnimation.ts

@@ -0,0 +1,53 @@
+import { gsap } from "gsap";
+
+const useCardAnimation = () => {
+  const handleUseCardAnimation = (
+    sectionRef: any,
+    className: string,
+    animationDirection: string = "bottom-to-top"
+  ) => {
+    if (sectionRef.current) {
+      const section = sectionRef.current;
+      const handleScroll = () => {
+        const sectionTop = section.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        if (sectionTop < windowHeight / 2) {
+          let animationProps: any = {
+            opacity: 0,
+            y: 100,
+            duration: 1,
+            stagger: 0.5,
+            ease: "power4.out",
+          };
+
+          switch (animationDirection) {
+            case "top-to-bottom":
+              animationProps.y = -100;
+              break;
+            case "left-to-right":
+              animationProps.x = -100;
+              break;
+            case "right-to-left":
+              animationProps.x = 100;
+              break;
+            default:
+              "bottom-to-top";
+              animationProps.y = 100;
+              break;
+          }
+
+          gsap.from(`.${className}`, animationProps);
+          window.removeEventListener("scroll", handleScroll);
+        }
+      };
+      window.addEventListener("scroll", handleScroll);
+
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  };
+  return handleUseCardAnimation;
+};
+
+export default useCardAnimation;

frontend/src/hooks/useGetLoggedInUser.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
 import { IUser, userInitData } from "@/interfaces/user.interface";