Added ThemeToggle

Added Footer

src/Components/Nav/Footer.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => (
+  <footer className="bg-gray-800 dark:bg-gray-900 text-white py-8 border-t border-gray-700 dark:border-gray-800">
+    <div className="container mx-auto px-4 text-center">
+      <p className="text-sm opacity-90">
+        © {new Date().getFullYear()} REXNT - جميع الحقوق محفوظة
+      </p>
+    </div>
+  </footer>
+);
+
+export default Footer;

src/Components/Nav/Navbar.jsx

@@ -8,11 +8,39 @@ const Navbar = () => {
   const { t, i18n } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
+   const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Initialize dark mode
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark);
+    
+    setIsDarkMode(shouldEnableDarkMode);
+    if (shouldEnableDarkMode) {
+      document.documentElement.classList.add("dark");
+    }
+  }, []);
 
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
   };
 
+  // Toggle dark/light mode
+  const toggleDarkMode = () => {
+    const newDarkMode = !isDarkMode;
+    setIsDarkMode(newDarkMode);
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  };
+
+
   // Handle scroll to update active section
   useEffect(() => {
     const handleScroll = () => {
@@ -72,6 +100,24 @@ const Navbar = () => {
 
         {/* الجانب الأيمن */}
         <div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
+            <button
+            onClick={toggleDarkMode}
+            type="button"
+            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 ml-2 transition-colors duration-200"
+            aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
+            title={isDarkMode ? "Light Mode" : "Dark Mode"}
+          >
+            {isDarkMode ? (
+              <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+              </svg>
+            )}
+          </button>
+
           {/* Language Switcher */}
           <LanguageSwitcher />