feat: add animations

src/components/AboutUs/index.jsx

@@ -1,7 +1,12 @@
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { Link } from "react-router-dom";
 import Marquee from "react-fast-marquee";
 import Card from "@/components/Card";
 
+gsap.registerPlugin(ScrollTrigger);
+
 export default function AboutSection() {
   const images1 = [
     {
@@ -79,12 +84,85 @@ export default function AboutSection() {
     },
   ];
 
+  const paragraphRef = useRef(null);
+
+  useEffect(() => {
+    const paragraph = paragraphRef.current;
+
+    const originalSpan = paragraph.querySelector(".text-primary");
+    const highlightedText = originalSpan.textContent;
+
+    // Split all text nodes while preserving the special span
+    const splitText = (node) => {
+      if (node.nodeType === 3) {
+        // Text node
+        const letters = node.textContent.split("");
+        const fragments = letters.map((letter) => {
+          const span = document.createElement("span");
+          span.className = "inline-block letter-span";
+          span.innerHTML = letter === " " ? " " : letter;
+          return span;
+        });
+        node.replaceWith(...fragments);
+      } else if (node.classList?.contains("text-primary")) {
+        // For highlighted text, split but add special class
+        const letters = node.textContent.split("");
+        const fragments = letters.map((letter) => {
+          const span = document.createElement("span");
+          span.className = "inline-block letter-span highlighted";
+          span.innerHTML = letter === " " ? " " : letter;
+          return span;
+        });
+        node.replaceWith(...fragments);
+      } else {
+        [...node.childNodes].forEach((child) => splitText(child));
+      }
+    };
+
+    // Clone the paragraph to preserve original structure
+    const clone = paragraph.cloneNode(true);
+    splitText(clone);
+    paragraph.innerHTML = clone.innerHTML;
+
+    // Create a timeline for synchronized animations
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: paragraph,
+        start: "top 80%",
+        end: "top 20%",
+        scrub: true,
+      },
+    });
+
+    // Animate regular text
+    tl.fromTo(
+      paragraph.querySelectorAll(".letter-span:not(.highlighted)"),
+      { color: "#595959" },
+      {
+        color: "#B7AB98",
+        stagger: 0.02,
+      },
+      0, // Start at the beginning of the timeline
+    );
+
+    // Animate highlighted text
+    tl.fromTo(
+      paragraph.querySelectorAll(".highlighted"),
+      { color: "#595959" },
+      {
+        color: "#E76941",
+        stagger: 0.02,
+      },
+      0, // Start at the same time as regular text
+    );
+  }, []);
+
   return (
     <>
-      <section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
+      <section className="relative min-h-fit bg-background-dark text-white py-12 md:px-6 lg:px-12 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-12 relative z-20">
+        <div className="max-w-full mx-auto 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={{
@@ -95,28 +173,23 @@ export default function AboutSection() {
           </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">
+            <p
+              ref={paragraphRef}
+              className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold"
+            >
+              Codex is the coding club at{" "}
+              <span className="text-primary">
                 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>
+              </span>{" "}
+              that brings together students passionate about technology and
+              programming. Our club is committed to creating an engaging
+              environment where members can learn, collaborate, and grow their
+              coding expertise through a variety of activities and events.
             </p>
             <Link to="/about-us">
               <button
                 type="button"
-                className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors"
+                className="absolute -bottom-6 right-0 text-xl underline text-primary hover:text-text-light transition-colors"
               >
                 Know More
               </button>

src/pages/About/About.css

@@ -0,0 +1,18 @@
+.transition-section {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  transform: translateY(50px);
+  transition:
+    opacity 0.8s ease,
+    transform 0.8s ease;
+  z-index: 0;
+}
+
+.transition-section.visible {
+  opacity: 1;
+  transform: translateY(-50%);
+  z-index: 1;
+}

src/pages/About/index.jsx

@@ -1,12 +1,37 @@
-// import React from "react";
+import { useEffect, useState, useRef } from "react";
 import Heading from "@/components/Heading/index";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Oval from "@/assets/images/About/oval.svg";
 import PageTransition from "../../components/PageTransition";
+import "./About.css";
+
+gsap.registerPlugin(ScrollTrigger);
 
 function About() {
+  const sectionRef = useRef(null);
+  const [activeSection, setActiveSection] = useState(0); // 0: Vision, 1: Mission
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Get the current scroll position
+      const scrollPosition = window.scrollY;
+      const viewportHeight = window.innerHeight;
+
+      // Calculate which section should be active
+      const newActiveSection = Math.floor(scrollPosition / viewportHeight);
+
+      setActiveSection(newActiveSection);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <PageTransition>
-      <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col">
         {/* About Us Section */}
         <section className="bg-secondary-dark text-text-light py-8 px-4 md:px-8">
           <Heading
@@ -37,46 +62,56 @@ function About() {
           </div>
         </section>
 
-        {/* Our Vision Section */}
-        <section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
-          <Heading
-            text="OUR VISION"
-            className="mb-8"
-            frontTextStyle="text-primary"
-          />
-          <div className="max-w-4xl mx-auto">
-            <p className="text-center text-base md:text-lg mb-8">
-              To be a leading coding club that inspires students, driving
-              excellence in programming and technology at Symbiosis Institute of
-              Technology and beyond.
-            </p>
+        <div
+          ref={sectionRef}
+          className="h-[100vh] relative bg-background-light text-text-dark"
+        >
+          {/* Vision Section */}
+          <div
+            className={`transition-section ${activeSection === 0 ? "visible" : ""}`}
+          >
+            <Heading
+              text="OUR VISION"
+              className="mb-8"
+              frontTextStyle="text-primary"
+            />
+            <div className="max-w-4xl mx-auto">
+              <p className="text-center text-base md:text-lg mb-8">
+                To be a leading coding club that inspires students, driving
+                excellence in programming and technology at Symbiosis Institute
+                of Technology and beyond.
+              </p>
+            </div>
           </div>
-        </section>
 
-        {/* Our Mission Section */}
-        <section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
-          <Heading
-            text="OUR MISSION"
-            className="mb-8"
-            frontTextStyle="text-primary"
-          />
-          <div className="max-w-4xl mx-auto relative z-10">
-            <p className="text-center text-base md:text-lg mb-8">
-              To empower students (from beginner coders to advanced) with coding
-              skills and knowledge through hands-on learning experiences,
-              webinars and workshops fostering a community of innovative
-              thinkers and problem-solvers.
-            </p>
+          {/* Mission Section */}
+          <div
+            className={`transition-section ${activeSection === 1 ? "visible" : ""}`}
+          >
+            <Heading
+              text="OUR MISSION"
+              className="mb-8"
+              frontTextStyle="text-primary"
+            />
+            <div className="max-w-4xl mx-auto">
+              <p className="text-center text-base md:text-lg mb-8">
+                To empower students (from beginner coders to advanced) with
+                coding skills and knowledge through hands-on learning
+                experiences, webinars and workshops fostering a community of
+                innovative thinkers and problem-solvers.
+              </p>
+            </div>
           </div>
+
           <img
             src={Oval}
             alt="Oval"
             className="w-full absolute bottom-0 left-0 z-0"
           />
-        </section>
+        </div>
 
         {/* What We Do Section */}
-        <section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
+        <section className="min-h-screen bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
           <Heading
             text="WHAT WE DO?"
             className="mb-8"

tailwind.config.js

@@ -23,9 +23,6 @@ export default {
         text: {
           light: "#F7F7F7",
           dark: "#232323",
-          aboutuslight: "#B7AB98",
-          aboutusdark: "#595959",
-          aboutusorange: "#E76941"
         },
         gradient: {
           light: "#383838",