From faa4fa35c99437bdd769c1ef1a0e78b616f02689 Mon Sep 17 00:00:00 2001
From: Rajveer* <rajveer.24bcs10404@sst.scaler.com>
Date: Thu, 24 Jul 2025 19:01:14 +0530
Subject: [PATCH 1/5] Fix: Prevent navbar jump on button hover by stabilizing
 border and transition

---
 package.json                             | 14 +++++++++-----
 src/components/header/header.css         | 11 +++++++++++
 src/components/ui/FirebaseAuthGithub.tsx |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5c27c976..4baaca75 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/plugin-content-docs": "3.7.0",
+    "@docusaurus/plugin-content-blog": "^3.8.1",
+    "@docusaurus/plugin-content-docs": "^3.8.1",
+    "@docusaurus/plugin-content-pages": "^3.8.1",
     "@docusaurus/plugin-google-analytics": "^3.8.1",
-    "@docusaurus/plugin-ideal-image": "3.7.0",
-    "@docusaurus/preset-classic": "3.7.0",
-    "@docusaurus/theme-mermaid": "3.7.0",
+    "@docusaurus/plugin-ideal-image": "^3.8.1",
+    "@docusaurus/plugin-sitemap": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-classic": "^3.8.1",
+    "@docusaurus/theme-mermaid": "^3.8.1",
     "@docusaurus/theme-search-algolia": "3.7.0",
     "@floating-ui/react": "^0.27.8",
     "@giscus/react": "^3.1.0",
@@ -53,6 +56,7 @@
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
+    "@docusaurus/core": "^3.8.1",
     "@docusaurus/module-type-aliases": "3.7.0",
     "@docusaurus/tsconfig": "3.7.0",
     "@docusaurus/types": "3.7.0",
diff --git a/src/components/header/header.css b/src/components/header/header.css
index 7eafae1f..6ad1094f 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -7,6 +7,17 @@
     padding: 3rem auto;
   }
   
