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

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 }}

src/components/Testimonials.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"
@@ -93,7 +93,7 @@ export function Testimonials() {
   const secondRow = testimonials.slice(Math.ceil(testimonials.length / 2));
 
   return (
-    <div className="w-full bg-gradient-to-b from-white-800 to-[#F5DDC8] dark:from-gray-900 dark:to-gray-800">
+    <div className="w-full bg-gradient-to-b from-white-800 to-[#F5DDC8] dark:from-black dark:to-black">
       {/* Heading Section with Hearts */}
       <motion.div
         className="flex items-center justify-center gap-4 md:gap-6 mb-12"

src/components/Try.tsx

@@ -66,7 +66,7 @@ const Try: React.FC = () => {
       animate="visible"
       variants={fadeIn}
     >
-      <motion.main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900/95 px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
+      <motion.main className="flex-grow bg-[#F6DEC9] dark:bg-black/95 px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
         <div className="max-w-6xl mx-auto space-y-6 sm:space-y-8">
           <motion.header
             className="space-y-3 sm:space-y-4 md:space-y-6"

src/components/TryMore3D.tsx

@@ -48,7 +48,7 @@ const ReviewCard = ({
 
 export function TryMore() {
   return (
-    <div className="relative flex flex-col lg:flex-row h-auto lg:h-96 w-full items-center justify-center gap-6 lg:gap-4 overflow-hidden [perspective:300px] px-4 sm:px-6 md:px-10 lg:pl-20 bg-gradient-to-b from-[#F5DDC8] to-white dark:from-gray-800 dark:to-gray-900">
+    <div className="relative flex flex-col lg:flex-row h-auto lg:h-96 w-full items-center justify-center gap-6 lg:gap-4 overflow-hidden [perspective:300px] px-4 sm:px-6 md:px-10 lg:pl-20 bg-gradient-to-b from-[#F5DDC8] to-white dark:bg-gradient-to-b dark:from-black dark:to-black">
       <div className="height- 30px"></div>
 
       {/* Left Side Content */}

src/pages/About/AboutUs.tsx

@@ -19,7 +19,7 @@ const AboutUs = () => {
   }, []);
 
   return (
-    <div className="bg-white dark:bg-gray-900 min-h-screen">
+    <div className="bg-white dark:bg-black min-h-screen">
       <div className="relative z-20">
         <Header />
       </div>

src/pages/About/ContactUs.tsx

@@ -45,7 +45,7 @@ const Card: React.FC<CardProps> = ({ icon, title, content }) => (
 
 const ContactUs = () => {
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <div className="min-h-screen bg-white dark:bg-black text-gray-900 dark:text-gray-100">
       <Header />
       <main className="container mx-auto p-4">
         {/* Hero Section */}
@@ -235,7 +235,7 @@ const ContactUs = () => {
             viewport={{ once: true, amount: 0.2 }}
             variants={slideInBottom}
           >
-            <div className="bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
+            <div className="bg-white dark:bg-black shadow-lg rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
               <div className="flex flex-col md:flex-row items-center gap-6">
                 <div className="flex-shrink-0">
                   <div className="w-16 h-16 bg-red-100 dark:bg-red-300 flex items-center justify-center rounded-lg border border-red-100 dark:border-none">

src/pages/About/FAQs.tsx

@@ -28,7 +28,7 @@ const FAQs = () => {
   }, [selectedCategory]);
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <div className="min-h-screen bg-white dark:bg-black text-gray-900 dark:text-gray-100">
       <Header />
       <main className="container mx-auto p-4">
         {/* Top FAQs Section */}

src/pages/About/Leadership.tsx

@@ -14,9 +14,9 @@ import {
 
 const Leadership = () => {
   return (
-    <div className="bg-white dark:bg-gray-900">
+    <div className="bg-white dark:bg-black">
       <Header />
-      <section className="py-24 px-4 bg-white dark:bg-gray-900">
+      <section className="py-24 px-4 bg-white dark:bg-black">
         <div className="container mx-auto max-w-7xl">
           {/* Section header with animations */}
           <div className="text-center mb-16">

src/pages/Donate.tsx

@@ -27,7 +27,7 @@ const Donate: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="dark:bg-gray-900 text-gray-800 dark:text-gray-200">
+      <div className="dark:bg-black text-gray-800 dark:text-gray-200">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 font-sans mt-10 sm:mt-10 mb-10 sm:mb-16">
           {/* Hero Section */}
           <div className="flex flex-col md:flex-row gap-6 md:gap-10 mt-10">

src/pages/JoinDevelopment.tsx

@@ -13,7 +13,7 @@ const JoinDevelopment = () => {
   }, []);
 
   return (
-    <div className="bg-gradient-to-b from-white to-red-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200">
+    <div className="bg-gradient-to-b from-white to-red-50 dark:from-black dark:to-black text-gray-800 dark:text-gray-200">
       <Header />
       <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-6">
         <JoinToggle />

src/pages/MainPage.tsx

@@ -11,7 +11,7 @@ import { bannerConfigs } from '@/constants/Banner';
 
 const MainPage = () => {
   return (
-    <div className="bg-white dark:bg-gray-900">
+    <div className="bg-white dark:bg-black">
       <Header />
       <PromoBanner bannerConfigs={bannerConfigs} />
       <Info />

src/pages/Matrix.tsx

@@ -250,7 +250,7 @@ const Matrix: React.FC = () => {
   ];
 
   return (
-    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
+    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-black">
       <Header />
       <main className="flex-grow">
         {/* Hero Section*/}
@@ -311,7 +311,7 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={fadeIn}
-          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
+          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-black"
         >
           <div className="container mx-auto px-4 md:px-6">
             <div className="max-w-3xl mx-auto">
@@ -354,7 +354,7 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9] dark:bg-gray-900"
+          className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9] dark:bg-black"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>
@@ -379,7 +379,7 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
+          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-black"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>

src/pages/News/NewsDetailPage.tsx

@@ -122,7 +122,7 @@ const NewsDetailPage: React.FC = () => {
     return (
       <>
         <Header />
-        <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-screen bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-screen bg-white dark:bg-black">
           <div className="flex flex-col items-center">
             <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-600 dark:border-blue-400 mb-4"></div>
             <p className="text-gray-600 dark:text-gray-400">
@@ -163,7 +163,7 @@ const NewsDetailPage: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="container mx-auto px-4 py-8 max-w-4xl bg-white dark:bg-gray-900 mt-10 rounded-lg">
+      <div className="container mx-auto px-4 py-8 max-w-4xl bg-white dark:bg-black mt-10 rounded-lg">
         {/* Back button */}
         <motion.button
           onClick={handleGoBack}

src/pages/NotFoundPage.tsx

@@ -21,7 +21,7 @@ import {
 
 const NotFoundPage: React.FC = () => {
   return (
-    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
+    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-black">
       <Header />
       <main className="flex-grow">
         {/* Hero Section */}
@@ -99,7 +99,7 @@ const NotFoundPage: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={fadeIn}
-          className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
+          className="py-16 bg-[#FFFEF9] dark:bg-black"
         >
           <div className="container mx-auto px-4 md:px-6 max-w-4xl">
             <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-100 dark:border-gray-700 p-8">
@@ -238,7 +238,7 @@ const NotFoundPage: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
+          className="py-16 bg-[#FFFEF9] dark:bg-black"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.h2

src/pages/Products.tsx

@@ -10,7 +10,7 @@ import Product from '@/components/Product';
 
 const ProductsPage = () => {
   return (
-    <div className="bg-white dark:bg-gray-900">
+    <div className="bg-white dark:bg-black">
       <Header />
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         {/* Parent container to control animation sequence */}

src/pages/TrySugar.tsx

@@ -6,7 +6,7 @@ const TrySugar = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900/95 p-4">
+      <main className="flex-grow bg-[#F6DEC9] dark:bg-black/95 p-4">
         <div className="max-w-6xl mx-auto space-y-8">
           <Try />
         </div>

src/pages/Volunteer.tsx

@@ -29,7 +29,7 @@ const Volunteer = () => {
   };
 
   return (
-    <div className="min-h-screen bg-[#FFFEF9] dark:bg-[#13141f]">
+    <div className="min-h-screen bg-[#FFFEF9] dark:bg-black">
       <Header />
       <main className="container mx-auto flex flex-col items-center justify-center p-6">
         <JoinToggle />

src/sections/Header.tsx

@@ -53,8 +53,8 @@ const Header: React.FC = () => {
       <header
         className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
           isScrolled
-            ? 'backdrop-blur-md bg-white/90 dark:bg-gray-900/80 shadow-lg'
-            : 'bg-white dark:bg-gray-900'
+            ? 'backdrop-blur-md bg-white/90 dark:bg-black/80 shadow-lg'
+            : 'bg-white dark:bg-black'
         }`}
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -193,7 +193,7 @@ const MobileNavDrawer: React.FC<{
           animate={{ opacity: 1, x: 0 }}
           exit={{ opacity: 0, x: '100%' }}
           transition={{ type: 'tween', duration: 0.3 }}
-          className="fixed md:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white dark:bg-gray-900 shadow-xl z-40
+          className="fixed md:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white dark:bg-black shadow-xl z-40
                     flex flex-col h-full"
         >
           <div className="flex flex-col h-full">
@@ -281,7 +281,7 @@ const MobileNavDrawer: React.FC<{
             </div>
 
             {/* CTA button footer */}
-            <div className="p-4 border-t border-gray-200 dark:border-gray-700 sticky bottom-0 bg-white dark:bg-gray-900">
+            <div className="p-4 border-t border-gray-200 dark:border-gray-700 sticky bottom-0 bg-white dark:bg-black">
               <Link
                 to="/try-sugar"
                 onClick={onClose}

src/styles/globals.css

@@ -75,11 +75,11 @@
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: #000000;
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.141 0.005 285.823);
+  --card: #000000;
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.141 0.005 285.823);
+  --popover: #000000;
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.21 0.006 285.885);
@@ -99,7 +99,7 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar: #000000;
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);

src/utils/MarkdownRenderer.tsx

@@ -490,7 +490,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     tbody: ({ children, ...props }) => (
       <tbody
         {...props}
-        className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700"
+        className="bg-white dark:bg-black divide-y divide-gray-200 dark:divide-gray-700"
       >
         {children}
       </tbody>