From 3bfd7b9727c48329f5f67084d2187371f24ee522 Mon Sep 17 00:00:00 2001
From: Ishayu Ghosh <ishayughosh@Ishayus-MacBook-Pro.local>
Date: Sat, 23 Nov 2024 18:40:19 -0800
Subject: [PATCH 1/2] Fix: Adjusted format of About Us section

---
 src/Pages/Home/AboutUs.tsx | 57 +++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/Pages/Home/AboutUs.tsx b/src/Pages/Home/AboutUs.tsx
index f3efa31..ba73f5e 100644
--- a/src/Pages/Home/AboutUs.tsx
+++ b/src/Pages/Home/AboutUs.tsx
@@ -1,27 +1,44 @@
 const AboutUs = () => {
   return (
-    <div className="grid grid-cols-2 gap-24 max-w-[72vw] h-screen py-24">
-      <div className="flex-1 flex flex-col justify-between py-4">
-        <div className="flex flex-col gap-4">
-          <h3 className="text-xl text-gray-200">WHO WE ARE</h3>
-          <h2 className="text-3xl text-white">
-            We share a passion for data, technology, and problem-solving.
-          </h2>
-          <p>We are here to expand the horizons of data science as a community together</p>
+    <div className="flex flex-col items-center py-24 min-h-screen w-full">
+      <div className="grid gap-12 md:grid-cols-2 max-w-[90vw] w-full px-4">
+        {/* WHO WE ARE Section */}
+        <div className="flex flex-col justify-between gap-8 md:order-1">
+          <div className="flex flex-col gap-4">
+            <h3 className="text-xl text-gray-200">WHO WE ARE</h3>
+            <h2 className="text-3xl text-white">
+              We share a passion for data, technology, and problem-solving.
+            </h2>
+            <p>
+              We are here to expand the horizons of data science as a community
+              together.
+            </p>
+          </div>
+          <button className="w-1/2 text-white rounded-full border-2 border-white p-4">
+            ABOUT
+          </button>
         </div>
-        <button className="w-1/2 text-white rounded-full border-2 border-white p-4">ABOUT</button>
-      </div>
-      <div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
-      <div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
-      <div className="flex-1 flex flex-col justify-between py-4">
-        <div className="flex flex-col gap-4">
-          <h3 className="text-xl text-gray-200">WHAT WE DO</h3>
-          <h2 className="text-3xl text-white">
-            Build technical skills, network, and gain practical experience in data science.
-          </h2>
-          <p>We are here to expand the horizons of data science as a community together</p>
+        {/* First Image */}
+        <div className="bg-gray-300 w-full aspect-video rounded-lg md:order-2" />
+        {/* Second Image */}
+        <div className="bg-gray-300 w-full aspect-video rounded-lg md:order-3 order-4" />
+        {/* WHAT WE DO Section */}
+        <div className="flex flex-col justify-between gap-8 md:order-last order-3">
+          <div className="flex flex-col gap-4">
+            <h3 className="text-xl text-gray-200">WHAT WE DO</h3>
+            <h2 className="text-3xl text-white">
+              Build technical skills, network, and gain practical experience in
+              data science.
+            </h2>
+            <p>
+              We are here to expand the horizons of data science as a community
+              together.
+            </p>
+          </div>
+          <button className="w-1/2 text-white rounded-full border-2 border-white p-4">
+            EVENTS
+          </button>
         </div>
-        <button className="w-1/2 text-white rounded-full border-2 border-white p-4">EVENTS</button>
       </div>
     </div>
   );

From 6ce5135687ca2791508427951306da7908f2bc96 Mon Sep 17 00:00:00 2001
From: Ishayu Ghosh <ishayughosh@Ishayus-MacBook-Pro.local>
Date: Sat, 23 Nov 2024 18:45:33 -0800
Subject: [PATCH 2/2] Fix: About Us format & stats count up

---
 src/Pages/Home/Stats.tsx | 118 ++++++++++++++++++++++++---------------
 1 file changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/Pages/Home/Stats.tsx b/src/Pages/Home/Stats.tsx
index 1e1769c..1b5ece1 100644
--- a/src/Pages/Home/Stats.tsx
+++ b/src/Pages/Home/Stats.tsx
@@ -11,73 +11,95 @@ const Stats = () => {
 
   const maxNumbers = [500, 78, 35, 28];
 
-  const [statsData, setStatsData] = useState([0, 0, 0, 0]);
-  const sectionRef = useRef(null);
+  const [statsData, setStatsData] = useState<number[]>([0, 0, 0, 0]);
+  const [animated, setAnimated] = useState<boolean[]>([
+    false,
+    false,
+    false,
+    false,
+  ]);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
-  const startCounting = () => {
+  const startCounting = (index: number): void => {
     const interval = setInterval(() => {
-      setStatsData((prev) =>
-        prev.map((num, index) => Math.min(num + maxNumbers[index] / 15, maxNumbers[index]))
-      );
+      setStatsData((prev) => {
+        const newStats = [...prev];
+        newStats[index] = Math.min(
+          newStats[index] + maxNumbers[index] / 15,
+          maxNumbers[index]
+        );
+        return newStats;
+      });
     }, 50);
 
-    return () => clearInterval(interval); 
+    return () => clearInterval(interval);
   };
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        console.log("Intersection Observer callback triggered"); // Log every time the observer is triggered
-        console.log("Is intersecting:", entry.isIntersecting); // Log whether the section is intersecting or not
-        console.log("Intersection Ratio:", entry.intersectionRatio); // Log how much of the section is visible
-  
-        if (entry.isIntersecting) {
-          console.log("Section is in view. Starting count-up!"); // Log when the count-up is about to start
-          startCounting();
-        }
-      },
-      { threshold: 0.99 } // % of the section that must be visible
+    const observers = itemRefs.current.map(
+      (ref, index): IntersectionObserver | null => {
+        if (!ref) return null;
+
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting && !animated[index]) {
+              setAnimated((prev) => {
+                const updated = [...prev];
+                updated[index] = true;
+                return updated;
+              });
+              startCounting(index);
+            }
+          },
+          { threshold: 0.4 }
+        );
+
+        observer.observe(ref);
+        return observer;
+      }
     );
