From a57bc465aed6212354df337dfb862c229c87524d Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Sun, 3 Nov 2024 13:56:37 +0530
Subject: [PATCH] Replaced css files with tailwind classes

---
 client/src/Animations.css               |  47 ++++++++
 client/src/Pages/Book.css               |  70 ------------
 client/src/Pages/Book.jsx               |  17 ++-
 client/src/Pages/Cart.css               |   3 -
 client/src/Pages/Cart.jsx               |  58 +++++-----
 client/src/Pages/Contact.css            |  31 ------
 client/src/Pages/Contact.jsx            |   8 +-
 client/src/Pages/Contributors.css       | 141 ------------------------
 client/src/Pages/Contributors.jsx       |  17 +--
 client/src/Pages/Wishlist.css           |  85 --------------
 client/src/Pages/Wishlist.jsx           |   8 +-
 client/src/components/Footer/Footer.css | 116 -------------------
 client/src/components/Footer/Footer.jsx |  46 ++++----
 client/src/components/Preloader.css     |  26 -----
 client/src/components/Preloader.jsx     |   4 +-
 client/src/components/SearchBar.js      |  22 ++--
 client/src/components/Searchbar.css     |  36 ------
 client/tailwind.config.js               |   3 +
 18 files changed, 140 insertions(+), 598 deletions(-)
 delete mode 100644 client/src/Pages/Book.css
 delete mode 100644 client/src/Pages/Contact.css
 delete mode 100644 client/src/Pages/Contributors.css
 delete mode 100644 client/src/Pages/Wishlist.css
 delete mode 100644 client/src/components/Footer/Footer.css
 delete mode 100644 client/src/components/Preloader.css
 delete mode 100644 client/src/components/Searchbar.css

diff --git a/client/src/Animations.css b/client/src/Animations.css
index 83629e1b..98371895 100644
--- a/client/src/Animations.css
+++ b/client/src/Animations.css
@@ -62,3 +62,50 @@
       opacity: 1;
     }
   }
