Feat: Added dark mode to home page.

package.json

@@ -12,8 +12,12 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.17",
+    "@react-icons/all-files": "^4.1.0",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^3.4.0",
     "axios": "^1.6.7",

src/App.jsx

@@ -12,7 +12,7 @@ import Login from "./Pages/Login";
 import Product from "./Pages/Product";
 import Shop from "./Pages/Shop";
 import ShopCategory from "./Pages/ShopCategory";
-import Saved from "./Pages/WishList"
+import Saved from "./Pages/WishList";
 import About from "./Pages/About";
 import CheckNow from "./Components/CheckNow";
 import "./index.css";
@@ -23,33 +23,28 @@ const App = () => {
   return (
     <Router>
       <Navbar />
-      <Routes>
-        <Route path="/login" element={<LoginWithFooter />} />
-        <Route path="/signup" element={<SignupWithFooter />} />
-        <Route path="/" element={<Shop />} />
-        <Route path="/women" element={<ShopCategoryWithFooter banner={women_banner} category="women" />} />
-        <Route path="/mens" element={<ShopCategoryWithFooter banner={men_banner} category="men" />} />
-        <Route path="/kids" element={<ShopCategoryWithFooter banner={kids_banner} category="kid" />} />
-        <Route path="/product/:productId" element={<ProductWithFooter />} />
-        <Route path="/cart" element={<CartWithFooter />} />
-        <Route path="/wishlist" element={<WishlistWithFooter />} />
-        <Route path="/about" element={<About/>} />
-
-        <Route path="/checknow" element={<CheckNowWithFooter />} />
-
-
-
-        <Route path="*" element={<NotFound/>} />
-        <Route path="/user/paymentsuccess" element={<PaymentSuccess/>} />
-        <Route path="/user/paymentfail" element={<PaymentFail/>} />
-
-      </Routes>
+      <div className="bg-white text-black dark:bg-black dark:text-white min-h-screen">
+        <Routes>
+          <Route path="/login" element={<LoginWithFooter />} />
+          <Route path="/signup" element={<SignupWithFooter />} />
+          <Route path="/" element={<Shop />} />
+          <Route path="/women" element={<ShopCategoryWithFooter banner={women_banner} category="women" />} />
+          <Route path="/mens" element={<ShopCategoryWithFooter banner={men_banner} category="men" />} />
+          <Route path="/kids" element={<ShopCategoryWithFooter banner={kids_banner} category="kid" />} />
+          <Route path="/product/:productId" element={<ProductWithFooter />} />
+          <Route path="/cart" element={<CartWithFooter />} />
+          <Route path="/wishlist" element={<WishlistWithFooter />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/checknow" element={<CheckNowWithFooter />} />
+          <Route path="*" element={<NotFound />} />
+          <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
+          <Route path="/user/paymentfail" element={<PaymentFail />} />
+        </Routes>
+      </div>
     </Router>
   );
 };
 
-
-
 const LoginWithFooter = () => (
   <>
     <Login />
@@ -85,13 +80,11 @@ const ShopCategoryWithFooter = ({ banner, category }) => (
   </>
 );
 
-const WishlistWithFooter=()=>(
-
+const WishlistWithFooter = () => (
   <>
     <Saved />
     <Footer />
   </>
-
 );
 
 const CheckNowWithFooter = () => (

src/Components/DarkModeToggle.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+import { HiOutlineMoon, HiOutlineSun } from "react-icons/hi";
+
+const DarkModeToggle = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem('dark-mode');
+    return savedMode !== null ? JSON.parse(savedMode) : false;
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (darkMode) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('dark-mode', JSON.stringify(darkMode));
+  }, [darkMode]);
+
+  return (
+    <button
+      onClick={() => setDarkMode(!darkMode)}
+      className="py-2 px-4 text-gray-800 dark:text-gray-200 rounded-full transition-all duration-300 ease-in-out"
+    >
+      {darkMode ? (
+        <HiOutlineSun className="h-5 w-5 mr-1" />
+      ) : (
+        <HiOutlineMoon className="h-5 w-5 mr-1" />
+      )}
+    </button>
+  );
+};
+
+export default DarkModeToggle;