From 806a947f65bf3072d16847b7e598d939c65c32ad Mon Sep 17 00:00:00 2001
From: unknown <ajaydhangar49@gmail.com>
Date: Sun, 12 Oct 2025 20:24:02 +0530
Subject: [PATCH] update Hero section in About page

---
 src/components/Aboutpage/data/contributors.ts | 10 -----
 src/components/Aboutpage/data/teamMembers.ts  | 30 -------------
 src/components/Aboutpage/index.tsx            | 27 ++++++++----
 .../Aboutpage/sections/WhoWeAre.tsx           |  2 +-
 src/css/custom.css                            | 42 +++++++++++++------
 5 files changed, 49 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/Aboutpage/data/contributors.ts
 delete mode 100644 src/components/Aboutpage/data/teamMembers.ts

diff --git a/src/components/Aboutpage/data/contributors.ts b/src/components/Aboutpage/data/contributors.ts
deleted file mode 100644
index 118599325..000000000
--- a/src/components/Aboutpage/data/contributors.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const contributors = [
-  { name: "Ajay Dhangar", avatar: "https://github.com/ajay-dhangar.png" },
-  {
-    name: "Ishita Mukherjee",
-    avatar: "https://github.com/Ishitamukherjee2004.png",
-  },
-  { name: "Pavitraa G", avatar: "https://github.com/pavitraag.png" },
-  { name: "Sivaprasath", avatar: "https://github.com/sivaprasath2004.png" },
-  { name: "Hema Sree", avatar: "https://github.com/Hemav009.png" },
-];
diff --git a/src/components/Aboutpage/data/teamMembers.ts b/src/components/Aboutpage/data/teamMembers.ts
deleted file mode 100644
index 781f91098..000000000
--- a/src/components/Aboutpage/data/teamMembers.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const teamMembers = [
-  {
-    name: "Ajay Dhangar",
-    role: "Founder & CEO",
-    avatar: "https://github.com/ajay-dhangar.png",
-    social: {
-      github: "https://github.com/ajay-dhangar",
-      twitter: "https://twitter.com/CodesWithAjay",
-      linkedin: "https://linkedin.com/in/ajay-dhangar",
-    },
-  },
-  {
-    name: "Mike Chen",
-    role: "Community Manager",
-    avatar: "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop",
-    social: { github: "#", twitter: "#", linkedin: "#" },
-  },
-  {
-    name: "Elena Rodriguez",
-    role: "Content Creator",
-    avatar: "https://images.pexels.com/photos/3851253/pexels-photo-3851253.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop",
-    social: { github: "#", twitter: "#", linkedin: "#" },
-  },
-  {
-    name: "David Kim",
-    role: "Technical Mentor",
-    avatar: "https://images.pexels.com/photos/3756681/pexels-photo-3756681.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop",
-    social: { github: "#", twitter: "#", linkedin: "#" },
-  },
-];
diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx
index 45103ca9e..498532ade 100644
--- a/src/components/Aboutpage/index.tsx
+++ b/src/components/Aboutpage/index.tsx
@@ -5,22 +5,29 @@ import { Sparkles } from "lucide-react";
 
 const About = () => {
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 overflow-x-hidden">
+    <div className="min-h-screen overflow-x-hidden">
       {/* <HeroSection /> */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-white">
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+        <div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:[mask-image:linear-gradient(0deg,rgba(15,23,42,1),rgba(15,23,42,0.6))]" />
         <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 className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-6">
+                <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
+                  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 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+              <span className="bg-gradient-to-r from-blue-600 via-cyan-600 to-blue-600 dark:from-blue-400 dark:via-cyan-400 dark:to-blue-400 bg-clip-text text-transparent">
+                Where Knowledge Meets
+              </span>
+              <br />
+              <span className="text-slate-900 dark:text-white">Innovation</span>
             </h1>
-            <p className="text-xl text-blue-100 mx-auto leading-relaxed">
+            <p className="text-xl text-slate-600 dark:text-slate-400 mb-8 mx-auto">
               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
@@ -34,7 +41,9 @@ const About = () => {
       </section>
       {/* Our Mission */}
       <section className="py-20">
-        <h2 className="text-4xl md:text-5xl text-center pb-6 font-bold">Our Mission</h2>
+        <h2 className="text-4xl md:text-5xl text-center pb-8 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>
diff --git a/src/components/Aboutpage/sections/WhoWeAre.tsx b/src/components/Aboutpage/sections/WhoWeAre.tsx
index d6c4605af..4c5ca3401 100644
--- a/src/components/Aboutpage/sections/WhoWeAre.tsx
+++ b/src/components/Aboutpage/sections/WhoWeAre.tsx
@@ -12,7 +12,7 @@ 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">
+      <h2 className="text-4xl md:text-5xl text-center font-bold text-gray-900 pb-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">
diff --git a/src/css/custom.css b/src/css/custom.css
index e47383fd6..13ab1b842 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -2,23 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ::-webkit-scrollbar {
-  width: 5px;
-} */
 
-/* ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 2px grey;
-} */
+@layer utilities {
+  .bg-grid-slate-200\/50 {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(226 232 240 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+  }
+
+  .bg-grid-slate-800\/50 {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(30 41 59 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+}
 
-/* ::-webkit-scrollbar-thumb {
-  background: var(--ifm-color-primary);
-  border-radius: 3px;
-} */
 
-/* ::-webkit-scrollbar-thumb:hover {
-  background: var(--ifm-color-primary-dark);
+/* @layer components {
+  .gradient-text {
+    @apply bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 bg-clip-text text-transparent;
+  }
+
+  .card-hover {
+    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-105 transition-all;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-white dark:bg-slate-900 border-2 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white font-semibold rounded-lg hover:border-blue-600 dark:hover:border-blue-400 hover:scale-105 transition-all;
+  }
 } */
 
+
 :root {
   --ifm-color-primary: #2e93e2;
   --ifm-color-primary-dark: #29784c;