+
+
+ /* contributors animation */
+ .contributor-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px rgba(5, 205, 208, 0.752);
+}
+
+.contributor-card:hover p {
+  text-shadow: 1px 1px 2px rgb(0, 225, 255), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235);
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+}
+
+.contributor-card:hover h2 {
+  text-shadow: 1px 1px 2px rgba(237, 9, 176, 0.926), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235);
+  color: white;
+  font-size: 1.04rem;
+  font-weight: 600;
+  text-decoration: wavy;
+}
+
+.contributor-card:hover .contributor-avatar {
+  border: 3.5px solid #89e6f0;
+  width: 5.2rem;
+  box-shadow: -2px 4px 10px 1px rgba(1, 41, 218, 0.75);
+  height: 5.2rem;
+}
+
+.contributor-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(152deg, #0077b6 50%, #023e8a 50%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transform: translate(-100%, -100%);
+  opacity: 0;
+  z-index: -1;
+}
+
+.contributor-card:hover::before {
+  transform: translate(0, 0);
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/client/src/Pages/Book.css b/client/src/Pages/Book.css
deleted file mode 100644
index e104767b..00000000
--- a/client/src/Pages/Book.css
+++ /dev/null
@@ -1,70 +0,0 @@
-
-  .book-container {
-    display: flex; /* Flexbox layout */
-    max-width: 900px; /* Maximum width of the book container */
-    margin: 20px; /* Margin around the container */
-    padding: 16px; /* Padding inside the container */
-    border: 1px solid #e2e8f0; /* Light gray border */
-    border-radius: 8px; /* Rounded corners */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-    background-color: #fff; /* White background for the container */
-    margin: 5rem auto;
-  }
-  
-  .book-cover {
-    width: 35%; /* Fixed width for the cover */
-    height: auto; /* Auto height to maintain aspect ratio */
-    object-fit: cover; /* Cover the area, maintaining aspect ratio */
-    border-radius: 8px; /* Rounded corners for the image */
-  }
-
-  .book_img{
-    width: 100%;
-  }
-  
-  .book-details {
-    width: 65%;
-    margin-left: 16px; /* Space between the image and details */
-    display: flex; /* Flexbox layout for details */
-    flex-direction: column; /* Vertical alignment */
-    justify-content: center; /* Center vertically */
-  }
-  
-  .book-title {
-    font-size: 24px; /* Title font size */
-    font-weight: bold; /* Bold font */
-    margin: 0; /* Remove default margin */
-  }
-  
-  .book-author {
-    font-size: 20px; /* Author font size */
-    color: #4a5568; /* Dark gray color */
-    margin: 4px 0; /* Margin above and below author */
-  }
-  
-  .book-description {
-    margin: 8px 0; /* Space above and below the description */
-    color: #718096; /* Gray color for the text */
-  }
-  
-  .published-date {
-    margin-top: 16px; /* Space above the published date */
-    font-size: 18px; /* Font size for published date */
-    font-weight: bold; /* Bold font for emphasis */
-  }
-  
-  @media screen and (max-width: 900px){
-    .book-container{
-      flex-direction: column;
-    }
-    .book-cover{
-      margin: 0 auto;
-    }
-
-    .book-details{
-      width: 100%;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-  }
\ No newline at end of file
diff --git a/client/src/Pages/Book.jsx b/client/src/Pages/Book.jsx
index 0a967091..77c571a9 100644
--- a/client/src/Pages/Book.jsx
+++ b/client/src/Pages/Book.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom';
-import "./Book.css"
 
 const Book = () => {
     const { id } = useParams();
@@ -23,19 +22,19 @@ const Book = () => {
 
     
   return (
-    <div className="book-container">
-      <div className='book-cover'>
+    <div className="book-container flex flex-col md:flex-row max-w-[900px] m-5 p-4 border border-[#e2e8f0] rounded-lg bg-white my-20 mx-auto shadow-md">
+      <div className='book-cover w-[35%] h-auto object-cover rounded-lg mx-auto my-0 md:m-0'>
         <img
           src={book?.imageLinks?.smallThumbnail}
           alt="image"y
-          className=" book_img"
+          className=" book_img w-full"
         />
       </div>
-      <div className="book-details">
-        <h1 className="book-title">{book?.title}</h1>
-        <h2 className="book-author">{book?.authors[0]}</h2>
-        <p className="book-description">{book?.description}</p>
-        <div className="published-date">
+      <div className="book-details md:w-[65%] w-full p-8 md:p-0 mx-auto my-0 md:m-0 ml-4 flex flex-col justify-center">
+        <h1 className="book-title m-0 font-bold text-2xl">{book?.title}</h1>
+        <h2 className="book-author text-xl text-[#4a5568] my-0 mx-1">{book?.authors[0]}</h2>
+        <p className="book-description text-[#718096] my-2">{book?.description}</p>
+        <div className="published-date font-bold text-lg mt-4">
           <span>Published: </span>
           <span>{book?.publishedDate}</span>
         </div>
diff --git a/client/src/Pages/Cart.css b/client/src/Pages/Cart.css
index c3468522..b030513d 100644
--- a/client/src/Pages/Cart.css
+++ b/client/src/Pages/Cart.css
@@ -50,9 +50,6 @@
     text-align: left;
   }
   
-  .cart-table th {
-    /* background-color: #f2f2f2; */
-  }
   
   .item-image {
     max-width: 60px;
diff --git a/client/src/Pages/Cart.jsx b/client/src/Pages/Cart.jsx
index 479ae3f3..e9f3158c 100644
--- a/client/src/Pages/Cart.jsx
+++ b/client/src/Pages/Cart.jsx
@@ -5,7 +5,7 @@ import {
   addItemToCart,
   removeItemFromCart,
 } from "../api/api.js";
-import "./Cart.css";
+// import "./Cart.css";
 import Preloader from "../Components/Preloader";
 import { useToast } from "../Context/ToastContext";
 import { useNavigate } from "react-router-dom";
@@ -100,36 +100,36 @@ function Cart() {
   const renderCartItems = () => {
 
     return data.items.map((item) => (
-      <table className="cart-table">
-      <tr key={item.id}>
-        <td>
+      <table className="cart-table w-full border-collapse mt-5">
+      <tr key={item.id} className="mb-[10px] border-b border-[#e0e0e0]">
+        <td className=" border border-[#ddd] p-2 text-left">
           <img
             src={item.image || "https://via.placeholder.com/150"}
             alt={item.name}
-
+            className="rounded-lg block w-[10vw] h-[20vh]"
           />
         </td>
-        <td className="font-semibold">{item.name}</td>
-        <td>${item.price.toFixed(2)}</td>
-        <td>
+        <td className="font-semibold border border-[#ddd] p-2 text-left">{item.name}</td>
+        <td className=" border border-[#ddd] p-2 text-left">${item.price.toFixed(2)}</td>
+        <td className=" border border-[#ddd] p-2 text-left">
           <button
             onClick={() => handleRemoveItem(item.id)}
-            className="quantity-button"
+            className="quantity-button bg-[#007bff] text-white border-none py-[5px] px-[10px] text-sm cursor-pointer ml-[5px] rounded-md"
           >
             -
           </button>
           <span>{item.quantity}</span>
           <button
             onClick={() => handleAddItem(item)}
-            className="quantity-button"
+            className="quantity-button bg-[#007bff] text-white border-none py-[5px] px-[10px] text-sm cursor-pointer ml-[5px] rounded-md"
           >
             +
           </button>
         </td>
-        <td>
+        <td className=" border border-[#ddd] p-2 text-left">
           <button
             onClick={() => handleRemoveItem(item.id)}
-            className="remove-btn"
+            className="remove-btn bg-[#F95454] text-white border-none py-[10px] px-5 text-xs cursor-pointer rounded-md transition-none delay-[400ms] ease-in hover:bg-[#C62E2E] hover:scale-105"
           >
             Remove
           </button>
@@ -140,9 +140,9 @@ function Cart() {
   };
 
   const renderSuggestedProducts = () => (
-    <div className="suggested-products space-y-4">
-      <h2 className="dark:text-white font-semibold font-poppins underline underline-offset-4">Suggested Products</h2>
-      <ul className="flex  gap-5">
+    <div className="suggested-products mt-5 space-y-4">
+      <h2 className="dark:text-white text-xl font-semibold font-poppins underline underline-offset-4">Suggested Products</h2>
+      <ul className="flex list-none p-0 gap-5">
         <div className="dark:text-white border-2  pb-2  rounded-md overflow-hidden h-max shadow-lg w-[10vw]">
           <div className="font-dmsans flex flex-col items-center">
             <div className="p-4">
@@ -209,14 +209,14 @@ function Cart() {
     return (
       <>
         <Preloader />
-        <div className="cart-container dark:bg-[rgb(40,40,40)]">
-          <h1 className="cart-header dark:text-white">Shopping Cart</h1>
+        <div className="cart-container max-w-[800px] my-5 mx-auto p-5 border border-[#ddd] rounded-lg shadow-sm dark:bg-[rgb(40,40,40)]">
+          <h1 className="cart-header text-2xl mb-3 font-bold dark:text-white">Shopping Cart</h1>
           <div className="w-full justify-center items-center flex">
             <img src="/error.png"/>
           </div>
           <p className="font-dmsans text-center text-red-400">{error}</p>
          <div className="w-full  justify-center flex mt-5">
-         <button onClick={handleRetry} className="retry-button dark:text-white">
+         <button onClick={handleRetry} className="retry-button dark:text-white bg-[#002147] text-white border-none p-8 text-base cursor-pointer mt-3 rounded-md text-center border-2 border-[#002147] hover:text-[#002147] hover:bg-[#F4F4F4] hover:font-semibold">
             Retry
           </button>
          </div>
@@ -228,26 +228,26 @@ function Cart() {
   return (
     <>
       <Preloader />
-      <div className="cart-container dark:bg-[rgb(40,40,40)]">
-        <h1 className="cart-header dark:text-white">Shopping Cart</h1>
+      <div className="cart-container max-w-[800px] my-5 mx-auto p-5 border border-[#ddd] rounded-lg shadow-sm dark:bg-[rgb(40,40,40)]">
+        <h1 className="cart-header text-2xl mb-3 font-bold dark:text-white">Shopping Cart</h1>
         {data && data.items && data.items.length > 0 ? (
           <>
-            <table className="cart-table">
+            <table className="cart-table w-full border-collapse mt-5">
               <thead>
                 <tr>
-                  <th>Image</th>
-                  <th>Name</th>
-                  <th>Price</th>
-                  <th>Quantity</th>
-                  <th>Action</th>
+                  <th className="border-none p-4 text-center font-bold bg-[#dde8f9]">Image</th>
+                  <th className="border-none p-4 text-center font-bold bg-[#dde8f9]">Name</th>
+                  <th className="border-none p-4 text-center font-bold bg-[#dde8f9]">Price</th>
+                  <th className="border-none p-4 text-center font-bold bg-[#dde8f9]">Quantity</th>
+                  <th className="border-none p-4 text-center font-bold bg-[#dde8f9]">Action</th>
                 </tr>
               </thead>
               <tbody>{renderCartItems()}</tbody>
             </table>
-            <div className="cart-summary">
-      <div className="cart-total dark:text-white">
+            <div className="cart-summary mt-5 flex justify-between items-center">
+      <div className="cart-total text-lg dark:text-white">
          Total: <span className="font-medium">${data ? data.total.toFixed(2) : "0.00"}</span>       </div>
-       <button className="checkout-button dark:text-white">
+       <button className="checkout-button bg-[#28a745] text-white border-none py-[10px] px-5 text-base cursor-pointer rounded-md transition delay-[400ms] ease-in dark:text-white hover:bg-[#218838] hover:scale-105">
         Proceed to Checkout
       </button>   </div>
           </>
diff --git a/client/src/Pages/Contact.css b/client/src/Pages/Contact.css
deleted file mode 100644
index 2e9c7b2b..00000000
--- a/client/src/Pages/Contact.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.smalltitlefont {
-    color: #10a5f5;
-    font-family: Georgia, Times New Roman, Times, serif;
-    font-size: 1.2rem;
-    font-weight: 470;
-    letter-spacing: 1px;
-}
-
-.formlevel {
-    color: #000;
-    font-family: Georgia, Times New Roman, Times, serif;
-    font-size: 1.2rem;
-    font-weight: 470;
-    letter-spacing: 1px;
-    padding: 2px;
-}
-
-.mediumtitlefont {
-    color: #000;
-    font-size: 1.4rem;
-    font-weight: 600;
-    letter-spacing: 1px;
-}
-
- 
-@media (max-width: 600px) {
-   .formlevel{
-    font-size: 0.6rem;
-   }
-  }
-  
\ No newline at end of file
diff --git a/client/src/Pages/Contact.jsx b/client/src/Pages/Contact.jsx
index 9f592653..3242778d 100644
--- a/client/src/Pages/Contact.jsx
+++ b/client/src/Pages/Contact.jsx
@@ -69,12 +69,12 @@ function Contact() {
               Get in Touch
             </h1>
 
-            <p className="mb-5 text-[#10a5f5] smalltitlefont dark:text-white">
+            <p className="mb-5 text-[#10a5f5] smalltitlefont text-xl font-normal tracking-wide dark:text-white">
               We are here for you. How can we help?
             </p>
             <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
               <div className="flex flex-col">
-                <label htmlFor="name" className="formlevel dark:text-white">
+                <label htmlFor="name" className="formlevel text-black p-1 tracking-wide text-xs md:text-xl font-normal dark:text-white">
                   Name:
                 </label>
                 <input
@@ -89,7 +89,7 @@ function Contact() {
                 />
               </div>
               <div className="flex flex-col">
-                <label htmlFor="email" className="formlevel dark:text-white">
+                <label htmlFor="email" className="formlevel text-black p-1 tracking-wide text-xs md:text-xl font-normal dark:text-white">
                   Email:
                 </label>
                 <input
@@ -104,7 +104,7 @@ function Contact() {
                 />
               </div>
               <div className="flex flex-col">
-                <label htmlFor="message" className="formlevel dark:text-white">
+                <label htmlFor="message" className="formlevel text-black p-1 tracking-wide text-xs md:text-xl font-normal dark:text-white">
                   Message:
                 </label>
                 <textarea
diff --git a/client/src/Pages/Contributors.css b/client/src/Pages/Contributors.css
deleted file mode 100644
index d14d63c0..00000000
--- a/client/src/Pages/Contributors.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.contributors-container {
-    width: 100%;
-    height: 100%; 
-    padding-top: 2rem;
-    overflow: hidden;
-    
-  }
-  
-  .github-icon {
-    margin-right: 0.5rem;
-    vertical-align: middle;
-    fill: white; /* Adjust color as needed */
-  }
-  
-  
-  .contributors-title {
-    margin-top: 0rem;
-    text-align: center;
-    color: #0077b6;
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-bottom: 2rem;
-    text-transform: uppercase;
-  }
-  
-  .contributors-grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 2rem;
-    margin-bottom: 4rem;
-  }
-  
-  .contributor-card {
-    position: relative;
-    width: 100%;
-    max-width: 25%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: rgb(0,0,85);
-    border: 1px solid #6969ff;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    padding: 1rem;
-    overflow: hidden;
-    transition: transform 0.4s ease, box-shadow 0.3s ease;
-  }
-  
-  .contributor-card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 6px rgba(5, 205, 208, 0.752);
-  }
-  
-  .contributor-card:hover p {
-    text-shadow: 1px 1px 2px rgb(0, 225, 255), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235);
-    color: rgb(0, 0, 0);
-    font-weight: 500;
-  }
-  
-  .contributor-card:hover h2 {
-    text-shadow: 1px 1px 2px rgba(237, 9, 176, 0.926), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235);
-    color: white;
-    font-size: 1.04rem;
-    font-weight: 600;
-    text-decoration: wavy;
-  }
-  
-  .contributor-card:hover .contributor-avatar {
-    border: 3.5px solid #89e6f0;
-    width: 5.2rem;
-    box-shadow: -2px 4px 10px 1px rgba(1, 41, 218, 0.75);
-    height: 5.2rem;
-  }
-  
-  .contributor-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(152deg, #0077b6 50%, #023e8a 50%);
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translate(-100%, -100%);
-    opacity: 0;
-    z-index: -1;
-  }
-  
-  .contributor-card:hover::before {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  
-  
-  .contributor-link {
-    display: block;
-  }
-  
-  .contributor-avatar {
-    width: 5rem;
-    height: 5rem;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-bottom: 1rem;
-    border: 2px solid #00b4d8;
-    transition: border 0.4s ease-in-out, height 0.4s ease-in-out, width 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
-  }
-  
-  
-  .contributor-name {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #f3f4f6;
-    margin-bottom: 0.5rem;
-    transition: text-shadow 0.4s ease-in-out, font-size 0.5s ease-in-out, text-decoration 0.4s ease-in-out;
-  }
-  
-  .contributor-contributions {
-    color: #d1d5db;
-    transition: text-shadow 0.4s ease-in-out;
-  }
-  
-  /* Media Queries for Responsiveness */
-  @media (max-width: 1200px) {
-    .contributor-card {
-      max-width: 33.333%; 
-    }
-  }
-  
-  @media (max-width: 992px) {
-    .contributor-card {
-      max-width: 50%; 
-    }
-  }
-  
-  @media (max-width: 768px) {
-    .contributor-card {
-        max-width: 97%;
-    }
-  }
\ No newline at end of file
diff --git a/client/src/Pages/Contributors.jsx b/client/src/Pages/Contributors.jsx
index 170d3232..c8646973 100644
--- a/client/src/Pages/Contributors.jsx
+++ b/client/src/Pages/Contributors.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import './Contributors.css';
+import '../Animations.css'
 import Preloader from '../Components/Preloader';
 
 function Contributors() {
@@ -55,26 +56,26 @@ function Contributors() {
   }
 
   return (
-    <div className="contributors-container">
-      <h1 className="contributors-title">Our Contributors</h1>
-      <div className="contributors-grid">
+    <div className="contributors-container w-full h-full pt-8 overflow-hidden">
+      <h1 className="contributors-title mt-0 text-center text-[#0077b6] text-4xl font-bold mb-8 uppercase">Our Contributors</h1>
+      <div className="contributors-grid flex flex-wrap justify-center gap-8 mb-16">
         {contributors.length > 0 ? (
           contributors.map((contributor) => (
-            <div key={contributor.id} className="contributor-card">
+            <div key={contributor.id} className="contributor-card relative w-full max-w-[97%] md:max-w-[50%] lg:max-w-[400px] flex flex-col items-center bg-[#000055] border border-[#6969ff] rounded-lg shadow-md p-4 overflow-hidden transition-all duration-[400ms] ease-in-out hover:scale-105 hover:shadow-custom ">
               <a
                 href={contributor.html_url}
-                className="contributor-link"
+                className="contributor-link block"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <img
                   src={contributor.avatar_url}
                   alt={contributor.login}
-                  className="contributor-avatar"
+                  className="contributor-avatar w-20 h-20 rounded-[50%] object-cover mb-4 border-2 border-[#00b4d8] transition delay-[400ms] ease-in-out"
                 />
               </a>
-              <h2 className="contributor-name">{contributor.login}</h2>
-              <p className="contributor-contributions">
+              <h2 className="contributor-name transition ease-in-out duration-[400ms] text-base font-semibold text-[#f3f4f6] mb-2">{contributor.login}</h2>
+              <p className="contributor-contributions transition-shadow delay-[400ms] ease-in-out text-[#d1d5db]">
                 Contributions: {contributor.contributions}
               </p>
             </div>
diff --git a/client/src/Pages/Wishlist.css b/client/src/Pages/Wishlist.css
deleted file mode 100644
index 9188e1e6..00000000
--- a/client/src/Pages/Wishlist.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/* Wishlist Container */
-.wishlist-container {
-    margin: 20px;
-    padding: 20px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Wishlist Heading */
-.wishlist-container h2 {
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    color: #333;
-    margin-bottom: 20px;
-}
-
-.wishlist-container h2 svg {
-    margin-right: 10px;
-}
-
-/* Loading Spinner */
-.spinner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 18px;
-    color: #777;
-    height: 200px; /* Adjust as needed */
-}
-
-/* Error Message */
-.error-message {
-    color: #ff6347;
-    font-size: 18px;
-    text-align: center;
-    margin-top: 20px;
-}
-
-/* Wishlist Table */
-.wishlist-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-
-/* Table Headers */
-.wishlist-table th {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    padding: 12px;
-    text-align: left;
-}
-
-/* Table Rows */
-.wishlist-table td {
-    border: 1px solid #ddd;
-    padding: 12px;
-}
-
-/* Wishlist Item Actions */
-.wishlist-action {
-    margin-right: 10px;
-    padding: 8px 12px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.wishlist-action:hover {
-    background-color: #0056b3;
-}
-
-/* Responsive Styles (Optional) */
-@media (max-width: 768px) {
-    .wishlist-table th, .wishlist-table td {
-        padding: 8px;
-        font-size: 14px;
-    }
-}
diff --git a/client/src/Pages/Wishlist.jsx b/client/src/Pages/Wishlist.jsx
index 7f46c299..759fd2d9 100644
--- a/client/src/Pages/Wishlist.jsx
+++ b/client/src/Pages/Wishlist.jsx
@@ -5,7 +5,7 @@ import {
   FaTrash, 
   FaTable, 
 } from "react-icons/fa";
-import "./Wishlist.css"; // Import CSS file for wishlist component styling
+//import "./Wishlist.css"; // Import CSS file for wishlist component styling
 import Preloader from "../Components/Preloader";
 import { useAuth } from "../Context/AuthContext";
 import { useToast } from "../Context/ToastContext";
@@ -89,15 +89,15 @@ function Wishlist() {
 
   if (error) {
     return <div className="h-[60vh] md:h-[80vh]">
-      <div className="error-message">{error}</div>
+      <div className="error-message text-[#ff6347] text-lg text-center mt-5">{error}</div>
     </div>;
   }
 
   return (
     <>
     <Preloader/>
-    <div className="wishlist-container">
-      <h2 className="dark:text-white">
+    <div className="wishlist-container m-5 p-5 border border-[#ccc] rounded-md shadow-md">
+      <h2 className="dark:text-white flex items-center text-2xl text-[#333] mb-5">
         <FaTable /> Your Wishlist
       </h2>
       {wishlistItems.length === 0 ? (
diff --git a/client/src/components/Footer/Footer.css b/client/src/components/Footer/Footer.css
deleted file mode 100644
index c07b835a..00000000
--- a/client/src/components/Footer/Footer.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.py-8 {
-    padding-top: 3rem;
-    padding-bottom: 1.3rem;
-}
-
-/* Footer section styles */
-.footer-section {
-    margin: 0; /* Remove space between sections */
-    padding: 0; /* Remove padding if needed */
-}
-
-/* Footer list styles */
-.footer-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-/* Social icons list styles */
-.footer-list.flex {
-    display: flex;
-    gap: 24px; /* Increase this value for more space between icons */
-}
-
-.footer-list.flex li {
-    margin: 0; /* Ensure there's no margin on list items */
-}
-
-/* Optionally, you can also adjust individual icon size if needed */
-.footer-list li a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 7px;
-}
-
-/* Copyright section styles */
-.copyright-section {
-    color: #ffffff; /* Text color for copyright */
-    font-size: 0.875rem; /* Smaller text size */
-}
-
-/* Footer links styles */
-.footer-list li a {
-    transition: transform 0.3s ease; /* Smooth transition for transform */
-}
-
-.footer-list li a:hover {
-    transform: scale(1.1); /* Scale up by 10% on hover */
-}
-
-/* Social icons list styles */
-.footer-list.flex {
-    display: flex;
-    gap: 24px; /* Increase this value for more space between icons */
-}
-
-.footer-list.flex li {
-    margin: 0; /* Ensure there's no margin on list items */
-}
-
-/* Optionally, you can also adjust individual icon size if needed */
-.footer-list li a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Copyright section styles */
-.copyright-section {
-    color: #ffffff; /* Text color for copyright */
-    font-size: 0.875rem; /* Smaller text size */
-}
-
-/* newsletter */
-.newsletter-form {
-    margin-top: 20px;
-}
-
-.newsletter-form h2 {
-    font-size: 1.2rem;
-    margin-bottom: 10px; 
-    margin-top: 24px;
-    text-align: center; 
-}
-
-.newsletter-input {
-    padding: 10px;
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-    width: 100%;
-    color: black;
-}
-
-.newsletter-button {
-    padding: 6px 10px;
-    background-color:  #003366;
-    border: none;
-    color: white;
-    border-radius: 4px;
-    cursor: pointer;
-    border: 1px solid white;
-    margin-top: 10px;
-    margin-left: 35%;
-}
-
-.newsletter-button:hover {
-    background-color: #044d95; 
-}
-
-.newsletter-message {
-    font-weight: 600;
-    color: #ffff00; /* Yellow color for the message */
-    margin-top: 10px; /* Space above the message */
-    text-align: center; /* Center-align the message */
-}
diff --git a/client/src/components/Footer/Footer.jsx b/client/src/components/Footer/Footer.jsx
index 422d87f8..2bc23675 100644
--- a/client/src/components/Footer/Footer.jsx
+++ b/client/src/components/Footer/Footer.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { GitHub, LinkedIn, Instagram } from "@mui/icons-material";
 import XIcon from "@mui/icons-material/X";
-import "./Footer.css";
+
 import GoogleTranslate from "../GoogleTranslate";
 function Footer({ darkMode }) {
   const [email, setEmail] = useState("");
@@ -22,9 +22,9 @@ function Footer({ darkMode }) {
   return (
     <footer style={footerStyle} className="py-8">
       <div className="container mx-auto flex flex-wrap justify-between max-w-[90%]">
-        <div className="footer-section">
+        <div className="footer-section m-0 p-0">
           <h2 className="text-lg font-bold mb-4">ABOUT</h2>
-          <ul className="footer-list">
+          <ul className="footer-list m-0 p-0 list-none">
             <li>
               <Link to="/contactus" className="hover:text-yellow-300 text-lg">
                 Contact us
@@ -55,9 +55,9 @@ function Footer({ darkMode }) {
             </li>
           </ul>
         </div>
-        <div className="footer-section">
+        <div className="footer-section m-0 p-0">
           <h2 className="text-lg font-bold mb-4">HELP</h2>
-          <ul className="footer-list">
+          <ul className="footer-list m-0 p-0 list-none">
             <li>
               <Link to="/" className="hover:text-yellow-300 text-lg">
                 Payments
@@ -80,9 +80,9 @@ function Footer({ darkMode }) {
             </li>
           </ul>
         </div>
-        <div className="footer-section">
+        <div className="footer-section m-0 p-0">
           <h2 className="text-lg font-bold mb-4">Legal</h2>
-          <ul className="footer-list">
+          <ul className="footer-list m-0 p-0 list-none">
             <li>
               <Link to="/privacy" className="hover:text-yellow-300 text-lg">
                 Privacy Policy
@@ -100,37 +100,37 @@ function Footer({ darkMode }) {
             </li>
           </ul>
         </div>
-        <div className="footer-section">
+        <div className="footer-section m-0 p-0">
           <h2 className="text-lg font-bold mb-4 text-center">SOCIALS</h2>
-          <ul className="footer-list flex">
-            <li>
+          <ul className="footer-list m-0 p-0 list-none flex gap-6">
+            <li className="m-0">
               <a
                 href="https://www.linkedin.com/in/trisha-sahu-171623193/"
-                className="hover:text-[#0077b5] hover:bg-white transition duration-200"
+                className="hover:text-[#0077b5] hover:bg-white transition duration-200 inline-flex items-center justify-center mb-2 hover:scale-110"
               >
                 <LinkedIn sx={{ fontSize: "2rem" }} />
               </a>
             </li>
-            <li>
+            <li className="m-0">
               <a
                 href="https://github.com/Trisha-tech/OnlineBookSales"
-                className="hover:text-[#333] hover:bg-white transition duration-200"
+                className="hover:text-[#333] hover:bg-white transition duration-200 inline-flex items-center justify-center mb-2 hover:scale-110"
               >
                 <GitHub sx={{ fontSize: "2rem" }} />
               </a>
             </li>
-            <li>
+            <li className="m-0">
               <a
                 href="/"
-                className="hover:text-black hover:bg-white transition duration-200"
+                className="hover:text-black hover:bg-white transition duration-200 inline-flex items-center justify-center mb-2 hover:scale-110"
               >
                 <XIcon sx={{ fontSize: "2rem" }} />
               </a>
             </li>
-            <li>
+            <li className="m-0">
               <a
                 href="/"
-                className="hover:text-[#E4405F] hover:bg-white transition duration-200"
+                className="hover:text-[#E4405F] hover:bg-white transition duration-200 inline-flex items-center justify-center mb-2 hover:scale-110"
               >
                 <Instagram sx={{ fontSize: "2rem" }} />
               </a>
@@ -160,25 +160,25 @@ function Footer({ darkMode }) {
             <GoogleTranslate />
           </div>
         </div>
-        <div className="footer-section">
+        <div className="footer-section m-0 p-0">
           <h2 className="text-lg font-bold mb-4 text-center">NEWSLETTER</h2>
-          <form className="newsletter-form" onSubmit={handleSubscribe}>
+          <form className="newsletter-form mt-5" onSubmit={handleSubscribe}>
             <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Your email address"
-              className="newsletter-input"
+              className="newsletter-input p-2 border border-[#ced4da] w-full rounded-md text-black"
               required
             />
-            <button type="submit" className="newsletter-button">
+            <button type="submit" className="newsletter-button px-[6px] py-[12px] bg-[#003366] border-none text-white rounded cursor-pointer border border-white mt-3 ml-[35%] hover:bg-[#044d95]">
               Subscribe
             </button>
           </form>
-          {message && <p className="newsletter-message">{message}</p>}
+          {message && <p className="newsletter-message font-bold text-center mt-3 text-[#ffff00]">{message}</p>}
         </div>
       </div>
-      <div className="copyright-section text-center mt-8">
+      <div className="copyright-section text-white text-sm text-center mt-8">
         <p>
           &copy; {new Date().getFullYear()} Online Book Sales - Books4U. All
           rights reserved.
diff --git a/client/src/components/Preloader.css b/client/src/components/Preloader.css
deleted file mode 100644
index f6025ace..00000000
--- a/client/src/components/Preloader.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.preloader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #286ac5; 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 99999; 
-  transition: opacity 0.5s ease-out; }
-
-.preloader-video {
-  position: absolute; 
-  top: 50%;
-  left: 50%;
-  width: 95vw; 
-  height: 45vh; 
-  object-fit: cover; 
-  transform: translate(-50%, -50%); 
-}
-
-.preloader.fade-out {
-  opacity: 0;
-}
diff --git a/client/src/components/Preloader.jsx b/client/src/components/Preloader.jsx
index f26a351c..aa89a178 100644
--- a/client/src/components/Preloader.jsx
+++ b/client/src/components/Preloader.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import './Preloader.css'; 
+// import './Preloader.css'; 
 
 const Preloader = () => {
   const [isVisible, setIsVisible] = useState(true);
@@ -16,7 +16,7 @@ const Preloader = () => {
 
   return (
     isVisible && (
-      <div className={`preloader ${fadeOut ? 'fade-out' : ''}`}>
+      <div className={`preloader fixed top-0 left-0 w-full h-full bg-[#286ac5] flex justify-center items-center z-[9999] transition-opacity ease-out duration-500 ${fadeOut ? 'fade-out opacity-0' : ''}`}>
         <video autoPlay muted loop className="preloader-video">
           <source src="/preload.mp4" type="video/mp4" />
           Your browser does not support the video tag.
diff --git a/client/src/components/SearchBar.js b/client/src/components/SearchBar.js
index a153ab57..e48206e0 100644
--- a/client/src/components/SearchBar.js
+++ b/client/src/components/SearchBar.js
@@ -46,7 +46,7 @@ const SearchBar = () => {
   
 
   return (
-    <div style={{ width: "300px", margin: "0 auto", textAlign: "center" }}>
+    <div className="w-[300px] my-0 mx-auto text-center">
       <input
         type="text"
         value={query}
@@ -61,16 +61,16 @@ const SearchBar = () => {
         }}
       />
       {showSuggestions && filteredData.length > 0 && (
-        <ul
-          style={{
-            listStyleType: "none",
-            padding: 0,
-            border: "1px solid #ccc",
-            borderRadius: "5px",
-            marginTop: "5px",
-            maxHeight: "150px",
-            overflowY: "auto",
-          }}
+        <ul className="list-none p-0 border border-[#ccc] rounded mt-3 max-h-[150px] overflow-y-auto"
+          // style={{
+          //   listStyleType: "none",
+          //   padding: 0,
+          //   border: "1px solid #ccc",
+          //   borderRadius: "5px",
+          //   marginTop: "5px",
+          //   maxHeight: "150px",
+          //   overflowY: "auto",
+          // }}
         >
        {filteredData.map((suggestion, index) => (
   <li
diff --git a/client/src/components/Searchbar.css b/client/src/components/Searchbar.css
deleted file mode 100644
index d02a6314..00000000
--- a/client/src/components/Searchbar.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.search-bar-container {
-  width: 100%;
-  padding: 10px;
-  margin: 20px auto;
-}
-
-.search-input {
-  width: 100%;
-  padding: 10px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  font-size: 16px;
-  color: #333;
-}
-
-.suggestions-list {
-  list-style-type: none;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  margin-top: 5px;
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.suggestion-item {
-  padding: 10px;
-  cursor: pointer;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #ccc;
-  transition: background-color 0.3s ease;
-}
-
-.suggestion-item:hover {
-  background-color: #f0f0f0;
-}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index d1175920..c99f7d4a 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -15,6 +15,9 @@ module.exports = {
           green:'#45B36B',
 
         },
+        boxShadow: {
+          custom: '0 4px 6px rgba(5, 205, 208, 0.752)',
+        },
         secondary:{
           DEFAULT:'#3772FF',
           pink: '#E4D7CF',