fix: replace bluish gray backgrounds with pure black for dark mode

Author: ad1tyayadav

src/App.tsx

@@ -23,7 +23,7 @@ const App = () => {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+    <div className="min-h-screen flex flex-col bg-white dark:bg-black">
       <RouterProvider router={router} />
     </div>
   );

src/components/AboutUs/GoalsSection.tsx

@@ -4,7 +4,7 @@ import { FC } from 'react';
 
 const GoalsSection: FC = () => {
   return (
-    <section id="goals" className="w-full py-24 bg-white dark:bg-gray-900">
+    <section id="goals" className="w-full py-24 bg-white dark:bg-black">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">

src/components/AboutUs/MissionSection.tsx

@@ -5,7 +5,7 @@ const MissionSection = () => {
   return (
     <section
       id={content.sectionId}
-      className="w-full py-24 bg-white dark:bg-gray-900"
+      className="w-full py-24 bg-white dark:bg-black"
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}

src/components/AboutUs/PrinciplesSection.tsx

@@ -5,7 +5,7 @@ const PrinciplesSection = () => {
   return (
     <section
       id={principlesContent.sectionId}
-      className="w-full py-24 bg-white dark:bg-gray-900"
+      className="w-full py-24 bg-white dark:bg-black"
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}

src/components/AboutUs/ProjectSection.tsx

@@ -13,7 +13,7 @@ const ProjectsSection = () => {
   return (
     <section
       id={projectsContent.sectionId}
-      className="w-full py-24 dark:bg-gray-900"
+      className="w-full py-24 dark:bg-black"
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}

src/components/AboutUs/RoadmapSection.tsx

@@ -6,7 +6,7 @@ const RoadmapSection: React.FC = () => {
   return (
     <section
       id={roadmapContent.sectionId}
-      className="w-full py-24 bg-white dark:bg-gray-900"
+      className="w-full py-24 bg-white dark:bg-black"
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}

src/components/DeveloperTestimonials.tsx

@@ -32,7 +32,7 @@ const ReviewCard = ({
 
   return (
     <motion.div
-      className="bg-white dark:bg-gray-900 rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-[350px] shadow-lg border border-gray-200 dark:border-gray-700 mx-2 justify-between"
+      className="bg-white dark:bg-black rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-[350px] shadow-lg border border-gray-200 dark:border-gray-700 mx-2 justify-between"
       variants={testimonialCard}
       initial="hidden"
       whileInView="visible"

src/components/Donation.tsx

@@ -21,7 +21,7 @@ const Donation: React.FC = () => {
   };
 
   return (
-    <section className="relative overflow-hidden bg-white dark:bg-gray-900 text-black dark:text-white py-16 px-4">
+    <section className="relative overflow-hidden bg-white dark:bg-black text-black dark:text-white py-16 px-4">
       <div className="max-w-[90%] mx-auto flex flex-col lg:flex-row items-center justify-center lg:gap-12">
         {/* Left Side - Text Content */}
         <motion.div

src/components/Info.tsx

@@ -48,7 +48,7 @@ const Info: React.FC = () => {
 
   return (
     <>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-gray-900 font-Inter">
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-black dark:to-black font-Inter">
         <main className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 py-8 sm:py-10 md:py-12 space-y-12 sm:space-y-16 md:space-y-20">
           {/* Hero Section */}
           <section className="container mx-auto px-2 sm:px-4 py-6 sm:py-8 max-w-7xl">

src/components/Stats.tsx

@@ -10,12 +10,12 @@ import {
 
 const Stats = () => {
   return (
-    <section className="max-w-7xl mx-auto py-10 sm:py-16 md:py-20 px-4 sm:px-6 bg-white dark:bg-gray-900">
+    <section className="max-w-7xl mx-auto py-10 sm:py-16 md:py-20 px-4 sm:px-6 bg-white dark:bg-black">
       <div className="relative mb-12 sm:mb-16 md:mb-24">
         <div className="absolute left-0 top-1/2 w-full h-0.5 sm:h-1 bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 transform -translate-y-1/2 opacity-30"></div>
 
         <motion.div
-          className="relative z-10 text-center mx-auto max-w-2xl bg-white dark:bg-gray-900 px-2 py-2 sm:py-4"
+          className="relative z-10 text-center mx-auto max-w-2xl bg-white dark:bg-black px-2 py-2 sm:py-4"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, amount: 0.3 }}