From df58d03b48192e8c89b296fc6ed3bf95ea5ec2a5 Mon Sep 17 00:00:00 2001
From: unknown <ajaydhangar49@gmail.com>
Date: Sun, 12 Oct 2025 15:32:05 +0530
Subject: [PATCH] Update About Page

---
 src/components/Aboutpage/index.tsx            | 87 +++++++++++++++++--
 .../Aboutpage/sections/CallToAction.tsx       | 79 -----------------
 src/components/Aboutpage/sections/Hero.tsx    | 54 ------------
 .../Aboutpage/sections/MissionVision.tsx      | 81 -----------------
 .../Aboutpage/sections/TeamSection.tsx        | 70 ---------------
 .../Aboutpage/sections/WhoWeAre.tsx           | 73 +++++++---------
 6 files changed, 110 insertions(+), 334 deletions(-)
 delete mode 100644 src/components/Aboutpage/sections/CallToAction.tsx
 delete mode 100644 src/components/Aboutpage/sections/Hero.tsx
 delete mode 100644 src/components/Aboutpage/sections/MissionVision.tsx
 delete mode 100644 src/components/Aboutpage/sections/TeamSection.tsx

diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx
index a4682d8a3..45103ca9e 100644
--- a/src/components/Aboutpage/index.tsx
+++ b/src/components/Aboutpage/index.tsx
@@ -1,23 +1,92 @@
-import HeroSection from "./sections/Hero";
-import MissionVision from "./sections/MissionVision";
 import WhoWeAre from "./sections/WhoWeAre";
 import Offerings from "./sections/Offerings";
 import CoreValues from "./sections/CoreValues";
