feat: add events highlight section on homepage

Author: Miran-Firdausi

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/components/EventsHighlight/index.jsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+const EventsHighlight = () => {
+  const containerRef = useRef(null);
+
+  const images = [
+    {
+      url: "/CodeX-Website/gallery/Community Session/cs1.jpg",
+      alt: "Image 1",
+      side: "left",
+    },
+    {
+      url: "/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
+      alt: "Image 2",
+      side: "right",
+    },
+    {
+      url: "/CodeX-Website/gallery//AIML SESSION/aiml6.jpg",
+      alt: "Image 3",
+      side: "left",
+    },
+    {
+      url: "/CodeX-Website/gallery/Community Session/cs3.jpg",
+      alt: "Image 4",
+      side: "right",
+    },
+    {
+      url: "/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
+      alt: "Image 5",
+      side: "left",
+    },
+    {
+      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, index) => (
+          <div
+            key={index}
+            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/pages/Home/index.jsx

@@ -2,6 +2,8 @@ import { useContext } from "react";
 import Heading from "@/components/Heading";
 import { CursorVariantContext } from "@/context/CursorVariantProvider";
 import PageTransition from "@/components/PageTransition";
+import EventsHighlight from "../../components/EventsHighlight";
+import SkewButton from "../../components/SkewButton";
 
 function Home() {
   const { setCursorVariantText, setCursorVariantDefault } =
@@ -24,6 +26,10 @@ function Home() {
         </div>
       </div>
       <Heading text="What do we do?" />
+      <EventsHighlight />
+      <div className="h-[50vh] mt-[50vh">
+        <SkewButton link="/events" text="See all events" />
+      </div>
     </PageTransition>
   );
 }