├── src
    ├── App.css
    ├── assets
    │   ├── banner.jpg
    │   ├── logo.png
    │   ├── favicon.png
    │   ├── pistal.png1
    │   ├── category img
    │   │   ├── mensshoes.jpg
    │   │   ├── mensclothing.jpg
    │   │   └── mensaccessories.jpg
    │   └── Productimages
    │   │   ├── casualshoe.jpg
    │   │   ├── formalshoe.jpg
    │   │   ├── menssandal.jpg
    │   │   ├── tshirts
    │   │       ├── redtshirt.png
    │   │       ├── blacktshirt.jpg
    │   │       └── whitetshirt.png
    │   │   └── accessories
    │   │       ├── bluewatch.jpg
    │   │       ├── redwatch.jpg
    │   │       └── leatherbelt.jpg
    ├── index.css
    ├── Pages
    │   ├── Home.jsx
    │   ├── Products.jsx
    │   ├── Login.jsx
    │   ├── Cart.jsx
    │   └── Signup.jsx
    ├── main.jsx
    ├── App.jsx
    ├── Components
    │   ├── BannerFooter.jsx
    │   ├── Navbar.jsx
    │   ├── Banner.jsx
    │   ├── Categories.jsx
    │   ├── Footer.jsx
    │   └── Item.jsx
    └── Context
    │   ├── CartContext.jsx
    │   └── Productdata.js
├── README.md
├── .gitattributes
├── postcss.config.js
├── vite.config.js
├── .gitignore
├── .eslintrc.cjs
├── tailwind.config.js
├── index.html
├── package.json
└── public
    └── vite.svg


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Project
2 |  React Project Ecommerce Store
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/src/assets/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/banner.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/favicon.png


--------------------------------------------------------------------------------
/src/assets/pistal.png1:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/pistal.png1


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/category img/mensshoes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/category img/mensshoes.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/casualshoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/casualshoe.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/formalshoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/formalshoe.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/menssandal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/menssandal.jpg


--------------------------------------------------------------------------------
/src/assets/category img/mensclothing.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/category img/mensclothing.jpg


--------------------------------------------------------------------------------
/src/assets/category img/mensaccessories.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/category img/mensaccessories.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/tshirts/redtshirt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/tshirts/redtshirt.png


--------------------------------------------------------------------------------
/src/assets/Productimages/tshirts/blacktshirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/tshirts/blacktshirt.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/tshirts/whitetshirt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/tshirts/whitetshirt.png


--------------------------------------------------------------------------------
/src/assets/Productimages/accessories/bluewatch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/accessories/bluewatch.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/accessories/redwatch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/accessories/redwatch.jpg


--------------------------------------------------------------------------------
/src/assets/Productimages/accessories/leatherbelt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syproo/React-Project/HEAD/src/assets/Productimages/accessories/leatherbelt.jpg


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap');
2 | 
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/Pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import { Banner } from "../Components/Banner";
 2 | import { BannerFooter } from "../Components/BannerFooter";
 3 | import { Footer } from "../Components/Footer";
 4 | import { Categories } from "../Components/Categories";
 5 | 
 6 | 
 7 | export const Home = () => {
 8 |   return (
 9 |     <>
10 |         
11 |       <Banner />
12 |       <BannerFooter />
13 |       <Categories />
14 |       <Footer />
15 |     </>
16 |   );
17 | };
18 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:react/recommended',
 6 |     'plugin:react/jsx-runtime',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 |   settings: { react: { version: '18.2' } },
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': 'warn',
14 |   },
15 | }
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |     "./node_modules/tw-elements/dist/js/**/*.js"
 7 |   ],
 8 |   theme: {
 9 |     extend: {},
10 |     
11 |       
12 |     
13 |     fontFamily:{
14 |         font:["Poppins", "sans-serif"]
15 |     }
16 |   },
17 |   // eslint-disable-next-line no-undef
18 |   plugins: [require("tw-elements/dist/plugin.cjs")],
19 | }
20 | 
21 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | import { CartProvider } from "./Context/CartContext.jsx";
 6 | import { BrowserRouter } from "react-router-dom";
 7 | 
 8 | ReactDOM.createRoot(document.getElementById("root")).render(
 9 |   <React.StrictMode>
10 |     <BrowserRouter>
11 |       <CartProvider>
12 |         <App />
13 |       </CartProvider>
14 |     </BrowserRouter>
15 |   </React.StrictMode>
16 | );
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image" href="./src/assets/favicon.png" />
 7 |   <link
 8 |   href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
 9 |   rel="stylesheet" />
