From 5f08affd626723fd026c6cb5b76c07f78fd9f31d Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Fri, 13 Jun 2025 01:23:09 +0530
Subject: [PATCH 01/15] add data charts for about section

---
 app/page.js           | 255 +++++++++-------
 components/Charts.jsx | 126 ++++++++
 package-lock.json     | 694 +++++++++++++++++++++++++++++++++++++++++-
 package.json          |   2 +
 4 files changed, 957 insertions(+), 120 deletions(-)
 create mode 100644 components/Charts.jsx

diff --git a/app/page.js b/app/page.js
index 67f5771..9663a3d 100644
--- a/app/page.js
+++ b/app/page.js
@@ -40,6 +40,7 @@ import { delay, motion, Variants } from "framer-motion";
 import { redirect } from "next/navigation";
 import Testimonials from "@/components/Testimonials";
 import PastSponsors from "@/components/PastSponsors";
+import { AreaChartComponent, BarChartComponent, RadarChartComponent } from "@/components/Charts";
 
 const containerVariants = {
   hidden: {},
@@ -318,13 +319,14 @@ export default function Home() {
         </motion.div>
 
         <motion.div
-          className="w-5/6 grid grid-cols-1 md:grid-cols-3 grid-rows-3 md:grid-rows-1 mb-12 gap-4 mt-[80px] md:mt-[120px] items-center justify-items-center"
+          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 mb-12 gap-4 mt-[80px] md:mt-[120px] items-center justify-items-center"
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
         >
-          <motion.div
+          {/* TODO: Add metric charts here */}
+          {/* <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
@@ -350,9 +352,38 @@ export default function Home() {
                Build Projects. Build Skills. Build Your Career
               </div>
             </div>
+          </motion.div> */}
+          <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
+            variants={itemVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.3 }}
+          >
+            <BarChartComponent />
           </motion.div>
 
           <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
+            variants={itemVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.3 }}
+          >
+            <AreaChartComponent />
+          </motion.div>
+
+          <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-8 shadow-2xl shadow-blue-500/20"
+            variants={itemVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.3 }}
+          >
+            <RadarChartComponent />
+          </motion.div>
+
+          {/* <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-8 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
@@ -376,8 +407,6 @@ export default function Home() {
               </div>
               <div className="text-[#A7ADBE] text-[14px] w-full text-center">
                 Maximize Impact. Maximize You.
-
-
               </div>
             </div>
           </motion.div>
@@ -408,7 +437,7 @@ export default function Home() {
                 Contribute Boldly. Shine Brightly.
               </div>
             </div>
-          </motion.div>
+          </motion.div> */}
         </motion.div>
 
         <motion.div
