From 6b018f35c979cc99c6fcebb262d1936bdb150c1d Mon Sep 17 00:00:00 2001
From: Miran <miranfirdausi027@gmail.com>
Date: Sun, 22 Dec 2024 23:05:54 +0530
Subject: [PATCH 1/2] feat: add events highlight section on homepage

---
 package.json                             |   1 +
 src/components/EventsHighlight/index.jsx | 110 +++++++++++++++++++++++
 src/pages/Home/index.jsx                 |   6 ++
 3 files changed, 117 insertions(+)
 create mode 100644 src/components/EventsHighlight/index.jsx

diff --git a/package.json b/package.json
index b60061b..eed8ed7 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/EventsHighlight/index.jsx b/src/components/EventsHighlight/index.jsx
new file mode 100644
index 0000000..b875bd9
--- /dev/null
+++ b/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;
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 861f565..00360c7 100644
--- a/src/pages/Home/index.jsx
+++ b/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>
   );
 }

From 680e9566376ce370e9bab973f5d0119ba0bb767e Mon Sep 17 00:00:00 2001
From: Miran <miranfirdausi027@gmail.com>
Date: Sun, 22 Dec 2024 23:10:40 +0530
Subject: [PATCH 2/2] fix: remove redundant work

---
 src/components/AboutUs/index.jsx         | 107 -----------------------
 src/components/Card/index.jsx            |  17 ----
 src/components/EventsHighlight/index.jsx |  14 ++-
 src/routes/index.jsx                     |   7 --
 4 files changed, 10 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/AboutUs/index.jsx
 delete mode 100644 src/components/Card/index.jsx

diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx
deleted file mode 100644
index 1f01627..0000000
--- a/src/components/AboutUs/index.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import Marquee from "react-fast-marquee";
-import Card from "@/components/Card";
-
-export default function AboutSection() {
-  const images1 = [
-    { src: "/placeholder.svg?height=250&width=250", id: "image1-1" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image1-2" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image1-3" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image1-4" },
-  ];
-
-  const images2 = [
-    { src: "/placeholder.svg?height=250&width=250", id: "image2-1" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image2-2" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image2-3" },
-    { src: "/placeholder.svg?height=250&width=250", id: "image2-4" },
-  ];
-
-  return (
-    <>
-      <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">
-          <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={{
-              WebkitTextStroke: "2px #737373",
-            }}
-          >
-            ABOUT US
-          </h1>
-
-          <div className="mb-16 max-w-full relative">
-            <p className="text-xl md:text-3xl font-poppins font-bold leading-relaxed">
-              <span className="text-text-aboutuslight">
-                Codex is the coding club at{" "}
-              </span>
-              <span className="text-text-aboutusorange">
-                Symbiosis Institute of Technology
-              </span>
-              <span className="text-text-aboutuslight">
-                {" "}
-                that brings together students passionate about technology and
-                programming. Our club is committed to creating an engaging
-                environment{" "}
-              </span>
-              <span className="text-text-aboutusdark">
-                where members can learn, collaborate, and grow their coding
-                expertise through a variety of activities and events.
-              </span>
-            </p>
-            <button
-              type="button"
-              className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors"
-            >
-              Know More
-            </button>
-          </div>
-        </div>
-      </section>
-      <div className="relative space-y-8 max-w-full px-0 overflow-hidden">
-        <div className="absolute bottom-96 -right-2 w-24 h-24 bg-white rounded-full opacity-100" />
-        <Marquee
-          gradient
-          gradientColor={[28, 28, 28]}
-          speed={40}
-          className="overflow-hidden w-full"
-        >
-          {images1.map((image) => (
-            <Card
-              key={image.id}
-              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
-            >
-              <img
-                src={image.src}
-                alt={`Gallery ${image.id}`}
-                className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
-              />
-            </Card>
-          ))}
-        </Marquee>
-
-        <Marquee
-          gradient
-          gradientColor={[28, 28, 28]}
-          speed={40}
-          direction="right"
-          className="overflow-hidden w-full"
-        >
-          {images2.map((image) => (
-            <Card
-              key={image.id}
-              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
-            >
-              <img
-                src={image.src}
-                alt={`Gallery ${image.id}`}
-                className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
-              />
-            </Card>
-          ))}
-        </Marquee>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
deleted file mode 100644
index 6c440a3..0000000
--- a/src/components/Card/index.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from "prop-types";
-
-export function Card({ children, className }) {
-  return <div className={`rounded-3xl shadow-lg ${className}`}>{children}</div>;
-}
-
-Card.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-Card.defaultProps = {
-  children: null,
-  className: "",
-};
-
-export default Card;
diff --git a/src/components/EventsHighlight/index.jsx b/src/components/EventsHighlight/index.jsx
index b875bd9..c468d23 100644
--- a/src/components/EventsHighlight/index.jsx
+++ b/src/components/EventsHighlight/index.jsx
@@ -2,36 +2,42 @@ import { useEffect, useRef } from "react";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 
-const EventsHighlight = () => {
+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",
@@ -82,9 +88,9 @@ const EventsHighlight = () => {
 
       {/* Images container */}
       <div ref={containerRef} className="relative">
-        {images.map((image, index) => (
+        {images.map((image) => (
           <div
-            key={index}
+            key={image.key}
             className={`relative h-[50vh] flex items-center justify-center ${
               image.side === "left" ? "ml-24" : "mr-24"
             }`}
@@ -105,6 +111,6 @@ const EventsHighlight = () => {
       </div>
     </div>
   );
-};
+}
 
 export default EventsHighlight;
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 5bfe1a6..f460a54 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -5,15 +5,8 @@ import Gallery from "@/pages/Gallery/Gallery";
 import Contact from "@/pages/Contact";
 import PageNotFound from "../pages/PageNotFound";
 import Loader from "@/components/Loader";
-import AboutSection from "@/components/AboutUs";
 
 const routes = [
-  {
-    label: "AboutUs",
-    path: "/about-us-test",
-    requireAuth: false,
-    render: <AboutSection />,
-  },
   {
     label: "Loader",
     path: "/loader",