-import TeamSection from "./sections/TeamSection";
-import CallToAction from "./sections/CallToAction";
+import { Sparkles } from "lucide-react";
 
 const About = () => {
   return (
     <div className="min-h-screen bg-white dark:bg-gray-900 overflow-x-hidden">
-      <HeroSection />
-      <MissionVision />
+      {/* <HeroSection /> */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-white">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 fill-rule=%22evenodd%22%3E%3Cg fill=%22%239C92AC%22 fill-opacity=%220.1%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%224%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
+          <div className="text-center">
+            <div className="flex justify-center mb-8">
+              <div className="flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-6 py-3 border border-white/20">
+                <Sparkles className="w-5 h-5 text-yellow-400" />
+                <span className="text-sm font-medium">ABOUT CODEHARBORHUB</span>
+              </div>
+            </div>
+            <h1 className="text-4xl md:text-6xl font-extrabold mb-6 bg-gradient-to-r from-white via-blue-200 to-purple-200 bg-clip-text text-transparent p-2">
+              Where Knowledge Meets Innovation
+            </h1>
+            <p className="text-xl text-blue-100 mx-auto leading-relaxed">
+              At CodeHarborHub, we believe that learning is more than just
+              acquiring knowledge — it’s about transforming ideas into reality,
+              creativity into innovation, and passion into purpose. Our mission
+              is to empower learners, creators, and dreamers from every corner
+              of the world to explore their potential, build real-world
+              projects, and grow with a community that values collaboration and
+              curiosity.
+            </p>
+          </div>
+        </div>
+      </section>
+      {/* Our Mission */}
+      <section className="py-20">
+        <h2 className="text-4xl md:text-5xl text-center pb-6 font-bold">Our Mission</h2>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="space-y-6">
+                <p className="text-lg leading-relaxed">
+                  We're on a mission to democratize education and make
+                  high-quality learning accessible to everyone, regardless of
+                  their background, location, or financial circumstances.
+                </p>
+                <p className="text-lg leading-relaxed">
+                  By breaking down traditional barriers in tech education, we're
+                  creating pathways for millions to unlock their potential and
+                  build the skills needed for tomorrow's world.
+                </p>
+              </div>
+            </div>
+            <div className="rounded-2xl bg-white dark:bg-gray-700 p-8 shadow-lg border border-gray-100">
+              <div className="grid grid-cols-2 gap-6 text-center">
+                <div className="p-4 bg-blue-50 dark:bg-gray-800 rounded-xl">
+                  <div className="text-3xl font-bold text-blue-600 mb-2">
+                    10M+
+                  </div>
+                  <div className="text-sm">Learners Worldwide</div>
+                </div>
+                <div className="p-4 bg-purple-50 dark:bg-gray-800 rounded-xl">
+                  <div className="text-3xl font-bold text-purple-600 mb-2">
+                    50+
+                  </div>
+                  <div className="text-sm">Expert Instructors</div>
+                </div>
+                <div className="p-4 bg-green-50 dark:bg-gray-800 rounded-xl">
+                  <div className="text-3xl font-bold text-green-600 mb-2">
+                    100+
+                  </div>
+                  <div className="text-sm">Courses Available</div>
+                </div>
+                <div className="p-4 bg-orange-50 dark:bg-gray-800 rounded-xl">
+                  <div className="text-3xl font-bold text-orange-600 mb-2">
+                    150+
+                  </div>
+                  <div className="text-sm">Countries Reached</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
       <WhoWeAre />
       <Offerings />
       <CoreValues />
-      <TeamSection />
-      <CallToAction />
     </div>
   );
 };
 
-export default About;
\ No newline at end of file
+export default About;
diff --git a/src/components/Aboutpage/sections/CallToAction.tsx b/src/components/Aboutpage/sections/CallToAction.tsx
deleted file mode 100644
index 24a55364f..000000000
--- a/src/components/Aboutpage/sections/CallToAction.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { ArrowRight, Users, Star } from "lucide-react";
-import { contributors } from "../data/contributors";
-import { fadeInUp, scaleOnHover } from "../animations/motionVariants";
-
-const CallToAction = () => (
-  <motion.section
-    className="py-24 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 relative overflow-hidden"
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    viewport={{ once: true }}
-    transition={{ duration: 0.8 }}
-  >
-    <div className="relative z-10 max-w-4xl mx-auto text-center px-6">
-      <motion.div {...fadeInUp}>
-        <h2 className="text-4xl md:text-6xl font-bold text-white mb-6">
-          Ready to Start Your
-          <br />
-          <span className="text-yellow-300">Coding Journey?</span>
-        </h2>
-        <p className="text-xl text-white/90 mb-12 max-w-2xl mx-auto">
-          Join thousands of learners transforming their careers with
-          CodeHarborHub. Your future in tech starts here.
-        </p>
-
-        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
-          <motion.button
-            className="group inline-flex items-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-2xl shadow-xl hover:shadow-2xl transition-all"
-            {...scaleOnHover}
-          >
-            Start Learning Today
-            <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-          </motion.button>
-
-          <motion.button
-            className="group inline-flex items-center px-8 py-4 border-2 border-white text-white font-semibold rounded-2xl hover:bg-white hover:text-blue-600 transition-all"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <Users className="mr-2 w-5 h-5" />
-            Join Our Community
-          </motion.button>
-        </div>
-
-        {/* Contributors */}
-        <motion.div
-          className="mt-12 flex justify-center items-center space-x-6"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ delay: 0.6 }}
-        >
-          <div className="flex -space-x-2">
-            {contributors.map((c, i) => (
-              <motion.div
-                key={i}
-                className="w-10 h-10 rounded-full border-2 border-white bg-gradient-to-r from-blue-400 to-purple-500"
-                whileHover={{ scale: 1.2, zIndex: 10 }}
-              >
-                <img src={c.avatar} alt={c.name} className="rounded-full w-full" />
-              </motion.div>
-            ))}
-          </div>
-          <div className="text-white/90">
-            <div className="flex items-center mb-1">
-              {[...Array(5)].map((_, i) => (
-                <Star key={i} className="w-4 h-4 text-yellow-300 fill-current" />
-              ))}
-            </div>
-            <p className="text-sm">Trusted by 50,000+ learners</p>
-          </div>
-        </motion.div>
-      </motion.div>
-    </div>
-  </motion.section>
-);
-
-export default CallToAction;
diff --git a/src/components/Aboutpage/sections/Hero.tsx b/src/components/Aboutpage/sections/Hero.tsx
deleted file mode 100644
index e3d9f50cf..000000000
--- a/src/components/Aboutpage/sections/Hero.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { Code2, Users, Rocket, BookOpen } from "lucide-react";
-import { fadeInUp } from "../animations/motionVariants";
-
-const Hero = () => (
-  <motion.section
-    className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-800 dark:via-gray-900 dark:to-gray-900 overflow-hidden"
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 1 }}
-    transition={{ duration: 1 }}
-  >
-    <div className="relative z-10 text-center max-w-6xl mx-auto px-6">
-      <motion.div className="mb-8" {...fadeInUp}>
-        <motion.div
-          className="inline-flex items-center px-6 py-3 bg-white/20 backdrop-blur-sm rounded-full border border-white/30 mb-8 dark:bg-gray-800/20 dark:border-gray-700/30"
-          whileHover={{ scale: 1.05 }}
-        >
-          <Code2 className="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400" />
-          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Welcome to CodeHarborHub
-          </span>
-        </motion.div>
-
-        <h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400">
-          About CodeHarborHub
-        </h1>
-        <p className="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed dark:text-gray-300">
-          Empowering Learners, Building Future Innovators
-        </p>
-      </motion.div>
-
-      <div className="flex flex-wrap justify-center gap-4 mt-12">
-        {[Code2, Users, Rocket, BookOpen].map((Icon, index) => (
-          <motion.div
-            key={index}
-            className="p-4 bg-white/20 backdrop-blur-sm rounded-2xl border border-white/30 dark:bg-gray-800/20 dark:border-gray-700/30"
-            whileHover={{ scale: 1.1, rotate: 5 }}
-            animate={{ y: [0, -10, 0] }}
-            transition={{
-              duration: 3,
-              repeat: Infinity,
-              delay: index * 0.5,
-            }}
-          >
-            <Icon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
-          </motion.div>
-        ))}
-      </div>
-    </div>
-  </motion.section>
-);
-
-export default Hero;
diff --git a/src/components/Aboutpage/sections/MissionVision.tsx b/src/components/Aboutpage/sections/MissionVision.tsx
deleted file mode 100644
index f1f77fda1..000000000
--- a/src/components/Aboutpage/sections/MissionVision.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { Target, Rocket } from "lucide-react";
-import { fadeInUp } from "../animations/motionVariants";
-
-const MissionVision = () => {
-  return (
-    <motion.section
-      className="py-24 bg-white dark:bg-gray-900"
-      initial={{ opacity: 0 }}
-      whileInView={{ opacity: 1 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.8 }}
-    >
-      <div className="max-w-7xl mx-auto px-6">
-        <motion.div className="text-center mb-16" {...fadeInUp}>
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 dark:text-white">
-            Our Mission & Vision
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto dark:text-gray-300">
-            Driven by purpose, guided by innovation
-          </p>
-        </motion.div>
-
-        <div className="grid md:grid-cols-2 gap-12 lg:gap-16">
-          {/* Mission */}
-          <motion.div
-            className="group"
-            {...fadeInUp}
-            transition={{ delay: 0.2 }}
-            whileHover={{ scale: 1.02 }}
-          >
-            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-700 p-10 rounded-3xl border border-blue-100 dark:border-gray-700">
-              <div className="flex items-center mb-6">
-                <div className="p-4 bg-blue-600 rounded-2xl mr-4 group-hover:scale-110 transition-transform">
-                  <Target className="w-8 h-8 text-white" />
-                </div>
-                <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
-                  Our Mission
-                </h3>
-              </div>
-              <p className="text-gray-700 text-lg leading-relaxed dark:text-gray-300">
-                To democratize quality programming education by providing
-                accessible, comprehensive, and practical learning resources
-                that empower individuals to transform their careers and
-                contribute to the tech community.
-              </p>
-            </div>
-          </motion.div>
-
-          {/* Vision */}
-          <motion.div
-            className="group"
-            {...fadeInUp}
-            transition={{ delay: 0.4 }}
-            whileHover={{ scale: 1.02 }}
-          >
-            <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-700 p-10 rounded-3xl border border-purple-100 dark:border-gray-700">
-              <div className="flex items-center mb-6">
-                <div className="p-4 bg-purple-600 rounded-2xl mr-4 group-hover:scale-110 transition-transform">
-                  <Rocket className="w-8 h-8 text-white" />
-                </div>
-                <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
-                  Our Vision
-                </h3>
-              </div>
-              <p className="text-gray-700 text-lg leading-relaxed dark:text-gray-300">
-                To become the world’s most trusted platform for learning
-                programming, fostering a global community where knowledge is
-                shared freely and every learner has the opportunity to reach
-                their full potential.
-              </p>
-            </div>
-          </motion.div>
-        </div>
-      </div>
-    </motion.section>
-  );
-};
-
-export default MissionVision;
\ No newline at end of file
diff --git a/src/components/Aboutpage/sections/TeamSection.tsx b/src/components/Aboutpage/sections/TeamSection.tsx
deleted file mode 100644
index 3d7764a8b..000000000
--- a/src/components/Aboutpage/sections/TeamSection.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { Github, Twitter, Linkedin } from "lucide-react";
-import { teamMembers } from "../data/teamMembers";
-import { fadeInUp, staggerChildren } from "../animations/motionVariants";
-
-const TeamSection = () => (
-  <motion.section
-    className="py-24 bg-white dark:bg-gray-900"
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    viewport={{ once: true }}
-    transition={{ duration: 0.8 }}
-  >
-    <div className="max-w-7xl mx-auto px-6">
-      <motion.div className="text-center mb-16" {...fadeInUp}>
-        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 dark:text-white">
-          Meet Our Team
-        </h2>
-        <p className="text-xl text-gray-600 max-w-3xl mx-auto dark:text-gray-300">
-          Passionate educators and developers dedicated to your success
-        </p>
-      </motion.div>
-
-      <motion.div
-        className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
-        variants={staggerChildren}
-        initial="initial"
-        whileInView="animate"
-        viewport={{ once: true }}
-      >
-        {teamMembers.map((member, index) => (
-          <motion.div
-            key={index}
-            className="text-center group"
-            variants={fadeInUp}
-            whileHover={{ y: -10 }}
-          >
-            <div className="relative mb-6">
-              <img
-                src={member.avatar}
-                alt={member.name}
-                className="w-32 h-32 rounded-full mx-auto object-cover border-4 border-white dark:border-gray-800 shadow-xl"
-              />
-            </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-1 dark:text-white">
-              {member.name}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-4">
-              {member.role}
-            </p>
-            <div className="flex justify-center space-x-3">
-              <a href={member.social.github}>
-                <Github className="w-5 h-5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" />
-              </a>
-              <a href={member.social.twitter}>
-                <Twitter className="w-5 h-5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" />
-              </a>
-              <a href={member.social.linkedin}>
-                <Linkedin className="w-5 h-5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" />
-              </a>
-            </div>
-          </motion.div>
-        ))}
-      </motion.div>
-    </div>
-  </motion.section>
-);
-
-export default TeamSection;
diff --git a/src/components/Aboutpage/sections/WhoWeAre.tsx b/src/components/Aboutpage/sections/WhoWeAre.tsx
index a62f5fc0f..d6c4605af 100644
--- a/src/components/Aboutpage/sections/WhoWeAre.tsx
+++ b/src/components/Aboutpage/sections/WhoWeAre.tsx
@@ -12,57 +12,48 @@ const WhoWeAre = () => {
       viewport={{ once: true }}
       transition={{ duration: 0.8 }}
     >
+      <h2 className="text-4xl md:text-5xl text-center font-bold text-gray-900 mb-8 dark:text-white">
+        Who We Are
+      </h2>
       <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
-        {/* Text */}
-        <motion.div {...fadeInUp}>
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8 dark:text-white">
-            Who We Are
-          </h2>
-          <div className="space-y-6 text-lg text-gray-700 leading-relaxed dark:text-gray-300">
-            <p>
-              CodeHarborHub was founded with one vision: everyone deserves access
-              to high-quality programming education. Built by passionate developers
-              and educators, we aim to bridge the gap between learning and real-world
-              industry skills.
-            </p>
-            <p>
-              Our community welcomes learners from all backgrounds — from complete
-              beginners taking their first step to seasoned professionals refining
-              their craft.
-            </p>
-            <p>
-              What sets us apart? A commitment to hands-on learning, open-source
-              collaboration, and building real-world projects that truly make a
-              difference.
-            </p>
-          </div>
-        </motion.div>
-
-        {/* Animated Graphic */}
-        <motion.div
+         <motion.div
           className="relative"
           initial={{ opacity: 0, x: 50 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.8, delay: 0.2 }}
         >
-          <div className="aspect-square bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-3xl p-1">
-            <div className="w-full h-full bg-white dark:bg-gray-900 rounded-3xl flex items-center justify-center">
-              <motion.div
-                className="text-center"
-                animate={{ scale: [1, 1.05, 1] }}
-                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
-              >
-                <div className="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full mb-4">
-                  <Code2 className="w-12 h-12 text-white" />
-                </div>
-                <p className="text-gray-600 dark:text-gray-400 font-medium">
-                  Empowering Learners Worldwide
-                </p>
-              </motion.div>
+          <div className="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-3xl p-1">
+            <div className="w-full bg-white dark:bg-gray-900 rounded-3xl flex items-center justify-center">
+              <img
+                src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3w5dHx8MHx8fGFsbHwxfHx8fHww&auto=format&fit=crop&w=600&q=80"
+                alt="Vision Illustration"
+                className="rounded-xl shadow-lg"
+              />
             </div>
           </div>
         </motion.div>
+        {/* Text */}
+        <motion.div {...fadeInUp}>
+          <div className="space-y-6 text-lg text-gray-700 leading-relaxed dark:text-gray-300">
+            <p>
+              We at CodeHarborHub are a global community of enthusiastic
+              researchers, developers, and innovators committed to ensuring that
+              everyone has access to technology. We offer an open platform where
+              people can learn, develop, and work together through practical
+              projects and experiences, all based on the idea that knowledge
+              should be shared rather than restricted.
+            </p>
+            <p>
+              Our goal is to help students become proficient developers and
+              creators who can transform their ideas into meaningful solutions
+              by bridging the gap between education and innovation.
+              CodeHarborHub provides the resources, guidance, and tools you need
+              to advance with confidence, whether your goal is to learn AI,
+              explore web development, or contribute to open-source.
+            </p>
+          </div>
+        </motion.div>       
       </div>
     </motion.section>
   );