@@ -432,18 +461,17 @@ export default function Home() {
           viewport={{ once: false, amount: 0.3 }}
           className="w-11/12 md:w-5/6 border border-[#131839] bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] mt-12 rounded-3xl aspect-video p-2 shadow-2xl shadow-blue-500/20"
         >
-         <iframe
-  width="100%"
-  height="100%"
-  src="https://www.youtube.com/embed/yi_LounnOk0?autoplay=1&loop=1&playlist=yi_LounnOk0&controls=0&rel=0&showinfo=0&modestbranding=1"
-  title="GSSoC 2024 Video"
-  frameBorder="0"
-  allow="autoplay; encrypted-media"
-  referrerPolicy="strict-origin-when-cross-origin"
-  allowFullScreen
-  className="rounded-3xl"
-/>
-
+          <iframe
+            width="100%"
+            height="100%"
+            src="https://www.youtube.com/embed/yi_LounnOk0?autoplay=1&loop=1&playlist=yi_LounnOk0&controls=0&rel=0&showinfo=0&modestbranding=1"
+            title="GSSoC 2024 Video"
+            frameBorder="0"
+            allow="autoplay; encrypted-media"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+            className="rounded-3xl"
+          />
         </motion.div>
       </motion.section>
 
@@ -524,10 +552,11 @@ export default function Home() {
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
-             Project Assignment to Mentors
+              Project Assignment to Mentors
             </div>
             <div className="text-[12px] text-[#A7ADBE]">
-              Mentors are assigned to projects and begin preparing to guide contributors throughout the program.
+              Mentors are assigned to projects and begin preparing to guide
+              contributors throughout the program.
             </div>
           </motion.div>
 
@@ -545,14 +574,15 @@ export default function Home() {
             />
 
             <div className="mb-4 text-[#A7ADBE] text-[12px] py-2 rounded-xl">
-             23th June 2025
+              23th June 2025
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
-             Community Bonding Period Starts
+              Community Bonding Period Starts
             </div>
             <div className="text-[12px] text-[#A7ADBE]">
-              Contributors and mentors interact, discuss project goals, and get familiar with the community.
+              Contributors and mentors interact, discuss project goals, and get
+              familiar with the community.
             </div>
           </motion.div>
 
@@ -577,7 +607,8 @@ export default function Home() {
               Coding Period Starts
             </div>
             <div className="text-[12px] text-[#A7ADBE]">
-             Contributors officially start working on their assigned open source projects under mentor supervision.
+              Contributors officially start working on their assigned open
+              source projects under mentor supervision.
             </div>
           </motion.div>
 
@@ -595,14 +626,15 @@ export default function Home() {
             />
 
             <div className="mb-4 text-[#A7ADBE] text-[12px] py-2 rounded-xl">
-                 To Be Announced
+              To Be Announced
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
-             Leaderboard Opens
+              Leaderboard Opens
             </div>
             <div className="text-[12px] text-[#A7ADBE]">
-            The leaderboard is made public, allowing participants to track their progress and contributions.
+              The leaderboard is made public, allowing participants to track
+              their progress and contributions.
             </div>
           </motion.div>
 
@@ -620,13 +652,15 @@ export default function Home() {
             />
 
             <div className="mb-4 text-[#A7ADBE] text-[12px] py-2 rounded-xl">
-            To Be Announced
+              To Be Announced
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
-             Coding Period Ends
+              Coding Period Ends
             </div>
-            <div className="text-[12px] text-[#A7ADBE]">The official coding phase concludes; contributors submit their final work for evaluation.
+            <div className="text-[12px] text-[#A7ADBE]">
+              The official coding phase concludes; contributors submit their
+              final work for evaluation.
             </div>
           </motion.div>
 
@@ -644,14 +678,15 @@ export default function Home() {
             />
 
             <div className="mb-4 text-[#A7ADBE] text-[12px] py-2 rounded-xl">
-               To Be Announced
+              To Be Announced
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
               Result will be declared
             </div>
             <div className="text-[12px] text-[#A7ADBE]">
-              Final results are announced, recognizing top contributors and successful projects.
+              Final results are announced, recognizing top contributors and
+              successful projects.
             </div>
           </motion.div>
         </motion.div>
@@ -881,7 +916,7 @@ export default function Home() {
         </motion.div> */}
       </motion.section>
 
-      <Testimonials/>
+      <Testimonials />
 
       <motion.section
         id="sponsor"
@@ -961,14 +996,12 @@ export default function Home() {
               />
             </div>
 
-            <div className="text-[14px] md:text-[18px] my-2">Maximize Visibility</div>
+            <div className="text-[14px] md:text-[18px] my-2">
+              Maximize Visibility
+            </div>
             <div className="text-[12px] text-[#A7ADBE]">
-              Feature
-your brand across app,
-website, social media (500K+
-reach), newsletters, and
-event swag.
-
+              Feature your brand across app, website, social media (500K+
+              reach), newsletters, and event swag.
             </div>
           </motion.div>
           <motion.div className="relative w-full h-[180px] md:h-[240px] bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20">
@@ -991,14 +1024,12 @@ event swag.
               />
             </div>
 
-            <div className="text-[14px] md:text-[18px] my-2">Engage & Activate</div>
+            <div className="text-[14px] md:text-[18px] my-2">
+              Engage & Activate
+            </div>
             <div className="text-[12px] text-[#A7ADBE]">
-             e: Host
-workshops, showcase tech,
-and integrate product tasks
-to reach 50,000+ developers
-directly.
-
+              e: Host workshops, showcase tech, and integrate product tasks to
+              reach 50,000+ developers directly.
             </div>
           </motion.div>
           <motion.div className="relative w-full h-[180px] md:h-[240px] bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20">
@@ -1022,19 +1053,17 @@ directly.
             </div>
 
             <div className="text-[14px] md:text-[18px] my-2">
-Community Impact</div>
+              Community Impact
+            </div>
             <div className="text-[12px] text-[#A7ADBE]">
-             Champion gender equity in
-tech through measurable
-support—mentorship hours,
-project outcomes, and
-participant placements.
+              Champion gender equity in tech through measurable
+              support—mentorship hours, project outcomes, and participant
+              placements.
             </div>
           </motion.div>
         </motion.div>
 
-
-        <PastSponsors/>
+        <PastSponsors />
 
         <motion.div
           variants={itemVariants}
@@ -1054,7 +1083,8 @@ participant placements.
             particleColor="#FFFFFF"
           />
           <div className="text-md md:text-6xl z-10 leading-[1.2] font-semibold w-11/12 text-balance text-center ">
-            Bridging passion and purpose through impactful open source contributions!
+            Bridging passion and purpose through impactful open source
+            contributions!
           </div>
           <div className="text-[#A7ADBE] text-[10px] md:text-lg mt-2 md:mt-8 w-11/12 text-balance text-center">
             However, we approach things a bit differently around here.
@@ -1084,65 +1114,64 @@ participant placements.
             Contact Us
           </a>
         </div>
-    <div className="flex flex-row justify-center items-center mt-12">
-  {/* LinkedIn */}
-  <a
-    href="https://www.linkedin.com/company/girlscriptsoc/"
-    target="_blank"
-    rel="noopener noreferrer"
-    className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
-  >
-    <Image
-      src={iconbg}
-      alt="Background"
-      className="w-full h-full object-cover"
-    />
-    <Image
-      src={linkedin}
-      alt="LinkedIn Icon"
-      className="absolute w-11/12 h-3/5 object-cover"
-    />
-  </a>
-
-  {/* Twitter/X */}
-  <a
-    href="https://x.com/girlscriptsoc?fbclid=PAQ0xDSwKw-IVleHRuA2FlbQIxMAABp_RYL61UMmjR16ZRYtQ9Vr8RKnrJDW3m8Jgs_YAcL6OiU7XdT65vIkh0mu_U_aem_u7mT7T5kaX-7RyGhB8XlLg"
-    target="_blank"
-    rel="noopener noreferrer"
-    className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative mx-4"
-  >
-    <Image
-      src={iconbg}
-      alt="Background"
-      className="w-full h-full object-cover"
-    />
-    <Image
-      src={twitter}
-      alt="Twitter Icon"
-      className="absolute w-11/12 h-3/5 object-cover"
-    />
-  </a>
-
-  {/* Instagram */}
-  <a
-    href="https://www.instagram.com/girlscriptsummerofcode?igsh=MWlhYnRld2J3bWdyOQ=="
-    target="_blank"
-    rel="noopener noreferrer"
-    className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
-  >
-    <Image
-      src={iconbg}
-      alt="Background"
-      className="w-full h-full object-cover"
-    />
-    <Image
-      src={instagram}
-      alt="Instagram Icon"
-      className="absolute w-11/12 h-3/5 object-cover"
-    />
-  </a>
-</div>
+        <div className="flex flex-row justify-center items-center mt-12">
+          {/* LinkedIn */}
+          <a
+            href="https://www.linkedin.com/company/girlscriptsoc/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={linkedin}
+              alt="LinkedIn Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
+
+          {/* Twitter/X */}
+          <a
+            href="https://x.com/girlscriptsoc?fbclid=PAQ0xDSwKw-IVleHRuA2FlbQIxMAABp_RYL61UMmjR16ZRYtQ9Vr8RKnrJDW3m8Jgs_YAcL6OiU7XdT65vIkh0mu_U_aem_u7mT7T5kaX-7RyGhB8XlLg"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative mx-4"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={twitter}
+              alt="Twitter Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
 
+          {/* Instagram */}
+          <a
+            href="https://www.instagram.com/girlscriptsummerofcode?igsh=MWlhYnRld2J3bWdyOQ=="
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={instagram}
+              alt="Instagram Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
+        </div>
       </motion.section>
     </div>
   );
diff --git a/components/Charts.jsx b/components/Charts.jsx
new file mode 100644
index 0000000..d113875
--- /dev/null
+++ b/components/Charts.jsx
@@ -0,0 +1,126 @@
+import {
+  BarChart,
+  Bar,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  CartesianGrid,
+  Rectangle,
+  LabelList,
+  AreaChart,
+  Area,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar
+} from "recharts";
+
+const pullRequestsData = [
+  {
+    name: "GSSoC'24",
+    value: 29000,
+  },
+  {
+    name: "GSSoC'23",
+    value: 27000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 36000,
+  }
+];
+
+const campusAmbassadorsData = [
+  {
+    name: "GSSoC'24",
+    value: 29000,
+  },
+  {
+    name: "GSSoC'23",
+    value: 27000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 36000,
+  }
+];
+
+const linkedinFollowersData = [
+  {
+    name: "GSSoC'24",
+    value: 28000,
+  },
+  {
+    name: "GSSoC'23",
+    value: 34000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 48000,
+  }
+];
+
+export function BarChartComponent() {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart
+        width={500}
+        height={300}
+        data={pullRequestsData}
+        margin={{
+          top: 20,
+          right: 10,
+          left: 10,
+          bottom: 10,
+        }}
+      >
+        <CartesianGrid strokeDasharray="4 0" />
+        <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={80} />
+        <YAxis />
+        {/* <Tooltip /> */}
+        {/* <Legend /> */}
+        <Bar
+          dataKey="value"
+          fill="#4C75FF"
+          activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
+        >
+          <LabelList dataKey="value" position="top" className="text-sm" />
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
+
+export function AreaChartComponent() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <AreaChart data={campusAmbassadorsData} margin={{ top: 20, right: 10, left: 10, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="1 1" />
+        <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={80} />
+        <YAxis />
+        {/* <Tooltip /> */}
+        <Area type="monotone" dataKey="value" stroke="#4C75FF" fill="#A7ADFE" fillOpacity={0.3}>
+          <LabelList dataKey="value" position="top" className="text-sm" />
+        </Area>
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}
+
+export function RadarChartComponent() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={linkedinFollowersData}>
+        <PolarGrid />
+        <PolarAngleAxis dataKey="name" tick={{ fontSize: 12 }} />
+        <PolarRadiusAxis />
+        <Radar name="Value" dataKey="value" stroke="#4C75FF" fill="#4C75FF" fillOpacity={0.4} />
+        {/* <Legend /> */}
+        {/* <Tooltip /> */}
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 01e028c..c1cf5eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "gssoc-2025-website",
       "version": "0.1.0",
       "dependencies": {
+        "@nivo/bar": "^0.99.0",
         "@supabase/supabase-js": "^2.49.8",
         "@tsparticles/engine": "^3.8.1",
         "@tsparticles/react": "^3.0.0",
@@ -19,6 +20,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-use-measure": "^2.1.7",
+        "recharts": "^2.15.3",
         "tailwind-merge": "^3.3.0"
       },
       "devDependencies": {
@@ -54,6 +56,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -839,6 +850,204 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nivo/annotations": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.99.0.tgz",
+      "integrity": "sha512-jCuuXPbvpaqaz4xF7k5dv0OT2ubn5Nt0gWryuTe/8oVsC/9bzSuK8bM9vBty60m9tfO+X8vUYliuaCDwGksC2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/axes": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.99.0.tgz",
+      "integrity": "sha512-3KschnmEL0acRoa7INSSOSEFwJLm54aZwSev7/r8XxXlkgRBriu6ReZy/FG0wfN+ljZ4GMvx+XyIIf6kxzvrZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/scales": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-format": "^1.4.1",
+        "@types/d3-time-format": "^2.3.1",
+        "d3-format": "^1.4.4",
+        "d3-time-format": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/bar": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.99.0.tgz",
+      "integrity": "sha512-9yfMn7H6UF/TqtCwVZ/vihVAXUff9wWvSaeF2Z1DCfgr5S07qs31Qb2p0LZA+YgCWpaU7zqkeb3VZ4WCpZbrDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/annotations": "0.99.0",
+        "@nivo/axes": "0.99.0",
+        "@nivo/canvas": "0.99.0",
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/legends": "0.99.0",
+        "@nivo/scales": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-shape": "^3.1.6",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.2.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/canvas": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/canvas/-/canvas-0.99.0.tgz",
+      "integrity": "sha512-UxA8zb+NPwqmNm81hoyUZSMAikgjU1ukLf4KybVNyV8ejcJM+BUFXsb8DxTcLdt4nmCFHqM56GaJQv2hnAHmzg==",
+      "license": "MIT"
+    },
+    "node_modules/@nivo/colors": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
+      "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-color": "^3.0.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/core": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
+      "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-shape": "^3.1.6",
+        "d3-color": "^3.1.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-virtualized-auto-sizer": "^1.0.26",
+        "use-debounce": "^10.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nivo/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/legends": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
+      "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/scales": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.99.0.tgz",
+      "integrity": "sha512-g/2K4L6L8si6E2BWAHtFVGahtDKbUcO6xHJtlIZMwdzaJc7yB16EpWLK8AfI/A42KadLhJSJqBK3mty+c7YZ+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-time": "^1.1.1",
+        "@types/d3-time-format": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-time": "^1.0.11",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/@nivo/scales/node_modules/@types/d3-time-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz",
+      "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==",
+      "license": "MIT"
+    },
+    "node_modules/@nivo/text": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
+      "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/theming": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
+      "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/tooltip": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
+      "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -883,6 +1092,78 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.1.tgz",
+      "integrity": "sha512-BGL3hA66Y8Qm3KmRZUlfG/mFbDPYajgil2/jOP0VXf2+o2WPVmcDps/eEgdDqgf5Pv9eBbyj7LschLMuSjlW3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~10.0.1",
+        "@react-spring/types": "~10.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.1.tgz",
+      "integrity": "sha512-KaMMsN1qHuVTsFpg/5ajAVye7OEqhYbCq0g4aKM9bnSZlDBBYpO7Uf+9eixyXN8YEbF+YXaYj9eoWDs+npZ+sA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.1",
+        "@react-spring/shared": "~10.0.1",
+        "@react-spring/types": "~10.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.1.tgz",
+      "integrity": "sha512-UrzG/d6Is+9i0aCAjsjWRqIlFFiC4lFqFHrH63zK935z2YDU95TOFio4VKGISJ5SG0xq4ULy7c1V3KU+XvL+Yg==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.1.tgz",
+      "integrity": "sha512-KR2tmjDShPruI/GGPfAZOOLvDgkhFseabjvxzZFFggJMPkyICLjO0J6mCIoGtdJSuHywZyc4Mmlgi+C88lS00g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~10.0.1",
+        "@react-spring/types": "~10.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.1.tgz",
+      "integrity": "sha512-Fk1wYVAKL+ZTYK+4YFDpHf3Slsy59pfFFvnnTfRjQQFGlyIo4VejPtDs3CbDiuBjM135YztRyZjIH2VbycB+ZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/web": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.1.tgz",
+      "integrity": "sha512-FgQk02OqFrYyJBTTnBTWAU0WPzkHkKXauc6aeexcvATvLapUxwnfGuLlsLYF8BYjEVfkivPT04ziAue6zyRBtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.1",
+        "@react-spring/core": "~10.0.1",
+        "@react-spring/shared": "~10.0.1",
+        "@react-spring/types": "~10.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1674,6 +1955,87 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz",
+      "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz",
+      "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -2648,6 +3010,146 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2722,6 +3224,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2783,6 +3291,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3398,12 +3916,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3856,6 +4389,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4266,8 +4808,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -4609,6 +5150,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4619,7 +5166,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -4890,7 +5436,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5168,7 +5713,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5226,8 +5770,38 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
     },
     "node_modules/react-use-measure": {
       "version": "2.1.7",
@@ -5244,6 +5818,54 @@
         }
       }
     },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz",
+      "integrity": "sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5851,6 +6473,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -6103,6 +6731,58 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.5.tgz",
+      "integrity": "sha512-Q76E3lnIV+4YT9AHcrHEHYmAd9LKwUAbPXDm7FlqVGDHiSOhX3RDjT8dm0AxbJup6WgOb1YEcKyCr11kBJR5KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/victory-vendor/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 6b43f89..996f966 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nivo/bar": "^0.99.0",
     "@supabase/supabase-js": "^2.49.8",
     "@tsparticles/engine": "^3.8.1",
     "@tsparticles/react": "^3.0.0",
@@ -20,6 +21,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-use-measure": "^2.1.7",
+    "recharts": "^2.15.3",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {

From 675435e79d5f9a4e5762a3adc542b5645f7f0fd3 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Fri, 13 Jun 2025 01:57:22 +0530
Subject: [PATCH 02/15] improve charts ui

---
 app/page.js           |   5 +--
 components/Charts.jsx | 102 +++++++++++++++++++++++-------------------
 2 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/app/page.js b/app/page.js
index 9663a3d..5a6e336 100644
--- a/app/page.js
+++ b/app/page.js
@@ -325,7 +325,6 @@ export default function Home() {
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
         >
-          {/* TODO: Add metric charts here */}
           {/* <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
@@ -374,7 +373,7 @@ export default function Home() {
           </motion.div>
 
           <motion.div
-            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-8 shadow-2xl shadow-blue-500/20"
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-0 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
             whileInView="show"
@@ -974,7 +973,7 @@ export default function Home() {
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
-          className="w-11/12 md:w-5/6 grid grid-cols-1 md:grid-cols-3 grid-rows-3 md:grid-rows-1 mt-12 gap-2 md:gap-8"
+          className="w-11/12 md:w-5/6 grid grid-cols-1 md:grid-cols-3 grid-rows-2 md:grid-rows-1 mt-12 gap-2 md:gap-8"
         >
           <motion.div className="relative w-full h-[180px] md:h-[240px] bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20">
             <Image
diff --git a/components/Charts.jsx b/components/Charts.jsx
index d113875..30b68d0 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -65,62 +65,72 @@ const linkedinFollowersData = [
 
 export function BarChartComponent() {
   return (
-    <ResponsiveContainer width="100%" height="100%">
-      <BarChart
-        width={500}
-        height={300}
-        data={pullRequestsData}
-        margin={{
-          top: 20,
-          right: 10,
-          left: 10,
-          bottom: 10,
-        }}
-      >
-        <CartesianGrid strokeDasharray="4 0" />
-        <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={80} />
-        <YAxis />
-        {/* <Tooltip /> */}
-        {/* <Legend /> */}
-        <Bar
-          dataKey="value"
-          fill="#4C75FF"
-          activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">Pull Requests</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <BarChart
+          data={pullRequestsData}
+          margin={{
+            top: 20,
+            right: 10,
+            left: 10,
+            bottom: 10,
+          }}
         >
-          <LabelList dataKey="value" position="top" className="text-sm" />
-        </Bar>
-      </BarChart>
-    </ResponsiveContainer>
+          <CartesianGrid strokeDasharray="4 0" stroke="#232D6B" />
+          <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={60} tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <YAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <Bar
+            dataKey="value"
+            fill="#4C75FF"
+            radius={[8, 8, 0, 0]}
+            activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
+          >
+            <LabelList dataKey="value" position="top" style={{ fill: '#fff', fontWeight: 600 }} />
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
   );
 }
 
 export function AreaChartComponent() {
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <AreaChart data={campusAmbassadorsData} margin={{ top: 20, right: 10, left: 10, bottom: 0 }}>
-        <CartesianGrid strokeDasharray="1 1" />
-        <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={80} />
-        <YAxis />
-        {/* <Tooltip /> */}
-        <Area type="monotone" dataKey="value" stroke="#4C75FF" fill="#A7ADFE" fillOpacity={0.3}>
-          <LabelList dataKey="value" position="top" className="text-sm" />
-        </Area>
-      </AreaChart>
-    </ResponsiveContainer>
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">Campus Ambassadors</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={campusAmbassadorsData} margin={{ top: 20, right: 10, left: 10, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="1 1" stroke="#232D6B" />
+          <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={60} tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <YAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <Tooltip wrapperClassName="border-[20px] border-red-500" contentStyle={{ background: '#232D6B', border: 'none', color: '#fff' }} labelStyle={{ color: '#A7ADFE' }} />
+          <Area type="monotone" dataKey="value" stroke="#4C75FF" fill="#A7ADFE" fillOpacity={0.25} strokeWidth={3} dot={{ r: 5, fill: '#4C75FF' }}>
+            <LabelList dataKey="value" position="top" style={{ fill: '#fff', fontWeight: 600 }} />
+          </Area>
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   );
 }
 
 export function RadarChartComponent() {
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={linkedinFollowersData}>
-        <PolarGrid />
-        <PolarAngleAxis dataKey="name" tick={{ fontSize: 12 }} />
-        <PolarRadiusAxis />
-        <Radar name="Value" dataKey="value" stroke="#4C75FF" fill="#4C75FF" fillOpacity={0.4} />
-        {/* <Legend /> */}
-        {/* <Tooltip /> */}
-      </RadarChart>
-    </ResponsiveContainer>
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-4 font-semibold text-xl">LinkedIn Followers</h3>
+      <ResponsiveContainer width={300} height={300}>
+        <RadarChart 
+          cx="55%" 
+          cy="50%" 
+          outerRadius="95%" 
+          data={linkedinFollowersData}
+          margin={{ left: 0, right: 0, top: 20, bottom: 10 }}
+        >
+          <PolarGrid stroke="#232D6B" />
+          <PolarAngleAxis dataKey="name" tick={{ fontSize: 16, fill: '#A7ADFE' }} />
+          <PolarRadiusAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <Radar name="Followers" dataKey="value" stroke="#4C75FF" fill="#4C75FF" fillOpacity={0.4} />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
   );
 }

From 09cd439de5f53b03afed2b880d35b603dc093b08 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Fri, 13 Jun 2025 02:23:41 +0530
Subject: [PATCH 03/15] increase testimonials

---
 components/Testimonials.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/Testimonials.jsx b/components/Testimonials.jsx
index 9f14b22..43b89be 100644
--- a/components/Testimonials.jsx
+++ b/components/Testimonials.jsx
@@ -17,6 +17,18 @@ const testimonials = [
     role: "Core Team Member",
     feedback: `Being part of the GSSoC core team has been an epic adventure...`,
   },
+  {
+    name: "Anchal Chaturvedi",
+    imgUrl: "https://drive.google.com/uc?id=1D4rzFbw4oGlLOqZKDLOBpcNGJuvk8xDq",
+    role: "Contributor & Ambassador",
+    feedback: `Throughout this journey, all the mentors were very supportive and helpful at every step. This was the beginning of my open source journey, and I learned a lot from it.`,
+  },
+  {
+    name: "Vuppala Sai Srija",
+    imgUrl: "https://drive.google.com/uc?id=1ZV2bJWGGquPMK_NYBFSqVucHinNjArkp",
+    role: "Contributor",
+    feedback: `My journey through GSSoC'24 has been an exciting blend of learning and achievement. Although I started late due to exams, I was able to...`,
+  },
   {
     name: "Jeevana Maradana",
     imgUrl: "https://drive.google.com/uc?id=1HJYiiz--2ILG_MueuwdflGxlcxyeAfE1",
@@ -47,6 +59,7 @@ const testimonials = [
     role: "Contributor & Ambassador",
     feedback: `Participating in GSSoC 2024 has been an incredibly rewarding journey...`,
   },
+
 ];
 
 const Testimonials = () => {

From 928c0c49c7820d9de59b097ec6627c2906a25e5f Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sun, 15 Jun 2025 00:56:58 +0530
Subject: [PATCH 04/15] add know about GSSoC section

---
 app/page.js            | 84 +++++++++++++++++++++++++++++++++++++++++-
 components/CountUp.jsx | 37 +++++++++++++++++++
 2 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 components/CountUp.jsx

diff --git a/app/page.js b/app/page.js
index 5a6e336..d1ab03b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -41,6 +41,7 @@ import { redirect } from "next/navigation";
 import Testimonials from "@/components/Testimonials";
 import PastSponsors from "@/components/PastSponsors";
 import { AreaChartComponent, BarChartComponent, RadarChartComponent } from "@/components/Charts";
+import CountUp from '@/components/CountUp';
 
 const containerVariants = {
   hidden: {},
@@ -197,13 +198,13 @@ export default function Home() {
               Founded in 2017 by Anubha Maheshwar, Girlscript is a
               not-for-profit organization dedicated to making quality education
               accessible for all. With a mission to empower individuals through
-              learning, we’ve built a vibrant community of over 500,000
+              learning, we&apos;ve built a vibrant community of over 500,000
               learners. Our programs focus on skill development, mentorship, and
               career guidance, bridging the gap between education and the
               professional world. We collaborate with corporates and
               institutions to offer real-world learning experiences, all while
               staying rooted in inclusivity, humility, and community. At
-              Girlscript, every learner’s growth is a shared success. Join us in
+              Girlscript, every learner&apos;s growth is a shared success. Join us in
               shaping a future where education is a right—not a privilege—and
               where everyone can thrive.
             </p>
@@ -275,6 +276,85 @@ export default function Home() {
         </motion.div>
       </motion.section>
 
+      {/* TODO: Add Know about GSSoC section */}
+      <motion.section
+        id="about"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: false, amount: 0.3 }}
+        variants={containerVariants}
+        className="w-screen mt-40 h-min-screen relative flex flex-col items-center bg-[#00020f] text-white"
+      >
+        <motion.div
+          variants={itemVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: false, amount: 0.3 }}
+          className="w-screen relative flex flex-col items-center bg-[#00020f] text-white"
+        >
+          <div className="text-center text-white z-20 flex flex-col items-center">
+            <h1 className="text-3xl md:text-6xl font-bold mb-4">
+              Know About <br /> GirlScript Summer Of Code
+            </h1>
+            <p className="w-11/12 text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
+            GirlScript Summer of Code is the 3-month long Open Source program during summers conducted by GirlScript Foundation, started in 2018, to help beginners get started with Open Source Development while encouraging diversity. Throughout the program, participants contribute to different projects under the guidance of experienced mentors. Top participants get exciting goodies and opportunities.
+            </p>
+          </div>
+        </motion.div>
+
+        {/* TODO: Add the increasing number elements section here */}
+        <motion.div className="w-full flex flex-wrap justify-center md:gap-8 gap-4 mt-2 mb-32">
+          <motion.div 
+            variants={itemVariants}
+            className="flex flex-col items-center"
+          >
+            <CountUp end={42} suffix="k+"/>
+            <div className="text-[#A7ADBE] text-sm md:text-base">Registrations</div>
+          </motion.div>
+
+          <motion.div 
+            variants={itemVariants}
+            className="flex flex-col items-center"
+          >
+            <CountUp end={200} suffix="+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">Institutes</div>
+          </motion.div>
+
+          <motion.div 
+            variants={itemVariants}
+            className="flex flex-col items-center"
+          >
+            <CountUp end={21} suffix="K+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">PRs</div>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants} 
+            className="flex flex-col items-center"
+          >
+            <CountUp end={20} suffix="+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">Countries</div>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-col items-center"
+          >
+            <CountUp end={30} suffix="K+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">Participants</div>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-col items-center"
+          >
+            <CountUp end={500} suffix="+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">Total Projects</div>
+          </motion.div>
+        </motion.div>
+
+      </motion.section>
+
       <motion.section
         id="why-gssoc"
         initial="hidden"
diff --git a/components/CountUp.jsx b/components/CountUp.jsx
new file mode 100644
index 0000000..e59fc93
--- /dev/null
+++ b/components/CountUp.jsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { motion, useInView, animate } from 'framer-motion';
+
+const CountUp = ({ end, duration = 2, suffix = "+" }) => {
+  const [count, setCount] = useState(0);
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.3 });
+
+  useEffect(() => {
+    if (isInView) {
+      const controls = animate(0, end, {
+        duration: duration,
+        onUpdate: (latest) => {
+          setCount(Math.floor(latest));
+        },
+      });
+
+      return () => controls.stop();
+    }
+  }, [isInView, end, duration]);
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, scale: 0.5 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5 }}
+      className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
+    >
+      {count}{suffix}
+    </motion.div>
+  );
+};
+
+export default CountUp; 
\ No newline at end of file

