Added background

Added About

src/App.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./i18n";
 import Navbar from "./Components/Nav/Navbar";
 import Home from "./Components/Sections/Home/Home";
@@ -7,22 +7,70 @@ import About from "./Components/Sections/About/About";
 import Contact from "./Components/Sections/Contact/Contact";
 import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
+import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
 import "./App.css";
 
 const App = () => {
+  const [theme, setTheme] = useState("light");
+useEffect(() => {
+  console.log("Current theme:", theme);
+  console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
+  
+  const canvas = document.querySelector('.background-canvas');
+  if (canvas) {
+    console.log("Canvas found:", canvas);
+    console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
+    console.log("Canvas position:", canvas.style.position);
+    console.log("Canvas z-index:", canvas.style.zIndex);
+  } else {
+    console.log("Canvas NOT found!");
+  }
+}, [theme]);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    
+    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+      setTheme("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      setTheme("light");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    
+    if (newTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    
+    localStorage.setItem("theme", newTheme);
+  };
 
   return (
     <ImagePreloader>
-      <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
-        <div className="flex flex-col min-h-screen">
-          <Navbar />
-          <main className="flex-grow">
-            <Home />
-            <Services />
-            <About />
-            <Contact />
-          </main>
-          <Footer />
+      <div className="relative min-h-screen bg-transparent">
+        <BackgroundCanvas theme={theme} />
+        <div className="relative z-10">
+          <div className="min-h-screen bg-transparent">
+            <div className="flex flex-col min-h-screen">
+              <Navbar toggleTheme={toggleTheme} currentTheme={theme} />
+              <main className="flex-grow">
+                {/* <Home /> */}
+                <Services />
+                <About theme={theme} />
+                <Contact />
+              </main>
+              
+              <Footer />
+            </div>
+          </div>
         </div>
       </div>
     </ImagePreloader>