+  .navbar {
+    background: rgba(255, 255, 255, 0.15); /* semi-transparent background */
+    backdrop-filter: blur(10px);           /* blur effect */
+    -webkit-backdrop-filter: blur(10px);   /* Safari support */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* optional subtle border */
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);         /* optional shadow */
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
   .chh__header {
     display: flex;
     flex-direction: row;
diff --git a/src/components/ui/FirebaseAuthGithub.tsx b/src/components/ui/FirebaseAuthGithub.tsx
index eb8d80b3..ffc12197 100644
--- a/src/components/ui/FirebaseAuthGithub.tsx
+++ b/src/components/ui/FirebaseAuthGithub.tsx
@@ -50,7 +50,7 @@ const FirebaseAuthGithub: React.FC = () => {
 
   return (
     <div style={{ textAlign: 'center' }} className='flex justify-center items-center gap-5 p-0'>
-      <button onClick={handleGithubSignIn} className="bg-black text-white px-4 py-2 rounded flex items-center gap-2">
+      <button onClick={handleGithubSignIn}  className="bg-black text-white px-4 py-2 rounded-md flex items-center gap-2 border border-transparent transition-colors duration-200 ease-in-out hover:bg-white hover:text-black hover:border-black">
         <svg height="24" width="24" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
         Sign in with GitHub
       </button>

From 23727e1ff0aec6c70e2832c1f2a8461e1111cff9 Mon Sep 17 00:00:00 2001
From: Abhishek kalme <abhishekkalme0@gmail.com>
Date: Mon, 28 Jul 2025 15:55:20 +0530
Subject: [PATCH 2/5] Fix CSS formatting in header component

---
 src/components/header/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index 132f21e7..ac94f9f6 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -320,4 +320,4 @@
   .float-animation {
     animation: float 2s ease-in-out infinite;
   }
-}
+

From 54644ffe9e5bfc1e49d1eb568910b52e92c79940 Mon Sep 17 00:00:00 2001
From: Abhishek kalme <abhishekkalme0@gmail.com>
Date: Mon, 28 Jul 2025 19:39:11 +0530
Subject: [PATCH 3/5] Refactor header styles by removing background color and
 transition effects

---
 src/components/header/header.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index ac94f9f6..3e4c2061 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -5,9 +5,7 @@
     transform-style: preserve-3d;
     overflow: hidden;
     padding: 3rem auto;
-    background-color: var(--ifm-background-color);
-    color: #000;
-    transition: background 0.4s ease, color 0.4s ease;
+
   }  
   .chh__header {
     display: flex;

From 29cbc98c5e219b07bb2553e4d6ddfcc871769d56 Mon Sep 17 00:00:00 2001
From: Abhishek kalme <abhishekkalme0@gmail.com>
Date: Mon, 28 Jul 2025 22:59:55 +0530
Subject: [PATCH 4/5] fix: improve dark mode compatibility on Our Sponsors page

---
 src/pages/our-sponsors/Sponsors.css | 478 ++++++++++++++--------------
 src/pages/our-sponsors/index.tsx    | 330 +++++++++----------
 2 files changed, 403 insertions(+), 405 deletions(-)

diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css
index 77e6cf49..4a6949bb 100644
--- a/src/pages/our-sponsors/Sponsors.css
+++ b/src/pages/our-sponsors/Sponsors.css
@@ -1,55 +1,95 @@
-.sponsor-page {
-    padding: 2rem;
-    max-width: 1200px;
+:root {
+    --sponsor-bg-light: #ffffff;
+    --sponsor-bg-dark: #1a1a1a;
+  
+    --sponsor-text-light: #111827;
+    --sponsor-text-dark: #d1d5db;
+  
+    --sponsor-muted-light: #6b7280;
+    --sponsor-muted-dark: #9ca3af;
+  
+    --tab-active-color-light: #342ccc;
+    --tab-active-color-dark: #7c3aed;
+  
+    --card-bg-light: #ffffff;
+    --card-bg-dark: #1a1a1a;
+  
+    --circle-bg-light: #eef2ff;
+    --circle-bg-dark: #1e293b;
+  
+    --text-primary-light: #1f2937;
+    --text-primary-dark: #d1d5db;
+  
+    --text-muted-light: #6b7280;
+    --text-muted-dark: #9ca3af;
+  }
+  
+  html[data-theme='dark'] {
+    --sponsor-bg-light: var(--sponsor-bg-dark);
+    --sponsor-text-light: var(--sponsor-text-dark);
+    --sponsor-muted-light: var(--sponsor-muted-dark);
+    --tab-active-color-light: var(--tab-active-color-dark);
+    --card-bg-light: var(--card-bg-dark);
+    --circle-bg-light: var(--circle-bg-dark);
+    --text-primary-light: var(--text-primary-dark);
+    --text-muted-light: var(--text-muted-dark);
+  }
+  
+  /* Page layout */
+  .sponsor-page {
+    padding: 2rem 1rem;
     margin: 0 auto;
-}
-
-.sponsor-page .sponsor-header {
+    width: 100%;
+    min-height: 100vh;
+    background-color: var(--sponsor-bg-light);
+    color: var(--sponsor-text-light);
+  }
+  
+  /* Header section */
+  .sponsor-header {
     text-align: center;
     margin-bottom: 2rem;
-}
-
-.TitleText {
+  }
+  
+  .TitleText {
     margin-top: 1rem;
-    background: linear-gradient(90deg,
-            rgb(152 0 255) 0%,
-            rgb(246 41 41) 50%,
-            rgb(255 169 8) 100%);
+    background: linear-gradient(90deg, #9800ff, #f62929, #ffa908);
     background-clip: text;
+    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
-
-/* Tabs Styling */
-.tabs {
+    color: transparent;
+  }
+  
+  /* Tabs */
+  .tabs {
     display: flex;
     justify-content: center;
     margin-bottom: 2rem;
     border-bottom: 1px solid #e2e8f0;
     padding-bottom: 0.5rem;
-}
-
-.tab-button {
+  }
+  
+  .tab-button {
     padding: 0.75rem 1.5rem;
     margin: 0 0.5rem;
     border: none;
     background: none;
     font-size: 1.1rem;
     font-weight: 600;
-    color: #6b7280;
+    color: var(--sponsor-muted-light);
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
-    outline: none;
     display: flex;
     align-items: center;
     gap: 8px;
-}
-
-.tab-button.active {
-    color: #4f46e5;
-}
-
-.tab-badge {
+  }
+  
+  .tab-button.active {
+    color: var(--tab-active-color-light);
+  }
+  
+  .tab-badge {
     background-color: #e0e7ff;
     color: #4f46e5;
     border-radius: 9999px;
@@ -58,23 +98,14 @@
     padding: 2px 8px;
     min-width: 24px;
     text-align: center;
-    transition: all 0.2s ease;
-}
-
-.tab-button.active .tab-badge {
-    background-color: #4f46e5;
+  }
+  
+  .tab-button.active .tab-badge {
+    background-color: var(--tab-active-color-light);
     color: white;
-}
-
-.no-sponsors {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 2rem;
-    color: #6b7280;
-    font-size: 1.1rem;
-}
-
-.tab-button::after {
+  }
+  
+  .tab-button::after {
     content: '';
     position: absolute;
     bottom: -0.5rem;
@@ -83,96 +114,96 @@
     height: 3px;
     background: linear-gradient(90deg, #4f46e5, #7c3aed);
     transition: width 0.3s ease;
-}
-
-.tab-button.active::after {
+  }
+  
+  .tab-button.active::after {
     width: 100%;
-}
-
-.tab-content {
+  }
+  
+  /* Tab content */
+  .tab-content {
     display: none;
     animation: fadeIn 0.5s ease;
-}
-
-.tab-content.active {
+  }
+  
+  .tab-content.active {
     display: block;
-}
-
-.sponsor-page .sponsors-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.sponsor-page .sponsor-card {
+  }
+  
+  .no-sponsors {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+    color: var(--sponsor-muted-light);
+  }
+  
+  /* Sponsor grid */
+  .sponsors-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+  }
+  
+  /* Sponsor card */
+  .sponsor-card {
     position: relative;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     padding: 20px;
-    background: #fff;
+    background: var(--card-bg-light);
+    color: var(--text-primary-light);
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
-}
-
-.sponsor-page .sponsor-card::before {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    transition: left 0.3s ease-in-out;
-}
-
-.sponsor-page .sponsor-card:hover::before {
-    left: 100%;
-}
-
-.sponsor-page .sponsor-card:hover {
+  }
+  
+  .sponsor-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
-}
-
-.sponsor-page .sponsor-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.sponsor-page .sponsor-card .avatar-wrapper {
+  }
+  
+  .avatar-wrapper {
     width: 110px;
     height: 110px;
     margin-bottom: 12px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 0 0 4px #f9fafb;
-}
-
-.sponsor-page .sponsor-card .sponsor-name {
+  }
+  
+  .sponsor-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .sponsor-name {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 4px;
-    color: #111827;
-}
-
-.sponsor-page .sponsor-card .sponsor-desc {
+    color: var(--text-primary-light);
+  }
+  
+  .sponsor-desc {
     font-size: 0.95rem;
-    color: #4b5563;
+    color: var(--text-muted-light);
     margin-bottom: 10px;
     line-height: 1.4;
-}
-
-.sponsor-page .sponsor-card .social-links {
+  }
+  
+  /* Social links */
+  .social-links {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 8px;
-}
-
-.sponsor-page .sponsor-card .social-links a {
+  }
+  
+  .social-links a {
     display: flex;
     width: 36px;
     height: 36px;
@@ -182,53 +213,50 @@
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s, transform 0.3s;
-}
-
-
-.sponsor-page .sponsor-card .social-links a:hover {
+  }
+  
+  .social-links a:hover {
     transform: scale(1.1);
-}
-
-.sponsor-page .sponsor-card .social-links a.github:hover {
+  }
+  
+  .social-links a.github:hover {
     background-color: #333;
-}
-
-.sponsor-page .sponsor-card .social-links a.linkedin:hover {
+  }
+  .social-links a.linkedin:hover {
     background-color: #0073b1;
-}
-
-.sponsor-page .sponsor-card .social-links a.twitter:hover {
+  }
+  .social-links a.twitter:hover {
     background-color: #1da1f2;
-}
-
-.sponsor-page .sponsor-card .social-links a.instagram:hover {
+  }
+  .social-links a.instagram:hover {
     background-color: #e4405f;
-}
-
-.sponsor-page .sponsor-card.empty-card {
-  cursor: pointer;
-  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
-  border: 2px dashed #4f46e5;
-  color: #4f46e5;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  padding: 40px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
-  position: relative;
-  overflow: hidden;
-}
-
-.sponsor-page .sponsor-card.empty-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.sponsor-page .sponsor-card.empty-card::before {
+  }
+  
+  /* Empty Card CTA */
+  .empty-card {
+    cursor: pointer;
+    background: var(--card-bg-light);
+    color: var(--tab-active-color-light);
+    border: 2px dashed var(--tab-active-color-light);
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    border-radius: 12px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+  
+  .empty-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+  
+  .empty-card::before {
     content: '';
     position: absolute;
     top: 0;
@@ -236,42 +264,26 @@
     width: 300%;
     height: 100%;
     background: linear-gradient(
-        90deg,
-        transparent,
-        rgba(255, 255, 255, 0.4),
-        transparent
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.4),
+      transparent
     );
     transition: 0.5s;
     z-index: 1;
-}
-
-.sponsor-page .sponsor-card.empty-card:hover::before {
+  }
+  
+  .empty-card:hover::before {
     left: 100%;
-}
-
-.sponsor-page .sponsor-card.empty-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.sponsor-page .sponsor-card.empty-card h3 {
-  font-size: 1.1rem;
-    font-weight: 600;
-    color: #4f46e5;
-    margin-top: 1rem;
-    z-index: 2;
-}
-
-.sponsor-page .sponsor-card.empty-card .join-icon {
-    font-size: 2rem;
-    color: #4f46e5;
-    transition: transform 0.3s ease;
+  }
+  
+  .empty-card h3,
+  .empty-card .join-icon {
     z-index: 2;
-    margin: 0;
-    padding: 0;
-}
-
-.sponsor-page .scanner-popup {
+  }
+  
+  /* Modal / Scanner */
+  .scanner-popup {
     position: fixed;
     top: 0;
     left: 0;
@@ -282,34 +294,40 @@
     justify-content: center;
     align-items: center;
     z-index: 1000;
-}
-
-.scanner-content {
+  }
+  
+  .scanner-content {
     position: relative;
     padding: 2rem;
     border-radius: 8px;
     text-align: center;
     max-width: 400px;
     width: 100%;
-    background: white;
-}
-
-.sponsors-section {
-    margin-top: 2rem;
-}
-
-.support-links {
-    margin-top: 5rem;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    align-items: center;
-}
-
-.scanner-button {
+    background: var(--card-bg-light);
+    color: var(--text-primary-light);
+  }
+  
+  .close-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: transparent;
+    border: none;
+    color: #444;
+    cursor: pointer;
+    padding: 4px;
+    transition: color 0.2s;
+  }
+  
+  .close-button:hover {
+    color: #000;
+  }
+  
+  /* CTA Button */
+  .scanner-button {
     background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
     color: white;
-    padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */
+    padding: 12px 28px;
     border-radius: 8px;
     cursor: pointer;
     border: none;
@@ -317,19 +335,17 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
+    min-width: 200px;
     position: relative;
     overflow: hidden;
-    min-width: 200px;
-    text-align: center;
-}
-
-.scanner-button::before {
+  }
+  
+  .scanner-button::before {
     content: '';
     position: absolute;
     top: 0;
@@ -339,45 +355,27 @@
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: 0.5s;
     z-index: 1;
-}
-
-.scanner-button > * {
+  }
+  
+  .scanner-button > * {
     position: relative;
     z-index: 2;
-}
-
-.scanner-button:hover {
+  }
+  
+  .scanner-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(79, 70, 229, 0.2);
-}
-
-.scanner-button:hover::before {
+    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4),
+      0 4px 6px -2px rgba(79, 70, 229, 0.2);
+  }
+  
+  .scanner-button:hover::before {
     left: 100%;
-}
-
-.scanner-button:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2);
-}
-
-.close-button {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    background: transparent;
-    border: none;
-    color: #444;
-    cursor: pointer;
-    padding: 4px;
-    transition: color 0.2s;
-}
-
-.close-button:hover {
-    color: #000;
-}
-
-@media (max-width: 600px) {
+  }
+  
+  /* Responsive */
+  @media (max-width: 600px) {
     .sponsor-card {
-        width: 100%;
+      width: 100%;
     }
-}
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/src/pages/our-sponsors/index.tsx b/src/pages/our-sponsors/index.tsx
index 15653ba4..85522223 100644
--- a/src/pages/our-sponsors/index.tsx
+++ b/src/pages/our-sponsors/index.tsx
@@ -1,218 +1,218 @@
 import React, { useState, useRef, useEffect } from "react";