-  
-    if (sectionRef.current) {
-      console.log("Observing section:", sectionRef.current); // Log when the observer starts observing the section
-      observer.observe(sectionRef.current);
-    }
-  
+
     return () => {
-      if (sectionRef.current) {
-        console.log("Unobserving section:", sectionRef.current); // Log when the observer stops observing the section
-        observer.unobserve(sectionRef.current);
-      }
+      observers.forEach((observer, index) => {
+        if (observer && itemRefs.current[index]) {
+          observer.unobserve(itemRefs.current[index]!);
+        }
+      });
     };
-  }, []);
-  
+  }, [animated]);
 
   return (
-    <div className="flex flex-col items-center gap-10 justify-start text-white py-24 h-screen w-screen">
+    <div className="flex flex-col items-center justify-center gap-8 text-white py-24 h-screen w-screen mb-[4vw]">
       <motion.h1
         initial={{ y: -50, opacity: 0 }}
         whileInView={{ y: 0, opacity: 1 }}
         transition={{ duration: 1, ease: "easeOut" }}
-        viewport={{once:true}}
-        className="title font-bold mb-10 text-5xl mt-10"
+        viewport={{ once: true }}
+        className="title font-bold mb-10 text-[4.75vw] mt-10"
       >
         Get Involved
       </motion.h1>
 
-      <div
-        ref={sectionRef}
-        className="stats-list"
-      >
-        <div className="flex flex-col gap-10">
+      <div className="stats-list">
+        <div className="flex flex-col gap-8">
           {statsData.map((stat, index) => (
-            <div key={index} className="stat-item flex items-center">
+            <div
+              key={index}
+              className="stat-item flex items-center"
+              ref={(el: HTMLDivElement | null) =>
+                (itemRefs.current[index] = el)
+              }
+            >
               <motion.span
                 initial={{ x: -100, opacity: 0 }}
                 whileInView={{ x: -40, opacity: 1 }}
-                transition={{ duration: 1, delay: index * 0.125, ease: "easeOut" }}
-                viewport={{once:true}}
-                className="number text-7xl font-bold w-20 text-right text-white hero-text-shadow mr-20" 
+                transition={{
+                  duration: 1,
+                  delay: index * 0.125,
+                  ease: "easeOut",
+                }}
+                viewport={{ once: true }}
+                className="number text-[4.5vw] font-bold w-[2vw] text-right text-white hero-text-shadow mr-[8vw]"
               >
                 {Math.round(stat) +
                   (Math.round(stat) === maxNumbers[index] ? "+" : "")}
@@ -86,9 +108,13 @@ const Stats = () => {
               <motion.span
                 initial={{ x: 100, opacity: 0 }}
                 whileInView={{ x: 40, opacity: 1 }}
-                transition={{ duration: 1, delay: index * 0.125, ease: "easeOut" }}
-                className="text-white text-2xl ml-20"
-                viewport={{once:true}}
+                transition={{
+                  duration: 1,
+                  delay: index * 0.125,
+                  ease: "easeOut",
+                }}
+                className="text-white text-[1.8vw] ml-[8vw]"
+                viewport={{ once: true }}
               >
                 {descriptions[index]}
               </motion.span>