(#0)

README.md

@@ -222,3 +222,4 @@ If you have any questions or feedback, feel free to reach out via **GitHub**. Yo
 We look forward to hearing from you! ✨
 
 💙 Thank You !!! 💙
+# TODO: 

client/public/index.html

@@ -102,6 +102,8 @@
       document.addEventListener("DOMContentLoaded", function () {
         const coords = { x: 0, y: 0 };
         const circles = document.querySelectorAll(".circle");
+        const container = document.querySelector(".circle-container");
+        let hidden = false;
 
         circles.forEach(function (circle) {
           circle.x = 0;
@@ -110,7 +112,21 @@
 
         window.addEventListener("mousemove", function (e) {
           coords.x = e.pageX;
-          coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+          coords.y = e.pageY - window.scrollY;
+        });
+
+        document.addEventListener("mouseleave", function () {
+          hidden = true;
+          circles.forEach(function (circle) {
+            circle.style.opacity = "0";
+          });
+        });
+
+        document.addEventListener("mouseenter", function () {
+          hidden = false;
+          circles.forEach(function (circle) {
+            circle.style.opacity = "1";
+          });
         });
 
         function animateCircles() {
@@ -137,4 +153,11 @@
       });
 
     </script>
+    <script>
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", function () {
+          navigator.serviceWorker.register("/service-worker.js");
+        });
+      }
+    </script>
   </body>

client/public/manifest.json

@@ -1,6 +1,7 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "BookSales",
+  "name": "Online Book Sales - Your Digital Bookstore",
+  "description": "Browse, discover, and purchase books online. Your one-stop digital bookstore.",
   "icons": [
     {
       "src": "favicon.ico",
@@ -15,11 +16,15 @@
     {
       "src": "logo512.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "512x512",
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "orientation": "portrait-primary",
+  "theme_color": "#002147",
+  "background_color": "#ffffff",
+  "categories": ["books", "education", "shopping"],
+  "lang": "en-US"
 }

client/public/service-worker.js

@@ -0,0 +1,65 @@
+const CACHE_NAME = "online-book-sales-v1";
+
+const PRECACHE_URLS = [
+  "/",
+  "/index.html",
+  "/manifest.json",
+  "/logo192.png",
+  "/logo512.png",
+  "/favicon.ico",
+  "/styles.css",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(PRECACHE_URLS);
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => caches.delete(name))
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method !== "GET") return;
+
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(event.request)
+        .then((response) => {
+          if (!response || response.status !== 200 || response.type !== "basic") {
+            return response;
+          }
+
+          const responseToCache = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+
+          return response;
+        })
+        .catch(() => {
+          if (event.request.mode === "navigate") {
+            return caches.match("/index.html");
+          }
+          return new Response("Offline", { status: 503 });
+        });
+    })
+  );
+});

client/src/Pages/Faq.jsx

@@ -105,7 +105,7 @@ const FAQ = () => {
       </div>
     </button>
     {openIndex === index && (
-      <p className="p-4 text-base text-gray-900 dark:text-gray-50">{faq.answer}</p>
+      <p className="p-4 text-base text-gray-900 dark:text-gray-100 font-sans leading-relaxed">{faq.answer}</p>
     )}
   </div>
 ))}

client/src/Pages/Home.jsx

@@ -148,49 +148,49 @@ const Home = () => {
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 
                 <Link to="/romance">
-                  <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900">
+                  <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900 hover:shadow-xl hover:shadow-pink-300/50 dark:hover:shadow-pink-900/50">
                     <h3 className="text-xl font-bold mb-2 dark:text-white">Romance</h3>
                     <p className="text-gray-700 dark:text-gray-300">Explore our collection of romantic novels.</p>
                   </div>
                 </Link>
 
                 <Link to="/action">
-                  <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800">
+                  <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800 hover:shadow-xl hover:shadow-blue-300/50 dark:hover:shadow-blue-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Action</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Dive into thrilling action-packed stories.</p>
                   </div>
                 </Link>
 
                 <Link to="/thriller">
-                  <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black">
+                  <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black hover:shadow-xl hover:shadow-gray-400/50 dark:hover:shadow-gray-800/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Thriller</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Get your adrenaline pumping with our thrillers.</p>
                   </div>
                 </Link>
 
                 <Link to="/fiction">
-                  <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800">
+                  <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800 hover:shadow-xl hover:shadow-green-300/50 dark:hover:shadow-green-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Fiction</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Discover imaginative and captivating fiction.</p>
                   </div>
                 </Link>
 
                 <Link to="/tech">
-                  <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800">
+                  <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800 hover:shadow-xl hover:shadow-yellow-300/50 dark:hover:shadow-yellow-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Tech</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Stay updated with the latest in technology.</p>
                   </div>
                 </Link>
 
                 <Link to="/philosophy">
-                  <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800">
+                  <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800 hover:shadow-xl hover:shadow-purple-300/50 dark:hover:shadow-purple-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Philosophy</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Dive deep into philosophical thoughts and ideas.</p>
                   </div>
                 </Link>
 
                 <Link to="/manga">
-                  <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800">
+                  <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800 hover:shadow-xl hover:shadow-pink-300/50 dark:hover:shadow-pink-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Manga</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Explore our extensive collection of Manga.</p>
                   </div>

client/src/Pages/LoginPage.jsx

@@ -178,7 +178,7 @@ const LoginPage = () => {
                     mt: 2,
                     "&:hover": { backgroundColor: "#0069d9" },
                   }}
-                  className="w-full text-white my-2 mt-5 font-semibold bg-[#060606] rounded-md p-4 text-center flex items-center justify-center dark:bg-white dark:text-black"
+                  className="w-full text-white my-2 mt-5 font-semibold bg-[#060606] rounded-md p-4 text-center flex items-center justify-center dark:bg-white dark:text-black transition-all duration-300 hover:scale-[1.02] hover:shadow-lg active:scale-95"
                 >
                   Login
                 </button>

client/src/components/Card/ProductCard.css

@@ -1,3 +1,115 @@
+.card-basic {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  width: 100%;
+  max-width: 280px;
+}
+
+.card-basic:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
+}
+
+.card-basic img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+  display: block;
+}
+
+.card-item-details {
+  padding: 14px 16px 16px;
+}
+
+.item-title h4 {
+  margin: 0 0 4px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #222;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.item-author {
+  margin: 0 0 8px;
+  font-size: 0.85rem;
+  color: #777;
+  font-weight: 400;
+}
+
+.card-basic p {
+  margin: 0 0 10px;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.card-basic del {
+  color: #999;
+}
+
+.discount-on-card {
+  color: #e53935;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.card-button {
+  margin-top: 6px;
+}
+
+.card-icon-btn {
+  background: none;
+  border: 1px solid #ddd;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.card-icon-btn:hover {
+  background: #fce4ec;
+  border-color: #e91e63;
+}
+
+.badge-on-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: #e53935;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 4px;
+}
+
+.card-text-overlay-container {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+.card-text-overlay-container p {
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
 .fa-heart
 {
     overflow: hidden;
@@ -17,4 +129,4 @@
 .added-to-wishlist-btn:hover
 {
     background-color: var(--grey);
-}
+}