Add events highlight on home

package.json

@@ -20,6 +20,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "baffle": "^0.3.6",
     "framer-motion": "^11.5.4",
+    "gsap": "^3.12.5",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/App.jsx

@@ -7,6 +7,7 @@ import Navbar from "@/components/Navbar/index";
 import Cursor from "./components/Cursor";
 import CursorVariantProvider from "@/context/CursorVariantProvider";
 import Loader from "@/components/Loader";
+import ScrollToTop from "@/components/ScrollToTop";
 
 const navLinks = [
   { name: "About Us", path: "/about-us" },
@@ -34,6 +35,7 @@ function App() {
             <Navbar links={navLinks} />
             <Cursor />
             <ToastContainer />
+            <ScrollToTop />
             <Routes>
               {routes.map((route) => (
                 <Route

src/components/AboutUs/index.jsx

@@ -84,7 +84,7 @@ export default function AboutSection() {
       <section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
         <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
         <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
-        <div className="max-w-full mx-auto px-24 relative z-20">
+        <div className="max-w-full mx-auto px-12 relative z-20">
           <h1
             className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
             style={{

src/components/EventsHighlight/index.jsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+function EventsHighlight() {
+  const containerRef = useRef(null);
+
+  const images = [
+    {
+      key: 0,
+      url: "/CodeX-Website/gallery/Community Session/cs1.jpg",
+      alt: "Image 1",
+      side: "left",
+    },
+    {
+      key: 1,
+      url: "/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
+      alt: "Image 2",
+      side: "right",
+    },
+    {
+      key: 2,
+      url: "/CodeX-Website/gallery//AIML SESSION/aiml6.jpg",
+      alt: "Image 3",
+      side: "left",
+    },
+    {
+      key: 3,
+      url: "/CodeX-Website/gallery/Community Session/cs3.jpg",
+      alt: "Image 4",
+      side: "right",
+    },
+    {
+      key: 4,
+      url: "/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
+      alt: "Image 5",
+      side: "left",
+    },
+    {
+      key: 5,
+      url: "/CodeX-Website/gallery/Laser Lock/ll1.jpg",
+      alt: "Image 6",
+      side: "right",
+    },
+  ];
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    // Set up each image animation
+    images.forEach((_, index) => {
+      const imageSection = containerRef.current.children[index];
+
+      gsap.fromTo(
+        imageSection,
+        {
+          opacity: 1,
+          y: "20vh",
+        },
+        {
+          opacity: 1,
+          y: "-100vh",
+          ease: "none",
+          scrollTrigger: {
+            trigger: imageSection,
+            start: "top bottom",
+            end: "bottom top",
+            scrub: 1,
+            markers: false,
+          },
+        },
+      );
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  return (
+    <div className="relative">
+      {/* Fixed description */}
+      <div className="sticky top-1/2 z-0 text-center">
+        <h2 className="xs:text-4xl md:text-6xl lg:text-8xl font-bold text-black mb-4 text-white mt-[48vh] tracking-tighter font-black font-poppins">
+          Events Highlight
+        </h2>
+      </div>
+
+      {/* Images container */}
+      <div ref={containerRef} className="relative">
+        {images.map((image) => (
+          <div
+            key={image.key}
+            className={`relative h-[50vh] flex items-center justify-center ${
+              image.side === "left" ? "ml-24" : "mr-24"
+            }`}
+          >
+            <div
+              className={`absolute ${
+                image.side === "left" ? "left-0 z-100" : "right-0"
+              } xs:w-[20rem] md:w-[30rem]`}
+            >
+              <img
+                src={image.url}
+                alt={image.alt}
+                className="w-full object-contain rounded-lg shadow-xl"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default EventsHighlight;

src/components/ScrollToTop/index.jsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  return null;
+}
+
+export default ScrollToTop;

src/pages/Home/index.jsx

@@ -1,7 +1,12 @@
 import { useContext } from "react";
 import { CursorVariantContext } from "@/context/CursorVariantProvider";
 import PageTransition from "@/components/PageTransition";
+import EventsHighlight from "../../components/EventsHighlight";
+import SkewButton from "../../components/SkewButton";
 import AboutSection from "@/components/AboutUs";
+import TeamMember from "../Teams/TeamMember";
+import teamMembersData from "../Teams/teamsdata.json";
+import Heading from "@/components/Heading";
 
 function Home() {
   const { setCursorVariantText, setCursorVariantDefault } =
@@ -24,6 +29,26 @@ function Home() {
         </div>
       </div>
       <AboutSection />
+      <div className="min-h-screen mt-32">
+        <div className="flex justify-center items-center">
+          <div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
+            <Heading
+              text="MEET OUR TEAM"
+              className="text-center absolute top-0 left-0 right-0 mb-24"
+            />
+            <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
+              {teamMembersData.slice(0, 3).map((member) => (
+                <TeamMember key={member.name} member={member} />
+              ))}
+            </div>
+            <SkewButton text="SEE ALL" link="/teams" className="mt-16" />
+          </div>
+        </div>
+      </div>
+      <EventsHighlight />
+      <div className="h-[50vh]">
+        <SkewButton link="/events" text="See all events" />
+      </div>
     </PageTransition>
   );
 }