From 55aaefbf36817f2b8844619c8166d58cee20da32 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sun, 15 Jun 2025 01:23:43 +0530
Subject: [PATCH 05/15] add three more charts

---
 app/page.js           | 178 +++++++++++------------------
 components/Charts.jsx | 252 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 279 insertions(+), 151 deletions(-)

diff --git a/app/page.js b/app/page.js
index d1ab03b..a7957ea 100644
--- a/app/page.js
+++ b/app/page.js
@@ -40,7 +40,7 @@ import { delay, motion, Variants } from "framer-motion";
 import { redirect } from "next/navigation";
 import Testimonials from "@/components/Testimonials";
 import PastSponsors from "@/components/PastSponsors";
-import { AreaChartComponent, BarChartComponent, RadarChartComponent } from "@/components/Charts";
+import { AreaChartComponent, BarChartComponent, RadarChartComponent, LineChartComponent, PieChartComponent, ComposedChartComponent } from "@/components/Charts";
 import CountUp from '@/components/CountUp';
 
 const containerVariants = {
@@ -276,7 +276,6 @@ export default function Home() {
         </motion.div>
       </motion.section>
 
-      {/* TODO: Add Know about GSSoC section */}
       <motion.section
         id="about"
         initial="hidden"
@@ -302,7 +301,6 @@ export default function Home() {
           </div>
         </motion.div>
 
-        {/* TODO: Add the increasing number elements section here */}
         <motion.div className="w-full flex flex-wrap justify-center md:gap-8 gap-4 mt-2 mb-32">
           <motion.div 
             variants={itemVariants}
@@ -353,85 +351,13 @@ export default function Home() {
           </motion.div>
         </motion.div>
 
-      </motion.section>
-
-      <motion.section
-        id="why-gssoc"
-        initial="hidden"
-        whileInView="show"
-        viewport={{ once: false, amount: 0.3 }}
-        variants={containerVariants}
-        className="w-screen relative flex flex-col items-center bg-[#00020f] text-white"
-      >
-        <motion.div
-          variants={itemVariants}
-          initial="hidden"
-          whileInView="show"
-          viewport={{ once: false, amount: 0.3 }}
-          className="w-screen relative flex flex-col items-center bg-[#00020f] text-white mt-32"
-        >
-          <Image
-            src={sbg}
-            alt="Background"
-            className="absolute top-20 object-contain scale-x-[-1]"
-          />
-          <SparklesCore
-            background="transparent"
-            minSize={0.4}
-            maxSize={0.8}
-            particleDensity={80}
-            particleSpeed={0.2}
-            className="absolute top-20 w-1/3 h-[300px]"
-            particleColor="#FFFFFF"
-          />
-
-          <div className="text-center text-white z-20">
-            <p className="text-lg mb-4 mt-32 text-[#A7ADBE] bg-[#FFFFFF15] text-[12px] inline-block px-4 py-2 rounded-full">
-              Why GSSoC?
-            </p>
-            <h1 className="text-3xl md:text-6xl font-bold mb-4">
-              Why You Should <br /> Take Part In GSSoC
-            </h1>
-            <p className="text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE]">
-              A new era of open source contributions and learning.
-            </p>
-          </div>
-        </motion.div>
-
         <motion.div
-          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 mb-12 gap-4 mt-[80px] md:mt-[120px] items-center justify-items-center"
+          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 mb-12 gap-4 mt-[80px] md:mt-8 items-center justify-items-center"
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
         >
-          {/* <motion.div
-            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-8 shadow-2xl shadow-blue-500/20"
-            variants={itemVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.3 }}
-          >
-            <Image
-              src={cardbg6}
-              alt="Background"
-              className="absolute right-0 top-0 h-full object-cover"
-            />
-            <Image
-              src={needle2}
-              alt="Background"
-              className="absolute object-cover transition-transform duration-500 translate-y-12 translate-x-24 group-hover:translate-x-60  group-hover:-translate-y-12"
-            />
-
-            <div className="absolute bottom-8 left-0 w-full">
-              <div className="text-[14px] md:text-[18px] my-2 w-full text-center">
-                Grow Your Career
-              </div>
-              <div className="text-[#A7ADBE] text-[14px] w-full text-center">
-               Build Projects. Build Skills. Build Your Career
-              </div>
-            </div>
-          </motion.div> */}
           <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
@@ -462,61 +388,81 @@ export default function Home() {
             <RadarChartComponent />
           </motion.div>
 
-          {/* <motion.div
-            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-8 shadow-2xl shadow-blue-500/20"
+          <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
-            <Image
-              src={cardbg7}
-              alt="Background"
-              className="absolute right-0 top-0 w-full h-full object-cover"
-            />
-            <Image
-              src={needle}
-              alt="Background"
-              className="absolute object-cover -translate-y-12 origin-bottom -rotate-[60deg] transition-transform duration-500 group-hover:rotate-[60deg]"
-            />
+            <LineChartComponent />
+          </motion.div>
 
-            <div className="absolute bottom-8 left-0 w-full">
-              <div className="text-[14px] md:text-[18px] my-2 w-full text-center">
-                Maximize Your Potential
-              </div>
-              <div className="text-[#A7ADBE] text-[14px] w-full text-center">
-                Maximize Impact. Maximize You.
-              </div>
-            </div>
+          <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
+            variants={itemVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.3 }}
+          >
+            <PieChartComponent />
           </motion.div>
 
           <motion.div
-            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-8 shadow-2xl shadow-blue-500/20 overflow-hidden"
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
-            <Image
-              src={cardbg4}
-              alt="Background"
-              className="absolute right-0 top-0 w-full h-full object-cover"
-            />
-            <Image
-              src={cardbg8}
-              alt="Background"
-              className="absolute object-cover transition-transform duration-500 group-hover:-translate-y-8"
-            />
+            <ComposedChartComponent />
+          </motion.div>
+        </motion.div>
+      </motion.section>
 
-            <div className="absolute bottom-8 left-0 w-full">
-              <div className="text-[14px] md:text-[18px] my-2 w-full text-center">
-                Stand Out From The Crowd
-              </div>
-              <div className="text-[#A7ADBE] text-[14px] w-full text-center">
-                Contribute Boldly. Shine Brightly.
-              </div>
-            </div>
-          </motion.div> */}
+      
+
+      <motion.section
+        id="why-gssoc"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: false, amount: 0.3 }}
+        variants={containerVariants}
+        className="w-screen relative flex flex-col items-center bg-[#00020f] text-white"
+      >
+        <motion.div
+          variants={itemVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: false, amount: 0.3 }}
+          className="w-screen relative flex flex-col items-center bg-[#00020f] text-white mt-32"
+        >
+          <Image
+            src={sbg}
+            alt="Background"
+            className="absolute top-20 object-contain scale-x-[-1]"
+          />
+          <SparklesCore
+            background="transparent"
+            minSize={0.4}
+            maxSize={0.8}
+            particleDensity={80}
+            particleSpeed={0.2}
+            className="absolute top-20 w-1/3 h-[300px]"
+            particleColor="#FFFFFF"
+          />
+
+          <div className="text-center text-white z-20">
+            <p className="text-lg mb-4 mt-32 text-[#A7ADBE] bg-[#FFFFFF15] text-[12px] inline-block px-4 py-2 rounded-full">
+              Why GSSoC?
+            </p>
+            <h1 className="text-3xl md:text-6xl font-bold mb-4">
+              Why You Should <br /> Take Part In GSSoC
+            </h1>
+            <p className="text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE]">
+              A new era of open source contributions and learning.
+            </p>
+          </div>
         </motion.div>
 
         <motion.div
diff --git a/components/Charts.jsx b/components/Charts.jsx
index 30b68d0..d0953ea 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -15,58 +15,68 @@ import {
   PolarGrid,
   PolarAngleAxis,
   PolarRadiusAxis,
-  Radar
+  Radar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  ComposedChart,
 } from "recharts";
 
 const pullRequestsData = [
-  {
-    name: "GSSoC'24",
-    value: 29000,
-  },
   {
     name: "GSSoC'23",
     value: 27000,
   },
+  {
+    name: "GSSoC'24",
+    value: 29000,
+  },
   {
     name: "GSSoC'24 Ext",
     value: 36000,
-  }
+  },
 ];
 
 const campusAmbassadorsData = [
-  {
-    name: "GSSoC'24",
-    value: 29000,
-  },
   {
     name: "GSSoC'23",
     value: 27000,
   },
+  {
+    name: "GSSoC'24",
+    value: 29000,
+  },
   {
     name: "GSSoC'24 Ext",
     value: 36000,
-  }
+  },
 ];
 
 const linkedinFollowersData = [
-  {
-    name: "GSSoC'24",
-    value: 28000,
-  },
   {
     name: "GSSoC'23",
     value: 34000,
   },
+  {
+    name: "GSSoC'24",
+    value: 28000,
+  },
   {
     name: "GSSoC'24 Ext",
     value: 48000,
-  }
+  },
 ];
 