-import SponsorCard from "./SponsorCard";
-import "./Sponsors.css";
 import Layout from "@theme/Layout";
-import { FaPlusCircle, FaTimes } from 'react-icons/fa';
 import Head from "@docusaurus/Head";
+import { FaPlusCircle, FaTimes } from "react-icons/fa";
 import sponsors from "@site/src/database/sponsors";
-import { useHistory } from '@docusaurus/router';
+import SponsorCard from "./SponsorCard";
+import "./Sponsors.css";
+import { useColorMode } from "@docusaurus/theme-common";
 
-type TabType = 'current' | 'past';
+type TabType = "current" | "past";
 
 const OurSponsors: React.FC = () => {
-  const [showScanner, setShowScanner] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<TabType>('current');
+  return (
+    <Layout>
+      <Head>
+        <script
+          async
+          custom-element="amp-auto-ads"
+          src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
+        />
+      </Head>
+      <SponsorContent />
+    </Layout>
+  );
+};
+
+const SponsorContent: React.FC = () => {
+  const { colorMode } = useColorMode();
+  const [showScanner, setShowScanner] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabType>("current");
   const modalRef = useRef<HTMLDivElement>(null);
-  const history = useHistory();
 
-// Filter for current sponsors (exclude isWeSponsor)
   const currentSponsors = sponsors.filter(
-  (s) => !s.isPastSponsor && !s.isWeSponsor);
-  const pastSponsors = sponsors.filter(s => s.isPastSponsor);
-
- // Filter for people we sponsor
+    (s) => !s.isPastSponsor && !s.isWeSponsor
+  );
+  const pastSponsors = sponsors.filter((s) => s.isPastSponsor);
   const weSponsorPeople = sponsors.filter((s) => s.isWeSponsor);
 