10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11 |   <title>Mercari:Your Marketplace</title>
12 | </head>
13 | 
14 | <body>
15 |   <div id="root"></div>
16 |   <script type="module" src="/src/main.jsx"></script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/src/Pages/Products.jsx:
--------------------------------------------------------------------------------
 1 | import { Item } from "../Components/Item";
 2 | import productData from "../Context/Productdata";
 3 | import { useCart } from "../Context/CartContext";
 4 | import { Footer } from "../Components/Footer";
 5 | 
 6 | export const Products = () => {
 7 |   const { products } = productData;
 8 |   const { addToCart } = useCart();
 9 | 
10 |   return (
11 |     <>
12 |       <div className="relative top-18 pt-16">
13 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 p-8 justify-items-center items-center content-center bg-[#fff324]">
14 |           {products.map((product) => (
15 |             <Item
16 |               key={product.id}
17 |               data={product}
18 |               addToCart={() => addToCart(product)}
19 |             />
20 |           ))}
21 |         </div>
22 |       </div>
23 | 
24 |       <Footer />
25 |     </>
26 |   );
27 | };
28 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import { Cart } from "./Pages/Cart";
 3 | import { Home } from "./Pages/Home";
 4 | import { Login } from "./Pages/Login";
 5 | import { Products } from "./Pages/Products";
 6 | import { Signup } from "./Pages/Signup";
 7 | import { Routes, Route } from "react-router-dom";
 8 | import { Navbar } from "./Components/Navbar";
 9 | import { useCart } from "./Context/CartContext";
10 | 
11 | function App() {
12 |   const { cartItemCount } = useCart();
13 | 
14 |   return (
15 |     <>
16 |       <Navbar cartItemCount={cartItemCount()} />
17 |       <Routes>
18 |         <Route path="/" element={<Home />} />
19 |         <Route path="/Signup" element={<Signup />} />
20 |         <Route path="/Login" element={<Login />} />
21 |         <Route path="/Products" element={<Products />} />
22 |         <Route path="/Cart" element={<Cart />} />
23 |       </Routes>
24 |     </>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-project",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0",
15 |     "react-icons": "^4.10.1",
16 |     "react-router-dom": "^6.14.1",
17 |     "tw-elements": "^1.0.0-beta2"
18 |   },
19 |   "devDependencies": {
20 |     "@types/react": "^18.0.37",
21 |     "@types/react-dom": "^18.0.11",
22 |     "@vitejs/plugin-react": "^4.0.0",
23 |     "autoprefixer": "^10.4.14",
24 |     "eslint": "^8.38.0",
25 |     "eslint-plugin-react": "^7.32.2",
26 |     "eslint-plugin-react-hooks": "^4.6.0",
27 |     "eslint-plugin-react-refresh": "^0.3.4",
28 |     "postcss": "^8.4.25",
29 |     "tailwindcss": "^3.3.2",
30 |     "vite": "^4.3.9"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/Components/BannerFooter.jsx:
--------------------------------------------------------------------------------
 1 | export const BannerFooter = () => {
 2 |   return (
 3 |     <div className="w-[100%] h-auto relative top-16 bg-[#fff324] p-10 font-font">
 4 |       <div className="  flex md:flex-row flex-col text-center justify-around cursor-pointer ">
 5 |         <div className="border-transparent shadow-md rounded-md p-4 shadow-gray-700 bg-gray-800 hover:animate-bounce">
 6 |           <h1 className="text-lg font-bold text-white">Buy & sell almost anything</h1>
 7 |           <h3 className="text-md text-[#fff324]">
 8 |             Shop and sell new, like-new, and preowned items.
 9 |           </h3>
10 |           <h2 className="text-lg font-bold underline text-white">SIGN UP</h2>
11 |         </div>
12 |         <div className="border-transparent shadow-md rounded-md p-4 shadow-gray-700 bg-gray-800 hover:animate-bounce">
13 |           <h1 className="text-lg font-bold text-white">Goodbye clutter</h1>
14 |           <h3 className="text-md text-[#fff324]">
15 |             Earn extra cash by selling unwanted gifts and items.
16 |           </h3>
17 |           <h2 className="text-lg font-bold underline text-white">LIST AN ITEM</h2>
18 |         </div>
19 |         <div className="border-transparent shadow-md rounded-md p-4 shadow-gray-700 bg-gray-800 hover:animate-bounce">
20 |           <h1 className="text-lg font-bold text-white">Save up to 70% off retail</h1>
21 |           <h3 className="text-md text-[#fff324]">
22 |             Get access to exclusive promos & flash deals.
23 |           </h3>
24 |           <h2 className="text-lg font-bold underline text-white">SHOP DEALS</h2>
25 |         </div>
26 |       </div>
27 |     </div>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/src/Components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { BsBell, BsCart3 } from "react-icons/bs";
 2 | import { NavLink } from "react-router-dom";
 3 | import logo from "../assets/logo.png";
 4 | 
 5 | // eslint-disable-next-line react/prop-types
 6 | export const Navbar = ({ cartItemCount }) => {
 7 |   return (
 8 |     <>
 9 |       <div className="fixed top-0 left-0 z-10 w-[100%] font-font">
10 |         <div className="flex w-full justify-between items-center p-4 bg-gray-800 text-white cursor-pointer ">
11 |           <NavLink to={"/"} className="w-52">
12 |             <img src={logo} alt="" />
13 |           </NavLink>
14 | 
15 |           <div className=" bg-gray-800 z-10 left-0 w-full transition-all duration-500 ease-in-out top-8 p-2 flex-row flex items-center justify-end gap-8 font-font text-lg ">
16 |             <NavLink to={"/Signup"}>
17 |               <button className="hover:border-b-2 hover:border-yellow-400">
18 |                 Sign up
19 |               </button>
20 |             </NavLink>
21 |             <NavLink to={"/Login"}>
22 |               <button className="hover:border-b-2 hover:border-yellow-400">
23 |                 Log in
24 |               </button>
25 |             </NavLink>
26 | 
27 |             <i className="text-xl hover:border-b-2 hover:border-yellow-400">
28 |               <BsBell />
29 |             </i>
30 |             <NavLink to={"/Cart"}>
31 |               <i className="text-2xl hover:border-b-2 hover:border-yellow-400">
32 |                 <BsCart3 />
33 |               </i>
34 |               {cartItemCount > 0 && (
35 |                 <div className="text-sm text-center translate-x-4 text-gray-800 font-bold absolute top-4 px-2 border border-white rounded-full bg-yellow-400">
36 |                   {cartItemCount < 9 ? cartItemCount : "9 +"}
37 |                 </div>
38 |               )}
39 |             </NavLink>
40 |             <button className="border-2 border-yellow-400 bg-gray-600 text-white p-1 rounded-lg hover:bg-yellow-300 hover:text-black">
41 |               List an item
42 |             </button>
43 |           </div>
44 |         </div>
45 |       </div>
46 |     </>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/src/Context/CartContext.jsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useState } from "react";
 2 | 
 3 | const initialState = {
 4 |   cart: [],
 5 |   cartItemCount: () => 0,
 6 |   addToCart: () => null,
 7 |   removeFromCart: () => null,
 8 |   increaseQuantity: () => null,
 9 |   decreaseQuantity: () => null,
10 | };
11 | 
12 | const CartContext = createContext(initialState);
13 | 
14 | const useCart = () => useContext(CartContext);
15 | 
16 | // eslint-disable-next-line react/prop-types
17 | const CartProvider = ({children}) => {
18 |   const  [cart, setCart]  = useState(initialState.cart);
19 | 
20 |   const cartItemCount = () => {
21 |     return cart.reduce((acc, item) => acc + item.quantity, 0)
22 |   };
23 | 
24 |   const addToCart = (product) => {
25 |     const productIdx = cart.findIndex((item) => item.product.id === product.id)
26 |     if (productIdx ===! -1) {
27 |       increaseQuantity(product.id)
28 |     } else {
29 |       setCart([...cart, { product, quantity: 1 }])
30 |     }
31 |   }
32 | 
33 |   const removeFromCart = (productId) => {
34 |     setCart(cart.filter((item) => item.product.id !== productId))
35 |   }
36 | 
37 |   const increaseQuantity = (productId) => {
38 |     const copy = cart.slice()
39 |     const productIdx = copy.findIndex((item) => item.product.id === productId)
40 |     if (productIdx !== -1) {
41 |       copy[productIdx].quantity += 1;
42 |       setCart(copy)
43 |     }
44 |   }
45 | 
46 |   const decreaseQuantity = (productId) => {
47 |     const copy = cart.slice()
48 |     const productIdx = copy.findIndex((item) => item.product.id === productId)
49 |     if (productIdx !== -1 && copy[productIdx].quantity > 1) {
50 |       copy[productIdx].quantity -= 1
51 |       setCart(copy)
52 |     }
53 |   }
54 | 
55 |   return (
56 |     <CartContext.Provider
57 |       value={{
58 |         cart,
59 |         cartItemCount,
60 |         addToCart,
61 |         removeFromCart,
62 |         increaseQuantity,
63 |         decreaseQuantity,
64 |       }}
65 |     >
66 |       {children}
67 |     </CartContext.Provider>
68 |   );
69 | };
70 | 
71 | // eslint-disable-next-line react-refresh/only-export-components
72 | export { useCart, CartProvider }
73 | 


--------------------------------------------------------------------------------
/src/Context/Productdata.js:
--------------------------------------------------------------------------------
 1 | const data = {
 2 |   products: [
 3 |     {
 4 |       id: "1",
 5 |       name: "Casual Shoes",
 6 |       img: "https://cdn.pixabay.com/photo/2018/09/30/21/29/sneakers-3714730_1280.jpg",
 7 |       price: 4990,
 8 |       category: "shoes"
 9 |     },
10 |     {
11 |       id: "2",
12 |       name: "Formal Shoes",
13 |       img: "https://cdn.pixabay.com/photo/2016/09/21/12/18/wingtip-1684696_1280.jpg",
14 |       price: 5999,
15 |       category: "shoes"
16 |     },
17 |     {
18 |       id: "3",
19 |       name: "Sandal",
20 |       img: "https://img.freepik.com/free-photo/man-two-background-accessory-velcro_1203-6465.jpg?w=996&t=st=1690208179~exp=1690208779~hmac=2f0929b44ad950b5db5baf5bb61ce5134a5d0424671b885f26fc734bf234efc6",
21 |       price: 2999,
22 |       category: "shoes"
23 |     },
24 |     {
25 |       id: "4",
26 |       name: "White T-Shirt",
27 |       img: "https://cdn.pixabay.com/photo/2016/03/25/09/04/t-shirt-1278404_1280.jpg",
28 |       price: 1199,
29 |       category: "Tshirt"
30 |     },
31 |     {
32 |       id: "5",
33 |       name: "Blue T-Shirt",
34 |       img: "https://cdn.pixabay.com/photo/2017/05/23/10/53/t-shirt-design-2336850_1280.jpg",
35 |       price: 1299,
36 |       category: "Tshirt"
37 |     },
38 |     {
39 |       id: "6",
40 |       name: "Red T-Shirt",
41 |       img: "https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg",
42 |       price: 1150,
43 |       category: "Tshirt"
44 |     },
45 |     {
46 |       id: "7",
47 |       name: "Red Watch",
48 |       img: "https://cdn.pixabay.com/photo/2015/09/09/20/44/accessories-933231_1280.jpg",
49 |       price: 1850,
50 |       category: "Tshirt"
51 |     },
52 |     {
53 |       id: "8",
54 |       name: "Blue Watch",
55 |       img: "https://cdn.pixabay.com/photo/2015/09/09/20/27/accessory-933123_1280.jpg",
56 |       price: 1499,
57 |       category: "Tshirt"
58 |     },
59 |     {
60 |       id: "9",
61 |       name: "Leather Belt",
62 |       img: "https://cdn.pixabay.com/photo/2015/09/23/03/07/menswear-952835_1280.jpg",
63 |       price: 1150,
64 |       category: "Tshirt"
65 |     },
66 | 
67 |   ]
68 | };
69 | 
70 | export default data;


--------------------------------------------------------------------------------
/src/Components/Banner.jsx:
--------------------------------------------------------------------------------
 1 | import { NavLink } from "react-router-dom";
 2 | import Bannerimg from "../assets/banner.jpg";
 3 | export const Banner = () => {
 4 |   return (
 5 |     <div className="relative top-16">
 6 |       <div className="font-font max-w-[100vw] h-auto">
 7 |         <div className="overflow-hidden bg-contain bg-no-repeat bg-[#66665f]">
 8 |           <img
 9 |             className="object-fit w-[100%] h-[100%]"
10 |             src={Bannerimg}
11 |             alt=""
12 |           />
13 |         </div>
14 |         <div className="flex flex-col  absolute top-12 left-20 p-2 md:top-24 lg:top-40">
15 |           <h1 className="text-3xl  font-semibold lg:text-5xl">
16 |             Preowned is the
17 |           </h1>
18 |           <h1 className="text-3xl font-semibold mb-4 lg:text-5xl ">
19 |             new this year
20 |           </h1>
21 |           <input
22 |             className="w-[250px] text-sm lg:text-lg lg:w-[480px] placeholder:italic placeholder:text-slate-400 block bg-white border border-slate-300 rounded-full py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
23 |             placeholder="Shop one-of-a-kind finds"
24 |             type="text"
25 |             name="search"
26 |           />
27 |           <NavLink to={"/Products"}>
28 |             <div className=" text-sm flex gap-0 mt-4 flex-row lg:text-lg lg:gap-4 ">
29 |               <button className=" rounded-full p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-400 hover:text-black  focus:outline-none focus:ring focus:ring-black">
30 |                 Mens Shoes
31 |               </button>
32 |               <button className="rounded-full p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-400 hover:text-black  focus:outline-none focus:ring focus:ring-black ">
33 |                 Mens Clothing
34 |               </button>
35 |               <button className="rounded-full p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-400 hover:text-black  focus:outline-none focus:ring focus:ring-black">
36 |                 Mens Accessories
37 |               </button>
38 |             </div>
39 |           </NavLink>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | };
45 | 


--------------------------------------------------------------------------------
/src/Components/Categories.jsx:
--------------------------------------------------------------------------------
 1 | import { NavLink } from "react-router-dom";
 2 | import mensshoes from "../assets/category img/mensshoes.jpg";
 3 | import mensclothing from "../assets/category img/mensclothing.jpg";
 4 | import mensaccessories from "../assets/category img/mensaccessories.jpg";
 5 | 
 6 | export const Categories = () => {
 7 |   return (
 8 |     <div className="font-font">
 9 |     <div className="w-[100%] h-auto bg-gray-800 p-28">
10 |       <h2 className="text-5xl text-center text-white font-semibold pb-2">
11 |         Product Category
12 |       </h2>
13 |       <NavLink to={"/Products"}>
14 |         <div className="flex  md:flex-row flex-col m-4  gap-8 p-4 justify-center items-center">
15 |           <div className="flex-1 text-center max-w-sm overflow-hidden bg-gray-800 border rounded-lg shadow-md shadow-gray-600">
16 |             <img
17 |               className="rounded-t-sm transition duration-500 ease-in-out hover:scale-105"
18 |               src={mensshoes}
19 |               alt=""
20 |             />
21 |             <div className="p-5">
22 |               <h5 className="mb-2 text-2xl font-bold text-yellow-400">
23 |                 Mens Shoes
24 |               </h5>
25 |               <button className="rounded-lg p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-300 hover:text-black hover:text-lg hover:border-yellow-500">
26 |                 Browse More
27 |               </button>
28 |             </div>
29 |           </div>
30 | 
31 |           <div className="flex-1 max-w-sm text-center overflow-hidden bg-gray-800 border rounded-lg shadow-md shadow-gray-600">
32 |             <img
33 |               className="rounded-t-sm transition duration-500 ease-in-out hover:scale-105"
34 |               src={mensclothing}
35 |               alt=""
36 |             />
37 |             <div className="p-5">
38 |               <h5 className="mb-2 text-2xl font-bold text-yellow-400">
39 |                 Mens Clothing
40 |               </h5>
41 |               <button className=" rounded-lg p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-300 hover:text-black  hover:text-lg hover:border-yellow-500">
42 |                 Browse More
43 |               </button>
44 |             </div>
45 |           </div>
46 | 
47 |           <div className="flex-1 max-w-sm text-center overflow-hidden bg-gray-800 border rounded-lg shadow-md shadow-gray-600">
48 |             <img
49 |               className="rounded-t-sm transition duration-500 ease-in-out hover:scale-105"
50 |               src={mensaccessories}
51 |               alt=""
52 |             />
53 |             <div className="p-5">
54 |               <h5 className="mb-2 text-2xl font-bold text-yellow-400">
55 |                 Accessories
56 |               </h5>
57 |               <button className=" rounded-lg p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-300 hover:text-black hover:text-lg hover:border-yellow-500">
58 |                 Browse More
59 |               </button>
60 |             </div>
61 |           </div>
62 |         </div>
63 |       </NavLink>
64 |     </div>
65 |     </div>
66 |   );
67 | };
68 | 


--------------------------------------------------------------------------------
/src/Components/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import { BsFacebook, BsInstagram, BsTwitter, BsWhatsapp } from "react-icons/bs";
  2 | export const Footer = () => {
  3 |   return (
  4 |     <div className="w-[100%] p-4 bg-gray-800 font-font">
  5 |       <div className="flex flex-wrap p-4 border border-transparent shadow-md shadow-gray-400 rounded-lg">
  6 |         {/* Footer links */}
  7 |         <div className=" md:w-1/4 mb-4 md:mb-0">
  8 |           <h4 className="text-xl text-yellow-300 font-bold underline">
  9 |             Explore
 10 |           </h4>
 11 |           <ul className="mt-2">
 12 |             <li>
 13 |               <a href="#" className="text-white hover:text-white">
 14 |                 Categories
 15 |               </a>
 16 |             </li>
 17 |             <li>
 18 |               <a href="#" className="text-white hover:text-white">
 19 |                 Featured Items
 20 |               </a>
 21 |             </li>
 22 |             <li>
 23 |               <a href="#" className="text-white hover:text-white">
 24 |                 Deals
 25 |               </a>
 26 |             </li>
 27 |           </ul>
 28 |         </div>
 29 | 
 30 |         {/* Footer links */}
 31 |         <div className="w-full md:w-1/4 mb-4 md:mb-0">
 32 |           <h4 className="text-xl text-yellow-300 font-bold underline">About</h4>
 33 |           <ul className="mt-2">
 34 |             <li>
 35 |               <a href="#" className="text-white hover:text-white">
 36 |                 About Us
 37 |               </a>
 38 |             </li>
 39 |             <li>
 40 |               <a href="#" className="text-white hover:text-white">
 41 |                 Contact Us
 42 |               </a>
 43 |             </li>
 44 |             <li>
 45 |               <a href="#" className="text-white hover:text-white">
 46 |                 FAQ
 47 |               </a>
 48 |             </li>
 49 |           </ul>
 50 |         </div>
 51 | 
 52 |         {/* Social links */}
 53 |         <div className="w-full md:w-1/4 mb-4 md:mb-0">
 54 |           <h4 className="text-xl text-yellow-300 font-bold underline">
 55 |             Connect
 56 |           </h4>
 57 |           <div className="">
 58 |             <ul className="mt-2 flex flex-row gap-2 cursor-pointer transition duration-150 ease-out hover:ease-in">
 59 |               <li className="bg-blue-600 text-2xl text-white rounded-lg w-10 h-8-auto p-2 hover:animate-bounce">
 60 |                 <BsFacebook />
 61 |               </li>
 62 |               <li className="bg-blue-400 text-2xl text-white rounded-lg w-10 h-8-auto p-2 hover:animate-bounce">
 63 |                 <BsTwitter />
 64 |               </li>
 65 |               <li className="bg-pink-800 text-2xl text-white rounded-lg w-10 h-8-auto p-2 hover:animate-bounce">
 66 |                 <BsInstagram />
 67 |               </li>
 68 |               <li className="bg-green-600 text-2xl text-white rounded-lg w-10 h-8-auto p-2 hover:animate-bounce">
 69 |                 <BsWhatsapp />
 70 |               </li>
 71 |             </ul>
 72 |           </div>
 73 |         </div>
 74 | 
 75 |         {/* Newsletter subscription */}
 76 |         <div className="w-full md:w-1/4">
 77 |           <h4 className="text-xl text-yellow-300 font-bold underline">
 78 |             Subscribe
 79 |           </h4>
 80 |           <p className="text-white mt-2">
 81 |             Subscribe to our newsletter to get the latest updates.
 82 |           </p>
 83 |           <form className="mt-4">
 84 |             <input
 85 |               type="email"
 86 |               placeholder="Your Email"
 87 |               className="w-full py-2 px-4 rounded-lg bg-gray-700 text-yellow-300 focus:outline-none focus:ring focus:ring-opacity-50"
 88 |             />
 89 |             <button
 90 |               type="submit"
 91 |               className=" mt-2 py-2 px-4 bg-gray-800 text-yellow-300 rounded-lg hover:bg-gray-600 focus:outline-none focus:ring focus:ring-opacity-50"
 92 |             >
 93 |               Subscribe
 94 |             </button>
 95 |           </form>
 96 |         </div>
 97 |       </div>
 98 |       <div className="bg-[#fff324] p-4 items-center text-center rounded-md text-lg font-semibold shadow-md shadow-gray-600 mt-2">
 99 |         <h1>Copyrights@ Developed By Coding Wizards</h1>
100 |       </div>
101 |     </div>
102 |   );
103 | };
104 | 


--------------------------------------------------------------------------------
/src/Components/Item.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { BsCartPlus } from "react-icons/bs";
  3 | 
  4 | // eslint-disable-next-line react/prop-types
  5 | export const Item = ({ data, addToCart }) => {
  6 |   const [modal, setModal] = useState(false);
  7 |   const closeModal = () => {
  8 |     setModal();
  9 |   };
 10 |   // eslint-disable-next-line react/prop-types
 11 |   const { id, img, name, price } = data;
 12 | 
 13 |   return (
 14 |     <>
 15 |       <div>
 16 |         <div className=" max-w-sm p-2 text-center text-black border border-yellow-400 rounded-lg shadow-lg shadow-gray-800 bg-white font-font">
 17 |           <div className="overflow-hidden bg-contain bg-no-repeat shadow-md shadow-gray-800 rounded-lg">
 18 |             <img
 19 |               onClick={() => {
 20 |                 setModal(true);
 21 |               }}
 22 |               className="object-fit w-96 h-80 rounded-lg transition duration-500 ease-in-out hover:scale-105"
 23 |               src={img}
 24 |               alt=""
 25 |             />
 26 |           </div>
 27 |           <div className="text-lg font-bold underline p-2">{name}</div>
 28 |           <div className="text-md font-semibold">
 29 |             <span>Rs : {price}</span>
 30 |           </div>
 31 |           <div className=" ">
 32 |             <div className="p-2">
 33 |               <button
 34 |                 onClick={addToCart}
 35 |                 className=" rounded-lg p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-300 hover:text-black hover:border-yellow-500"
 36 |               >
 37 |                 <a className="flex gap-2 items-center ">
 38 |                   Add to Cart{" "}
 39 |                   <span className="text-xl">
 40 |                     <BsCartPlus />
 41 |                   </span>
 42 |                 </a>
 43 |               </button>
 44 |             </div>
 45 |             <div className="rounded-lg p-2 border text-bold text-white bg-gray-800 shadow-md shadow-gray-800 hover:bg-yellow-300 hover:text-black hover:border-yellow-500">
 46 |               <button
 47 |                 onClick={() => {
 48 |                   setModal(true);
 49 |                 }}
 50 |               >
 51 |                 Product Description....
 52 |               </button>
 53 |             </div>
 54 |           </div>
 55 |         </div>
 56 |       </div>
 57 | 
 58 |       {/*Modal Code*/}
 59 | 
 60 |       {modal && (
 61 |         <div className="flex flex-col justify-center items-center content-center w-[100vw] h-[100vh] fixed top-0 left-0 bottom-0 right-0  bg-gray-900/90">
 62 |           <h1 className="text-white text-4xl font-bold p-2 my-2">
 63 |             Product Description
 64 |           </h1>
 65 |           <div className="max-w-[100vw] h-auto lg:grid  lg:grid-flow-col flex flex-col flex-wrap md:flex-col  gap-0 lg:gap-6 p-4 items-center justify-center content-center w-[80vw] rounded-md bg-[#fff324] border border-white shadow-lg shadow-white/50">
 66 |             <div className="rounded-md overflow-hidden row-span-4">
 67 |               <img
 68 |                 className=" object-contain overflow-hidden max-w-[100%] h-[250px] md:h-[300px] transition duration-500 ease-in-out hover:scale-105"
 69 |                 src={img}
 70 |                 alt=""
 71 |               />
 72 |             </div>
 73 |             <div className="col-span-2 text-2xl lg:text-4xl font-bold underline">
 74 |               <h1>{name}</h1>
 75 |             </div>
 76 |             <div className="col-span-2">
 77 |               <p className="text-md lg:text-lg font-normal">
 78 |                 <span className="text-xl lg:text-2xl font-semibold">
 79 |                   Description :
 80 |                 </span>
 81 |                 <br />
 82 |                 In publishing and graphic design,
 83 |                 <br /> Lorem ipsum is a placeholder text commonly used to
 84 |                 demonstrate the
 85 |               </p>
 86 |             </div>
 87 |             <div className="col-span-2 text-lg lg:text-xl font-bold ">
 88 |               <span className="text-gray-800">Rs : {price}</span>
 89 |             </div>
 90 |             <div className="col-span-2 space-x-8">
 91 |               <button
 92 |                 onClick={() => closeModal(false)}
 93 |                 className="text-sm lg:text-lg rounded-xl p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-400 hover:text-black  focus:outline-none focus:ring focus:ring-black"
 94 |               >
 95 |                 Back To Products
 96 |               </button>
 97 |               <button
 98 |                 onClick={addToCart}
 99 |                 className="text-sm lg:text-lg rounded-xl p-2 border-2 border-white text-white bg-gray-800 hover:bg-yellow-400 hover:text-black  focus:outline-none focus:ring focus:ring-black"
100 |               >
101 |                 <a className="flex items-center gap-2">
102 |                   Add to Cart{" "}
103 |                   <span className="text-xl">
104 |                     <BsCartPlus />
105 |                   </span>
106 |                 </a>
107 |               </button>
108 |             </div>
109 |           </div>
110 |         </div>
111 |       )}
112 |     </>
113 |   );
114 | };
115 | 


--------------------------------------------------------------------------------
/src/Pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | export const Login = () => {
 2 |   return (
 3 |     <>
 4 |       <div className="relative flex flex-col justify-center min-h-screen overflow-hidden bg-gray-700 font-font">
 5 |         <div className="w-full p-6 m-auto bg-white rounded-md shadow-xl lg:max-w-xl">
 6 |           <h1 className="text-3xl font-semibold text-center text-gray-800 uppercase">
 7 |             Log in
 8 |           </h1>
 9 |           <form className="mt-6">
10 |             <div className="mb-2">
11 |               <label
12 |                 for="email"
13 |                 className="block text-sm font-semibold text-gray-800"
14 |               >
15 |                 Email
16 |               </label>
17 |               <input
18 |                 type="email"
19 |                 className="block w-full px-4 py-2 mt-2 text-black bg-white border rounded-md focus:border-yellow-400 focus:ring-yellow-300 focus:outline-none focus:ring focus:ring-opacity-40"
20 |               />
21 |             </div>
22 |             <div className="mb-2">
23 |               <label
24 |                 for="password"
25 |                 className="block text-sm font-semibold text-gray-800"
26 |               >
27 |                 Password
28 |               </label>
29 |               <input
30 |                 type="password"
31 |                 className="block w-full px-4 py-2 mt-2 text-black bg-white border rounded-md focus:border-yellow-400 focus:ring-yellow-300 focus:outline-none focus:ring focus:ring-opacity-40"
32 |               />
33 |             </div>
34 |             <a href="#" className="text-sm text-gray-800 hover:underline">
35 |               Forget Password?
36 |             </a>
37 |             <div className="mt-6">
38 |               <button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-yellow-400 hover:text-black focus:outline-none focus:bg-yellow-400">
39 |                 Login
40 |               </button>
41 |             </div>
42 |           </form>
43 |           <div className="relative flex items-center justify-center w-full mt-6 border border-t">
44 |             <div className="absolute px-5 bg-white">Or</div>
45 |           </div>
46 |           <div className="flex mt-4 gap-x-2">
47 |             <button
48 |               type="button"
49 |               className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-yellow-400"
50 |             >
51 |               <svg
52 |                 xmlns="http://www.w3.org/2000/svg"
53 |                 viewBox="0 0 32 32"
54 |                 className="w-5 h-5 fill-current"
55 |               >
56 |                 <path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
57 |               </svg>
58 |             </button>
59 |             <button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-yellow-400">
60 |               <svg
61 |                 xmlns="http://www.w3.org/2000/svg"
62 |                 viewBox="0 0 32 32"
63 |                 className="w-5 h-5 fill-current"
64 |               >
65 |                 <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
66 |               </svg>
67 |             </button>
68 |             <button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-yellow-400">
69 |               <svg
70 |                 xmlns="http://www.w3.org/2000/svg"
71 |                 viewBox="0 0 32 32"
72 |                 className="w-5 h-5 fill-current"
73 |               >
74 |                 <path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
75 |               </svg>
76 |             </button>
77 |           </div>
78 | 
79 |           <p className="mt-8 text-xs font-light text-center text-gray-700">
80 |             {" "}
81 |             Don't have an account?{" "}
82 |             <a href="#" className="font-medium text-yellow-600 hover:underline">
83 |               Sign up
84 |             </a>
85 |           </p>
86 |         </div>
87 |       </div>
88 |     </>
89 |   );
90 | };
91 | 


--------------------------------------------------------------------------------
/src/Pages/Cart.jsx:
--------------------------------------------------------------------------------
  1 | import { Link } from "react-router-dom";
  2 | import { useCart } from "../Context/CartContext";
  3 | import { BsTrash3Fill } from "react-icons/bs";
  4 | 
  5 | const ShippingCharges = 750;
  6 | export const Cart = () => {
  7 |   const { cart, removeFromCart, increaseQuantity, decreaseQuantity } =
  8 |     useCart();
  9 | 
 10 |   const cartTotal = () => {
 11 |     return cart.reduce(
 12 |       (acc, item) => acc + item.product.price * item.quantity,
 13 |       0
 14 |     );
 15 |   };
 16 | 
 17 |   const round = (value, decimals) => {
 18 |     return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
 19 |   };
 20 | 
 21 |   return (
 22 |     <div className="">
 23 |       <div className="">
 24 |         {cart.length >= 1 ? (
 25 |           <div className="flex flex-col w-[100vw] h-[100vh] content-center items-center justify-around lg:flex-row bg-[#fff324]">
 26 |             <div className="w-[60vw] border rounded-lg bg-white shadow-lg shadow-gray-800 p-4">
 27 |               <h2 className="text-2xl font-bold">Order Summary</h2>
 28 |               {cart.map((item) => (
 29 |                 <div className="py-1" key={item.product.id}>
 30 |                   <div className="flex gap-6 items-center content-center justify-center p-4 rounded-lg border shadow-md shadow-gray-800 ">
 31 |                     <div className="w-40 overflow-hidden rounded-md ">
 32 |                       <img src={item.product.img} alt="" />
 33 |                     </div>
 34 |                     <div className="pr-24 ">
 35 |                       <div className=" text-lg font-bold ">
 36 |                         <Link to={"" + item.product.id} className="">
 37 |                           {item.product.name}
 38 |                         </Link>
 39 |                       </div>
 40 |                       <span className="text-md font-semibold">
 41 |                         Rs- {round(item.product.price * item.quantity, 2)}.00
 42 |                       </span>
 43 |                       {/* <div className="remove">Remove</div> */}
 44 |                     </div>
 45 |                     <div className="w-[300px] flex items-center  justify-between">
 46 |                       <div className="space-x-2 flex">
 47 |                         <div className="space-x-4 border rounded-md shadow-md shadow-gray-700">
 48 |                           <button
 49 |                             onClick={() => increaseQuantity(item.product.id)}
 50 |                             className="text-lg rounded-lg p-2 border text-white bg-green-500 hover:bg-green-400 hover:text-black  focus:outline-none focus:ring focus:ring-gray-800"
 51 |                           >
 52 |                             +
 53 |                           </button>
 54 |                           <span className="text-lg font-bold rounded-lg p-2 border-2 border-gray-800 text-black bg-white">
 55 |                             {item.quantity}
 56 |                           </span>
 57 |                           <button
 58 |                             onClick={() => decreaseQuantity(item.product.id)}
 59 |                             className="text-lg rounded-lg p-2 cursor-pointer border text-white bg-red-500 hover:bg-red-400 hover:text-black  focus:outline-none focus:ring focus:ring-gray-800"
 60 |                           >
 61 |                             -
 62 |                           </button>
 63 |                         </div>
 64 |                       </div>
 65 |                       <div
 66 |                         className="flex items-center cursor-pointer text-2xl p-2 rounded-md shadow-md border-transparent shadow-gray-700 hover:bg-gray-300"
 67 |                         onClick={() => removeFromCart(item.product.id)}
 68 |                       >
 69 |                         <BsTrash3Fill />
 70 |                       </div>
 71 |                     </div>
 72 |                   </div>
 73 |                 </div>
 74 |               ))}
 75 |             </div>
 76 |             <div className="w-80 h-96 content-center items-center justify-center p-2 border-2 bg-white rounded-md shadow-md shadow-gray-700">
 77 |               <h2 className="text-2xl py-2 font-bold underline">
 78 |                 Payment Summary{" "}
 79 |               </h2>
 80 |               <div className="p-2 space-y-2">
 81 |                 <div className="flex font-semibold rounded-md border p-2 justify-between shadow-md shadow-gray-700">
 82 |                   <span>Subtotal:</span>
 83 |                   <span className=" ">Rs- {round(cartTotal(), 2)}.00</span>
 84 |                 </div>
 85 |                 <div className="flex font-semibold rounded-md border p-2 justify-between shadow-md shadow-gray-700">
 86 |                   <span>Shipping Charges:</span>
 87 |                   <span className=""> Rs- {ShippingCharges}.00</span>
 88 |                 </div>
 89 |                 <div className="flex font-semibold rounded-md border p-2 justify-between shadow-md shadow-gray-700">
 90 |                   <span>Total Amount : </span>
 91 |                   <span className="">
 92 |                     Rs- {round(cartTotal() + ShippingCharges, 2)}.00
 93 |                   </span>
 94 |                 </div>
 95 |               </div>
 96 |             </div>
 97 |           </div>
 98 |         ) : (
 99 |           <div className="flex flex-col gap-6 w-[100%] h-[100vh]  items-center content-center justify-center bg-[#fff324]">
100 |             <div className="text-6xl font-bold">
101 |               <p>&#9432;Your Cart is empty</p>
102 |             </div>
103 |             <div>
104 |               <Link to={"/Products"}>
105 |                 <button className="text-xl font-bold border-2 border-gray-800 bg-[#fff324] text-black p-4 rounded-lg hover:bg-gray-800 hover:text-white">
106 |                   Back To Shopping{" "}
107 |                 </button>
108 |               </Link>
109 |             </div>
110 |           </div>
111 |         )}
112 |       </div>
113 |     </div>
114 |   );
115 | };
116 | 


--------------------------------------------------------------------------------
/src/Pages/Signup.jsx:
--------------------------------------------------------------------------------
  1 | import { NavLink } from "react-router-dom";
  2 | 
  3 | export const Signup = () => {
  4 |   return (
  5 |     <>
  6 |       <div>
  7 |         <div className="flex flex-col items-center  min-h-screen pt-6 sm:justify-center sm:pt-0 bg-gray-700 font-font">
  8 |           <div className="w-64 ml-20 mt-28">
  9 |             <NavLink to={"/"}>
 10 |               <img src="src/assets/logo.png" alt="" />
 11 |             </NavLink>
 12 |           </div>
 13 |           <div className="w-full px-6 py-4 mt-6 overflow-hidden bg-yellow-400 shadow-md sm:max-w-lg sm:rounded-lg">
 14 |             <form>
 15 |               <div>
 16 |                 <label
 17 |                   htmlFor="name"
 18 |                   className="block text-sm font-medium text-gray-700 undefined"
 19 |                 >
 20 |                   Name
 21 |                 </label>
 22 |                 <div className="flex flex-col items-start">
 23 |                   <input
 24 |                     type="text"
 25 |                     name="name"
 26 |                     className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 27 |                   />
 28 |                 </div>
 29 |               </div>
 30 |               <div className="mt-4">
 31 |                 <label
 32 |                   htmlFor="email"
 33 |                   className="block text-sm font-medium text-gray-700 undefined"
 34 |                 >
 35 |                   Email
 36 |                 </label>
 37 |                 <div className="flex flex-col items-start">
 38 |                   <input
 39 |                     type="email"
 40 |                     name="email"
 41 |                     className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 42 |                   />
 43 |                 </div>
 44 |               </div>
 45 |               <div className="mt-4">
 46 |                 <label
 47 |                   htmlFor="password"
 48 |                   className="block text-sm font-medium text-gray-700 undefined"
 49 |                 >
 50 |                   Password
 51 |                 </label>
 52 |                 <div className="flex flex-col items-start">
 53 |                   <input
 54 |                     type="password"
 55 |                     name="password"
 56 |                     className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 57 |                   />
 58 |                 </div>
 59 |               </div>
 60 |               <div className="mt-4">
 61 |                 <label
 62 |                   htmlFor="password_confirmation"
 63 |                   className="block text-sm font-medium text-gray-700 undefined"
 64 |                 >
 65 |                   Confirm Password
 66 |                 </label>
 67 |                 <div className="flex flex-col items-start">
 68 |                   <input
 69 |                     type="password"
 70 |                     name="password_confirmation"
 71 |                     className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 72 |                   />
 73 |                 </div>
 74 |               </div>
 75 |               <a href="#" className="text-xs text-black hover:underline">
 76 |                 Forget Password?
 77 |               </a>
 78 |               <div className="flex items-center mt-4">
 79 |                 <button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-800 rounded-md hover:text-black hover:bg-yellow-400 focus:outline-none focus:bg-yellow-400">
 80 |                   Register
 81 |                 </button>
 82 |               </div>
 83 |             </form>
 84 |             <div className="mt-4 text-grey-600">
 85 |               Already have an account?{" "}
 86 |               <span>
 87 |                 <a className="text-gray-600 hover:underline" href="#">
 88 |                   Log in
 89 |                 </a>
 90 |               </span>
 91 |             </div>
 92 |             <div className="flex items-center w-full my-4">
 93 |               <hr className="w-full" />
 94 |               <p className="px-3 ">OR</p>
 95 |               <hr className="w-full" />
 96 |             </div>
 97 |             <div className="my-6 space-y-2">
 98 |               <button
 99 |                 aria-label="Login with Google"
100 |                 type="button"
101 |                 className="flex items-center justify-center w-full p-2 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 dark:border-gray-400 focus:ring-gray-800"
102 |               >
103 |                 <svg
104 |                   xmlns="http://www.w3.org/2000/svg"
105 |                   viewBox="0 0 32 32"
106 |                   className="w-5 h-5 fill-current"
107 |                 >
108 |                   <path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
109 |                 </svg>
110 |                 <p>Login with Google</p>
111 |               </button>
112 |               <button
113 |                 aria-label="Login with GitHub"
114 |                 role="button"
115 |                 className="flex items-center justify-center w-full p-4 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 dark:border-gray-400 focus:ring-gray-800"
116 |               >
117 |                 <svg
118 |                   xmlns="http://www.w3.org/2000/svg"
119 |                   viewBox="0 0 32 32"
120 |                   className="w-5 h-5 fill-current"
121 |                 >
122 |                   <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
123 |                 </svg>
124 |                 <p>Login with GitHub</p>
125 |               </button>
126 |             </div>
127 |           </div>
128 |         </div>
129 |       </div>
130 |     </>
131 |   );
132 | };
133 | 


--------------------------------------------------------------------------------