+const COLORS = ["#4C75FF", "#1A4FFF", "#A7ADFE"];
+
 export function BarChartComponent() {
   return (
     <div>
-      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">Pull Requests</h3>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Pull Requests
+      </h3>
       <ResponsiveContainer width="100%" height={300}>
         <BarChart
           data={pullRequestsData}
@@ -78,15 +88,26 @@ export function BarChartComponent() {
           }}
         >
           <CartesianGrid strokeDasharray="4 0" stroke="#232D6B" />
-          <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={60} tick={{ fill: '#A7ADFE', fontSize: 13 }} />
-          <YAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
+          <XAxis
+            dataKey="name"
+            interval={0}
+            angle={-15}
+            textAnchor="end"
+            height={60}
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+          />
+          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
           <Bar
             dataKey="value"
             fill="#4C75FF"
             radius={[8, 8, 0, 0]}
             activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
           >
-            <LabelList dataKey="value" position="top" style={{ fill: '#fff', fontWeight: 600 }} />
+            <LabelList
+              dataKey="value"
+              position="top"
+              style={{ fill: "#fff", fontWeight: 600 }}
+            />
           </Bar>
         </BarChart>
       </ResponsiveContainer>
@@ -97,15 +118,47 @@ export function BarChartComponent() {
 export function AreaChartComponent() {
   return (
     <div>
-      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">Campus Ambassadors</h3>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Campus Ambassadors
+      </h3>
       <ResponsiveContainer width="100%" height={300}>
-        <AreaChart data={campusAmbassadorsData} margin={{ top: 20, right: 10, left: 10, bottom: 0 }}>
+        <AreaChart
+          data={campusAmbassadorsData}
+          margin={{ top: 20, right: 10, left: 10, bottom: 0 }}
+        >
           <CartesianGrid strokeDasharray="1 1" stroke="#232D6B" />
-          <XAxis dataKey="name" interval={0} angle={-15} textAnchor="end" height={60} tick={{ fill: '#A7ADFE', fontSize: 13 }} />
-          <YAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
-          <Tooltip wrapperClassName="border-[20px] border-red-500" contentStyle={{ background: '#232D6B', border: 'none', color: '#fff' }} labelStyle={{ color: '#A7ADFE' }} />
-          <Area type="monotone" dataKey="value" stroke="#4C75FF" fill="#A7ADFE" fillOpacity={0.25} strokeWidth={3} dot={{ r: 5, fill: '#4C75FF' }}>
-            <LabelList dataKey="value" position="top" style={{ fill: '#fff', fontWeight: 600 }} />
+          <XAxis
+            dataKey="name"
+            interval={0}
+            angle={-15}
+            textAnchor="end"
+            height={60}
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+          />
+          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <Tooltip
+            wrapperClassName="border-[20px] border-red-500"
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+          />
+          <Area
+            type="monotone"
+            dataKey="value"
+            stroke="#4C75FF"
+            fill="#A7ADFE"
+            fillOpacity={0.25}
+            strokeWidth={3}
+            dot={{ r: 5, fill: "#4C75FF" }}
+          >
+            <LabelList
+              dataKey="value"
+              position="top"
+              style={{ fill: "#fff", fontWeight: 600 }}
+            />
           </Area>
         </AreaChart>
       </ResponsiveContainer>
@@ -116,21 +169,150 @@ export function AreaChartComponent() {
 export function RadarChartComponent() {
   return (
     <div>
-      <h3 className="w-full text-center text-[#A7ADFE] mb-4 font-semibold text-xl">LinkedIn Followers</h3>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-4 font-semibold text-xl">
+        LinkedIn Followers
+      </h3>
       <ResponsiveContainer width={300} height={300}>
-        <RadarChart 
-          cx="55%" 
-          cy="50%" 
-          outerRadius="95%" 
+        <RadarChart
+          cx="55%"
+          cy="50%"
+          outerRadius="95%"
           data={linkedinFollowersData}
           margin={{ left: 0, right: 0, top: 20, bottom: 10 }}
         >
           <PolarGrid stroke="#232D6B" />
-          <PolarAngleAxis dataKey="name" tick={{ fontSize: 16, fill: '#A7ADFE' }} />
-          <PolarRadiusAxis tick={{ fill: '#A7ADFE', fontSize: 13 }} />
-          <Radar name="Followers" dataKey="value" stroke="#4C75FF" fill="#4C75FF" fillOpacity={0.4} />
+          <PolarAngleAxis
+            dataKey="name"
+            tick={{ fontSize: 16, fill: "#A7ADFE" }}
+          />
+          <PolarRadiusAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <Radar
+            name="Followers"
+            dataKey="value"
+            stroke="#4C75FF"
+            fill="#4C75FF"
+            fillOpacity={0.4}
+          />
         </RadarChart>
       </ResponsiveContainer>
     </div>
   );
 }
+
+export function LineChartComponent() {
+  return (
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Project Admin Registrations
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart
+          data={pullRequestsData}
+          margin={{ top: 20, right: 10, left: 10, bottom: 10 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
+          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+          />
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke="#4C75FF"
+            strokeWidth={3}
+            dot={{ r: 6, fill: "#4C75FF" }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function PieChartComponent() {
+  return (
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Registrations From Contributors
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <PieChart>
+          <Pie
+            data={pullRequestsData}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={100}
+            fill="#8884d8"
+            dataKey="value"
+            label={({ name, percent }) =>
+              `${name} ${(percent * 100).toFixed(0)}%`
+            }
+          >
+            {pullRequestsData.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={COLORS[index % COLORS.length]}
+              />
+            ))}
+          </Pie>
+          {/* <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+          /> */}
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function ComposedChartComponent() {
+  return (
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Contributors Making It Onto Leaderboard
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <ComposedChart
+          data={pullRequestsData}
+          margin={{ top: 20, right: 10, left: 10, bottom: 10 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
+          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+          />
+          <Area
+            type="monotone"
+            dataKey="value"
+            fill="#4C75FF"
+            fillOpacity={0.2}
+            stroke="#4C75FF"
+          />
+          <Bar dataKey="value" fill="#1A4FFF" radius={[4, 4, 0, 0]} />
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke="#A7ADFE"
+            strokeWidth={2}
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

From 97df33ad1e5eec76e49a0d6855af217f7dcaa370 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sun, 15 Jun 2025 12:08:07 +0530
Subject: [PATCH 06/15] fix charts ui & add data from brochure

---
 app/page.js            |  30 ++++++++++
 components/Charts.jsx  | 122 +++++++++++++++++++++++++++++++----------
 components/CountUp.jsx |   4 +-
 3 files changed, 126 insertions(+), 30 deletions(-)

diff --git a/app/page.js b/app/page.js
index a7957ea..f4f4c49 100644
--- a/app/page.js
+++ b/app/page.js
@@ -365,6 +365,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <BarChartComponent />
           </motion.div>
 
@@ -375,6 +380,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <AreaChartComponent />
           </motion.div>
 
@@ -385,6 +395,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <RadarChartComponent />
           </motion.div>
 
@@ -395,6 +410,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <LineChartComponent />
           </motion.div>
 
@@ -405,6 +425,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <PieChartComponent />
           </motion.div>
 
@@ -415,6 +440,11 @@ export default function Home() {
             whileInView="show"
             viewport={{ once: false, amount: 0.3 }}
           >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
             <ComposedChartComponent />
           </motion.div>
         </motion.div>
diff --git a/components/Charts.jsx b/components/Charts.jsx
index d0953ea..ceb842a 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -69,8 +69,61 @@ const linkedinFollowersData = [
   },
 ];
 
+const projectAdminRegistrationsData = [
+  {
+    name: "GSSoC'23",
+    value: 18000,
+  },
+  {
+    name: "GSSoC'24",
+    value: 24000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 29000,
+  },
+];
+
+const contributorsMakingItOntoLeaderboardData = [
+  {
+    name: "GSSoC'23",
+    value: 26000,
+  },
+  {
+    name: "GSSoC'24",
+    value: 31000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 36000,
+  },
+];
+
+const registrationsFromContributorsData = [
+  {
+    name: "GSSoC'23",
+    value: 33000,
+  },
+  {
+    name: "GSSoC'24",
+    value: 40000,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 47000,
+  },
+];
+
 const COLORS = ["#4C75FF", "#1A4FFF", "#A7ADFE"];
 
+// Format number to k format
+const formatNumber = (value) => {
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(0)}k`;
+  }
+  return value;
+};
+
 export function BarChartComponent() {
   return (
     <div>
@@ -96,17 +149,21 @@ export function BarChartComponent() {
             height={60}
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
           />
-          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <YAxis 
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+            tickFormatter={formatNumber}
+          />
           <Bar
             dataKey="value"
             fill="#4C75FF"
-            radius={[8, 8, 0, 0]}
-            activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
+            radius={[4, 4, 0, 0]}
+            activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" width={3} />}
           >
             <LabelList
               dataKey="value"
               position="top"
               style={{ fill: "#fff", fontWeight: 600 }}
+              formatter={formatNumber}
             />
           </Bar>
         </BarChart>
@@ -121,10 +178,10 @@ export function AreaChartComponent() {
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
         Campus Ambassadors
       </h3>
-      <ResponsiveContainer width="100%" height={300}>
+      <ResponsiveContainer width="90%" height={300} className="px-1">
         <AreaChart
           data={campusAmbassadorsData}
-          margin={{ top: 20, right: 10, left: 10, bottom: 0 }}
+          margin={{ top: 20, right: 15, left: 10, bottom: 0 }}
         >
           <CartesianGrid strokeDasharray="1 1" stroke="#232D6B" />
           <XAxis
@@ -135,7 +192,10 @@ export function AreaChartComponent() {
             height={60}
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
           />
-          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <YAxis 
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+            tickFormatter={formatNumber}
+          />
           <Tooltip
             wrapperClassName="border-[20px] border-red-500"
             contentStyle={{
@@ -144,6 +204,7 @@ export function AreaChartComponent() {
               color: "#fff",
             }}
             labelStyle={{ color: "#A7ADFE" }}
+            formatter={formatNumber}
           />
           <Area
             type="monotone"
@@ -158,6 +219,7 @@ export function AreaChartComponent() {
               dataKey="value"
               position="top"
               style={{ fill: "#fff", fontWeight: 600 }}
+              formatter={formatNumber}
             />
           </Area>
         </AreaChart>
@@ -169,29 +231,33 @@ export function AreaChartComponent() {
 export function RadarChartComponent() {
   return (
     <div>
-      <h3 className="w-full text-center text-[#A7ADFE] mb-4 font-semibold text-xl">
+      <h3 className="w-full text-center text-[#A7ADFE] font-semibold text-xl">
         LinkedIn Followers
       </h3>
-      <ResponsiveContainer width={300} height={300}>
+      <ResponsiveContainer width={430} height={300}>
         <RadarChart
           cx="55%"
           cy="50%"
-          outerRadius="95%"
+          outerRadius="60%"
           data={linkedinFollowersData}
           margin={{ left: 0, right: 0, top: 20, bottom: 10 }}
         >
           <PolarGrid stroke="#232D6B" />
           <PolarAngleAxis
             dataKey="name"
-            tick={{ fontSize: 16, fill: "#A7ADFE" }}
+            tick={{ fontSize: 13, fill: "#A7ADFE" }}
+            className="text-center text-sm md:text-base"
+          />
+          <PolarRadiusAxis 
+            tick={{ fill: "#A7ADFE", fontSize: 11 }}
+            tickFormatter={formatNumber}
           />
-          <PolarRadiusAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
           <Radar
             name="Followers"
             dataKey="value"
             stroke="#4C75FF"
             fill="#4C75FF"
-            fillOpacity={0.4}
+            fillOpacity={0.3}
           />
         </RadarChart>
       </ResponsiveContainer>
@@ -207,12 +273,15 @@ export function LineChartComponent() {
       </h3>
       <ResponsiveContainer width="100%" height={300}>
         <LineChart
-          data={pullRequestsData}
+          data={projectAdminRegistrationsData}
           margin={{ top: 20, right: 10, left: 10, bottom: 10 }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
-          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 13 }} />
-          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 11 }} />
+          <YAxis 
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+            tickFormatter={formatNumber}
+          />
           <Tooltip
             contentStyle={{
               background: "#232D6B",
@@ -220,6 +289,7 @@ export function LineChartComponent() {
               color: "#fff",
             }}
             labelStyle={{ color: "#A7ADFE" }}
+            formatter={formatNumber}
           />
           <Line
             type="monotone"
@@ -243,7 +313,7 @@ export function PieChartComponent() {
       <ResponsiveContainer width="100%" height={300}>
         <PieChart>
           <Pie
-            data={pullRequestsData}
+            data={registrationsFromContributorsData}
             cx="50%"
             cy="50%"
             labelLine={false}
@@ -261,14 +331,6 @@ export function PieChartComponent() {
               />
             ))}
           </Pie>
-          {/* <Tooltip
-            contentStyle={{
-              background: "#232D6B",
-              border: "none",
-              color: "#fff",
-            }}
-            labelStyle={{ color: "#A7ADFE" }}
-          /> */}
         </PieChart>
       </ResponsiveContainer>
     </div>
@@ -283,12 +345,15 @@ export function ComposedChartComponent() {
       </h3>
       <ResponsiveContainer width="100%" height={300}>
         <ComposedChart
-          data={pullRequestsData}
-          margin={{ top: 20, right: 10, left: 10, bottom: 10 }}
+          data={contributorsMakingItOntoLeaderboardData}
+          margin={{ top: 20, right: 0, left: 0, bottom: 10 }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
-          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 13 }} />
-          <YAxis tick={{ fill: "#A7ADFE", fontSize: 13 }} />
+          <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 11 }} />
+          <YAxis 
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+            tickFormatter={formatNumber}
+          />
           <Tooltip
             contentStyle={{
               background: "#232D6B",
@@ -296,6 +361,7 @@ export function ComposedChartComponent() {
               color: "#fff",
             }}
             labelStyle={{ color: "#A7ADFE" }}
+            formatter={formatNumber}
           />
           <Area
             type="monotone"
diff --git a/components/CountUp.jsx b/components/CountUp.jsx
index e59fc93..564ae7b 100644
--- a/components/CountUp.jsx
+++ b/components/CountUp.jsx
@@ -24,9 +24,9 @@ const CountUp = ({ end, duration = 2, suffix = "+" }) => {
   return (
     <motion.div
       ref={ref}
-      initial={{ opacity: 0, scale: 0.5 }}
+      initial={{ opacity: 1, scale: 0.5 }}
       whileInView={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5 }}
+      transition={{ duration: 0.3 }}
       className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
     >
       {count}{suffix}

From 4aa2252b7edec32c5d703642ea092a83b23961d6 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sun, 15 Jun 2025 13:33:12 +0530
Subject: [PATCH 07/15] more change to charts and testimonials responsiveness

---
 app/page.js                 |  5 +++--
 components/Charts.jsx       | 19 ++++++++++---------
 components/Testimonials.jsx | 21 ++++++++++++++++-----
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/app/page.js b/app/page.js
index f4f4c49..1f784be 100644
--- a/app/page.js
+++ b/app/page.js
@@ -970,8 +970,9 @@ export default function Home() {
           </div>
         </motion.div> */}
       </motion.section>
-
-      <Testimonials />
+      <div className="w-full">
+        <Testimonials />
+      </div>
 
       <motion.section
         id="sponsor"
diff --git a/components/Charts.jsx b/components/Charts.jsx
index ceb842a..cf2e410 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -149,7 +149,7 @@ export function BarChartComponent() {
             height={60}
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
           />
-          <YAxis 
+          <YAxis
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
             tickFormatter={formatNumber}
           />
@@ -192,7 +192,7 @@ export function AreaChartComponent() {
             height={60}
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
           />
-          <YAxis 
+          <YAxis
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
             tickFormatter={formatNumber}
           />
@@ -248,7 +248,7 @@ export function RadarChartComponent() {
             tick={{ fontSize: 13, fill: "#A7ADFE" }}
             className="text-center text-sm md:text-base"
           />
-          <PolarRadiusAxis 
+          <PolarRadiusAxis
             tick={{ fill: "#A7ADFE", fontSize: 11 }}
             tickFormatter={formatNumber}
           />
@@ -278,7 +278,7 @@ export function LineChartComponent() {
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
           <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 11 }} />
-          <YAxis 
+          <YAxis
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
             tickFormatter={formatNumber}
           />
@@ -308,7 +308,7 @@ export function PieChartComponent() {
   return (
     <div>
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
-        Registrations From Contributors
+        Contributor Registrations
       </h3>
       <ResponsiveContainer width="100%" height={300}>
         <PieChart>
@@ -316,14 +316,15 @@ export function PieChartComponent() {
             data={registrationsFromContributorsData}
             cx="50%"
             cy="50%"
+            fontSize={12}
             labelLine={false}
-            outerRadius={100}
+            outerRadius={60}
             fill="#8884d8"
             dataKey="value"
             label={({ name, percent }) =>
               `${name} ${(percent * 100).toFixed(0)}%`
             }
-          >
+            >
             {pullRequestsData.map((entry, index) => (
               <Cell
                 key={`cell-${index}`}
@@ -341,7 +342,7 @@ export function ComposedChartComponent() {
   return (
     <div>
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
-        Contributors Making It Onto Leaderboard
+        Active Participants
       </h3>
       <ResponsiveContainer width="100%" height={300}>
         <ComposedChart
@@ -350,7 +351,7 @@ export function ComposedChartComponent() {
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
           <XAxis dataKey="name" tick={{ fill: "#A7ADFE", fontSize: 11 }} />
-          <YAxis 
+          <YAxis
             tick={{ fill: "#A7ADFE", fontSize: 13 }}
             tickFormatter={formatNumber}
           />
diff --git a/components/Testimonials.jsx b/components/Testimonials.jsx
index 43b89be..257c67b 100644
--- a/components/Testimonials.jsx
+++ b/components/Testimonials.jsx
@@ -21,7 +21,7 @@ const testimonials = [
     name: "Anchal Chaturvedi",
     imgUrl: "https://drive.google.com/uc?id=1D4rzFbw4oGlLOqZKDLOBpcNGJuvk8xDq",
     role: "Contributor & Ambassador",
-    feedback: `Throughout this journey, all the mentors were very supportive and helpful at every step. This was the beginning of my open source journey, and I learned a lot from it.`,
+    feedback: `Throughout this journey, all the mentors were very supportive and helpful at every step...`,
   },
   {
     name: "Vuppala Sai Srija",
@@ -105,7 +105,18 @@ const Testimonials = () => {
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
-          className="relative min-w-[500px] aspect-5/3 border border-[#131839] bg-radial from-[#003BFF24] to-[#00020F] rounded-3xl p-6 flex flex-col items-center justify-center shadow-[0_20px_50px_rgba(8,_112,_184,_0.7)] mt-32 mb-44"
+          className="
+            relative
+            min-w-[300px] max-w-[95vw] sm:min-w-[400px] md:min-w-[500px]
+            aspect-5/3
+            border border-[#131839]
+            bg-radial from-[#003BFF24] to-[#00020F]
+            rounded-3xl
+            p-3 md:p-6
+            flex flex-col items-center justify-center
+            shadow-[0_20px_50px_rgba(8,_112,_184,_0.7)]
+            mt-12 md:mt-32 mb-20 md:mb-44
+          "
         >
           <Image
             src={cardbg9}
@@ -118,7 +129,7 @@ const Testimonials = () => {
             <Image src={commas} alt="Icon" width={48} height={48} />
           </div>
 
-          <div className="text-xl text-[#A7ADBE] mt-10 text-center z-10 leading-tight font-semibold px-6 max-h-60 overflow-y-auto">
+          <div className="text-sm md:text-xl text-[#A7ADBE] mt-10 text-center z-10 leading-tight font-semibold px-6 max-h-60 overflow-y-auto">
             {item.feedback}
           </div>
 
@@ -135,8 +146,8 @@ const Testimonials = () => {
               />
             </div>
             <div className="ml-4 text-left">
-              <div className="text-[18px] font-medium">{item.name}</div>
-              <div className="text-sm text-[#A7ADBE]">{item.role}</div>
+              <div className="text-sm md:text-[18px] font-medium">{item.name}</div>
+              <div className="text-balance md:text-sm text-[#A7ADBE]">{item.role}</div>
             </div>
           </div>
         </motion.div>

From 4770acbd06ceb599bfc52117a80f857b9aede012 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Thu, 19 Jun 2025 13:53:54 +0530
Subject: [PATCH 08/15] created core team page

---
 app/team/page.js      | 202 ++++++++++++++++++++++++++++++++++++++++++
 app/team/team-data.js |  68 ++++++++++++++
 2 files changed, 270 insertions(+)
 create mode 100644 app/team/page.js
 create mode 100644 app/team/team-data.js

diff --git a/app/team/page.js b/app/team/page.js
new file mode 100644
index 0000000..4d0b16b
--- /dev/null
+++ b/app/team/page.js
@@ -0,0 +1,202 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { ShootingStars } from "@/components/shooting-stars";
+import { StarsBackground } from "@/components/stars-background";
+import { motion } from "framer-motion";
+import cardbg1 from "@/assets/box-bg.svg";
+import iconbg from "@/assets/icon-bg.svg";
+import twitter from "@/assets/twitter.svg";
+import linkedin from "@/assets/linkedin.svg";
+import instagram from "@/assets/instagram.svg";
+import coreTeamMembers from "./team-data";
+
+const containerVariants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, scale: 0.8 },
+  show: {
+    opacity: 1,
+    scale: 1,
+    transition: { type: "spring", stiffness: 300, damping: 20 },
+  },
+};
+
+export default function TeamsPage() {
+  return (
+    <div className="relative w-full min-h-screen font-sans">
+      <div className="fixed inset-0 -z-20 w-full h-full overflow-hidden">
+        <ShootingStars />
+        <StarsBackground starDensity={0.001} />
+      </div>
+
+      <header className="fixed top-0 left-0 w-full bg-transparent flex items-center justify-between p-8 z-80">
+        <div className="text-white text-xl md:text-2xl">GSSoC &apos;25</div>
+        <Link
+          href="/"
+          className="text-white px-5 py-3 rounded-full bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] font-normal cursor-pointer text-[12px] md:text-[14px]"
+        >
+          Go Back
+        </Link>
+      </header>
+
+      <section className="w-screen min-h-screen relative flex flex-col items-center bg-transparent text-white pt-32">
+        <motion.div
+          variants={itemVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: false, amount: 0.3 }}
+          className="w-screen relative flex flex-col items-center bg-transparent text-white mb-16"
+        >
+          <div className="text-center text-white z-20 flex flex-col items-center">
+            <p className="text-lg mb-4 text-[#A7ADBE] bg-[#FFFFFF15] text-[12px] inline-block px-4 py-2 rounded-full">
+              Our Team
+            </p>
+            <h1 className="text-3xl md:text-6xl font-bold mb-4">
+              Meet Our <br /> Core Team
+            </h1>
+            <p className="w-11/12 text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
+              The passionate individuals behind GirlScript Summer of Code 2025, 
+              dedicated to fostering open source contributions and empowering developers worldwide.
+            </p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="w-11/12 md:w-5/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: false, amount: 0.3 }}
+        >
+          {coreTeamMembers.map((member, index) => (
+            <motion.div
+              key={index}
+              className="group relative max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col items-center px-6 py-10 shadow-2xl shadow-blue-500/20 hover:shadow-blue-500/40 transition-all duration-300"
+              variants={itemVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.3 }}
+            >
+              <Image
+                src={cardbg1}
+                alt="Background"
+                className="absolute right-0 top-0 w-full h-full object-cover z-0 rounded-3xl"
+              />
+              
+              {/* Profile Image */}
+              <div className="relative z-10 w-24 h-24 md:w-32 md:h-32 rounded-full overflow-hidden border-4 border-[#232D6B] mb-6">
+                <Image
+                  src={member.image}
+                  alt={member.name}
+                  className="w-full h-full object-cover"
+                  width={128}
+                  height={128}
+                />
+              </div>
+
+              {/* Name */}
+              <h3 className="text-[16px] md:text-[20px] font-semibold text-white text-center mb-2 z-10">
+                {member.name}
+              </h3>
+
+              {/* Role */}
+              <p className="text-[#A7ADBE] text-[12px] md:text-[14px] text-center italic mb-6 z-10">
+                {member.role}
+              </p>
+
+              {/* Social Links */}
+              <div className="flex space-x-3 z-10">
+                {member.linkedin && (
+                  <a
+                    href={member.linkedin}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="h-10 w-10 aspect-square rounded-xl overflow-hidden flex items-center justify-center relative hover:scale-110 transition-transform duration-200"
+                  >
+                    <Image
+                      src={iconbg}
+                      alt="Background"
+                      className="w-full h-full object-cover"
+                    />
+                    <Image
+                      src={linkedin}
+                      alt="LinkedIn"
+                      className="absolute w-11/12 h-3/5 object-cover"
+                    />
+                  </a>
+                )}
+                
+                {member.twitter && (
+                  <a
+                    href={member.twitter}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="h-10 w-10 aspect-square rounded-xl overflow-hidden flex items-center justify-center relative hover:scale-110 transition-transform duration-200"
+                  >
+                    <Image
+                      src={iconbg}
+                      alt="Background"
+                      className="w-full h-full object-cover"
+                    />
+                    <Image
+                      src={twitter}
+                      alt="Twitter"
+                      className="absolute w-11/12 h-3/5 object-cover"
+                    />
+                  </a>
+                )}
+                
+                {member.instagram && (
+                  <a
+                    href={member.instagram}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="h-10 w-10 aspect-square rounded-xl overflow-hidden flex items-center justify-center relative hover:scale-110 transition-transform duration-200"
+                  >
+                    <Image
+                      src={iconbg}
+                      alt="Background"
+                      className="w-full h-full object-cover"
+                    />
+                    <Image
+                      src={instagram}
+                      alt="Instagram"
+                      className="absolute w-11/12 h-3/5 object-cover"
+                    />
+                  </a>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Call to Action */}
+        <motion.div
+          variants={itemVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: false, amount: 0.3 }}
+          className="text-center text-white mb-16 mt-4"
+        >
+          <p className="text-[#A7ADBE] text-[12px] md:text-[14px] mb-4">
+            Want to join our team?
+          </p>
+          <a
+            href="mailto:gssoc@girlscript.tech"
+            className="bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] text-white px-6 py-3 rounded-full font-normal cursor-pointer text-[12px] md:text-[14px] hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
+          >
+            Get In Touch
+          </a>
+        </motion.div>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/team/team-data.js b/app/team/team-data.js
new file mode 100644
index 0000000..5f1a45f
--- /dev/null
+++ b/app/team/team-data.js
@@ -0,0 +1,68 @@
+const coreTeamMembers = [
+  {
+    name: "Rakshitha C",
+    role: "App Content Writer",
+    image: "https://drive.google.com/uc?id=1iLJh49oTg1MsUcofaor9ZJXsSlo9NpYO",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Anjali Kushwaha",
+    role: "Graphic Design",
+    image: "https://drive.google.com/uc?id=1oHpbtpdmk0giCdZWRWwHriWmHhEugj1R",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Harsha Nandi",
+    role: "Program manager",
+    image: "https://drive.google.com/uc?id=1VUc-Mendd1zDtqOEgtkAAY6DlfgqOG-N",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Jyoti Singh",
+    role: "Content Writing",
+    image: "https://drive.google.com/uc?id=1RZSUIZSlfzwMlgLxMnQwamfYzvpV39To",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Kajal Biju",
+    role: "PR & Sponsorship",
+    image: "https://drive.google.com/uc?id=1H5F86uWxPNSL7NIqiCOQwHU8TcHHeg4M",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Karan Sewmal",
+    role: "Web Developer",
+    image: "https://drive.google.com/uc?id=17xJnI_eCENrXOtiW18LdE9cnXhJha7uG",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Varshitha Narra",
+    role: "PR & Sponsorship",
+    image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Varun Sai",
+    role: "Community Moderator",
+    image: "https://drive.google.com/uc?id=1IMNSHX9L6YXTewKVEHjiWJgZrkvTg61m",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+];
+
+export default coreTeamMembers;

From 7fd9bf6a55e2554514b7e70cd015bec3c7ad1e01 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Thu, 19 Jun 2025 15:21:25 +0530
Subject: [PATCH 09/15] improve charts sections

---
 app/page.js           | 6 +++---
 components/Charts.jsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/page.js b/app/page.js
index 1f784be..2f9b396 100644
--- a/app/page.js
+++ b/app/page.js
@@ -322,7 +322,7 @@ export default function Home() {
             variants={itemVariants}
             className="flex flex-col items-center"
           >
-            <CountUp end={21} suffix="K+" />
+            <CountUp end={35} suffix="K+" />
             <div className="text-[#A7ADBE] text-sm md:text-base">PRs</div>
           </motion.div>
 
@@ -338,7 +338,7 @@ export default function Home() {
             variants={itemVariants}
             className="flex flex-col items-center"
           >
-            <CountUp end={30} suffix="K+" />
+            <CountUp end={35} suffix="K+" />
             <div className="text-[#A7ADBE] text-sm md:text-base">Participants</div>
           </motion.div>
 
@@ -352,7 +352,7 @@ export default function Home() {
         </motion.div>
 
         <motion.div
-          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 mb-12 gap-4 mt-[80px] md:mt-8 items-center justify-items-center"
+          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-2 gap-4 mt-[80px] md:mt-8 items-center justify-items-center"
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
diff --git a/components/Charts.jsx b/components/Charts.jsx
index cf2e410..ae11804 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -35,7 +35,7 @@ const pullRequestsData = [
   },
   {
     name: "GSSoC'24 Ext",
-    value: 36000,
+    value: 35000,
   },
 ];
 
@@ -95,7 +95,7 @@ const contributorsMakingItOntoLeaderboardData = [
   },
   {
     name: "GSSoC'24 Ext",
-    value: 36000,
+    value: 35000,
   },
 ];
 

From dfdf9e819f3e55b5fa8872e5bc5e2d96fd7facae Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sat, 21 Jun 2025 11:17:28 +0530
Subject: [PATCH 10/15] create link to team page in nav & data and graph
 enchancement

---
 app/page.js                 |  86 +++++++++++++++------
 app/team/page.js            |  26 +------
 app/team/team-data.js       |  24 ++++--
 components/Charts.jsx       | 150 +++++++++++++++++++++++++-----------
 components/PastSponsors.jsx |   2 +-
 5 files changed, 189 insertions(+), 99 deletions(-)

diff --git a/app/page.js b/app/page.js
index 1f784be..4f50c07 100644
--- a/app/page.js
+++ b/app/page.js
@@ -40,8 +40,16 @@ import { delay, motion, Variants } from "framer-motion";
 import { redirect } from "next/navigation";
 import Testimonials from "@/components/Testimonials";
 import PastSponsors from "@/components/PastSponsors";
-import { AreaChartComponent, BarChartComponent, RadarChartComponent, LineChartComponent, PieChartComponent, ComposedChartComponent } from "@/components/Charts";
-import CountUp from '@/components/CountUp';
+import {
+  AreaChartComponent,
+  BarChartComponent,
+  RadarChartComponent,
+  LineChartComponent,
+  HorizontalBarChartComponent,
+  ComposedChartComponent,
+  RadialBarChartComponent,
+} from "@/components/Charts";
+import CountUp from "@/components/CountUp";
 
 const containerVariants = {
   hidden: {},
@@ -97,6 +105,12 @@ export default function Home() {
           >
             Sponsor
           </a>
+          <a
+            href="/team"
+            className="text-white bg-transparent hover:bg-[#161C44] border border-transparent hover:border-[#232D6B] cursor-pointer px-4 py-2 rounded-full"
+          >
+            Team
+          </a>
           <a
             href="#contact"
             className="text-white bg-transparent hover:bg-[#161C44] border border-transparent hover:border-[#232D6B] cursor-pointer px-4 py-2 rounded-full"
@@ -107,7 +121,7 @@ export default function Home() {
 
         <a
           href="/apply/campus-ambassador"
-          className="text-white px-5 py-3 rounded-full bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] font-normal cursor-pointer text-[12px] md:text-[14px] text-[12px] md:text-[10px] md:text-[14px]"
+          className="text-white px-5 py-3 rounded-full bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] font-normal cursor-pointer text-[12px] md:text-[14px]"
         >
           Apply Now
         </a>
@@ -204,9 +218,9 @@ export default function Home() {
               professional world. We collaborate with corporates and
               institutions to offer real-world learning experiences, all while
               staying rooted in inclusivity, humility, and community. At
-              Girlscript, every learner&apos;s growth is a shared success. Join us in
-              shaping a future where education is a right—not a privilege—and
-              where everyone can thrive.
+              Girlscript, every learner&apos;s growth is a shared success. Join
+              us in shaping a future where education is a right—not a
+              privilege—and where everyone can thrive.
             </p>
           </div>
         </motion.div>
@@ -296,29 +310,38 @@ export default function Home() {
               Know About <br /> GirlScript Summer Of Code
             </h1>
             <p className="w-11/12 text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
-            GirlScript Summer of Code is the 3-month long Open Source program during summers conducted by GirlScript Foundation, started in 2018, to help beginners get started with Open Source Development while encouraging diversity. Throughout the program, participants contribute to different projects under the guidance of experienced mentors. Top participants get exciting goodies and opportunities.
+              GirlScript Summer of Code is the 3-month long Open Source program
+              during summers conducted by GirlScript Foundation, started in
+              2018, to help beginners get started with Open Source Development
+              while encouraging diversity. Throughout the program, participants
+              contribute to different projects under the guidance of experienced
+              mentors. Top participants get exciting goodies and opportunities.
             </p>
           </div>
         </motion.div>
 
         <motion.div className="w-full flex flex-wrap justify-center md:gap-8 gap-4 mt-2 mb-32">
-          <motion.div 
+          <motion.div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
-            <CountUp end={42} suffix="k+"/>
-            <div className="text-[#A7ADBE] text-sm md:text-base">Registrations</div>
+            <CountUp end={43} suffix="k+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">
+              Registrations
+            </div>
           </motion.div>
 
-          <motion.div 
+          <motion.div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
             <CountUp end={200} suffix="+" />
-            <div className="text-[#A7ADBE] text-sm md:text-base">Institutes</div>
+            <div className="text-[#A7ADBE] text-sm md:text-base">
+              Institutes
+            </div>
           </motion.div>
 
-          <motion.div 
+          <motion.div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
@@ -327,7 +350,7 @@ export default function Home() {
           </motion.div>
 
           <motion.div
-            variants={itemVariants} 
+            variants={itemVariants}
             className="flex flex-col items-center"
           >
             <CountUp end={20} suffix="+" />
@@ -338,8 +361,10 @@ export default function Home() {
             variants={itemVariants}
             className="flex flex-col items-center"
           >
-            <CountUp end={30} suffix="K+" />
-            <div className="text-[#A7ADBE] text-sm md:text-base">Participants</div>
+            <CountUp end={137} suffix="K+" />
+            <div className="text-[#A7ADBE] text-sm md:text-base">
+              Linkedin Followers
+            </div>
           </motion.div>
 
           <motion.div
@@ -347,12 +372,14 @@ export default function Home() {
             className="flex flex-col items-center"
           >
             <CountUp end={500} suffix="+" />
-            <div className="text-[#A7ADBE] text-sm md:text-base">Total Projects</div>
+            <div className="text-[#A7ADBE] text-sm md:text-base">
+              Total Projects
+            </div>
           </motion.div>
         </motion.div>
 
         <motion.div
-          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 mb-12 gap-4 mt-[80px] md:mt-8 items-center justify-items-center"
+          className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 gap-4 mt-[80px] md:mt-8 items-center justify-items-center max-w-7xl"
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
@@ -388,7 +415,8 @@ export default function Home() {
             <AreaChartComponent />
           </motion.div>
 
-          <motion.div
+          {/* Radar Chart for LinkedIn Followers */}
+          {/* <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center items-center p-0 shadow-2xl shadow-blue-500/20"
             variants={itemVariants}
             initial="hidden"
@@ -401,7 +429,7 @@ export default function Home() {
               className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
             />
             <RadarChartComponent />
-          </motion.div>
+          </motion.div> */}
 
           <motion.div
             className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
@@ -430,7 +458,7 @@ export default function Home() {
               alt="Background"
               className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
             />
-            <PieChartComponent />
+            <HorizontalBarChartComponent />
           </motion.div>
 
           <motion.div
@@ -447,11 +475,23 @@ export default function Home() {
             />
             <ComposedChartComponent />
           </motion.div>
+          <motion.div
+            className="group relative aspect-square max-w-[400px] w-full bg-transparent bg-gradient-to-b from-[#00041f] to-[#00041f00] rounded-3xl border border-[#131839] flex flex-col justify-center p-4 shadow-2xl shadow-blue-500/20"
+            variants={itemVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.3 }}
+          >
+            <Image
+              src={cardbg1}
+              alt="Background"
+              className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
+            />
+            <RadialBarChartComponent />
+          </motion.div>
         </motion.div>
       </motion.section>
 
-      
-
       <motion.section
         id="why-gssoc"
         initial="hidden"
diff --git a/app/team/page.js b/app/team/page.js
index 4d0b16b..eb70945 100644
--- a/app/team/page.js
+++ b/app/team/page.js
@@ -47,13 +47,13 @@ export default function TeamsPage() {
         </Link>
       </header>
 
-      <section className="w-screen min-h-screen relative flex flex-col items-center bg-transparent text-white pt-32">
+      <section className="w-full min-h-screen relative flex flex-col items-center justify-center bg-transparent text-white px-4 pt-32">
         <motion.div
           variants={itemVariants}
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
-          className="w-screen relative flex flex-col items-center bg-transparent text-white mb-16"
+          className="w-full max-w-6xl flex flex-col items-center bg-transparent text-white mb-16"
         >
           <div className="text-center text-white z-20 flex flex-col items-center">
             <p className="text-lg mb-4 text-[#A7ADBE] bg-[#FFFFFF15] text-[12px] inline-block px-4 py-2 rounded-full">
@@ -62,7 +62,7 @@ export default function TeamsPage() {
             <h1 className="text-3xl md:text-6xl font-bold mb-4">
               Meet Our <br /> Core Team
             </h1>
-            <p className="w-11/12 text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
+            <p className="w-full max-w-4xl text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
               The passionate individuals behind GirlScript Summer of Code 2025, 
               dedicated to fostering open source contributions and empowering developers worldwide.
             </p>
@@ -70,7 +70,7 @@ export default function TeamsPage() {
         </motion.div>
 
         <motion.div
-          className="w-11/12 md:w-5/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16"
+          className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16 justify-items-center"
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
@@ -178,24 +178,6 @@ export default function TeamsPage() {
           ))}
         </motion.div>
 
-        {/* Call to Action */}
-        <motion.div
-          variants={itemVariants}
-          initial="hidden"
-          whileInView="show"
-          viewport={{ once: false, amount: 0.3 }}
-          className="text-center text-white mb-16 mt-4"
-        >
-          <p className="text-[#A7ADBE] text-[12px] md:text-[14px] mb-4">
-            Want to join our team?
-          </p>
-          <a
-            href="mailto:gssoc@girlscript.tech"
-            className="bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] text-white px-6 py-3 rounded-full font-normal cursor-pointer text-[12px] md:text-[14px] hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
-          >
-            Get In Touch
-          </a>
-        </motion.div>
       </section>
     </div>
   );
diff --git a/app/team/team-data.js b/app/team/team-data.js
index 5f1a45f..f8344cb 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -32,25 +32,33 @@ const coreTeamMembers = [
     instagram: "https://www.instagram.com/",
   },
   {
-    name: "Kajal Biju",
-    role: "PR & Sponsorship",
-    image: "https://drive.google.com/uc?id=1H5F86uWxPNSL7NIqiCOQwHU8TcHHeg4M",
+    name: "Shubhanshu Kumar",
+    role: "Web Developer",
+    image: "",
     linkedin: "https://www.linkedin.com/in/",
     twitter: "https://x.com/",
     instagram: "https://www.instagram.com/",
   },
   {
-    name: "Karan Sewmal",
-    role: "Web Developer",
-    image: "https://drive.google.com/uc?id=17xJnI_eCENrXOtiW18LdE9cnXhJha7uG",
+    name: "Varshitha Narra",
+    role: "PR & Sponsorship",
+    image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
     linkedin: "https://www.linkedin.com/in/",
     twitter: "https://x.com/",
     instagram: "https://www.instagram.com/",
   },
   {
-    name: "Varshitha Narra",
+    name: "Kajal Biju",
     role: "PR & Sponsorship",
-    image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
+    image: "https://drive.google.com/uc?id=1H5F86uWxPNSL7NIqiCOQwHU8TcHHeg4M",
+    linkedin: "https://www.linkedin.com/in/",
+    twitter: "https://x.com/",
+    instagram: "https://www.instagram.com/",
+  },
+  {
+    name: "Karan Sewmal",
+    role: "Web Developer",
+    image: "https://drive.google.com/uc?id=17xJnI_eCENrXOtiW18LdE9cnXhJha7uG",
     linkedin: "https://www.linkedin.com/in/",
     twitter: "https://x.com/",
     instagram: "https://www.instagram.com/",
diff --git a/components/Charts.jsx b/components/Charts.jsx
index cf2e410..3fed3cd 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -22,35 +22,52 @@ import {
   Pie,
   Cell,
   ComposedChart,
+  RadialBarChart,
+  RadialBar,
 } from "recharts";
 
 const pullRequestsData = [
   {
     name: "GSSoC'23",
-    value: 27000,
+    value: 7000,
   },
   {
     name: "GSSoC'24",
-    value: 29000,
+    value: 18000,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 36000,
+    value: 21000,
+  },
+];
+
+const mentorRegistrationsData = [
+  {
+    name: "GSSoC'23",
+    value: 180,
+  },
+  {
+    name: "GSSoC'24",
+    value: 400,
+  },
+  {
+    name: "GSSoC'24 Ext",
+    value: 700,
   },
 ];
 
 const campusAmbassadorsData = [
   {
     name: "GSSoC'23",
-    value: 27000,
+    value: 100,
   },
   {
     name: "GSSoC'24",
-    value: 29000,
+    value: 700,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 36000,
+    value: 1083,
   },
 ];
 
@@ -158,14 +175,7 @@ export function BarChartComponent() {
             fill="#4C75FF"
             radius={[4, 4, 0, 0]}
             activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" width={3} />}
-          >
-            <LabelList
-              dataKey="value"
-              position="top"
-              style={{ fill: "#fff", fontWeight: 600 }}
-              formatter={formatNumber}
-            />
-          </Bar>
+          />
         </BarChart>
       </ResponsiveContainer>
     </div>
@@ -213,15 +223,8 @@ export function AreaChartComponent() {
             fill="#A7ADFE"
             fillOpacity={0.25}
             strokeWidth={3}
-            dot={{ r: 5, fill: "#4C75FF" }}
-          >
-            <LabelList
-              dataKey="value"
-              position="top"
-              style={{ fill: "#fff", fontWeight: 600 }}
-              formatter={formatNumber}
-            />
-          </Area>
+            dot={{ r: 3, fill: "#4C75FF" }}
+          />
         </AreaChart>
       </ResponsiveContainer>
     </div>
@@ -296,7 +299,7 @@ export function LineChartComponent() {
             dataKey="value"
             stroke="#4C75FF"
             strokeWidth={3}
-            dot={{ r: 6, fill: "#4C75FF" }}
+            dot={{ r: 4, fill: "#4C75FF" }}
           />
         </LineChart>
       </ResponsiveContainer>
@@ -304,35 +307,92 @@ export function LineChartComponent() {
   );
 }
 
-export function PieChartComponent() {
+export function HorizontalBarChartComponent() {
   return (
     <div>
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
         Contributor Registrations
       </h3>
       <ResponsiveContainer width="100%" height={300}>
-        <PieChart>
-          <Pie
-            data={registrationsFromContributorsData}
-            cx="50%"
-            cy="50%"
-            fontSize={12}
-            labelLine={false}
-            outerRadius={60}
-            fill="#8884d8"
+        <BarChart
+          data={registrationsFromContributorsData}
+          layout="vertical"
+          margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
+          <XAxis
+            type="number"
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+            tickFormatter={formatNumber}
+          />
+          <YAxis
+            type="category"
+            dataKey="name"
+            width={80}
+            tick={{ fill: "#A7ADFE", fontSize: 13 }}
+          />
+          <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+            formatter={formatNumber}
+          />
+          <Bar
             dataKey="value"
-            label={({ name, percent }) =>
-              `${name} ${(percent * 100).toFixed(0)}%`
-            }
-            >
-            {pullRequestsData.map((entry, index) => (
-              <Cell
-                key={`cell-${index}`}
-                fill={COLORS[index % COLORS.length]}
-              />
+            fill="#4C75FF"
+            radius={[0, 4, 4, 0]}
+            activeBar={<Rectangle fill="#1A4FFF" stroke="#000055" />}
+            barSize={45}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function RadialBarChartComponent() {
+  return (
+    <div>
+      <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
+        Mentor Registrations
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <RadialBarChart
+          cx="50%"
+          cy="40%"
+          innerRadius="30%"
+          outerRadius="90%"
+          data={mentorRegistrationsData}
+          barSize={25}
+        >
+          <RadialBar
+            minAngle={15}
+            clockWise
+            dataKey="value"
+          >
+            {mentorRegistrationsData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
             ))}
-          </Pie>
-        </PieChart>
+          </RadialBar>
+          <Legend
+            iconSize={10}
+            layout="horizontal"
+            verticalAlign="bottom"
+            formatter={(value) => <span style={{ color: '#A7ADFE' }}>{value}</span>}
+          />
+          <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+            formatter={formatNumber}
+          />
+        </RadialBarChart>
       </ResponsiveContainer>
     </div>
   );
diff --git a/components/PastSponsors.jsx b/components/PastSponsors.jsx
index b68116b..2074e4c 100644
--- a/components/PastSponsors.jsx
+++ b/components/PastSponsors.jsx
@@ -25,7 +25,7 @@ const PastSponsors = () => {
       </h1>
 
       <div className="w-full max-w-6xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 sm:gap-8 bg-white/5 rounded-2xl py-10 px-4 shadow-lg">
-        <SponsorCard src={postmanLogo} alt="Postman" scale="scale-[1.2]" />
+        <SponsorCard src={postmanLogo} alt="Postman" scale="scale-[5.0]" />
         <SponsorCard src={vercelLogo} alt="Vercel" scale="scale-[1.1]" />
         <SponsorCard src={filecoinLogo} alt="Filecoin" scale="scale-[1.3]" />
         <SponsorCard src={moralisLogo} alt="Moralis" scale="scale-[1.1]" />

From 1b7ab50939928e3bb26106962a552d0049137cc6 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Sat, 21 Jun 2025 16:52:10 +0530
Subject: [PATCH 11/15] update team data

---
 app/team/team-data.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/team/team-data.js b/app/team/team-data.js
index f8344cb..b224fa0 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -34,9 +34,9 @@ const coreTeamMembers = [
   {
     name: "Shubhanshu Kumar",
     role: "Web Developer",
-    image: "",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
+    image: "https://drive.google.com/uc?id=16_DyNu3FerMoUjeAZnVxAb4HWFndY0DR",
+    linkedin: "https://www.linkedin.com/in/shubhanshu-kumar-6a961525a/",
+    twitter: "https://x.com/Xmart_shubh?t=dzArdoZP8fDo-8JMmjJuYQ&s=09",
     instagram: "https://www.instagram.com/",
   },
   {

From f8a15e173f410652d8cb3063a450b27fe3d08ee3 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Mon, 23 Jun 2025 11:42:59 +0530
Subject: [PATCH 12/15] more improvements and update team data

---
 app/page.js           | 30 +++++++-------
 app/team/team-data.js | 93 +++++++++++++++++++++----------------------
 components/Charts.jsx | 21 +++++-----
 3 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/app/page.js b/app/page.js
index 89aee85..0cd209a 100644
--- a/app/page.js
+++ b/app/page.js
@@ -320,8 +320,8 @@ export default function Home() {
           </div>
         </motion.div>
 
-        <motion.div className="w-full flex flex-wrap justify-center md:gap-8 gap-4 mt-2 mb-32">
-          <motion.div
+        <div className="w-full flex flex-wrap justify-center md:gap-8 gap-4 mt-2 mb-32">
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
@@ -329,9 +329,9 @@ export default function Home() {
             <div className="text-[#A7ADBE] text-sm md:text-base">
               Registrations
             </div>
-          </motion.div>
+          </div>
 
-          <motion.div
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
@@ -339,25 +339,25 @@ export default function Home() {
             <div className="text-[#A7ADBE] text-sm md:text-base">
               Institutes
             </div>
-          </motion.div>
+          </div>
 
-          <motion.div
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
             <CountUp end={35} suffix="K+" />
             <div className="text-[#A7ADBE] text-sm md:text-base">PRs</div>
-          </motion.div>
+          </div>
 
-          <motion.div
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
             <CountUp end={20} suffix="+" />
             <div className="text-[#A7ADBE] text-sm md:text-base">Countries</div>
-          </motion.div>
+          </div>
 
-          <motion.div
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
@@ -365,9 +365,9 @@ export default function Home() {
             <div className="text-[#A7ADBE] text-sm md:text-base">
               Linkedin Followers
             </div>
-          </motion.div>
+          </div>
 
-          <motion.div
+          <div
             variants={itemVariants}
             className="flex flex-col items-center"
           >
@@ -375,8 +375,8 @@ export default function Home() {
             <div className="text-[#A7ADBE] text-sm md:text-base">
               Total Projects
             </div>
-          </motion.div>
-        </motion.div>
+          </div>
+        </div>
 
         <motion.div
           className="w-5/6 grid grid-cols-1 lg:grid-cols-3 grid-rows-3 gap-4 mt-[80px] md:mt-8 items-center justify-items-center max-w-7xl"
@@ -505,7 +505,7 @@ export default function Home() {
           initial="hidden"
           whileInView="show"
           viewport={{ once: false, amount: 0.3 }}
-          className="w-screen relative flex flex-col items-center bg-[#00020f] text-white mt-32"
+          className="w-screen relative flex flex-col items-center bg-[#00020f] text-white mt-2"
         >
           <Image
             src={sbg}
diff --git a/app/team/team-data.js b/app/team/team-data.js
index b224fa0..984ff6f 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -1,75 +1,74 @@
 const coreTeamMembers = [
-  {
-    name: "Rakshitha C",
-    role: "App Content Writer",
-    image: "https://drive.google.com/uc?id=1iLJh49oTg1MsUcofaor9ZJXsSlo9NpYO",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
-  },
-  {
-    name: "Anjali Kushwaha",
-    role: "Graphic Design",
-    image: "https://drive.google.com/uc?id=1oHpbtpdmk0giCdZWRWwHriWmHhEugj1R",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
-  },
   {
     name: "Harsha Nandi",
     role: "Program manager",
     image: "https://drive.google.com/uc?id=1VUc-Mendd1zDtqOEgtkAAY6DlfgqOG-N",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
-  },
-  {
-    name: "Jyoti Singh",
-    role: "Content Writing",
-    image: "https://drive.google.com/uc?id=1RZSUIZSlfzwMlgLxMnQwamfYzvpV39To",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
-  },
-  {
-    name: "Shubhanshu Kumar",
-    role: "Web Developer",
-    image: "https://drive.google.com/uc?id=16_DyNu3FerMoUjeAZnVxAb4HWFndY0DR",
-    linkedin: "https://www.linkedin.com/in/shubhanshu-kumar-6a961525a/",
-    twitter: "https://x.com/Xmart_shubh?t=dzArdoZP8fDo-8JMmjJuYQ&s=09",
-    instagram: "https://www.instagram.com/",
+    linkedin: "https://www.linkedin.com/in/harsha-nandi-65a05b212",
+    twitter: "https://x.com/FantomUponly?t=jiWvTieL-fdzSXfBI0SBjg&s=09",
+    instagram: "https://www.instagram.com/ha.rsha2050?igsh=amF3eWFjZXB5ZDV2",
   },
   {
     name: "Varshitha Narra",
     role: "PR & Sponsorship",
     image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
   },
   {
     name: "Kajal Biju",
     role: "PR & Sponsorship",
     image: "https://drive.google.com/uc?id=1H5F86uWxPNSL7NIqiCOQwHU8TcHHeg4M",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
+    linkedin: "https://www.linkedin.com/in/kajal-biju-83408223a/",
+  },
+  {
+    name: "Shubhanshu Kumar",
+    role: "Web Developer",
+    image: "https://drive.google.com/uc?id=16_DyNu3FerMoUjeAZnVxAb4HWFndY0DR",
+    linkedin: "https://www.linkedin.com/in/shubhanshu-kumar-6a961525a/",
+    twitter: "https://x.com/Xmart_shubh?t=dzArdoZP8fDo-8JMmjJuYQ&s=09",
+    instagram: "https://www.instagram.com/iamshubh_officials/",
   },
   {
     name: "Karan Sewmal",
     role: "Web Developer",
     image: "https://drive.google.com/uc?id=17xJnI_eCENrXOtiW18LdE9cnXhJha7uG",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
+    linkedin: "https://www.linkedin.com/in/karansemwal/",
+    twitter: "https://x.com/phoenicstwt",
+  },
+  {
+    name: "Rakshitha C",
+    role: "App Content Writer",
+    image: "https://drive.google.com/uc?id=1iLJh49oTg1MsUcofaor9ZJXsSlo9NpYO",
+    linkedin: "www.linkedin.com/in/rakshitha-c-bb97a8285",
+  },
+  {
+    name: "Jyoti Singh",
+    role: "Content Writing",
+    image: "https://drive.google.com/uc?id=1RZSUIZSlfzwMlgLxMnQwamfYzvpV39To",
+    linkedin:
+      "https://www.linkedin.com/in/jyoti-singh-869583183?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
+  },
+  {
+    name: "Anjali Kushwaha",
+    role: "Graphic Designer",
+    image: "https://drive.google.com/uc?id=1oHpbtpdmk0giCdZWRWwHriWmHhEugj1R",
+    linkedin: "www.linkedin.com/in/anjali-kushwaha-827017254",
+  },
+  {
+    name: "Priyanshi Tripathi",
+    role: "Graphic Designer",
+    image: "https://drive.google.com/uc?id=17vf5uy8MQ9JBR-VJ5LwpMluLI7Qz3xoT",
+    linkedin: "www.linkedin.com/in/priyanshi-tripathi-7000000000",
   },
   {
     name: "Varun Sai",
     role: "Community Moderator",
     image: "https://drive.google.com/uc?id=1IMNSHX9L6YXTewKVEHjiWJgZrkvTg61m",
-    linkedin: "https://www.linkedin.com/in/",
-    twitter: "https://x.com/",
-    instagram: "https://www.instagram.com/",
+    linkedin: "https://www.linkedin.com/in/varunsaibandi/",
+  },
+  {
+    name: "Sanya Srivastava",
+    role: "Community Moderator",
+    image: "https://drive.google.com/uc?id=1kB9z0SMJ-PLs7QBWBuujGoWj_Mvw25oC",
+    linkedin: "https://www.linkedin.com/in/sanya-srivastava-s"
   },
 ];
 
diff --git a/components/Charts.jsx b/components/Charts.jsx
index ed3cab0..29c0871 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -89,45 +89,45 @@ const linkedinFollowersData = [
 const projectAdminRegistrationsData = [
   {
     name: "GSSoC'23",
-    value: 18000,
+    value: 140,
   },
   {
     name: "GSSoC'24",
-    value: 24000,
+    value: 280,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 29000,
+    value: 500,
   },
 ];
 
 const contributorsMakingItOntoLeaderboardData = [
   {
     name: "GSSoC'23",
-    value: 26000,
+    value: 1200,
   },
   {
     name: "GSSoC'24",
-    value: 31000,
+    value: 2700,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 35000,
+    value: 4000,
   },
 ];
 
 const registrationsFromContributorsData = [
   {
     name: "GSSoC'23",
-    value: 33000,
+    value: 17000,
   },
   {
     name: "GSSoC'24",
-    value: 40000,
+    value: 27000,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 47000,
+    value: 42000,
   },
 ];
 
@@ -136,6 +136,9 @@ const COLORS = ["#4C75FF", "#1A4FFF", "#A7ADFE"];
 // Format number to k format
 const formatNumber = (value) => {
   if (value >= 1000) {
+    if (value < 10000) {
+      return `${(value / 1000).toFixed(1)}k`;
+    }
     return `${(value / 1000).toFixed(0)}k`;
   }
   return value;

From 44bfe44b1eef8b8f89f96e88e660dc0c3ba1797c Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Tue, 24 Jun 2025 12:21:00 +0530
Subject: [PATCH 13/15] replace chart and some minor fixes

---
 app/page.js                 |  8 ++--
 app/team/team-data.js       |  2 +-
 components/Charts.jsx       | 80 +++++++++++++++++++++----------------
 components/Testimonials.jsx |  2 +-
 4 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/app/page.js b/app/page.js
index 0cd209a..357d1a6 100644
--- a/app/page.js
+++ b/app/page.js
@@ -47,7 +47,7 @@ import {
   LineChartComponent,
   HorizontalBarChartComponent,
   ComposedChartComponent,
-  RadialBarChartComponent,
+  PieChartComponent,
 } from "@/components/Charts";
 import CountUp from "@/components/CountUp";
 
@@ -71,7 +71,7 @@ const itemVariants = {
 
 export default function Home() {
   return (
-    <div className="relative w-full min-h-screen font-sans">
+    <div className="relative w-full min-h-screen font-sans overflow-hidden">
       <div className="fixed inset-0 -z-20 w-full h-full overflow-hidden">
         <ShootingStars />
         <StarsBackground starDensity={0.001} />
@@ -345,7 +345,7 @@ export default function Home() {
             variants={itemVariants}
             className="flex flex-col items-center"
           >
-            <CountUp end={35} suffix="K+" />
+            <CountUp end={21} suffix="K+" />
             <div className="text-[#A7ADBE] text-sm md:text-base">PRs</div>
           </div>
 
@@ -487,7 +487,7 @@ export default function Home() {
               alt="Background"
               className="absolute right-0 top-0 w-full h-full object-cover z-10 rounded-3xl"
             />
-            <RadialBarChartComponent />
+            <PieChartComponent />
           </motion.div>
         </motion.div>
       </motion.section>
diff --git a/app/team/team-data.js b/app/team/team-data.js
index 984ff6f..d3fb32e 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -11,6 +11,7 @@ const coreTeamMembers = [
     name: "Varshitha Narra",
     role: "PR & Sponsorship",
     image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
+    linkedin: "https://www.linkedin.com/in/varshitha-narra-a935402a0/"
   },
   {
     name: "Kajal Biju",
@@ -31,7 +32,6 @@ const coreTeamMembers = [
     role: "Web Developer",
     image: "https://drive.google.com/uc?id=17xJnI_eCENrXOtiW18LdE9cnXhJha7uG",
     linkedin: "https://www.linkedin.com/in/karansemwal/",
-    twitter: "https://x.com/phoenicstwt",
   },
   {
     name: "Rakshitha C",
diff --git a/components/Charts.jsx b/components/Charts.jsx
index 29c0871..aac1e93 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -101,18 +101,18 @@ const projectAdminRegistrationsData = [
   },
 ];
 
-const contributorsMakingItOntoLeaderboardData = [
+const activeParticipants = [
   {
     name: "GSSoC'23",
-    value: 1200,
+    value: 2000,
   },
   {
     name: "GSSoC'24",
-    value: 2700,
+    value: 7000,
   },
   {
     name: "GSSoC'24 Ext",
-    value: 4000,
+    value: 10000,
   },
 ];
 
@@ -356,46 +356,58 @@ export function HorizontalBarChartComponent() {
   );
 }
 
-export function RadialBarChartComponent() {
+// Custom label for semicircle pie chart
+const renderSemiPieLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, name }) => {
+  // Calculate label position closer to the arc center
+  const RADIAN = Math.PI / 180;
+  const radius = innerRadius + (outerRadius - innerRadius) * 1.6;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="#A7ADFE"
+      textAnchor="middle"
+      dominantBaseline="central"
+      fontSize={12}
+      fontWeight="bold"
+      style={{ pointerEvents: 'none' }}
+    >
+      {name}
+    </text>
+  );
+};
+
+export function PieChartComponent() {
   return (
     <div>
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
         Mentor Registrations
       </h3>
       <ResponsiveContainer width="100%" height={300}>
-        <RadialBarChart
-          cx="50%"
-          cy="40%"
-          innerRadius="30%"
-          outerRadius="90%"
-          data={mentorRegistrationsData}
-          barSize={25}
-        >
-          <RadialBar
-            minAngle={15}
-            clockWise
+        <PieChart>
+          <Pie
+            data={mentorRegistrationsData}
+            cx="53%"
+            cy="75%"
+            startAngle={180}
+            endAngle={0}
+            innerRadius={60}
+            outerRadius={120}
+            paddingAngle={2}
             dataKey="value"
+            label={renderSemiPieLabel}
+            labelLine={false}
+            stroke="none"
           >
             {mentorRegistrationsData.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
             ))}
-          </RadialBar>
-          <Legend
-            iconSize={10}
-            layout="horizontal"
-            verticalAlign="bottom"
-            formatter={(value) => <span style={{ color: '#A7ADFE' }}>{value}</span>}
-          />
-          <Tooltip
-            contentStyle={{
-              background: "#232D6B",
-              border: "none",
-              color: "#fff",
-            }}
-            labelStyle={{ color: "#A7ADFE" }}
-            formatter={formatNumber}
-          />
-        </RadialBarChart>
+          </Pie>
+          <Tooltip />
+        </PieChart>
       </ResponsiveContainer>
     </div>
   );
@@ -409,7 +421,7 @@ export function ComposedChartComponent() {
       </h3>
       <ResponsiveContainer width="100%" height={300}>
         <ComposedChart
-          data={contributorsMakingItOntoLeaderboardData}
+          data={activeParticipants}
           margin={{ top: 20, right: 0, left: 0, bottom: 10 }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#232D6B" />
diff --git a/components/Testimonials.jsx b/components/Testimonials.jsx
index 257c67b..a59317f 100644
--- a/components/Testimonials.jsx
+++ b/components/Testimonials.jsx
@@ -129,7 +129,7 @@ const Testimonials = () => {
             <Image src={commas} alt="Icon" width={48} height={48} />
           </div>
 
-          <div className="text-sm md:text-xl text-[#A7ADBE] mt-10 text-center z-10 leading-tight font-semibold px-6 max-h-60 overflow-y-auto">
+          <div className="text-sm md:text-xl text-[#A7ADBE] mt-10 text-center z-10 leading-tight font-semibold px-6 max-h-60 overflow-y-hidden">
             {item.feedback}
           </div>
 

From 879fc0e5616b999ef6fb586c013766ebb248cc60 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Wed, 25 Jun 2025 12:19:25 +0530
Subject: [PATCH 14/15] changes to pie chart & format code

---
 app/team/page.js            |  14 ++---
 app/team/team-data.js       |   4 +-
 components/Charts.jsx       | 103 ++++++++++++++++++++++++++----------
 components/Testimonials.jsx |  38 +++++++------
 4 files changed, 107 insertions(+), 52 deletions(-)

diff --git a/app/team/page.js b/app/team/page.js
index eb70945..1725f42 100644
--- a/app/team/page.js
+++ b/app/team/page.js
@@ -63,8 +63,9 @@ export default function TeamsPage() {
               Meet Our <br /> Core Team
             </h1>
             <p className="w-full max-w-4xl text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE] text-balance">
-              The passionate individuals behind GirlScript Summer of Code 2025, 
-              dedicated to fostering open source contributions and empowering developers worldwide.
+              The passionate individuals behind GirlScript Summer of Code 2025,
+              dedicated to fostering open source contributions and empowering
+              developers worldwide.
             </p>
           </div>
         </motion.div>
@@ -90,7 +91,7 @@ export default function TeamsPage() {
                 alt="Background"
                 className="absolute right-0 top-0 w-full h-full object-cover z-0 rounded-3xl"
               />
-              
+
               {/* Profile Image */}
               <div className="relative z-10 w-24 h-24 md:w-32 md:h-32 rounded-full overflow-hidden border-4 border-[#232D6B] mb-6">
                 <Image
@@ -133,7 +134,7 @@ export default function TeamsPage() {
                     />
                   </a>
                 )}
-                
+
                 {member.twitter && (
                   <a
                     href={member.twitter}
@@ -153,7 +154,7 @@ export default function TeamsPage() {
                     />
                   </a>
                 )}
-                
+
                 {member.instagram && (
                   <a
                     href={member.instagram}
@@ -177,8 +178,7 @@ export default function TeamsPage() {
             </motion.div>
           ))}
         </motion.div>
-
       </section>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/team/team-data.js b/app/team/team-data.js
index d3fb32e..e8ff0f5 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -11,7 +11,7 @@ const coreTeamMembers = [
     name: "Varshitha Narra",
     role: "PR & Sponsorship",
     image: "https://drive.google.com/uc?id=1OtdaqN0mxAz1QQYkvUjRm1Jbeip0Io8R",
-    linkedin: "https://www.linkedin.com/in/varshitha-narra-a935402a0/"
+    linkedin: "https://www.linkedin.com/in/varshitha-narra-a935402a0/",
   },
   {
     name: "Kajal Biju",
@@ -68,7 +68,7 @@ const coreTeamMembers = [
     name: "Sanya Srivastava",
     role: "Community Moderator",
     image: "https://drive.google.com/uc?id=1kB9z0SMJ-PLs7QBWBuujGoWj_Mvw25oC",
-    linkedin: "https://www.linkedin.com/in/sanya-srivastava-s"
+    linkedin: "https://www.linkedin.com/in/sanya-srivastava-s",
   },
 ];
 
diff --git a/components/Charts.jsx b/components/Charts.jsx
index aac1e93..b891897 100644
--- a/components/Charts.jsx
+++ b/components/Charts.jsx
@@ -25,6 +25,7 @@ import {
   RadialBarChart,
   RadialBar,
 } from "recharts";
+import { useState, useEffect } from "react";
 
 const pullRequestsData = [
   {
@@ -131,7 +132,14 @@ const registrationsFromContributorsData = [
   },
 ];
 
-const COLORS = ["#4C75FF", "#1A4FFF", "#A7ADFE"];
+const COLORS = [
+  "#1a365d",
+  "#2d3748",
+  "#4a5568",
+  "#2c5282",
+  "#2b6cb0",
+  "#3182ce",
+];
 
 // Format number to k format
 const formatNumber = (value) => {
@@ -356,31 +364,56 @@ export function HorizontalBarChartComponent() {
   );
 }
 
-// Custom label for semicircle pie chart
-const renderSemiPieLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, name }) => {
-  // Calculate label position closer to the arc center
-  const RADIAN = Math.PI / 180;
-  const radius = innerRadius + (outerRadius - innerRadius) * 1.6;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+export function PieChartComponent() {
+  const [windowWidth, setWindowWidth] = useState(0);
 
-  return (
-    <text
-      x={x}
-      y={y}
-      fill="#A7ADFE"
-      textAnchor="middle"
-      dominantBaseline="central"
-      fontSize={12}
-      fontWeight="bold"
-      style={{ pointerEvents: 'none' }}
-    >
-      {name}
-    </text>
-  );
-};
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isSmallScreen = windowWidth < 500;
+  const innerRadius = isSmallScreen ? 40 : 60;
+  const outerRadius = isSmallScreen ? 70 : 120;
+
+  const renderSemiPieLabel = ({
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    percent,
+    name,
+  }) => {
+    const RADIAN = Math.PI / 180;
+    const radius =
+      innerRadius + (outerRadius - innerRadius) * (isSmallScreen ? 1.7 : 0.7);
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+    const fontSize = outerRadius <= 80 ? 8 : 2;
+
+    return (
+      <text
+        x={x}
+        y={y}
+        fill="#A7ADFE"
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={fontSize}
+        fontWeight="bold"
+        style={{ pointerEvents: "none" }}
+        className="text-sm text-shadow-2xs"
+      >
+        {name} {Math.round(percent * 100)}%
+      </text>
+    );
+  };
 
-export function PieChartComponent() {
   return (
     <div>
       <h3 className="w-full text-center text-[#A7ADFE] mb-3 font-semibold text-xl">
@@ -394,8 +427,8 @@ export function PieChartComponent() {
             cy="75%"
             startAngle={180}
             endAngle={0}
-            innerRadius={60}
-            outerRadius={120}
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
             paddingAngle={2}
             dataKey="value"
             label={renderSemiPieLabel}
@@ -403,10 +436,24 @@ export function PieChartComponent() {
             stroke="none"
           >
             {mentorRegistrationsData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              <Cell
+                key={`cell-${index}`}
+                fill={COLORS[index % COLORS.length]}
+              />
             ))}
           </Pie>
-          <Tooltip />
+          <Tooltip
+            contentStyle={{
+              background: "#232D6B",
+              border: "none",
+              color: "#fff",
+            }}
+            labelStyle={{ color: "#A7ADFE" }}
+            formatter={(value, name, props) => [
+              `${value} mentors`,
+              props.payload.name,
+            ]}
+          />
         </PieChart>
       </ResponsiveContainer>
     </div>
diff --git a/components/Testimonials.jsx b/components/Testimonials.jsx
index a59317f..b1220ed 100644
--- a/components/Testimonials.jsx
+++ b/components/Testimonials.jsx
@@ -1,14 +1,13 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { motion, useMotionValue, animate } from 'framer-motion';
-import useMeasure from 'react-use-measure';
-import Image from 'next/image';
-
-import cardbg9 from '../assets/card-bg-9.svg';
-import commas from '../assets/commas.svg';
-import stars from '../assets/stars.svg';
+import { useEffect, useState } from "react";
+import { motion, useMotionValue, animate } from "framer-motion";
+import useMeasure from "react-use-measure";
+import Image from "next/image";
 
+import cardbg9 from "../assets/card-bg-9.svg";
+import commas from "../assets/commas.svg";
+import stars from "../assets/stars.svg";
 
 const testimonials = [
   {
@@ -59,7 +58,6 @@ const testimonials = [
     role: "Contributor & Ambassador",
     feedback: `Participating in GSSoC 2024 has been an incredibly rewarding journey...`,
   },
-
 ];
 
 const Testimonials = () => {
@@ -82,10 +80,10 @@ const Testimonials = () => {
       xTranslation,
       mustFinish ? [start, finalPosition] : [0, finalPosition],
       {
-        ease: 'linear',
+        ease: "linear",
         duration: mustFinish ? remainingDuration : duration,
         repeat: mustFinish ? 0 : Infinity,
-        repeatType: 'loop',
+        repeatType: "loop",
         onComplete: () => {
           setMustFinish(false);
           setRerender(!rerender);
@@ -133,7 +131,13 @@ const Testimonials = () => {
             {item.feedback}
           </div>
 
-          <Image src={stars} alt="Stars" className="z-10 mt-6 w-[100px]" width={100} height={24} />
+          <Image
+            src={stars}
+            alt="Stars"
+            className="z-10 mt-6 w-[100px]"
+            width={100}
+            height={24}
+          />
 
           <div className="flex items-center mt-10 z-10">
             <div className="h-12 w-12 rounded-xl overflow-hidden">
@@ -146,8 +150,12 @@ const Testimonials = () => {
               />
             </div>
             <div className="ml-4 text-left">
-              <div className="text-sm md:text-[18px] font-medium">{item.name}</div>
-              <div className="text-balance md:text-sm text-[#A7ADBE]">{item.role}</div>
+              <div className="text-sm md:text-[18px] font-medium">
+                {item.name}
+              </div>
+              <div className="text-balance md:text-sm text-[#A7ADBE]">
+                {item.role}
+              </div>
             </div>
           </div>
         </motion.div>

From 277ce7061afaa6ba16cf65d057c5ba801e6be8f0 Mon Sep 17 00:00:00 2001
From: The-Phoenics <kar9205an@gmail.com>
Date: Thu, 26 Jun 2025 12:44:01 +0530
Subject: [PATCH 15/15] add footer in teams page

---
 app/team/page.js      | 83 ++++++++++++++++++++++++++++++++++++++++++-
 app/team/team-data.js |  2 +-
 2 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/app/team/page.js b/app/team/page.js
index 1725f42..5eb7242 100644
--- a/app/team/page.js
+++ b/app/team/page.js
@@ -47,7 +47,7 @@ export default function TeamsPage() {
         </Link>
       </header>
 
-      <section className="w-full min-h-screen relative flex flex-col items-center justify-center bg-transparent text-white px-4 pt-32">
+      <section className="w-full min-h-screen relative flex flex-col items-center justify-center bg-transparent text-white px-4 pt-32 pb-6">
         <motion.div
           variants={itemVariants}
           initial="hidden"
@@ -179,6 +179,87 @@ export default function TeamsPage() {
           ))}
         </motion.div>
       </section>
+      <motion.section
+        id="contact"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: false, amount: 0.3 }}
+        variants={containerVariants}
+        className="w-full relative flex flex-col items-center bg-[#00041F] text-white py-16"
+      >
+        <div className="text-center text-white">
+          <h1 className="text-3xl md:text-6xl font-bold mb-4">
+            GirlScript Summer <br /> Of Code 2025
+          </h1>
+          <p className="text-lg mb-8 text-[10px] md:text-[14px] text-[#A7ADBE]">
+            Get In Touch With Us Via Email Or Social Media
+          </p>
+          <a
+            href="mailto:gssoc@girlscript.tech"
+            className="bg-gradient-to-b from-[#4C75FF] to-[#1A4FFF] text-white px-5 py-3 rounded-full font-normal cursor-pointer text-[12px] md:text-[14px]"
+          >
+            Contact Us
+          </a>
+        </div>
+        <div className="flex flex-row justify-center items-center mt-12">
+          {/* LinkedIn */}
+          <a
+            href="https://www.linkedin.com/company/girlscriptsoc/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={linkedin}
+              alt="LinkedIn Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
+
+          {/* Twitter/X */}
+          <a
+            href="https://x.com/girlscriptsoc?fbclid=PAQ0xDSwKw-IVleHRuA2FlbQIxMAABp_RYL61UMmjR16ZRYtQ9Vr8RKnrJDW3m8Jgs_YAcL6OiU7XdT65vIkh0mu_U_aem_u7mT7T5kaX-7RyGhB8XlLg"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative mx-4"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={twitter}
+              alt="Twitter Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
+
+          {/* Instagram */}
+          <a
+            href="https://www.instagram.com/girlscriptsummerofcode?igsh=MWlhYnRld2J3bWdyOQ=="
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-12 w-12 z-10 rounded-xl overflow-hidden flex items-center justify-center relative"
+          >
+            <Image
+              src={iconbg}
+              alt="Background"
+              className="w-full h-full object-cover"
+            />
+            <Image
+              src={instagram}
+              alt="Instagram Icon"
+              className="absolute w-11/12 h-3/5 object-cover"
+            />
+          </a>
+        </div>
+      </motion.section>
     </div>
   );
 }
diff --git a/app/team/team-data.js b/app/team/team-data.js
index e8ff0f5..ba152ea 100644
--- a/app/team/team-data.js
+++ b/app/team/team-data.js
@@ -41,7 +41,7 @@ const coreTeamMembers = [
   },
   {
     name: "Jyoti Singh",
-    role: "Content Writing",
+    role: "Content Writer",
     image: "https://drive.google.com/uc?id=1RZSUIZSlfzwMlgLxMnQwamfYzvpV39To",
     linkedin:
       "https://www.linkedin.com/in/jyoti-singh-869583183?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",