-  const handleJoinSponsor = () => setShowScanner(true);
-
-  const handlePaymentSuccess = () => {
-    setShowScanner(false);
-    alert("Thanks, we will redirect to Github Sponsors page, upon sponsoring you will be added to our sponsors list.");
-    window.location.href = 'https://github.com/sponsors/sanjay-kv?o=esb';
-  };
-
-  const handleCloseModal = () => setShowScanner(false);
-
-  const handleTabChange = (tab: TabType) => {
-    setActiveTab(tab);
-  };
-
   useEffect(() => {
     if (!showScanner) return;
-
     const controller = new AbortController();
     const { signal } = controller;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') handleCloseModal();
+      if (e.key === "Escape") setShowScanner(false);
     };
 
     const handleClickOutside = (e: MouseEvent) => {
       if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-        handleCloseModal();
+        setShowScanner(false);
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown, { signal });
-    document.addEventListener('mousedown', handleClickOutside, { signal });
+    document.addEventListener("keydown", handleKeyDown, { signal });
+    document.addEventListener("mousedown", handleClickOutside, { signal });
 
     return () => controller.abort();
   }, [showScanner]);
 
+  const handlePaymentSuccess = () => {
+    setShowScanner(false);
+    alert("Redirecting to GitHub Sponsors...");
+    window.location.href = "https://github.com/sponsors/sanjay-kv?o=esb";
+  };
+
   return (
-    <Layout>
-      <Head>
-        <script
-          async
-          custom-element="amp-auto-ads"
-          src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
-        />
-      </Head>
-      <div className="sponsor-page">
-        <div className="sponsor-header">
-          <h1 className="TitleText">Our Valued Sponsors</h1>
-          <p>
-            Join us in empowering the open-source community through your generous support. Your sponsorship directly fuels innovation by enabling developers to create valuable resources and maintain our growing knowledge base.
-            <br /><br />
-            We deeply appreciate your commitment to advancing open-source technology and education.
-          </p>
+    <div className="sponsor-page">
+      <div className="sponsor-header">
+        <h1 className="TitleText">Our Valued Sponsors</h1>
+        <p>
+          Join us in empowering the open-source community through your generous
+          support. Your sponsorship directly fuels innovation by enabling
+          developers to create valuable resources and maintain our growing
+          knowledge base.
+          <br />
+          <br />
+          We deeply appreciate your commitment to advancing open-source
+          technology and education.
+        </p>
+      </div>
+
+      <div className="sponsors-section">
+        <div className="tabs">
+          <button
+            className={`tab-button ${activeTab === "current" ? "active" : ""}`}
+            onClick={() => setActiveTab("current")}
+          >
+            Current Sponsors
+            <span className="tab-badge">{currentSponsors.length}</span>
+          </button>
+          <button
+            className={`tab-button ${activeTab === "past" ? "active" : ""}`}
+            onClick={() => setActiveTab("past")}
+          >
+            People We Sponsored
+            {weSponsorPeople.length > 0 && (
+              <span className="tab-badge">{weSponsorPeople.length}</span>
+            )}
+          </button>
         </div>
-        <div className="sponsors-section">
-          <div className="tabs">
-            <button
-              className={`tab-button ${activeTab === 'current' ? 'active' : ''}`}
-              onClick={() => handleTabChange('current')}
-            >
-              Current Sponsors
-              <span className="tab-badge">{currentSponsors.length}</span>
-            </button>
-            <button
-              className={`tab-button ${activeTab === 'past' ? 'active' : ''}`}
-              onClick={() => handleTabChange('past')}
-            >
-              People We Sponsored
-              {weSponsorPeople.length > 0 && (
-                <span className="tab-badge">{weSponsorPeople.length}</span>
+
+        {/* Current Sponsors Tab */}
+        {activeTab === "current" && (
+          <>
+            <h3 className="section-heading">Current Sponsors</h3>
+            <div className="sponsors-list">
+              {currentSponsors.length > 0 ? (
+                currentSponsors.map((sponsor) => (
+                  <SponsorCard key={`${sponsor.name}-current`} {...sponsor} />
+                ))
+              ) : (
+                <div className="no-sponsors">
+                  <p>
+                    We're actively seeking visionary sponsors to partner with us.
+                  </p>
+                </div>
               )}
-            </button>
-          </div>
 
-          <div className={`tab-content ${activeTab === 'current' ? 'active' : ''}`}>
-            <div className="sponsors-section">
-              <h3 className="text-xl font-semibold text-gray-800 mb-4 mt-2">Current Sponsors</h3>
-              <div className="sponsors-list">
-                {currentSponsors.length > 0 ? (
-                  currentSponsors.map((sponsor) => (
-                    <SponsorCard key={`${sponsor.name}-current`} {...sponsor} />
-                  ))
-                ) : (
-                  <div className="no-sponsors">
-                    <p>We're actively seeking visionary sponsors to partner with us in supporting the open-source community.</p>
+              {/* Add Sponsor Card */}
+              <div
+                className="sponsor-card empty-card"
+                onClick={() => setShowScanner(true)}
+                role="button"
+                tabIndex={0}
+              >
+                <div className="text-center p-4">
+                  <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 transition-colors duration-200"
+                    style={{ backgroundColor: "var(--circle-bg)" }}>
+                    <FaPlusCircle
+                      className="text-3xl"
+                      style={{ color: "var(--text-primary)" }}
+                    />
                   </div>
-                )}
-                
-                <div
-                  className="sponsor-card empty-card group"
-                  onClick={handleJoinSponsor}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <div className="text-center p-4">
-                    <div className="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-indigo-100 transition-colors duration-200">
-                      <FaPlusCircle className="text-3xl text-indigo-500 group-hover:text-indigo-600 transition-colors duration-200" />
-                    </div>
-                    <h3 className="text-lg font-semibold text-indigo-700 mb-1 group-hover:text-indigo-800 transition-colors duration-200">
-                      Partner With Us
-                    </h3>
-                    <p className="text-sm text-gray-500 group-hover:text-gray-600 transition-colors duration-200">
-                      Support innovation in open-source development
-                    </p>
-                    <div className="mt-3 inline-flex items-center text-sm font-medium text-indigo-600 group-hover:text-indigo-700 transition-colors duration-200">
-                      Join us
-                      <svg className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                      </svg>
-                    </div>
+                  <h3 className="text-lg font-semibold mb-1" style={{ color: "var(--text-primary)" }}>
+                    Partner With Us
+                  </h3>
+                  <p className="text-sm" style={{ color: "var(--text-muted)" }}>
+                    Support innovation in open-source development
+                  </p>
+                  <div className="mt-3 inline-flex items-center text-sm font-medium text-indigo-600 group-hover:text-indigo-700 transition-colors duration-200">
+                    Join us
+                    <svg className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
                   </div>
                 </div>
               </div>
-              
-
-              {pastSponsors.length > 0 && (
-                <>
-                  <h3 className="text-xl font-semibold text-gray-800 mb-4 mt-12">Past Sponsors</h3>
-                  <div className="sponsors-list">
-                    {pastSponsors.map((sponsor) => (
-                      <SponsorCard key={`${sponsor.name}-past-in-current`} {...sponsor} />
-                    ))}
-                  </div>
-                </>
-              )}
             </div>
-          </div>
 
-          <div className={`tab-content ${activeTab === 'past' ? 'active' : ''}`}>
+            {/* Past Sponsors */}
+            {pastSponsors.length > 0 && (
+              <>
+                <h3 className="section-heading" style={{ marginTop: "3rem" }}>
+                  Past Sponsors
+                </h3>
+                <div className="sponsors-list">
+                  {pastSponsors.map((sponsor) => (
+                    <SponsorCard key={`${sponsor.name}-past`} {...sponsor} />
+                  ))}
+                </div>
+              </>
+            )}
+          </>
+        )}
+
+        {/* People We Sponsored Tab */}
+        {activeTab === "past" && (
+          <div className="sponsors-list">
             {weSponsorPeople.length > 0 ? (
-              <div className="sponsors-list">
-                {weSponsorPeople.map((sponsor) => (
-                  <SponsorCard key={`${sponsor.name}-wesponsor`} {...sponsor} />
-                ))}
-              </div>
+              weSponsorPeople.map((sponsor) => (
+                <SponsorCard key={`${sponsor.name}-wesponsor`} {...sponsor} />
+              ))
             ) : (
               <div className="no-sponsors">
                 <p>We look forward to recognizing our future sponsors here.</p>
               </div>
             )}
           </div>
-        </div>
-
-        {showScanner && (
-          <div className="scanner-popup" role="dialog" aria-modal="true">
-            <div className="scanner-content" ref={modalRef}>
-              <button
-                className="close-button"
-                aria-label="Close"
-                onClick={handleCloseModal}
-              >
-                <FaTimes size={20} />
-              </button>
-              <h2 className="TitleText">Become a Valued Partner</h2>
-              <p className="text-gray-600 mb-6">Join our mission to advance open-source innovation and education through your sponsorship</p>
-              <div className="relative inline-flex">
-                <button 
-                  className="scanner-button group" 
-                  onClick={handlePaymentSuccess}
-                >
-                  <span className="absolute left-4 opacity-0 group-hover:opacity-100 group-hover:left-6 transition-all duration-300">
-                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.1-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.58.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-                    </svg>
-                  </span>
-                  <span className="relative transition-all duration-300 group-hover:translate-x-2">
-                    Sponsor on GitHub
-                  </span>
-                  <span className="absolute right-4 opacity-0 group-hover:opacity-100 group-hover:right-6 transition-all duration-300">
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
         )}
-        <div className="support-links mt-6">
-          <iframe
-            src="https://github.com/sponsors/sanjay-kv/button"
-            title="Sponsor Sanjay Viswanathan on GitHub"
-            height="32"
-            width="114"
-            style={{ border: 0, borderRadius: "6px" }}
-          />
+      </div>
 
+      {/* Modal for Sponsor CTA */}
+      {showScanner && (
+        <div className="scanner-popup" role="dialog" aria-modal="true">
+          <div className="scanner-content" ref={modalRef}>
+            <button
+              className="close-button"
+              aria-label="Close"
+              onClick={() => setShowScanner(false)}
+            >
+              <FaTimes size={20} />
+            </button>
+            <h2 className="TitleText">Become a Valued Partner</h2>
+            <p className="text-muted mb-6">
+              Join our mission to advance open-source innovation and education
+              through your sponsorship
+            </p>
+            <button className="scanner-button group" onClick={handlePaymentSuccess}>
+              <span>Sponsor on GitHub</span>
+            </button>
+          </div>
         </div>
+      )}
+
+      {/* GitHub Sponsor Button */}
+      <div className="support-links mt-6">
+        <iframe
+          src="https://github.com/sponsors/sanjay-kv/button"
+          title="Sponsor Sanjay Viswanathan on GitHub"
+          height="32"
+          width="114"
+          style={{ border: 0, borderRadius: "6px" }}
+        />
       </div>
-    </Layout>
+    </div>
   );
 };
 

From 0895dec4a84fb0e799c356f2361fcd8a314306ef Mon Sep 17 00:00:00 2001
From: Abhishek kalme <abhishekkalme0@gmail.com>
Date: Tue, 29 Jul 2025 00:07:44 +0530
Subject: [PATCH 5/5] feat: add responsive styling and dark mode support for
 Blogs section

---
 src/pages/blogs/Blogs.css | 84 +++++++++++++++++++++++++++++++++++++++
 src/pages/blogs/index.tsx | 24 ++++++-----
 2 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/blogs/Blogs.css

diff --git a/src/pages/blogs/Blogs.css b/src/pages/blogs/Blogs.css
new file mode 100644
index 00000000..8274791b
--- /dev/null
+++ b/src/pages/blogs/Blogs.css
@@ -0,0 +1,84 @@
+.blogs-section {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  padding: 2rem 1rem;
+  min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+:root {
+  --bg-color: #ffffff;
+  --text-color: #111827;
+}
+
+html[data-theme='dark'] {
+  --bg-color: #1a1a1a;
+  --text-color: #d1d5db;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+.blogs-description {
+  font-size: 1.125rem; 
+  color: var(--muted-text);
+  line-height: 1.6;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+:root {
+  --muted-text: #374151; 
+}
+
+html[data-theme='dark'] {
+  --muted-text: #d1d5db; 
+}
+
+
+.blog-card {
+  background-color: var(--blog-card-bg);
+  color: var(--blog-text-primary);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.blog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--blog-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.blog-desc {
+  font-size: 0.95rem;
+  color: var(--blog-text-muted);
+  margin-bottom: 1rem;
+}
+
+.read-more {
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.light-link {
+  color: #3b82f6; 
+}
+
+.dark-link {
+  color: #93c5fd;
+}
+
+:root {
+  --blog-card-bg: #ffffff;
+  --blog-text-primary: #111827;
+  --blog-text-muted: #6b7280;
+}
+
+html[data-theme="dark"] {
+  --blog-card-bg: #1a1a1a;
+  --blog-text-primary: #f3f4f6;
+  --blog-text-muted: #9ca3af;
+}
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index b2df23a2..7fd76142 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -4,6 +4,8 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import blogs from "../../database/blogs";
 import Head from "@docusaurus/Head";
+import { useColorMode } from "@docusaurus/theme-common";
+import "./Blogs.css"; // Make sure this path is correct
 
 export default function Blogs(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -20,15 +22,16 @@ export default function Blogs(): React.JSX.Element {
           src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
         />
       </Head>
-      <section className="m-4 my-10">
+      <section className="blogs-section">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold gradient-text">
             Welcome to RecodeHive Blogs
           </h1>
-          <p className="text-lg text-gray-700 dark:text-gray-300">
+          <p className="blogs-description">
             Discover web development articles ranging from HTML and CSS to
             JavaScript, React, Node.js, DSA, and much more.
           </p>
+
         </div>
         <div className="grid gap-6 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {blogs.map((blog) => (
@@ -40,10 +43,11 @@ export default function Blogs(): React.JSX.Element {
   );
 }
 
-
 const BlogCard = ({ blog }) => {
+  const { colorMode } = useColorMode();
+
   return (
-    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+    <div className="blog-card shadow-lg rounded-lg overflow-hidden">
       <Link to={`/blog/${blog.slug}`}>
         <img
           src={blog.image}
@@ -52,17 +56,15 @@ const BlogCard = ({ blog }) => {
         />
       </Link>
       <div className="p-4">
-        <h2 className="text-xl font-semibold text-white">{blog.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-4">
-          {blog.description}
-        </p>
+        <h2 className="blog-title">{blog.title}</h2>
+        <p className="blog-desc">{blog.description}</p>
         <Link
           to={`/blog/${blog.slug}`}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
+          className={`read-more ${colorMode === "dark" ? "dark-link" : "light-link"}`}
         >
-          Read More
+          Read More →
         </Link>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};