├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.png
├── images
│ ├── category
│ │ ├── ca1.png
│ │ ├── ca10.png
│ │ ├── ca11.png
│ │ ├── ca12.jpg
│ │ ├── ca2.png
│ │ ├── ca3.png
│ │ ├── ca4.png
│ │ ├── ca5.png
│ │ ├── ca6.png
│ │ ├── ca7.png
│ │ ├── ca8.png
│ │ └── ca9.png
│ ├── product
│ │ ├── product1.jpg
│ │ ├── product10.png
│ │ ├── product11.png
│ │ ├── product12.jpg
│ │ ├── product13.jpg
│ │ ├── product14.png
│ │ ├── product15.png
│ │ ├── product16.png
│ │ ├── product17.png
│ │ ├── product18.png
│ │ ├── product19.png
│ │ ├── product2.jpg
│ │ ├── product20.png
│ │ ├── product21.jpg
│ │ ├── product22.png
│ │ ├── product23.jpg
│ │ ├── product24.png
│ │ ├── product3.jpg
│ │ ├── product3.png
│ │ ├── product4.jpg
│ │ ├── product5.png
│ │ ├── product6.jpg
│ │ ├── product7.jpg
│ │ ├── product7.png
│ │ ├── product8.png
│ │ └── product9.png
│ └── slide
│ │ ├── slide1.png
│ │ ├── slide2.png
│ │ ├── slide3.png
│ │ └── slide4.png
└── index.html
└── src
├── App.js
├── assets
├── data
│ └── data.js
└── images
│ ├── Medicine.svg
│ ├── input.png
│ ├── my-account.jpg
│ ├── not-found-alt.svg
│ ├── product1.jpg
│ └── product2.jpg
├── components
├── category
│ ├── Category.jsx
│ └── category.css
├── footer
│ └── Footer.jsx
├── header
│ ├── Card.jsx
│ ├── CartItems.jsx
│ ├── Header.jsx
│ ├── User.jsx
│ └── header.css
├── hero
│ ├── Order.jsx
│ ├── Slider.jsx
│ └── slider.css
├── product
│ ├── Product.jsx
│ ├── ProductCart.jsx
│ └── product.css
└── scrollTop
│ └── ScrollTop.jsx
├── index.css
├── index.js
├── pages
├── account
│ ├── Account.jsx
│ └── account.css
├── details
│ ├── DetailsPages.jsx
│ └── details.css
├── home
│ └── Home.jsx
└── login
│ ├── Login.jsx
│ ├── Regsiter.jsx
│ └── login.css
└── store
├── authSlice.js
├── cartSlice.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Demo : https://648da94373a33f023dc9e1fb--jade-torrone-3d53da.netlify.app/
2 |
3 | 
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ecommerce",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.9.1",
7 | "@testing-library/jest-dom": "^5.16.5",
8 | "@testing-library/react": "^13.4.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-icons": "^4.7.1",
13 | "react-redux": "^8.0.5",
14 | "react-router-dom": "^5.3.4",
15 | "react-scripts": "5.0.1",
16 | "react-slick": "^0.29.0",
17 | "slick-carousel": "^1.8.1",
18 | "web-vitals": "^2.1.4"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/favicon.png
--------------------------------------------------------------------------------
/public/images/category/ca1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca1.png
--------------------------------------------------------------------------------
/public/images/category/ca10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca10.png
--------------------------------------------------------------------------------
/public/images/category/ca11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca11.png
--------------------------------------------------------------------------------
/public/images/category/ca12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca12.jpg
--------------------------------------------------------------------------------
/public/images/category/ca2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca2.png
--------------------------------------------------------------------------------
/public/images/category/ca3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca3.png
--------------------------------------------------------------------------------
/public/images/category/ca4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca4.png
--------------------------------------------------------------------------------
/public/images/category/ca5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca5.png
--------------------------------------------------------------------------------
/public/images/category/ca6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca6.png
--------------------------------------------------------------------------------
/public/images/category/ca7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca7.png
--------------------------------------------------------------------------------
/public/images/category/ca8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca8.png
--------------------------------------------------------------------------------
/public/images/category/ca9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/category/ca9.png
--------------------------------------------------------------------------------
/public/images/product/product1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product1.jpg
--------------------------------------------------------------------------------
/public/images/product/product10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product10.png
--------------------------------------------------------------------------------
/public/images/product/product11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product11.png
--------------------------------------------------------------------------------
/public/images/product/product12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product12.jpg
--------------------------------------------------------------------------------
/public/images/product/product13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product13.jpg
--------------------------------------------------------------------------------
/public/images/product/product14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product14.png
--------------------------------------------------------------------------------
/public/images/product/product15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product15.png
--------------------------------------------------------------------------------
/public/images/product/product16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product16.png
--------------------------------------------------------------------------------
/public/images/product/product17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product17.png
--------------------------------------------------------------------------------
/public/images/product/product18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product18.png
--------------------------------------------------------------------------------
/public/images/product/product19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product19.png
--------------------------------------------------------------------------------
/public/images/product/product2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product2.jpg
--------------------------------------------------------------------------------
/public/images/product/product20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product20.png
--------------------------------------------------------------------------------
/public/images/product/product21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product21.jpg
--------------------------------------------------------------------------------
/public/images/product/product22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product22.png
--------------------------------------------------------------------------------
/public/images/product/product23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product23.jpg
--------------------------------------------------------------------------------
/public/images/product/product24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product24.png
--------------------------------------------------------------------------------
/public/images/product/product3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product3.jpg
--------------------------------------------------------------------------------
/public/images/product/product3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product3.png
--------------------------------------------------------------------------------
/public/images/product/product4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product4.jpg
--------------------------------------------------------------------------------
/public/images/product/product5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product5.png
--------------------------------------------------------------------------------
/public/images/product/product6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product6.jpg
--------------------------------------------------------------------------------
/public/images/product/product7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product7.jpg
--------------------------------------------------------------------------------
/public/images/product/product7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product7.png
--------------------------------------------------------------------------------
/public/images/product/product8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product8.png
--------------------------------------------------------------------------------
/public/images/product/product9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/product/product9.png
--------------------------------------------------------------------------------
/public/images/slide/slide1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/slide/slide1.png
--------------------------------------------------------------------------------
/public/images/slide/slide2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/slide/slide2.png
--------------------------------------------------------------------------------
/public/images/slide/slide3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/slide/slide3.png
--------------------------------------------------------------------------------
/public/images/slide/slide4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/public/images/slide/slide4.png
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Cartsy Medicine - Ecommerce Site
12 |
13 |
14 | You need to enable JavaScript to run this app.
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
3 | import { Footer } from "./components/footer/Footer"
4 | import { Header } from "./components/header/Header"
5 | import { Account } from "./pages/account/Account"
6 | import { Home } from "./pages/home/Home"
7 | import { Login } from "./pages/login/Login"
8 | import { Regsiter } from "./pages/login/Regsiter"
9 | import { useSelector } from "react-redux"
10 |
11 | const App = () => {
12 | const isLoggIn = useSelector((state) => state.auth.isLoggIn)
13 | const cartItems = useSelector((state) => state.cart.itemsList)
14 | console.log(cartItems)
15 | return (
16 | <>
17 | {isLoggIn && (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | )}
28 | {!isLoggIn && }
29 | >
30 | )
31 | }
32 | export default App
33 |
--------------------------------------------------------------------------------
/src/assets/data/data.js:
--------------------------------------------------------------------------------
1 | export const slide = [
2 | {
3 | image: "../images/slide/slide1.png",
4 | },
5 | { image: "../images/slide/slide2.png" },
6 | { image: "../images/slide/slide3.png" },
7 | { image: "../images/slide/slide4.png" },
8 | ]
9 | export const order = [
10 | {
11 | id: 1,
12 | title: "Your Order",
13 | desc: "There are many variations of passages of Lorem Ipsum available",
14 | },
15 | {
16 | id: 2,
17 | title: "Ready Your Order",
18 | desc: "There are many variations of passages of Lorem Ipsum available",
19 | },
20 | {
21 | id: 3,
22 | title: "Packing Your Order",
23 | desc: "There are many variations of passages of Lorem Ipsum available",
24 | },
25 | {
26 | id: 4,
27 | title: "And Deliver",
28 | desc: "There are many variations of passages of Lorem Ipsum available",
29 | },
30 | ]
31 | export const category = [
32 | {
33 | id: 1,
34 | title: "face & skin care",
35 | cover: "../images/category/ca1.png",
36 | },
37 | {
38 | id: 2,
39 | title: "baby care",
40 | cover: "../images/category/ca2.png",
41 | },
42 | {
43 | id: 3,
44 | title: "beauty care",
45 | cover: "../images/category/ca3.png",
46 | },
47 | {
48 | id: 4,
49 | title: "contraceptive",
50 | cover: "../images/category/ca4.png",
51 | },
52 | {
53 | id: 5,
54 | title: "feminine hygiene",
55 | cover: "../images/category/ca5.png",
56 | },
57 | {
58 | id: 6,
59 | title: "health & protein",
60 | cover: "../images/category/ca6.png",
61 | },
62 | {
63 | id: 7,
64 | title: "health & wellness",
65 | cover: "../images/category/ca7.png",
66 | },
67 | {
68 | id: 8,
69 | title: "medicine & first aid",
70 | cover: "../images/category/ca8.png",
71 | },
72 | {
73 | id: 9,
74 | title: "oral care",
75 | cover: "../images/category/ca9.png",
76 | },
77 | {
78 | id: 10,
79 | title: "pregnacy",
80 | cover: "../images/category/ca10.png",
81 | },
82 | {
83 | id: 11,
84 | title: "sexual well-being",
85 | cover: "../images/category/ca11.png",
86 | },
87 | {
88 | id: 12,
89 | title: "Household",
90 | cover: "../images/category/ca12.jpg",
91 | },
92 | ]
93 | export const product = [
94 | {
95 | id: 1,
96 | name: "ACM Sebionex Hydra",
97 | price: 3.0,
98 | qty: 1,
99 | category: "face & skin care",
100 | cover: "../images/product/product1.jpg",
101 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
102 | },
103 | {
104 | id: 2,
105 | name: "Acne Free Blackhead Removing Scrub",
106 | price: 4.99,
107 | qty: 1,
108 | category: "beauty care",
109 | cover: "../images/product/product2.jpg",
110 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
111 | },
112 | {
113 | id: 3,
114 | name: "Adori Energizer",
115 | price: 40.0,
116 | qty: 1,
117 | category: "Pregnancy",
118 | cover: "../images/product/product3.jpg",
119 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
120 | },
121 | {
122 | id: 4,
123 | name: "Agnesia Natural Feminine Hygiene Wash",
124 | price: 15.0,
125 | qty: 1,
126 | category: "Feminine Hygiene",
127 | cover: "../images/product/product4.jpg",
128 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
129 | },
130 | {
131 | id: 5,
132 | name: "Betadine Feminine Wash",
133 | price: 18.0,
134 | qty: 1,
135 | category: "Feminine Hygiene",
136 | cover: "../images/product/product5.png",
137 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
138 | },
139 | {
140 | id: 6,
141 | name: "Better Man Bladder Control",
142 | price: 10.0,
143 | qty: 1,
144 | category: "Sexual Well-Being",
145 | cover: "../images/product/product6.jpg",
146 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
147 | },
148 | {
149 | id: 7,
150 | name: "Biore Baking Soda Acne Scrub",
151 | price: 6.99,
152 | qty: 1,
153 | category: "Beauty Care",
154 | cover: "../images/product/product7.jpg",
155 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
156 | },
157 | {
158 | id: 8,
159 | name: "CBD Hemp Extract",
160 | price: 89.95,
161 | qty: 1,
162 | category: "Oral Care",
163 | cover: "../images/product/product8.png",
164 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
165 | },
166 | {
167 | id: 9,
168 | name: "Dial Spring Water Body Wash",
169 | price: 8.0,
170 | qty: 1,
171 | category: "Household",
172 | cover: "../images/product/product9.png",
173 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
174 | },
175 | {
176 | id: 10,
177 | name: "Durex – Extra Sensitive Condoms",
178 | price: 2.0,
179 | qty: 1,
180 | category: "Sexual Well-Being",
181 | cover: "../images/product/product10.png",
182 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
183 | },
184 | {
185 | id: 11,
186 | name: "Ecover Rinse Aid",
187 | price: 4.0,
188 | qty: 1,
189 | category: "Household",
190 | cover: "../images/product/product11.png",
191 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
192 | },
193 | {
194 | id: 12,
195 | name: "First Aid Bag",
196 | price: 50.0,
197 | qty: 1,
198 | category: "Medicine & First Aid",
199 | cover: "../images/product/product12.jpg",
200 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
201 | },
202 | {
203 | id: 13,
204 | name: "First Aid Box",
205 | price: 15.0,
206 | qty: 1,
207 | category: "Medicine & First Aid",
208 | cover: "../images/product/product13.jpg",
209 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
210 | },
211 | {
212 | id: 14,
213 | name: "First Response Multivitamin Gummy",
214 | price: 9.99,
215 | qty: 1,
216 | category: "Contraceptive",
217 | cover: "../images/product/product14.png",
218 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
219 | },
220 | {
221 | id: 15,
222 | name: "Himalaya For Moms",
223 | price: 8.0,
224 | qty: 1,
225 | category: "Pregnancy",
226 | cover: "../images/product/product15.png",
227 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
228 | },
229 | {
230 | id: 16,
231 | name: "Huggies Wonder Pants – 56Pcs",
232 | price: 27.0,
233 | qty: 1,
234 | category: "Baby Care",
235 | cover: "../images/product/product16.png",
236 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
237 | },
238 | {
239 | id: 17,
240 | name: "I-Pill Emergency Contraceptive Pill",
241 | price: 2.99,
242 | qty: 1,
243 | category: "Contraceptive",
244 | cover: "../images/product/product17.png",
245 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
246 | },
247 | {
248 | id: 18,
249 | name: "Innermost The Recover Capsules",
250 | price: 15.95,
251 | qty: 1,
252 | category: "Medicine & First Aid",
253 | cover: "../images/product/product18.png",
254 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
255 | },
256 | {
257 | id: 19,
258 | name: "Innermost The Tone Capsules",
259 | price: 15.0,
260 | qty: 1,
261 | category: "Medicine & First Aid",
262 | cover: "../images/product/product19.png",
263 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
264 | },
265 | {
266 | id: 20,
267 | name: "Johnson’s Baby Bath",
268 | price: 25.0,
269 | qty: 1,
270 | category: "Baby Care",
271 | cover: "../images/product/product20.png",
272 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
273 | },
274 | {
275 | id: 21,
276 | name: "Jolly Care",
277 | price: 15.0,
278 | qty: 1,
279 | category: "Feminine Hygiene",
280 | cover: "../images/product/product21.jpg",
281 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
282 | },
283 | {
284 | id: 22,
285 | name: "Kodomo Baby Bath",
286 | price: 15.0,
287 | qty: 1,
288 | category: "Baby Care",
289 | cover: "../images/product/product22.png",
290 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
291 | },
292 | {
293 | id: 23,
294 | name: "La Roche-Posay Hydraphase Intense Masque",
295 | price: 12.0,
296 | qty: 1,
297 | category: "Beauty Care",
298 | cover: "../images/product/product23.jpg",
299 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
300 | },
301 | {
302 | id: 24,
303 | name: "Liposomal D Supreme",
304 | price: 15.0,
305 | qty: 1,
306 | category: "Medicine & First Aid",
307 | cover: "../images/product/product24.png",
308 | desc: "The term cleanser refers to a product that cleans or removes dirt or other substances. A cleanser could be a detergent, and there are many types of cleansers that are produced with a specific objective or focus.",
309 | },
310 | ]
311 |
--------------------------------------------------------------------------------
/src/assets/images/Medicine.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/assets/images/input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/src/assets/images/input.png
--------------------------------------------------------------------------------
/src/assets/images/my-account.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/src/assets/images/my-account.jpg
--------------------------------------------------------------------------------
/src/assets/images/not-found-alt.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/assets/images/product1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/src/assets/images/product1.jpg
--------------------------------------------------------------------------------
/src/assets/images/product2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Ecommerce-Site-Using-Redux-Toolkit/7560bed1d5acaf93a308e78f7922ae5d05320c0e/src/assets/images/product2.jpg
--------------------------------------------------------------------------------
/src/components/category/Category.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./category.css"
3 | import { GrFormPrevious } from "react-icons/gr"
4 | import { MdNavigateNext } from "react-icons/md"
5 | import "slick-carousel/slick/slick.css"
6 | import "slick-carousel/slick/slick-theme.css"
7 | import { category } from "../../assets/data/data"
8 | import Slider from "react-slick"
9 |
10 | function SampleNextArrow(props) {
11 | const { onClick } = props
12 | return (
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
21 | function SamplePrevArrow(props) {
22 | const { onClick } = props
23 | return (
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | export const Category = () => {
33 | var settings = {
34 | dots: false,
35 | infinite: true,
36 | speed: 500,
37 | slidesToShow: 7,
38 | slidesToScroll: 2,
39 | nextArrow: ,
40 | prevArrow: ,
41 | responsive: [
42 | {
43 | breakpoint: 800,
44 | settings: {
45 | slidesToShow: 4,
46 | slidesToScroll: 2,
47 | },
48 | },
49 | ],
50 | }
51 | return (
52 | <>
53 |
54 |
55 |
56 | {category.map((item) => (
57 |
58 |
59 |
60 |
{item.title}
61 |
62 |
63 | ))}
64 |
65 |
66 |
67 | >
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/category/category.css:
--------------------------------------------------------------------------------
1 | .category {
2 | margin-top: 50px;
3 | position: relative;
4 | }
5 | .category .box {
6 | border-radius: 0;
7 | text-align: center;
8 | }
9 | .category p {
10 | text-transform: capitalize;
11 | font-size: 14px;
12 | font-weight: 600;
13 | }
14 | .category img {
15 | margin: auto;
16 | }
17 | .category .box {
18 | margin: 5px;
19 | cursor: pointer;
20 | }
21 | /*---------------control-btn-------------*/
22 | .control-btn button {
23 | background: white;
24 | width: 30px;
25 | height: 30px;
26 | border-radius: 50%;
27 | cursor: pointer;
28 | box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | transition: 0.5s;
33 | padding: 2px;
34 | }
35 |
36 | .control-btn .next {
37 | position: absolute;
38 | top: 40%;
39 | right: -20px;
40 | }
41 |
42 | .control-btn .prev {
43 | position: absolute;
44 | top: 40%;
45 | left: -20px;
46 | z-index: 99;
47 | }
48 | .control-btn .icon {
49 | font-size: 25px;
50 | }
51 | /*---------------control-btn-------------*/
52 |
--------------------------------------------------------------------------------
/src/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { AiFillTwitterCircle, AiFillLinkedin } from "react-icons/ai"
3 | import { BsFacebook } from "react-icons/bs"
4 | import { RiInstagramFill } from "react-icons/ri"
5 |
6 | export const Footer = () => {
7 | return (
8 | <>
9 |
20 | >
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/header/Card.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import { BiShoppingBag } from "react-icons/bi"
3 | import { AiOutlineClose } from "react-icons/ai"
4 | import { product } from "../../assets/data/data"
5 | import { CartItems } from "./CartItems"
6 | import { useSelector } from "react-redux"
7 |
8 | export const Card = () => {
9 | const [cardOpen, setCardOpen] = useState(false)
10 | const closeCard = () => {
11 | setCardOpen(null)
12 | }
13 |
14 | const quantity = useSelector((state) => state.cart.totalQuantity)
15 | const cartItems = useSelector((state) => state.cart.itemsList)
16 |
17 | //total
18 | let total = 0
19 | const itemsLists = useSelector((state) => state.cart.itemsList)
20 | itemsLists.forEach((item) => {
21 | total += item.totalPrice
22 | })
23 |
24 | return (
25 | <>
26 | setCardOpen(!cardOpen)}>
27 |
28 | {quantity}
29 |
30 |
31 |
32 |
33 |
34 |
Shopping Cart
35 |
36 |
37 |
38 |
39 | {cartItems.map((item) => (
40 |
41 | ))}
42 |
43 |
44 |
45 | Priceed To Checkout
46 | ${total}
47 |
48 |
49 |
50 | >
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/header/CartItems.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { AiOutlineClose, AiOutlinePlus, AiOutlineMinus } from "react-icons/ai"
3 | import { useDispatch } from "react-redux"
4 | import { cartActions } from "../../store/cartSlice"
5 |
6 | export const CartItems = ({ id, cover, name, price, quantity, totalPrice }) => {
7 | const dispatch = useDispatch()
8 |
9 | const incCartitems = () => {
10 | dispatch(cartActions.addToCart({ id, name, price }))
11 | }
12 | const descCartitems = () => {
13 | dispatch(cartActions.removeFromCart(id))
14 | }
15 | return (
16 | <>
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
{name}
27 |
Unit Price ${price}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
1{quantity}
35 |
36 |
37 |
38 |
39 |
${totalPrice}
40 |
41 |
42 |
43 |
44 | >
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import Medicine from "../../assets/images/Medicine.svg"
3 | import "./header.css"
4 | import { AiOutlineSearch } from "react-icons/ai"
5 | import { Card } from "./Card"
6 | import { User } from "./User"
7 | import { Link } from "react-router-dom"
8 |
9 | export const Header = () => {
10 | window.addEventListener("scroll", function () {
11 | const header = this.document.querySelector(".header")
12 | header.classList.toggle("active", this.window.scrollY > 100)
13 | })
14 | window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" })
15 |
16 | return (
17 | <>
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | >
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/header/User.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import { IoSettingsOutline } from "react-icons/io5"
3 | import { BsBagCheck } from "react-icons/bs"
4 | import { AiOutlineHeart } from "react-icons/ai"
5 | import { GrHelp } from "react-icons/gr"
6 | import { BiLogOut } from "react-icons/bi"
7 | import { Link } from "react-router-dom"
8 | import { useDispatch } from "react-redux"
9 | import { authActions } from "../../store/authSlice"
10 |
11 | export const User = () => {
12 | const user = true
13 | const [profileOpen, setProfileOpen] = useState(false)
14 |
15 | const close = () => {
16 | setProfileOpen(null)
17 | }
18 |
19 | const dispatch = useDispatch()
20 | const logoutHandler = (e) => {
21 | dispatch(authActions.logout())
22 | }
23 | return (
24 | <>
25 |
26 | {user ? (
27 | <>
28 |
setProfileOpen(!profileOpen)}>
29 |
30 |
31 |
32 | {profileOpen && (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Eden Smith
42 | Los Angeles,CA
43 |
44 |
45 |
46 |
47 |
48 | My Account
49 |
50 |
51 |
52 |
53 | My Order
54 |
55 |
56 |
57 | Wishlist
58 |
59 |
60 |
61 | Help
62 |
63 |
64 |
65 | Log Out
66 |
67 |
68 | )}
69 | >
70 | ) : (
71 |
My Account
72 | )}
73 |
74 | >
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/header/header.css:
--------------------------------------------------------------------------------
1 | header {
2 | background: #fff;
3 | padding: 20px;
4 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
5 | position: relative;
6 | z-index: 44;
7 | }
8 | .search {
9 | border: 2px solid #212121;
10 | border-radius: 6px;
11 | font-size: 15px;
12 | padding: 0 20px;
13 | width: 600px;
14 | }
15 | .searchIcon {
16 | font-size: 22px;
17 | margin-right: 15px;
18 | }
19 | .search input {
20 | padding: 15px;
21 | width: 100%;
22 | font-size: 17px;
23 | }
24 | .card {
25 | position: relative;
26 | cursor: pointer;
27 | }
28 | .cardIcon {
29 | font-size: 25px;
30 | }
31 | .card span {
32 | position: absolute;
33 | top: -10px;
34 | right: -10px;
35 | width: 18px;
36 | height: 18px;
37 | background-color: #000;
38 | color: #fff;
39 | font-size: 10px;
40 | border-radius: 50%;
41 | }
42 |
43 | /* card item */
44 | .overlay {
45 | position: fixed;
46 | top: 0;
47 | left: 0;
48 | width: 90vw;
49 | height: 100vh;
50 | background-color: rgba(0, 0, 0, 0.4);
51 | z-index: 77;
52 | }
53 | .cartItem {
54 | position: fixed;
55 | top: 0;
56 | right: 0;
57 | width: 450px;
58 | height: 100vh;
59 | padding: 20px;
60 | background: #fff;
61 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
62 | z-index: 88;
63 | }
64 | .cardhide {
65 | display: none;
66 | }
67 | .cartItem .title .icon {
68 | font-size: 25px;
69 | }
70 | .emptyCard {
71 | text-align: center;
72 | }
73 | .emptyCard img {
74 | width: 70%;
75 | margin: auto;
76 | margin-bottom: 20px;
77 | }
78 |
79 | .checkOut {
80 | position: absolute;
81 | bottom: 0;
82 | left: 0;
83 | margin: 30px;
84 | width: 88%;
85 | }
86 | .checkOut button {
87 | padding: 20px;
88 | background: #212121;
89 | width: 100%;
90 | color: #fff;
91 | border-radius: 10px;
92 | font-size: 17px;
93 | }
94 | .checkOut button:disabled {
95 | background: #7a7a7a;
96 | cursor: none;
97 | }
98 | .checkOut button span {
99 | margin-right: 80px;
100 | }
101 | .checkOut button label {
102 | border-left: 1px solid #fff;
103 | padding-left: 10px;
104 | }
105 |
106 | /* cartContent */
107 | .cartContent {
108 | margin: 40px 0;
109 | display: flex;
110 | }
111 | .cartContent .img {
112 | width: 105px;
113 | height: 105px;
114 | border-radius: 5px;
115 | position: relative;
116 | margin-right: 20px;
117 | }
118 | .cartContent .img::after {
119 | content: "";
120 | position: absolute;
121 | top: 0;
122 | left: 0;
123 | width: 105px;
124 | height: 105px;
125 | background: rgba(0, 0, 0, 0.3);
126 | border-radius: 10px;
127 | opacity: 0;
128 | transition: 0.5s;
129 | }
130 |
131 | .cartContent .remove {
132 | position: absolute;
133 | top: 40%;
134 | left: 40%;
135 | font-size: 17px;
136 | width: 25px;
137 | height: 25px;
138 | border-radius: 50%;
139 | background: #fff;
140 | z-index: 1;
141 | cursor: pointer;
142 | opacity: 0;
143 | transition: 0.5s;
144 | }
145 | .cartContent:hover .img::after,
146 | .cartContent:hover .remove {
147 | opacity: 1;
148 | cursor: pointer;
149 | }
150 | .cartContent img {
151 | width: 100%;
152 | height: 100%;
153 | }
154 | .cartContent .details label {
155 | display: block;
156 | margin: 10px 0;
157 | }
158 | .cartContent .details .qty {
159 | background-color: #212121;
160 | border-radius: 5px;
161 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
162 | }
163 |
164 | .cartContent .details button {
165 | height: 35px;
166 | width: 35px;
167 | background-color: #212121;
168 | color: #fff;
169 | transition: 0.5s;
170 | }
171 | .cartContent .price {
172 | margin-top: 10px;
173 | display: flex;
174 | justify-content: space-between;
175 | }
176 | .cartContent .price .num {
177 | font-size: 17px;
178 | }
179 | .plus {
180 | border-radius: 5px 0 0 5px;
181 | }
182 | .minus {
183 | border-radius: 0 5px 5px 0;
184 | }
185 | .cartContent .details .minus:hover,
186 | .cartContent .details .plus:hover {
187 | background-color: rgba(255, 255, 255, 0.2);
188 | }
189 | .cartContent .price .priceTitle {
190 | font-size: 15px;
191 | }
192 |
193 | /* User */
194 |
195 | .profile {
196 | margin-left: 30px;
197 | cursor: pointer;
198 | }
199 | .profile .image {
200 | display: flex;
201 | padding-bottom: 20px;
202 | }
203 | .profile .image img {
204 | margin-right: 20px;
205 | }
206 | .profile button {
207 | font-size: 17px;
208 | font-weight: 500;
209 | }
210 | .profile img {
211 | width: 40px;
212 | height: 40px;
213 | border-radius: 50%;
214 | object-fit: cover;
215 | }
216 | .openProfile {
217 | color: #000;
218 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
219 | position: absolute;
220 | top: 80px;
221 | right: 10px;
222 | width: 250px;
223 | background: #fff;
224 | }
225 | .openProfile .box {
226 | display: flex;
227 | align-items: center;
228 | width: 100%;
229 | margin-top: 10px;
230 | padding: 5px;
231 | transition: 0.5s;
232 | }
233 | .openProfile .icon {
234 | font-size: 20px;
235 | margin-right: 20px;
236 | }
237 | .openProfile h4 {
238 | font-size: 15px;
239 | font-weight: 500;
240 | }
241 | .openProfile button:hover {
242 | background: rgba(147, 75, 255, 0.075);
243 | }
244 | header.active {
245 | position: sticky;
246 | top: 0;
247 | left: 0;
248 | width: 100%;
249 | box-shadow: 0 0 4px 0 rgb(115 115 115 / 20%);
250 | z-index: 9999;
251 | background: #fff;
252 | }
253 | @media screen and (max-width: 768px) {
254 | header .search {
255 | display: none;
256 | }
257 | }
258 | .profile a {
259 | text-decoration: none;
260 | }
261 |
--------------------------------------------------------------------------------
/src/components/hero/Order.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { order } from "../../assets/data/data"
3 | import "./slider.css"
4 |
5 | export const Order = () => {
6 | return (
7 | <>
8 |
9 |
10 | {order.map((item) => (
11 |
12 |
13 |
{item.id}
14 |
15 |
16 |
{item.title}
17 |
{item.desc}
18 |
19 |
20 | ))}
21 |
22 |
23 | >
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/hero/Slider.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./slider.css"
3 | import { slide } from "../../assets/data/data"
4 |
5 | export const Slider = () => {
6 | return (
7 | <>
8 |
9 |
10 | {slide.map((item, i) => (
11 |
12 |
13 |
14 |
15 |
16 | ))}
17 |
18 |
19 | >
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/hero/slider.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | margin-top: 50px;
3 | }
4 | .slider img {
5 | width: 100%;
6 | }
7 |
8 | /* order */
9 | .order {
10 | margin-top: 50px;
11 | }
12 | .order .container {
13 | padding: 50px 30px;
14 | background: #fff;
15 | }
16 | .order .num h1 {
17 | width: 70px;
18 | height: 70px;
19 | line-height: 70px;
20 | border-radius: 50%;
21 | background: #feeec8;
22 | text-align: center;
23 | margin-right: 20px;
24 | }
25 | .order h3 {
26 | font-weight: 600;
27 | margin-bottom: 10px;
28 | }
29 | .order p {
30 | font-size: 17px;
31 | line-height: 25px;
32 | }
33 | .order .box:nth-child(2) h1 {
34 | background: #ceeffe;
35 | }
36 | .order .box:nth-child(3) h1 {
37 | background: #d4f8c4;
38 | }
39 | .order .box:nth-child(4) h1 {
40 | background: #d8dafe;
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/product/Product.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { product } from "../../assets/data/data"
3 | import "./product.css"
4 | import { ProductCart } from "./ProductCart"
5 |
6 | export const Product = () => {
7 | return (
8 | <>
9 |
10 |
11 | {product.map((item) => (
12 |
13 | ))}
14 |
15 |
16 | >
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/product/ProductCart.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { AiOutlinePlusCircle } from "react-icons/ai"
3 | import { Link } from "react-router-dom"
4 | import { useDispatch } from "react-redux"
5 | import { cartActions } from "../../store/cartSlice"
6 |
7 | export const ProductCart = ({ key, id, cover, name, price }) => {
8 | const dispatch = useDispatch()
9 | const addToCart = () => {
10 | dispatch(cartActions.addToCart({ id, name, price, cover }))
11 | }
12 | return (
13 | <>
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
${price}
22 |
{name}
23 |
24 |
25 |
26 |
27 |
28 | >
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/product/product.css:
--------------------------------------------------------------------------------
1 | .product {
2 | margin-top: 50px;
3 | }
4 | .product .boxItems {
5 | transition: 0.5s;
6 | display: flex;
7 | }
8 | .product .boxItems:hover {
9 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
10 | cursor: pointer;
11 | transform: translateY(-5px);
12 | }
13 | .product img {
14 | width: 105px;
15 | height: 105px;
16 | object-fit: cover;
17 | margin-right: 20px;
18 | }
19 | .product .details {
20 | width: 100%;
21 | }
22 | .product .details h3 {
23 | font-size: 17px;
24 | }
25 | .product .details p {
26 | margin: 10px 0;
27 | }
28 | .product button {
29 | font-size: 25px;
30 | margin-top: 15px;
31 | float: right;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/scrollTop/ScrollTop.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react"
2 | import { useLocation } from "react-router-dom"
3 |
4 | export default function ScrollToTop() {
5 | const { pathname } = useLocation()
6 |
7 | useEffect(() => {
8 | window.scrollTo(0, 0)
9 | }, [pathname])
10 |
11 | return null
12 | }
13 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Passions+Conflict&display=swap");
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | }
7 | body {
8 | font-family: "Poppins", sans-serif;
9 | background-color: #f9f9f9;
10 | color: #000;
11 | }
12 | h1,
13 | h2 {
14 | font-weight: 600;
15 | }
16 | h3 {
17 | font-weight: 500;
18 | }
19 | button,
20 | input {
21 | border: none;
22 | background: none;
23 | outline: none;
24 | cursor: pointer;
25 | }
26 | ::placeholder {
27 | font-size: 17px;
28 | }
29 | .flex {
30 | display: flex;
31 | justify-content: space-between;
32 | align-items: center;
33 | }
34 | .flexCenter {
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | }
39 | p {
40 | color: #5a5a5a;
41 | font-size: 15px;
42 | }
43 | label {
44 | color: #999;
45 | font-size: 13px;
46 | }
47 | form,
48 | .boxItems {
49 | border: 1px solid #e6e6e6;
50 | border-radius: 12px;
51 | padding: 20px;
52 | background: #fff;
53 | }
54 | form {
55 | display: flex;
56 | flex-direction: column;
57 | width: 50%;
58 | margin: auto;
59 | margin-top: 80px;
60 | padding: 40px;
61 | }
62 | form span {
63 | margin-bottom: 20px;
64 | }
65 | .accountInfo .right input,
66 | form input {
67 | border: 1px solid #212121;
68 | border-radius: 6px;
69 | color: #212121;
70 | font-size: 15px;
71 | min-height: 44px;
72 | padding: 0 20px;
73 | transition: border-color 0.2s ease;
74 | width: 100%;
75 | margin-bottom: 30px;
76 | }
77 | .button {
78 | background: #212121;
79 | border: 1px solid;
80 | border-color: #212121;
81 | border-radius: 6px;
82 | color: #fff;
83 | cursor: pointer;
84 | font-weight: 400;
85 | height: 48px;
86 | line-height: 1;
87 | padding: 15px 28px;
88 | }
89 | .grid {
90 | display: grid;
91 | grid-template-columns: repeat(4, 1fr);
92 | grid-gap: 20px;
93 | }
94 | .grid3 {
95 | display: grid;
96 | grid-template-columns: repeat(3, 1fr);
97 | grid-gap: 15px;
98 | }
99 | .container {
100 | max-width: 95%;
101 | margin: auto;
102 | }
103 | footer {
104 | margin-top: 50px;
105 | padding: 10px;
106 | }
107 | footer .icon {
108 | font-size: 20px;
109 | margin-left: 10px;
110 | }
111 | @media screen and (max-width: 768px) {
112 | .grid3,
113 | .grid {
114 | grid-template-columns: repeat(2, 1fr);
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom/client"
3 | import App from "./App"
4 | import "./index.css"
5 | import { Provider } from "react-redux"
6 | import store from "./store"
7 |
8 | const root = ReactDOM.createRoot(document.getElementById("root"))
9 | root.render(
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
--------------------------------------------------------------------------------
/src/pages/account/Account.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import image from "../../assets/images/input.png"
3 | import "./account.css"
4 |
5 | export const Account = () => {
6 | return (
7 | <>
8 |
9 |
10 |
Account Information
11 |
28 |
29 |
30 | >
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/account/account.css:
--------------------------------------------------------------------------------
1 | .accountInfo {
2 | margin-top: 50px;
3 | }
4 | .accountInfo .container {
5 | padding: 50px;
6 | max-width: 60%;
7 | margin: auto;
8 | }
9 | .accountInfo .content {
10 | margin-top: 80px;
11 | display: flex;
12 | justify-content: flex-start;
13 | }
14 | .accountInfo .left {
15 | width: 150px;
16 | position: relative;
17 | }
18 | .accountInfo .right {
19 | width: calc(100% - 180px);
20 | margin-left: 50px;
21 | }
22 |
23 | .accountInfo .left .img input {
24 | width: 150px;
25 | height: 150px;
26 | position: relative;
27 | z-index: 2;
28 | opacity: 0;
29 | }
30 | .accountInfo .img img {
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | width: 150px;
35 | height: 150px;
36 | z-index: 1;
37 | border-radius: 50%;
38 | }
39 |
40 | .accountInfo .right label {
41 | font-size: 17px;
42 | color: #000;
43 | margin-bottom: 10px;
44 | display: block;
45 | }
46 |
--------------------------------------------------------------------------------
/src/pages/details/DetailsPages.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import "./details.css"
3 | import { AiOutlinePlus, AiOutlineMinus, AiOutlineHeart } from "react-icons/ai"
4 |
5 | export const DetailsPages = () => {
6 | return (
7 | <>
8 | DetailsPages
9 | >
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/pages/details/details.css:
--------------------------------------------------------------------------------
1 | .singlePage {
2 | padding: 80px 0;
3 | background: #fff;
4 | }
5 | .singlePage .container {
6 | display: flex;
7 | }
8 | .singlePage .right,
9 | .singlePage .left {
10 | width: 50%;
11 | }
12 | .singlePage img {
13 | width: 100%;
14 | height: 100%;
15 | }
16 | .singlePage .right {
17 | margin-left: 50px;
18 | }
19 | .singlePage h1 {
20 | font-size: 30px;
21 | font-weight: 500;
22 | }
23 | .singlePage h3 {
24 | margin: 20px 0;
25 | }
26 | .singlePage p {
27 | margin: 20px 0;
28 | font-size: 17px;
29 | line-height: 1.5;
30 | }
31 | .singlePage .cartContent .details .qty {
32 | height: 50px;
33 | }
34 |
35 | .singlePage .add button {
36 | margin-left: 20px;
37 | margin-top: 10px;
38 | }
39 | .singlePage .icon {
40 | font-size: 20px;
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Category } from "../../components/category/Category"
3 | import { Order } from "../../components/hero/Order"
4 | import { Slider } from "../../components/hero/Slider"
5 | import { Product } from "../../components/product/Product"
6 |
7 | export const Home = () => {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 | >
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/src/pages/login/Login.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./login.css"
3 | import back from "../../assets/images/my-account.jpg"
4 | import { useDispatch } from "react-redux"
5 | import { authActions } from "../../store/authSlice"
6 |
7 | export const Login = () => {
8 | const dispatch = useDispatch()
9 | const handleSubmit = (e) => {
10 | e.preventDefault()
11 | dispatch(authActions.login())
12 | }
13 | return (
14 | <>
15 |
16 |
17 |
18 |
19 |
20 |
Login
21 | My ACcount
22 |
23 |
24 |
25 |
32 |
33 |
34 | >
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/login/Regsiter.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./login.css"
3 | import back from "../../assets/images/my-account.jpg"
4 | import { Link } from "react-router-dom"
5 |
6 | export const Regsiter = () => {
7 | return (
8 | <>
9 |
10 |
11 |
12 |
13 |
14 |
Register
15 | My ACcount
16 |
17 |
18 |
19 |
30 |
31 |
32 | >
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/login/login.css:
--------------------------------------------------------------------------------
1 | .login {
2 | position: relative;
3 | margin-bottom: 50px;
4 | }
5 | .login .backImg {
6 | width: 100%;
7 | height: 50vh;
8 | position: relative;
9 | }
10 | .login .backImg img {
11 | width: 100%;
12 | height: 50vh;
13 | object-fit: cover;
14 | }
15 | .login .text {
16 | position: absolute;
17 | top: 40%;
18 | left: 50%;
19 | z-index: 1;
20 | text-align: center;
21 | color: #fff;
22 | }
23 | .login .text h3 {
24 | font-weight: 600;
25 | margin-bottom: 10px;
26 | }
27 | .login .text h1 {
28 | font-size: 40px;
29 | }
30 | .login a {
31 | margin-top: 20px;
32 | text-decoration: none;
33 | }
34 |
--------------------------------------------------------------------------------
/src/store/authSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit"
2 |
3 | const authSlice = createSlice({
4 | name: "auth",
5 | initialState: { isLoggIn: false },
6 | reducers: {
7 | login(state) {
8 | state.isLoggIn = true
9 | },
10 | logout(state) {
11 | state.isLoggIn = false
12 | },
13 | },
14 | })
15 |
16 | export const authActions = authSlice.actions
17 | export default authSlice
18 |
--------------------------------------------------------------------------------
/src/store/cartSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit"
2 |
3 | const cartSlice = createSlice({
4 | name: "cart",
5 | initialState: {
6 | itemsList: [],
7 | totalQuantity: 0,
8 | },
9 | reducers: {
10 | addToCart(state, action) {
11 | const newItem = action.payload
12 |
13 | //check item is already exits
14 | const exitsItem = state.itemsList.find((item) => item.id === newItem.id)
15 |
16 | if (exitsItem) {
17 | exitsItem.quantity++
18 | exitsItem.totalPrice += newItem.price
19 | } else {
20 | state.itemsList.push({
21 | id: newItem.id,
22 | price: newItem.price,
23 | quantity: 1,
24 | totalPrice: newItem.price,
25 | name: newItem.name,
26 | cover: newItem.cover,
27 | })
28 | state.totalQuantity++
29 | }
30 | },
31 | removeFromCart(state, action) {
32 | const id = action.payload
33 | const exitstingItem = state.itemsList.find((item) => item.id === id)
34 | if (exitstingItem.quantity === 1) {
35 | state.itemsList = state.itemsList.filter((item) => item.id !== id)
36 | state.totalQuantity--
37 | } else {
38 | exitstingItem.quantity--
39 | exitstingItem.totalPrice -= exitstingItem.price
40 | }
41 | },
42 | },
43 | })
44 |
45 | export const cartActions = cartSlice.actions
46 | export default cartSlice
47 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit"
2 | import authSlice from "./authSlice"
3 | import cartSlice from "./cartSlice"
4 |
5 | const store = configureStore({
6 | reducer: {
7 | auth: authSlice.reducer,
8 | cart: cartSlice.reducer,
9 | },
10 | })
11 |
12 | export default store
13 |
--------------------------------------------------------------------------------