21 |
25 |
26 |
22 |
24 |
27 | Wishlist
28 |
29 |
30 | -
31 | {wishlist.map((item, index) => (
32 |
-
33 | 34 |40 |
35 |
36 | {item.title} 37 | 1 X ${item.price} 38 |39 |41 |43 |42 |
44 | ))}
45 |
48 | VIEW WISHLIST
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
56 | export default WishlistPanel
57 |
--------------------------------------------------------------------------------
/frontend/src/pages/Wishlist/Wishlist.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: "Open Sans", sans-serif;
6 | }
7 | body, html{
8 | height: 100%;
9 | width: 100%;
10 | }
11 | .master-product-detail-div{
12 | height: 45vh;
13 | width: 100%;
14 | background-color:#fef5ef;
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 |
19 | }
20 | .product-detail-div{
21 | height: 50%;
22 | width: 50%;
23 | }
24 | .product-detail-title-div h3{
25 | display: flex;
26 | justify-content: center;
27 | font-size: 42px;
28 | margin-bottom: 12px;
29 | font-weight: 100;
30 | line-height: 1.2;
31 | color: #24262b;
32 |
33 | }
34 | .product-detail-text-div{
35 | display: flex;
36 | justify-content: center;
37 | font-size: 14px;
38 | color: #000000;
39 | }
40 | .product-detail-text-div span{
41 | color: #777777;
42 | }
43 | /* ....................................................................................................................... */
44 |
45 |
46 | .master-table-div{
47 | width: 84%;
48 | margin-left: 8%;
49 | margin-top: 100px;
50 | margin-bottom: 100px;
51 | }
52 | table{
53 | width: 100%;
54 | height: 100%;
55 | border: 1px solid #ededed;
56 | border-bottom: 0px;
57 | border-right: 0px;
58 | border-top: 0px;
59 | }
60 | th{
61 | display: flexs;
62 | border-right: 1px solid #ededed;
63 | height: 50px;
64 | }
65 | tr{
66 | color: #24262b;
67 | font-size: 16px;
68 | font-weight: 600;
69 | padding: 10px;
70 | text-align: center;
71 | height: 115px;
72 | }
73 | td{
74 | border-right: 1px solid #ededed;
75 | border-bottom: 1px solid #ededed;
76 | }
77 | .cart-button{
78 | margin-left: 10px;
79 | margin-right: 10px;
80 | height: 40px;
81 | width: 140px;
82 | color: #FFFFFF;
83 | background-color: #24262b;
84 | font-size: 16px;
85 | border-radius: 4px;
86 | }
87 |
88 | /* ................................................................................................... */
89 |
90 |
--------------------------------------------------------------------------------
/frontend/src/components/Footer/Footer.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Open Sans", sans-serif;
6 | }
7 | html, body{
8 | height: 100%;
9 | width: 100%;
10 | }
11 | .master-footer{
12 | height: 87vh;
13 | width: 100%;
14 | background-color: #24262B;
15 | }
16 | .details-div{
17 | height: 54%;
18 | width: 100%;
19 | display: flex;
20 | justify-content: center;
21 | }
22 | .details{
23 | margin-top: 5%;
24 | height: 70%;
25 | width: 80%;
26 | display: flex;
27 | }
28 | .details-inside{
29 | width: 25%;
30 | height: 100%;
31 | }
32 | .details-inside h5{
33 | color: #fff;
34 | font-weight: 700;
35 | font-size: 16px;
36 | position: relative;
37 | padding-bottom: 20px;
38 | margin-bottom: 23px;
39 | }
40 | .details-inside h5 div{
41 | position: absolute;
42 | bottom: 0;
43 | color: #FFFFFF;
44 | width: 50px;
45 | height: 2px;
46 | background-color: #B19361;
47 | }
48 | .details-inside li{
49 | font-size: 14px;
50 | color: #9B9B97;
51 | list-style-type: none;
52 | margin-bottom: 12px;
53 | line-height: 1.5;
54 | }
55 | .follow-subscribe{
56 | color: #FFFFFF;
57 | margin-top: 4%;
58 | width: 100%;
59 |
60 | }
61 | .follow-subscribe-div{
62 | display: flex;
63 | width: 80%;
64 | margin-left: 10%;
65 | }
66 | .follow{
67 | width: 20%;
68 | margin-right: 30px;
69 | }
70 | .follow h5{
71 | font-size: 18px;
72 | margin-bottom: 27px;
73 | }
74 | .follow p{
75 | width: 600px;
76 | border-radius: 9px;
77 | }
78 | .follow-icon{
79 | margin-right: 5px;
80 | padding: 10px;
81 | color: white;
82 | border: 1px solid transparent;
83 | border-radius: 50%;
84 | background-color: #2F3239;
85 | font-size: 14px;
86 | width: 22px;
87 | height: 22px;
88 | display: inline-flex;
89 | align-items: center;
90 | justify-content: center;
91 | }
92 |
93 | .subscribe{
94 | width: 55%;
95 | }
96 | .subscribe h5{
97 | font-size: 18px;
98 | margin-bottom: 27px;
99 | }
100 | .subscribe input{
101 | background-color: #24262B;
102 | width: 70%;
103 | height: 48px;
104 | margin-right: -4px;
105 | border: 2px solid #9b9b97;
106 | border-bottom-left-radius: 5px;
107 | border-top-left-radius: 5px;
108 | padding: 10px 14px 10px 20px;
109 | font-size: 14px;
110 | color: rgba(255, 255, 255, .5);
111 | transition: all .5s ease;
112 | }
113 | .subscribe button{
114 | width: 20%;
115 | background: #b19361;
116 | color: #fff;
117 | height: 48px;
118 | padding-left: 10px;
119 | padding-right: 10px;
120 | border-top-right-radius: 5px;
121 | border-bottom-right-radius: 5px;
122 | border-bottom-left-radius: 0px;
123 | border-top-left-radius: 0px;
124 | font-weight: 400;
125 | letter-spacing: .5px;
126 | transition: all .5s ease;
127 | overflow: visible;
128 | border: 2px solid #9b9b97;
129 | border-radius: 5px;
130 | }
131 | .copyright-visa{
132 | width: 100%;
133 | }
134 | .copyright-visa-div{
135 | width: 70%;
136 | margin-left: 10%;
137 | margin-top: 4%;
138 | display: flex;
139 | justify-content: space-between;
140 | }
141 | .copyright{
142 | color: #777777;
143 | font-size: 14px;
144 | }
145 | .visa{
146 | color: #777777;
147 | font-size: 16px;
148 | }
--------------------------------------------------------------------------------
/frontend/src/pages/Wishlist/Wishlist.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import Navbar from '../../components/Navbar/Navbar'
3 | import Footer from '../../components/Footer/Footer'
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
5 | import { faAngleRight, faTrash } from '@fortawesome/free-solid-svg-icons'
6 | import WishlistContext from '../../context/WishlistContext/WishlistContext'
7 | import './Wishlist.css'
8 | import CartContext from "../../context/CartContext.js"
9 | import { Link } from 'react-router-dom'
10 |
11 | const WishlistPage = () => {
12 | const { cart, setCart } = useContext(CartContext);
13 | const {wishlist} = useContext(WishlistContext)
14 |
15 | const scrollToTop = () => {
16 | window.scrollTo(0, 0)
17 | }
18 |
19 |
20 | const handleDelete = () => {
21 | }
22 |
23 | const addtocart = (id, price, title, description, imgURL) => {
24 | const obj = {
25 | id, price, title, description, imgURL
26 | }
27 | setCart([...cart, obj]);
28 | alert("Your product is added to the cart")
29 | }
30 |
31 | return (
32 | <>
33 |
37 |
47 | {/* ......................................................................................................... */}
48 |
49 |
38 |
46 |
39 |
41 | WISHLIST
40 |
42 |
45 | Home
50 |
51 |
52 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | )
88 | }
89 |
90 | export default WishlistPage;
91 |
--------------------------------------------------------------------------------
/frontend/src/components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import "./Footer.css"
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { faFacebookF,faInstagram,faTwitter,faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
4 | import { faHeart } from '@fortawesome/free-solid-svg-icons'
5 |
6 | const Footer = ({footersection}) => {
7 | return (
8 | <>
9 | | Delete | 54 |Image | 55 |Product | 56 |Price | 57 |Stock Status | 58 |Total | 59 |
|---|---|---|---|---|---|
|
66 | {item.title} | 67 |${item.price} | 68 |In Stock | 69 |70 | 72 | | 73 |
10 |
92 |
93 |
94 | )
95 | }
96 |
97 | export default Footer
98 |
--------------------------------------------------------------------------------
/frontend/src/pages/Cartpage/Cartpage.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: "Open Sans", sans-serif;
6 | }
7 | body, html{
8 | height: 100%;
9 | width: 100%;
10 | }
11 | .master-product-detail-div{
12 | height: 45vh;
13 | width: 100%;
14 | background-color:#fef5ef;
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | }
19 | .product-detail-div{
20 | height: 50%;
21 | width: 50%;
22 | }
23 | .product-detail-title-div h3{
24 | display: flex;
25 | justify-content: center;
26 | font-size: 42px;
27 | margin-bottom: 12px;
28 | font-weight: 100;
29 | line-height: 1.2;
30 | color: #24262b;
31 | }
32 | .product-detail-text-div{
33 | display: flex;
34 | justify-content: center;
35 | font-size: 14px;
36 | color: #000000;
37 | }
38 | .product-detail-text-div span{
39 | color: #777777;
40 | }
41 |
42 | /* ................................................................................................... */
43 |
44 |
45 | .master-table-div{
46 | width: 84%;
47 | margin-left: 8%;
48 | margin-top: 100px;
49 | }
50 | table{
51 | width: 100%;
52 | height: 100%;
53 | border: 1px solid #ededed;
54 | border-bottom: 0px;
55 | border-right: 0px;
56 | border-top: 0px;
57 | }
58 | th{
59 | display: flexs;
60 | border-right: 1px solid #ededed;
61 | height: 50px;
62 | }
63 | tr{
64 | color: #24262b;
65 | font-size: 16px;
66 | font-weight: 600;
67 | padding: 10px;
68 | text-align: center;
69 | height: 115px;
70 | }
71 | td{
72 | border-right: 1px solid #ededed;
73 | border-bottom: 1px solid #ededed;
74 | }
75 | .update-cart{
76 | height: 60px;
77 | width: 100%;
78 | padding: 12px;
79 | display: flex;
80 | justify-content: end;
81 | border: 1px solid #ededed;
82 | border-top: 0px;
83 | }
84 | .update-cart button {
85 | font-size: 14px;
86 | background-color: #b19361;
87 | padding: 6px 12px;
88 | color: #ffffff;
89 | border: 1px solid #b19361;
90 | border-radius: 4px;
91 | }
92 |
93 | /* ................................................................................ */
94 | .coupon-total{
95 | height: 420px;
96 | width: 84%;
97 | margin-left: 8%;
98 | margin-top: 120px;
99 | margin-bottom: -30px;
100 | display: flex;
101 | gap: 30px;
102 | }
103 | .left-ct{
104 | height: 170px;
105 | width: 50%;
106 | border: 1px solid #efefef;
107 | }
108 | .left-ct h3{
109 | height: 46px;
110 | padding: 15px 15px;
111 | margin-bottom: 8px;
112 | font-size: 16px;
113 | color: #ffffff;
114 | background-color: #333333;
115 | }
116 | .coupon-enter{
117 | padding: 10px 20px 30px;
118 | }
119 | .coupon-enter p{
120 | font-size: 13px;
121 | padding-top: 5px;
122 | margin-bottom: 20px;
123 | color: #777777;
124 | }
125 | .coupon-enter input{
126 | border: 1px solid #ededed;
127 | height: 42px;
128 | margin: 0 20px 10px 0;
129 | padding: 0 20px;
130 | font-size: 12px;
131 | color: #333;
132 | width: 175px;
133 | border-radius: 2px;
134 | }
135 | .coupon-enter button{
136 | background: #b19361;
137 | height: 36px;
138 | color: #fff;
139 | font-size: 14px;
140 | font-weight: 700;
141 | border: 1px solid #b19361;
142 | padding: 6px 12px;
143 | border-radius: 4px;
144 | }
145 | .right-ct{
146 | height: 300px;
147 | width: 50%;
148 | border: 1px solid #efefef;
149 | }
150 | .right-ct h3{
151 | height: 46px;
152 | padding: 15px 15px;
153 | margin-bottom: 15px;
154 | font-size: 16px;
155 | color: #ffffff;
156 | background-color: #333333;
157 | }
158 | .coupon-inner{
159 | padding: 10px 20px 25px;
160 | color: #777777;
161 | font-size: 14px;
162 | }
163 | .cart-subtotal{
164 | display: flex;
165 | justify-content: space-between;
166 | }
167 | .cart-subtotal p{
168 | font-size: 14px;
169 | margin: 0 0 20px;
170 | color: #777777;
171 | }
172 | .coupon-inner a{
173 | text-decoration: none;
174 | display: block;
175 | text-align: right;
176 | font-size: 14px;
177 | font-weight: 500;
178 | margin-bottom: 20px;
179 | border-bottom: 1px solid #ededed;
180 | padding-bottom: 10px;
181 | border-radius: 3px;
182 | color: #777777;
183 | }
184 | .checkout-button{
185 | display: flex;
186 | justify-content: right;
187 |
188 | }
189 | .checkout-button a{
190 | font-size: 14px;
191 | color: #ffffff;
192 | background-color: #b19361;
193 | margin: 0 0 20px;
194 | padding: 8px 12px 10px;
195 | }
--------------------------------------------------------------------------------
/frontend/src/pages/Cartpage/Cartpage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import Navbar from '../../components/Navbar/Navbar'
3 | import './Cartpage.css'
4 | import Footer from '../../components/Footer/Footer'
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6 | import { faAngleRight,faTrash } from '@fortawesome/free-solid-svg-icons'
7 | import { useContext } from 'react'
8 |
9 | import CartContext from '../../context/CartContext'
10 |
11 |
12 | const Cartpage = () => {
13 | const {cart} = useContext(CartContext)
14 |
15 | const [quantity, setQuantity] = useState(1);
16 |
17 |
18 | const handleQuantity = (e) => {
19 | if(e.key === 'Enter'){
20 | const value = parseInt(e.target.value,10);
21 | if(!isNaN(value)){
22 | setQuantity(value);
23 | }
24 | }
25 | }
26 |
27 | const calculateSubtotal = () => {
28 | return cart.reduce((acc, item) => acc + parseInt(item.price), 0).toFixed(2)
29 | }
30 |
31 |
32 |
33 | const handleDelete = () => {
34 |
35 | }
36 |
37 |
38 |
39 |
40 |
41 | return (
42 | <>
43 |
44 |
11 |
62 |
12 |
61 |
13 |
24 | INFORMATION 14 | 15 |
16 | 17 |-
18 |
- Delivery Information 19 |
- Terms & Conditions 20 |
- Contact 21 |
- Returns 22 |
25 |
37 | MY ACCOUNT 26 | 27 |
28 |-
29 |
- MY Account 30 |
- My account 31 |
- Wishlist 32 |
- Privacy Policy 33 |
- Frequently Questions 34 |
- Order History 35 |
38 |
50 | CATEGORIES 39 | 40 |
41 | 42 |-
43 |
- Decorative 44 |
- Kitchen utensils 45 |
- Chair & Bar stools 46 |
- Sofas and Armchairs 47 |
- Interior lighting 48 |
51 |
60 | ABOUT US 52 | 53 |
54 | 55 |-
56 |
- We are a team of designers and developers that create high quality Magento, Prestashop, Opencart. 57 |
- Address: sector 192 Delhi Email:example@gmail.com 58 |
63 |
80 |
64 |
79 |
65 |
73 | FOLLOW US
66 |
67 |
74 |
78 | DON'T MISS OUT ON THE LATEST
75 | 76 | 77 |
81 |
91 |
82 |
90 |
83 |
85 | © 2021 THERANKME. MADE WITH
86 |
89 | Here logos of company will be present
87 | 88 |
47 |
56 | {/* ............................................................................................. */}
57 |
58 |
48 |
55 |
49 |
51 | CART
50 |
52 |
54 | Home
59 |
60 |
61 |
86 |
87 |
93 |
94 | {/* ........................................................................................................... */}
95 |
96 | | Delete | 63 |Image | 64 |Product | 65 |Price | 66 |Quantity | 67 |Total | 68 |
|---|---|---|---|---|---|
|
75 | {item.title} | 76 |${item.price} | 77 |78 | | ${item.price*quantity} 79 | 80 | | 81 |
88 |
89 |
90 |
91 |
92 |
97 |
128 |
129 |
130 |
131 |
132 |
133 | )
134 | }
135 |
136 | export default Cartpage
137 |
--------------------------------------------------------------------------------
/frontend/src/pages/ProductPage/ProductPage.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | html, body {
7 | font-family: "Open Sans", sans-serif;
8 | width: 100%;
9 | height: 100%;
10 | margin: 0;
11 | padding: 0;
12 | }
13 |
14 | .master-product-detail-div{
15 | height: 45vh;
16 | width: 100%;
17 | background-color:#fef5ef;
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 |
22 | }
23 | .product-detail-div{
24 | height: 50%;
25 | width: 50%;
26 | }
27 | .product-detail-title-div h3{
28 | display: flex;
29 | justify-content: center;
30 | font-size: 42px;
31 | margin-bottom: 12px;
32 | font-weight: 100;
33 | line-height: 1.2;
34 | color: #24262b;
35 |
36 | }
37 | .product-detail-text-div{
38 | display: flex;
39 | justify-content: center;
40 | font-size: 14px;
41 | color: #000000;
42 | }
43 | .product-detail-text-div span{
44 | color: #777777;
45 | }
46 |
47 | /* ....................................................................................................... */
48 |
49 | .master-div{
50 | width: 90%;
51 | margin-left: 5%;
52 | display: flex;
53 | gap: 20px;
54 | margin-top: 100px;
55 | }
56 |
57 | .master-prod-div{
58 | width: 75%;
59 | }
60 |
61 | .masternewprod{
62 | display: grid;
63 | grid-template-columns: repeat(3, 1fr);
64 | gap: 20px;
65 | margin-bottom: 100px;
66 | }
67 |
68 | .newproducts{
69 | height: 400px;
70 | width: 100%;
71 | margin-bottom: 20px;
72 | }
73 | .new-detail-div{
74 | padding-top: 25px;
75 | font-family: "Open Sans", sans-serif;
76 | }
77 |
78 | .new-detail-div a{
79 | text-decoration: none;
80 | font-size: 26px;
81 | font-weight: 700;
82 | color: #24262b;
83 | }
84 | .rating{
85 | display: flex;
86 | justify-content: space-between;
87 | padding-top: 14px;
88 | width: 100%;
89 | justify-content: space-between;
90 | }
91 | .rating span{
92 | font-size: 10px;
93 | font-weight: 500;
94 | color: rgb(115, 115, 115);
95 | width: 100px;
96 | padding-top: 3px;
97 | }
98 | .filled-icon{
99 | margin-right: 5px;
100 | }
101 | .empty-icons{
102 | opacity: 0.5;
103 | }
104 | .price-tag{
105 | display: inline;
106 | font-size: 18px;
107 | font-weight: 100;
108 | color: #5d5d5d;
109 | padding-right: 20px;
110 | }
111 |
112 | .img-div{
113 | width: 100%;
114 | height: 70%;
115 | object-fit: cover;
116 | display: block;
117 |
118 | }
119 |
120 | .master-filter-div{
121 | width: 25%;
122 | }
123 | .master-sort-div{
124 | height: 50px;
125 | width: 100%;
126 | display: flex;
127 | justify-content: space-between;
128 | margin-bottom: 40px;
129 | }
130 | .results-div{
131 | font-family: "Open Sans", sans-serif;
132 | height: 100%;
133 | display: flex;
134 | align-items: center;
135 | color: #777777;
136 | font-size: 14px;
137 | gap: 10px;
138 | }
139 | .sort-div{
140 | height: 100%;
141 | display: flex;
142 | }
143 | .sort-div span{
144 | font-family: "Open Sans", sans-serif;
145 | color: #777777;
146 | font-size: 14px;
147 | padding-right: 7px;
148 | padding-top: 12px;
149 | }
150 | .sort-div select{
151 | cursor: pointer;
152 | font-weight: 400;
153 | line-height: 40px;
154 | }
155 | .sort-div option{
156 | color: #777777;
157 | padding: 15px 29px 15px 18px;
158 | font-size: 14px;
159 | cursor: pointer;
160 | font-weight: 400;
161 | }
162 | .sort-div-dropdown{
163 | font-family: "Open Sans", sans-serif;
164 | color: #777777;
165 | font-size: 14px;
166 | height: 42px;
167 | padding-left: 16px;
168 | padding-right: 16px;
169 | border: 1px solid #ededed;
170 | border-radius: 4px;
171 | }
172 | .category-div{
173 | font-size: 18px;
174 | color: #24262b;
175 | width: 100%;
176 | font-weight: 700;
177 | padding-bottom: 15px;
178 | border-bottom: 2px solid #ededed;
179 | padding-top: 15px;
180 | }
181 | .line-div{
182 | margin-top: -3px;
183 | border-top: 3px solid #b19361;
184 | width: 25%;
185 | padding-top: 30px;
186 | }
187 |
188 | .categories-ul{
189 | list-style-type: none;
190 | font-weight: 700;
191 | color: #24262b;
192 | font-size: 14px;
193 |
194 | }
195 | .categories-ul li{
196 | margin-bottom: 12px;
197 | font-style: normal;
198 | line-height: 1.75;
199 | cursor: pointer;
200 | }
201 |
202 | .price-slider-div {
203 | position: relative;
204 | width: 100%;
205 | height: 5px;
206 | background: #efefef;
207 | border: 1px solid #c5c5c5;
208 | display: flex;
209 | }
210 |
211 | .min-price, .max-price {
212 | position: absolute;
213 | top: -7px;
214 | width: 100%;
215 | -webkit-appearance: none;
216 | background: transparent;
217 | pointer-events: none;
218 | }
219 |
220 | .min-price::-webkit-slider-thumb, .max-price::-webkit-slider-thumb {
221 | -webkit-appearance: none;
222 | width: 17px;
223 | height: 17px;
224 | border-radius: 50%;
225 | background: #b19361;
226 | pointer-events: auto;
227 | cursor: pointer;
228 | }
229 | .price-range-text{
230 | margin-bottom: 40px;
231 | margin-top: 20px;
232 | display: flex;
233 | justify-content: space-between;
234 | }
235 | .price-space-div{
236 | display: flex;
237 | justify-content: space-between;
238 | width: 80%;
239 | padding-top: 7px;
240 |
241 | }
242 | .price-range-text span{
243 | font-size: 14px;
244 | color: #777777;
245 | }
246 | .gobutton{
247 | height: 30px;
248 | width: 30px;
249 | border-radius: 8px;
250 | border: 1px solid #c4c0c0;
251 | background-color: white;
252 | cursor: pointer;
253 | }
--------------------------------------------------------------------------------
/frontend/src/pages/ProductPage/ProductPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import "./ProductPage.css"
3 | import Navbar from '../../components/Navbar/Navbar'
4 | import Footer from '../../components/Footer/Footer'
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6 | import { faAngleRight, faStar, faGrip} from '@fortawesome/free-solid-svg-icons'
7 | import { Link } from 'react-router-dom'
8 | import { items } from '../../components/Data.jsx'
9 |
10 |
11 | const scrollToTop = () => {
12 | window.scrollTo(0, 0)
13 | }
14 |
15 |
16 | const ProductPage = () => {
17 |
18 | const InitialItems = items.filter(item => item.id >10 && item.id <51);
19 | const [sortedItems, setSortedItems] = useState(InitialItems);
20 | const [priceRange, setPriceRange] = useState({ min: 0, max: 500 });
21 |
22 |
23 | const handlefeatured = () => {
24 | setSortedItems(InitialItems);
25 | }
26 | const handlelowtohigh = (e) => {
27 | const sorted = [...sortedItems].sort((a,b) => a.price-b.price);
28 | setSortedItems(sorted)
29 | }
30 | const hadnlehightolow = (e) => {
31 | const sorted = [...sortedItems].sort((a,b) => b.price-a.price);
32 | setSortedItems(sorted)
33 | }
34 | const handlenewestarrival = () => {
35 | setSortedItems(InitialItems);
36 | }
37 | const handleavgrating = () => {
38 | setSortedItems(InitialItems);
39 | }
40 | const handleRange = () => {
41 | const sorted = InitialItems.filter(item => item.price > priceRange.min && item.price < priceRange.max)
42 | setSortedItems(sorted)
43 | }
44 |
45 |
46 | const handlePriceChange = (e) => {
47 | const { name, value } = e.target;
48 | setPriceRange(prev => ({
49 | ...prev,
50 | [name]: parseInt(value)
51 | }));
52 | };
53 |
54 |
55 | return (
56 | <>
57 |
98 |
106 |
107 | COUPON
99 | 100 |
101 |
105 | Enter your coupon code if you have one.
102 | 103 | 104 |
108 |
127 | CART TOTALS
109 | 110 |
111 |
126 |
112 |
115 | Subtotal
113 |${calculateSubtotal()}
114 |
116 |
119 | Calculate Shipping
120 | Shipping
117 |Flat Rate: $40.00
118 |
121 |
124 |
125 | Total
122 |${(parseFloat(calculateSubtotal()) + 40).toFixed(2)}
123 |
60 |
70 |
71 |
72 |
61 |
69 |
62 |
64 | SHOP - PRODUCT
63 |
65 |
68 | Home
73 |
74 | {/* product filter div ................................................................ */}
75 |
76 |
187 |
188 |
189 |
190 |
191 | )
192 | }
193 |
194 | export default ProductPage
195 |
--------------------------------------------------------------------------------
/frontend/src/components/Data.jsx:
--------------------------------------------------------------------------------
1 | export const items = [
2 | {
3 | id: 1,
4 | title: "CHAIR",
5 | name: "hero-slider-1_vqr99h.jpg",
6 | price: "78",
7 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448519/ecommerce/images/hero-slider/home-1/hero-slider-1_vqr99h.jpg',
8 | description:"",
9 | },
10 | {
11 | id: 2,
12 | title: "",
13 | name: "service-promo-1_qqg5wa.png",
14 | price: "90",
15 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448534/ecommerce/images/icons/service-promo-1_qqg5wa.png',
16 | description:"",
17 | },
18 | {
19 | id: 3,
20 | title: "",
21 | name: "service-promo-2_dguybd.png",
22 | price: "67",
23 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448535/ecommerce/images/icons/service-promo-2_dguybd.png',
24 | description:"",
25 | },
26 | {
27 | id: 4,
28 | title: "",
29 | name: "service-promo-3_haxseb.png",
30 | price: "56",
31 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448535/ecommerce/images/icons/service-promo-3_haxseb.png',
32 | description:"",
33 | },
34 | {
35 | id: 5,
36 | title: "",
37 | name: "service-promo-4_qz6cul.png",
38 | price: "80",
39 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448536/ecommerce/images/icons/service-promo-4_qz6cul.png',
40 | description:"",
41 | },
42 | {
43 | id: 6,
44 | title: "STUDY LAMP",
45 | name: "banner-style-1-img-1_i3a9tx.jpg",
46 | price: "98",
47 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448498/ecommerce/images/banner/banner-style-1-img-1_i3a9tx.jpg',
48 | description:"",
49 | },
50 | {
51 | id: 7,
52 | title: "Kitchen utensils",
53 | name: "banner-style-2-img-1_c31a7t.jpg",
54 | price: "110",
55 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448500/ecommerce/images/banner/banner-style-2-img-1_c31a7t.jpg',
56 | description:"",
57 | },
58 | {
59 | id: 8,
60 | title: "Sofas and Armchairs",
61 | name: "banner-style-2-img-2_chrq6g.jpg",
62 | price: "121",
63 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448500/ecommerce/images/banner/banner-style-2-img-2_chrq6g.jpg',
64 | description:"",
65 | },
66 | {
67 | id: 9,
68 | title: "Chair & Bar stools",
69 | name: "banner-style-2-img-3_psifln.jpg",
70 | price: "191",
71 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448501/ecommerce/images/banner/banner-style-2-img-3_psifln.jpg',
72 | description:"",
73 | },
74 | {
75 | id: 10,
76 | title: "Interior lighting bulbs",
77 | name: "banner-style-2-img-4_mjrdre.jpg",
78 | price: "80",
79 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448501/ecommerce/images/banner/banner-style-2-img-4_mjrdre.jpg',
80 | description:"",
81 | },
82 |
83 |
84 | //The new arrivals----------------------------------------------------------------------------------------
85 |
86 |
87 | {
88 | id: 11,
89 | title: "designer chair",
90 | name: "default-2_xbx8ug.jpg",
91 | price: "85.00",
92 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448550/ecommerce/images/product/default/home-1/default-2_xbx8ug.jpg',
93 | description:"",
94 | },
95 | {
96 | id: 12,
97 | title: "PERFUME",
98 | name: "default-3_ozxnq5.jpg",
99 | price: "433.00",
100 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448551/ecommerce/images/product/default/home-1/default-3_ozxnq5.jpg',
101 | description:"",
102 | },
103 | {
104 | id: 13,
105 | title: "ELECTRIC KETTLE",
106 | name: "default-5_tkuhet.jpg",
107 | price: "466.00",
108 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg',
109 | description:"",
110 | },
111 | {
112 | id: 14,
113 | title: "WINDED CHAIR",
114 | name: "default-7_c2a9rc.jpg",
115 | price: "46.00",
116 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-7_c2a9rc.jpg',
117 | description:"",
118 | },
119 | {
120 | id: 15,
121 | title: "ELECTRIC KETTLE",
122 | name: "default-5_tkuhet.jpg",
123 | price: "165.00",
124 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg',
125 | description:"",
126 | },
127 | {
128 | id: 16,
129 | title: "WINDED CHAIR",
130 | name: "default-6_trxrxk.jpg",
131 | price: "234.00",
132 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-6_trxrxk.jpg',
133 | description:"",
134 | },
135 | {
136 | id: 17,
137 | title: "CONDIMENTUM PERFUME",
138 | name: "default-3_ozxnq5.jpg",
139 | price: "10.00",
140 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448551/ecommerce/images/product/default/home-1/default-3_ozxnq5.jpg',
141 | description:"",
142 | },
143 | {
144 | id: 18,
145 | title: "ELECTRIC KETTLE",
146 | name: "default-4_uddr4u.jpg",
147 | price: "110.00",
148 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-4_uddr4u.jpg',
149 | description:"",
150 | },
151 |
152 | //Modern Furniture Basic Collection----------------------------------------------------------------------
153 |
154 | {
155 | id: 51,
156 | title: "Modern Furniture Basic Collection",
157 | name: "banner-style-3-img-1_snhlfc.jpg",
158 | price: "70",
159 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448502/ecommerce/images/banner/banner-style-3-img-1_snhlfc.jpg',
160 | description:"",
161 | },
162 |
163 | //best seller---------------------------------------------------------------------------------------------
164 |
165 | {
166 | id: 20,
167 | title: "BAR STOOL",
168 | name: "default-9_jimsmt.jpg",
169 | price: "485.00",
170 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448554/ecommerce/images/product/default/home-1/default-9_jimsmt.jpg',
171 | description:"",
172 | },
173 | {
174 | id: 21,
175 | title: "Clock",
176 | name: "default-11_okansx.jpg",
177 | price: "360.00",
178 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448548/ecommerce/images/product/default/home-1/default-11_okansx.jpg',
179 | description:"",
180 | },
181 | {
182 | id: 22,
183 | title: "Bottle",
184 | name: "default-5_tkuhet.jpg",
185 | price: "200.00",
186 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg',
187 | description:"",
188 | },
189 | {
190 | id: 23,
191 | title: "EASY CHAIRS",
192 | name: "default-6_trxrxk.jpg",
193 | price: "173.00",
194 | imgURL: 'https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-6_trxrxk.jpg',
195 | description:"",
196 | },
197 |
198 | //product categories------------------------------------------------------------------------------------
199 |
200 | // {
201 | // id: 24,
202 | // title: "",
203 | // name: "",
204 | // price: "",
205 | // imgURL: '',
206 | // description:"",
207 | // },
208 | // {
209 | // id: 25,
210 | // title: "",
211 | // name: "",
212 | // price: "",
213 | // imgURL: '',
214 | // description:"",
215 | // },
216 | // {
217 | // id: 26,
218 | // title: "",
219 | // name: "",
220 | // price: "",
221 | // imgURL: '',
222 | // description:"",
223 | // },
224 | ]
--------------------------------------------------------------------------------
/frontend/src/components/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import "./Navbar.css"
3 | import { Link } from 'react-router-dom'
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
5 | import { faBars,faMagnifyingGlass,faCartPlus,faHeart,faAngleDown } from '@fortawesome/free-solid-svg-icons'
6 | import WishlistPanelContext from '../../context/WishlistPanleslider/WishlistPanelContext'
7 | import WishlistPanel from '../WishlistsPanel/WishlistPanel'
8 | import { items } from '../Data'
9 | import debounce from 'lodash.debounce';
10 | import WishlistContext from '../../context/WishlistContext/WishlistContext'
11 |
12 | import SuprSendInbox from '@suprsend/react-inbox'
13 | import 'react-toastify/dist/ReactToastify.css'
14 | import CartContext from '../../context/CartContext'
15 |
16 |
17 |
18 | const scrollToTop = () => {
19 | window.scrollTo(0, 0)
20 | }
21 |
22 | const Navbar = ({scrollToSection, blogsection, footersection}) => {
23 | const [ query, setQuery ] = useState("");
24 | const {isOpen, setIsOpen} = useContext(WishlistPanelContext)
25 | const {wishlist} = useContext(WishlistContext)
26 | const {cart} = useContext(CartContext)
27 |
28 | const filteredProd = query? items.filter((item) => item.title.toLowerCase().includes(query)) : [];
29 |
30 | const handleWishlistPanel = () => {
31 | setIsOpen(!isOpen);
32 | }
33 | const updateQuery = (e) => setQuery(e.target.value.toLowerCase());
34 | const debouncedOnchange = debounce(updateQuery, 300);
35 |
36 |
37 | return (
38 |
77 | 
124 |
125 |
126 |
127 |
78 |
91 |
79 | CATEGORIES
80 |
81 |
82 | -
83 |
- Chairs 84 |
- Tables 85 |
- Sofas 86 |
- Beds 87 |
- Lights 88 |
- Elctric appliance 89 |
92 |
123 |
93 | FILTER BY PRICE
94 |
95 |
96 |
97 |
106 |
115 |
116 |
117 |
118 |
121 |
122 | Price Range: ${priceRange.min} - ${priceRange.max}
119 |
120 |
124 |
128 |
129 |
185 |
186 |
130 |
152 |
153 | {/* product listing div .............................................................. */}
154 |
184 |
131 |
134 |
135 | Sort By:
136 |
150 |
151 |
41 |
211 | )
212 | }
213 |
214 | export default Navbar
215 |
--------------------------------------------------------------------------------
/frontend/src/pages/ProductDetails/ProductDetails.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: "Open Sans", sans-serif;
6 | }
7 | body, html{
8 | height: 100%;
9 | width: 100%;
10 | }
11 | .master-product-detail-div{
12 | height: 45vh;
13 | width: 100%;
14 | background-color:#fef5ef;
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 |
19 | }
20 | .product-detail-div{
21 | height: 50%;
22 | width: 50%;
23 | }
24 | .product-detail-title-div h3{
25 | display: flex;
26 | justify-content: center;
27 | font-size: 42px;
28 | margin-bottom: 12px;
29 | font-weight: 100;
30 | line-height: 1.2;
31 | color: #24262b;
32 |
33 | }
34 | .product-detail-text-div{
35 | display: flex;
36 | justify-content: center;
37 | font-size: 14px;
38 | color: #000000;
39 | }
40 | .product-detail-text-div span{
41 | color: #777777;
42 | }
43 |
44 | /* ............................................................................................ */
45 |
46 |
47 | .masterdiv{
48 | height: 90vh;
49 | width: 82%;
50 | margin-left: 9%;
51 | display: flex;
52 | gap: 30px;
53 | margin-top: 100px;
54 | }
55 | .leftdiv{
56 | height: 100%;
57 | width: 40%;
58 | }
59 | .rightdiv{
60 | height: 100%;
61 | width: 60%;
62 | }
63 | .leftdiv-top{
64 | width: 100%;
65 | height: 83%;
66 | /* background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448501/ecommerce/images/banner/banner-style-2-img-4_mjrdre.jpg'); */
67 | /* background-position: center; */
68 | /* background-size: cover; */
69 | }
70 | .leftdiv-bottom{
71 | width: 100%;
72 | height: 17%;
73 | padding-top: 25px;
74 | display: flex;
75 | }
76 | .leftdiv-bottom-start{
77 | height: 100%;
78 | width: 6%;
79 | color: #777777;
80 | padding-top: 8%;
81 | letter-spacing: 0.12rem;
82 | }
83 | .leftdiv-bottom-mid{
84 | height: 100%;
85 | width: 88%;
86 | display: flex;
87 | gap: 25px;
88 | }
89 | .leftdiv-bottom-mid-images1{
90 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448547/ecommerce/images/product/default/home-1/default-1_j4b9ol.jpg');
91 | background-position: center;
92 | background-size: cover;
93 | height: 100%;
94 | width: 20%;
95 |
96 | }
97 | .leftdiv-bottom-mid-images2{
98 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448550/ecommerce/images/product/default/home-1/default-2_xbx8ug.jpg');
99 | background-position: center;
100 | background-size: cover;
101 | height: 100%;
102 | width: 20%;
103 | }
104 | .leftdiv-bottom-mid-images3{
105 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448551/ecommerce/images/product/default/home-1/default-3_ozxnq5.jpg');
106 | background-position: center;
107 | background-size: cover;
108 | height: 100%;
109 | width: 20%;
110 | }
111 | .leftdiv-bottom-mid-images4{
112 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-4_uddr4u.jpg');
113 | background-position: center;
114 | background-size: cover;
115 | height: 100%;
116 | width: 20%;
117 | }
118 | .leftdiv-bottom-end{
119 | height: 100%;
120 | width: 6%;
121 | color: #777777;
122 | padding-top: 8%;
123 | padding-left: 4px;
124 | letter-spacing: 0.12rem;
125 |
126 | }
127 |
128 |
129 | .rightdiv-title{
130 | font-size: 34px;
131 | padding-bottom: 5px;
132 | font-weight: 500;
133 | line-height: 1.2;
134 | color: #24262b;
135 | }
136 | .rightdiv-review{
137 | font-size: 14px;
138 | color: #777777;
139 | font-weight: 400;
140 | font-style: normal;
141 | line-height: 1.75;
142 | margin-bottom: 20px;
143 | }
144 | .rightdiv p{
145 | margin-top: -2px;
146 | font-size: 14px;
147 | margin-bottom: 30px;
148 | color: #777777;
149 | line-height: 1.5;
150 | }
151 | .rightdiv-review span{
152 | font-size: 10px;
153 | font-weight: 500;
154 | color: rgb(115, 115, 115);
155 | }
156 | .prod-price{
157 | font-size: 28px;
158 | color: #24262b;
159 | margin-bottom: 15px;
160 | font-weight: 400;
161 | font-style: normal;
162 | line-height: 1.75;
163 | }
164 | .filled-icon{
165 | margin-right: 5px;
166 | }
167 | .empty-icons{
168 | opacity: 0.5;
169 | margin-right: 20px;
170 | }
171 | .follow-icon-prod-detail{
172 | margin-left: 8px;
173 | padding-top: 2px;
174 | color: #b19361;
175 | font-size: 14px;
176 | width: 15px;
177 | height: 15px;
178 | display: inline-flex;
179 | align-items: center;
180 | justify-content: center;
181 | }
182 | .border-line{
183 | height: 1px;
184 | width: 100%;
185 | background-color: #777777;
186 | opacity: 0.2;
187 | }
188 | .product-details{
189 | padding-top: 20px;
190 |
191 | }
192 | .product-details h4{
193 | font-size: 18px;
194 | margin-bottom: 25px;
195 | color: #24262b;
196 | font-weight: 100px;
197 | }
198 | .stock{
199 | font-size: 14px;
200 | color: #24262b;
201 | margin-bottom: 15px;
202 | font-weight: 700px;
203 | line-height: 1.75;
204 | position: relative;
205 | color: #777;
206 | }
207 | .quantity{
208 | height: 100px;
209 | display: flex;
210 | margin-top: 10px;
211 | }
212 | .quantity-text{
213 | margin-top: 30px;
214 | font-size: 14px;
215 | color: #24262b;
216 | font-weight: 500;
217 | }
218 | .quantity input{
219 | width: 100px;
220 | height: 50px;
221 | padding-left: 12px;
222 | font-size: 16px;
223 | border: 1px solid #ededed;
224 | border-radius: 5px;
225 | }
226 |
227 | .quantity button{
228 | margin-left: 10px;
229 | height: 50px;
230 | width: 200px;
231 | color: #FFFFFF;
232 | background-color: #24262b;
233 | font-size: 16px;
234 | border-radius: 3px;
235 | }
236 |
237 |
238 | .add-to-wishlist{
239 | width: 50%;
240 | display: flex;
241 | }
242 | .icons{
243 | text-decoration: none;
244 | margin-right: 35px;
245 | font-size: 14px;
246 | color: #000000;
247 | margin-bottom: 35px;
248 | }
249 | .categories{
250 | margin-top: 45px;
251 | display: flex;
252 | font-size: 14px;
253 | height: 20px;
254 | }
255 | .share-product{
256 | margin-top: 15px;
257 | display: flex;
258 | font-size: 14px;
259 | height: 20px;
260 | }
261 | .categories-options{
262 | font-size: 10px;
263 | font-weight: 500;
264 | color: rgb(115, 115, 115);
265 | }
266 |
267 | /* ................................................................................................ */
268 |
269 | .master-description-specification-reviews{
270 | height: 400px;
271 | width: 80%;
272 | margin-left: 10%;
273 | padding-top: 100px;
274 | }
275 | .description-specification-reviews{
276 | width: 100%;
277 | height: 60px;
278 | display: flex;
279 | font-size: 20px;
280 | justify-content: center;
281 | font-weight: 500;
282 | }
283 | .description-line{
284 | height: 4px;
285 | width: 100%;
286 | background-color: #777;
287 | margin-top: 10px;
288 |
289 | }
290 | .description-specification-reviews ul{
291 | list-style-type: none;
292 | padding-top: 25px;
293 | }
294 | .description-specification-reviews li{
295 | display: inline-block;
296 | margin-right: 15px;
297 | font-size: 20px;
298 | color: #777777;
299 | }
300 | .description-specification-reviews-content{
301 | height: 250px;
302 | width: 100%;
303 | padding: 30px 20px;
304 | color: #777777;
305 | border: 1px solid #ededed;
306 | }
307 | .description-specification-reviews-content p{
308 | margin-bottom: 16px;
309 | font-size: 14px;
310 | color: #777777;
311 | font-weight: 400;
312 | line-height: 1.70;
313 | letter-spacing: 0.01rem;
314 | }
315 |
316 |
317 | /* .............................................................................................. */
318 |
319 |
320 | .related-product-seller-div{
321 | height: 700px;
322 | width: 100%;
323 | margin-top: 100px;
324 | }
325 | .The-best-seller{
326 | margin-left: 9%;
327 | font-family: "Open Sans", sans-serif;
328 | padding-top: 100px;
329 | margin-bottom: 60px;
330 | }
331 | .The-best-seller h3{
332 | font-size: 26px;
333 | font-weight: 700;
334 | margin-bottom: 7px;
335 | }
336 | .The-best-seller p{
337 | margin-top: 0;
338 | margin-bottom: 16px;
339 | display: block;
340 | font-size: .875rem;
341 | font-weight: 400;
342 | line-height: 1.56;
343 | color: #777;
344 | }
345 |
346 | .best-seller-div{
347 | height: 400px;
348 | width: 100%;
349 | display: flex;
350 | }
351 | .best-seller-products{
352 | height: 400px;
353 | width: 80%;
354 | display: flex;
355 | gap: 30px;
356 | }
357 | .best-seller-img{
358 | height: 100%;
359 | width: 23%;
360 | }
361 | .best-seller-prod-startdiv{
362 | height: 100%;
363 | width: 10%;
364 | }
365 | .best-seller-prod-enddiv{
366 | height: 100%;
367 | width: 10%;
368 | }
369 |
370 | .best-seller-div1{
371 | width: 100%;
372 | height: 70%;
373 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448554/ecommerce/images/product/default/home-1/default-9_jimsmt.jpg');
374 | background-position: center;
375 | background-size: cover;
376 | }
377 | .best-seller-div2{
378 | width: 100%;
379 | height: 70%;
380 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448548/ecommerce/images/product/default/home-1/default-11_okansx.jpg');
381 | background-position: center;
382 | background-size: cover;
383 | }
384 | .best-seller-div3{
385 | width: 100%;
386 | height: 70%;
387 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg');
388 | background-position: center;
389 | background-size: cover;
390 | }
391 | .best-seller-div4{
392 | width: 100%;
393 | height: 70%;
394 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-6_trxrxk.jpg');
395 | background-position: center;
396 | background-size: cover;
397 | }
--------------------------------------------------------------------------------
/frontend/src/pages/ProductDetails/ProductDetails.jsx:
--------------------------------------------------------------------------------
1 | import "./ProductDetails.css"
2 | import Navbar from "../../components/Navbar/Navbar.jsx"
3 | import Footer from "../../components/Footer/Footer.jsx"
4 | import { Link, useParams } from "react-router-dom"
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6 | import { faStar, faAngleRight, faAngleLeft, faHeart, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
7 | import { faFacebookF,faInstagram,faTwitter,faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
8 | import { items } from "../../components/Data.jsx"
9 | import { useState, useContext } from "react"
10 | import CartContext from "../../context/CartContext.js"
11 | import WishlistContext from "../../context/WishlistContext/WishlistContext.js"
12 | import WishlistPage from "../Wishlist/Wishlist.jsx"
13 |
14 | const scrollToTop = () => {
15 | window.scrollTo(0, 0)
16 | }
17 |
18 | const ProductDetails = () => {
19 | const { cart, setCart } = useContext(CartContext);
20 | const { wishlist, setWishlist } = useContext(WishlistContext)
21 | const {id} = useParams()
22 | const item = items.find(item => item.id === parseInt(id));
23 |
24 | const addtocart = (id, price, title, description, imgURL) => {
25 | const obj = {
26 | id, price, title, description, imgURL
27 | }
28 | setCart([...cart, obj]);
29 | alert("Your product is added to the cart")
30 | }
31 |
32 | const addtowishlist = (id, price, title, description, imgURL) => {
33 | const obj = {
34 | id, price, title, description, imgURL
35 | }
36 | setWishlist([...wishlist, obj]);
37 | alert("Your product is added to the wishtlist")
38 | }
39 |
40 |
41 |
42 |
43 | return (
44 | <>
45 |
45 | FURNISTORE
46 |
47 |
48 |
51 |
52 |
92 |
93 | -
53 |
-
54 |
57 | HOME
58 |
60 | 61 |
62 |
63 | - 64 | 67 | PRODUCTS 68 | 69 | 70 | 71 |
- scrollToSection(blogsection)}
72 | className='text-sm text-[#24262b] cursor-pointer
73 | hover:text-opacity-70 transition-colors duration-200 ease-in-out' >
74 | BLOG
75 |
77 |
78 |
79 | - scrollToSection(footersection)} 80 | className='text-sm text-[#24262b] 81 | hover:text-opacity-70 transition-colors duration-200 ease-in-out' > 82 | ABOUT US 83 | 84 | 85 |
- scrollToSection(footersection)} 86 | className='text-sm text-[#24262b] 87 | hover:text-opacity-70 transition-colors duration-200 ease-in-out' > 88 | CONTACT US 89 | 90 |
97 |
201 |
202 | {isOpen &&
101 |
107 |
108 |
111 |
131 |
132 |
133 |
116 | {filteredProd.map((item) => (
117 |
129 | )}
130 |
119 |
121 |
124 | {item.title.toLowerCase()}
125 |
126 |
127 | ))}
128 |
124 | {item.title.toLowerCase()}
125 |
126 | -
138 |
139 |
-
142 |
143 | 144 |
145 |
146 | -
149 |
150 |
155 | 157 | {wishlist.length} 158 | 159 | 160 |
161 |
162 | -
165 |
166 |
171 | 173 | {cart.length} 174 | 175 | 176 |
177 | -
179 |
184 |
185 |
186 | -
189 |
191 |
192 |
196 | 197 | 198 |
199 |
206 |
207 |
}
209 |
210 |
47 |
57 |
58 |
48 |
56 |
49 |
51 | PRODUCT DETAILS - DEFAULT
50 |
52 |
55 | Home
59 |
127 |
128 |
129 |
60 |
78 |
61 |
62 |
63 |
62 |
64 |
77 |
65 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
76 |
79 |
125 |
126 | {item.title}
80 |
81 |
87 | ${item.price}
88 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est 89 | tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo 90 | gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.
91 | 92 |
93 |
113 |
114 |
115 | Available Options
94 |️✅ 200 IN STOCK
95 | Quantity
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | addtowishlist(item.id, item.price, item.title, item.description, item.imgURL)} className="icons" >
112 | CATEGORIES :
116 | BAR STOOL, KITCHEN UTENSILS, TENNIS
SHARE THIS PRODUCT :
117 |
123 |
124 |
130 |
149 |
150 | {/* ................................................................................................ */}
151 |
152 |
131 |
137 | -
132 |
- DESCRIPTION 133 |
- SPECIFICATION 134 |
- REVIEWS 135 |
138 |
148 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique 139 | auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. 140 | Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.
141 |Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis 142 | eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget 143 | sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum 144 | dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi 145 | posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. 146 | Etiam gravida vehicula tellus, in imperdiet ligula euismod eget
147 |
153 |
154 |
155 |
249 |
250 | {/* ...................................................... */}
251 |
252 |
253 |
254 |
255 |
256 | )
257 | }
258 |
259 | export default ProductDetails
260 |
--------------------------------------------------------------------------------
/frontend/src/pages/Homepage/Homepage.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | html, body {
7 | width: 100%;
8 | height: 100%;
9 | margin: 0;
10 | padding: 0;
11 | }
12 |
13 | /* .landing{
14 | width: 100%;
15 | min-height: 100vh;
16 | }
17 | .homepage{
18 | background-image: url("https://res.cloudinary.com/dhrugutmv/image/upload/v1718448519/ecommerce/images/hero-slider/home-1/hero-slider-1_vqr99h.jpg");
19 | background-size: cover;
20 | background-position: center;
21 | width: 100%;
22 | min-height: 100vh;
23 | }
24 | .textcenter{
25 | position: absolute;
26 | top: 67%;
27 | left: 10%;
28 | transform: translateY(-50%);
29 | } */
30 | /* .textcenter h4{
31 |
32 | margin-top: 0;
33 | margin-bottom: 5px;
34 | font-family: "Open Sans", sans-serif;
35 | font-weight: 500;
36 | line-height: 1.2;
37 | color: #24262b;
38 | }
39 | .textcenter h2{
40 | font-size: 58px;
41 | font-family: "Open Sans", sans-serif;
42 | font-weight: 550;
43 | } */
44 | /* .textcenter button{
45 | margin-top: 40px;
46 | width: 130px;
47 | height: 44px;
48 | padding: 10px 25px 10px 25px;
49 | border: 1px solid #24262b;
50 | border-radius: 4px;
51 | font-weight: bold;
52 | background-color: #fef5ef ;
53 | cursor: pointer;
54 | } */
55 |
56 |
57 |
58 | /* code for services offered by company */
59 |
60 | /* .services{
61 | width: 86%;
62 | display: flex;
63 | height: 340px;
64 | margin-left: 7%;
65 | align-items: center;
66 | justify-content: space-between;
67 |
68 | } */
69 | /* .services-sub{
70 | height: 245px;
71 | width: 260px;
72 | position: relative;
73 | display: flex;
74 | justify-content: center;
75 | text-align: center;
76 | }
77 | .services-sub h6{
78 | font-family: "Open Sans", sans-serif;
79 | position: absolute;
80 | top: 45%;
81 | font-size: 16px;
82 | font-weight: 600;
83 | }
84 | .services-sub p{
85 | font-family: "Open Sans", sans-serif;
86 | position: absolute;
87 | top: 60%;
88 | font-family: "Open Sans", sans-serif;
89 | font-size: 14px;
90 | font-weight: 400;
91 | font-style: normal;
92 | line-height: 1.75;
93 | visibility: visible;
94 | color: #777;
95 | } */
96 |
97 |
98 | /* items/products displayed */
99 | /*
100 | .items{
101 | width: 86%;
102 | margin-left: 7%;
103 | margin-right: 7%;
104 | height: 385px;
105 | display: flex;
106 |
107 | } */
108 | /* .items-leftdiv{
109 | width: 45%;
110 | height: 100%;
111 | margin-right: 15px;
112 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448498/ecommerce/images/banner/banner-style-1-img-1_i3a9tx.jpg');
113 | background-size: cover;
114 | background-position: center;
115 | position: relative;
116 | } */
117 |
118 | /* .content-left{
119 | font-family: "Open Sans", sans-serif;
120 | position: relative;
121 | top: 30%;
122 | left: 35%;
123 | width: 60%;
124 | }
125 |
126 | .content-left h4{
127 | font-size: 24px;
128 | font-weight: 200;
129 | margin-bottom: 11px;
130 | letter-spacing: .12em;
131 | } */
132 | /* .content-left h5{
133 | font-size: 16px;
134 | margin-bottom: 30px;
135 | color: #777777;
136 | font-weight: 200;
137 | letter-spacing: .12em;
138 |
139 | }
140 | .content-left button{
141 | padding: 12px 15px;
142 | border: 1px solid #24262b;;
143 | border-radius: 4px;
144 | font-weight: 600;
145 | letter-spacing: .12em;
146 | } */
147 |
148 |
149 | /* .items-rightdiv{
150 | width: 55%;
151 | height: 100%;
152 | margin-left: 15px;
153 | display: flex;
154 | flex-direction: column;
155 | gap: 30px;
156 |
157 | }
158 |
159 | .items-rightdiv-top{
160 | height: 50%;
161 | display: flex;
162 | gap: 30px;
163 | } */
164 | /* .r-div1{
165 | height: 100%;
166 | width: 50%;
167 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448500/ecommerce/images/banner/banner-style-2-img-1_c31a7t.jpg');
168 | background-size: cover;
169 | background-position: center;
170 | }
171 | .r-div2{
172 | height: 100%;
173 | width: 50%;
174 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448500/ecommerce/images/banner/banner-style-2-img-2_chrq6g.jpg');
175 | background-size: cover;
176 | background-position: center;
177 |
178 | } */
179 | /* .items-rightdiv-bottom{
180 | height: 50%;
181 | display: flex;
182 | gap: 30px;
183 | } */
184 | /* .r-div3{
185 | height: 100%;
186 | width: 50%;
187 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448501/ecommerce/images/banner/banner-style-2-img-3_psifln.jpg');
188 | background-size: cover;
189 | background-position: center;
190 |
191 | } */
192 | /* .r-div4{
193 | height: 100%;
194 | width: 50%;
195 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448501/ecommerce/images/banner/banner-style-2-img-4_mjrdre.jpg');
196 | background-size: cover;
197 | background-position: center;
198 |
199 | } */
200 |
201 | /* .content{
202 | font-family: "Open Sans", sans-serif;
203 | position: relative;
204 | top: 30%;
205 | left: 60%;
206 | width: 40%;
207 |
208 | } */
209 | /* .title{
210 | font-size: 21px;
211 | margin-bottom: 18px;
212 | font-weight: 100;
213 | line-height: 1.2;
214 | color: #24262b;
215 |
216 | }
217 | .link-text{
218 | text-decoration: none;
219 | font-size: 15px;
220 | font-weight: 700;
221 | } */
222 |
223 |
224 |
225 | /* The new arrival .......................................................................................*/
226 |
227 |
228 | .The-new-arrival{
229 | margin-left: 9%;
230 | font-family: "Open Sans", sans-serif;
231 | margin-top: 80px;
232 | margin-bottom: 60px;
233 | }
234 | .The-new-arrival h3{
235 | font-size: 26px;
236 | font-weight: 700;
237 | margin-bottom: 7px;
238 | }
239 | .The-new-arrival p{
240 | margin-top: 0;
241 | margin-bottom: 16px;
242 | display: block;
243 |
244 | font-size: .875rem;
245 | font-weight: 400;
246 | line-height: 1.56;
247 | color: #777;
248 | }
249 |
250 | /* display image and price of new arrived items */
251 |
252 |
253 | .display-new-arrival-div{
254 | height: 870px;
255 | width: 100%;
256 | display: flex;
257 | }
258 | .startdiv-arrival{
259 | height: 100%;
260 | width: 9%;
261 | }
262 | .enddiv-arrival{
263 | height: 100%;
264 | width: 9%;
265 | }
266 | .display-new-arrival{
267 | height: 100%;
268 | width: 82%;
269 | display: flex;
270 | flex-direction: column;
271 | }
272 | .display-new-arrival-top{
273 | width: 100%;
274 | display: flex;
275 | gap: 20px;
276 | height: 50%;
277 | }
278 | .display-new-arrival-bottom{
279 | width: 100%;
280 | display: flex;
281 | gap: 20px;
282 | height: 50%;
283 | }
284 | .newproducts{
285 | height: 100%;
286 | width: 25%;
287 | }
288 |
289 | .sale-tag{
290 | font-family: "Open Sans", sans-serif;
291 | position: absolute;
292 | border: 1px solid transparent;
293 | background-color: #b19361;
294 | height: 20px;
295 | width: 45px;
296 | margin-left: 15px;
297 | margin-top: 15px;
298 | padding-left: 8px;
299 | color: white;
300 | display: flex;
301 | align-items: center;
302 | }
303 | .new-detail-div{
304 | padding-top: 25px;
305 | font-family: "Open Sans", sans-serif;
306 | }
307 |
308 | .new-detail-div a{
309 | text-decoration: none;
310 | font-size: 26px;
311 | font-weight: 700;
312 | color: #24262b;
313 | }
314 | .rating{
315 | display: flex;
316 | justify-content: space-between;
317 | padding-top: 14px;
318 |
319 | }
320 | .rating span{
321 | font-size: 10px;
322 | font-weight: 500;
323 | color: rgb(115, 115, 115);
324 | }
325 | .filled-icon{
326 | margin-right: 5px;
327 | }
328 | .empty-icons{
329 | opacity: 0.5;
330 | }
331 | .price-tag{
332 | display: inline;
333 | font-size: 14px;
334 | font-weight: 100;
335 | color: #777777;
336 | }
337 |
338 | .newimg-div1{
339 | width: 100%;
340 | height: 70%;
341 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448550/ecommerce/images/product/default/home-1/default-2_xbx8ug.jpg');
342 | background-position: center;
343 | background-size: cover;
344 |
345 | }
346 | .newimg-div2{
347 | width: 100%;
348 | height: 70%;
349 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448551/ecommerce/images/product/default/home-1/default-3_ozxnq5.jpg');
350 | background-position: center;
351 | background-size: cover;
352 |
353 | }
354 | .newimg-div3{
355 | width: 100%;
356 | height: 70%;
357 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg');
358 | background-position: center;
359 | background-size: cover;
360 |
361 | }
362 | .newimg-div4{
363 | width: 100%;
364 | height: 70%;
365 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-7_c2a9rc.jpg');
366 | background-position: center;
367 | background-size: cover;
368 | }
369 | .newimg-div5{
370 | width: 100%;
371 | height: 70%;
372 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg');
373 | background-position: center;
374 | background-size: cover;
375 | }
376 | .newimg-div6{
377 | width: 100%;
378 | height: 70%;
379 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-6_trxrxk.jpg');
380 | background-position: center;
381 | background-size: cover;
382 | }
383 | .newimg-div7{
384 | width: 100%;
385 | height: 70%;
386 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448551/ecommerce/images/product/default/home-1/default-3_ozxnq5.jpg');
387 | background-position: center;
388 | background-size: cover;
389 | }
390 | .newimg-div8{
391 | width: 100%;
392 | height: 70%;
393 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-4_uddr4u.jpg');
394 | background-position: center;
395 | background-size: cover;
396 | }
397 |
398 |
399 | /* modern-furniture-collection */
400 |
401 | .modern-furniture-collection{
402 | font-family: "Open Sans", sans-serif;
403 | width: 56%;
404 | margin-left: 22%;
405 | height: 514px;
406 | margin-top: 80px;
407 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448502/ecommerce/images/banner/banner-style-3-img-1_snhlfc.jpg');
408 | background-position: center;
409 | background-size: cover;
410 | }
411 |
412 | .modern-content{
413 | width: 50%;
414 | height: 70%;
415 | position: relative;
416 | top: 25%;
417 | left: 45%;
418 | }
419 | .modern-furniture-collection h3{
420 | font-size: 48px;
421 | color:#24262b;
422 | font-weight: 300;
423 | margin-bottom: 10px;
424 | }
425 | .modern-furniture-collection h5{
426 | font-size: 16px;
427 | color:#777777;
428 | font-weight: 300;
429 | margin-bottom: 50px;
430 | letter-spacing: .09em;
431 | }
432 |
433 | .discover-button{
434 | padding: 15px 33px;
435 | border: 1px solid #24262b;
436 | border-radius: 6px;
437 | font-weight: 700;
438 | text-decoration: none;
439 | }
440 |
441 | /* best seller............................................................................... */
442 |
443 | .master-best-seller-div{
444 | height: 700px;
445 | width: 100%;
446 | margin-top: 100px;
447 | background-color: #f6f6f6;
448 | }
449 | .The-best-seller{
450 | margin-left: 9%;
451 | font-family: "Open Sans", sans-serif;
452 | padding-top: 100px;
453 | margin-bottom: 60px;
454 | }
455 | .The-best-seller h3{
456 | font-size: 26px;
457 | font-weight: 700;
458 | margin-bottom: 7px;
459 | }
460 | .The-best-seller p{
461 | margin-top: 0;
462 | margin-bottom: 16px;
463 | display: block;
464 | font-size: .875rem;
465 | font-weight: 400;
466 | line-height: 1.56;
467 | color: #777;
468 | }
469 |
470 | .best-seller-div{
471 | height: 400px;
472 | width: 100%;
473 | display: flex;
474 | }
475 | .best-seller-products{
476 | height: 400px;
477 | width: 80%;
478 | display: flex;
479 | gap: 30px;
480 | }
481 | .best-seller-img{
482 | height: 100%;
483 | width: 23%;
484 | }
485 | .best-seller-prod-startdiv{
486 | height: 100%;
487 | width: 10%;
488 | }
489 | .best-seller-prod-enddiv{
490 | height: 100%;
491 | width: 10%;
492 | }
493 |
494 | .best-seller-div1{
495 | width: 100%;
496 | height: 70%;
497 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448554/ecommerce/images/product/default/home-1/default-9_jimsmt.jpg');
498 | background-position: center;
499 | background-size: cover;
500 | }
501 | .best-seller-div2{
502 | width: 100%;
503 | height: 70%;
504 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448548/ecommerce/images/product/default/home-1/default-11_okansx.jpg');
505 | background-position: center;
506 | background-size: cover;
507 | }
508 | .best-seller-div3{
509 | width: 100%;
510 | height: 70%;
511 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448552/ecommerce/images/product/default/home-1/default-5_tkuhet.jpg');
512 | background-position: center;
513 | background-size: cover;
514 | }
515 | .best-seller-div4{
516 | width: 100%;
517 | height: 70%;
518 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448553/ecommerce/images/product/default/home-1/default-6_trxrxk.jpg');
519 | background-position: center;
520 | background-size: cover;
521 | }
522 |
523 |
524 | /* product categories........................................................... */
525 |
526 | .product-categories{
527 | height: 500px;
528 | width: 100%;
529 | display: flex;
530 | }
531 | .prod-cat-img-1{
532 | height: 100%;
533 | width: 25%;
534 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448502/ecommerce/images/banner/banner-style-4-img-1_wpbip0.jpg');
535 | background-position: center;
536 | background-size: cover;
537 | }
538 | .prod-cat-img-2{
539 | height: 100%;
540 | width: 25%;
541 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448502/ecommerce/images/banner/banner-style-4-img-2_paffmp.jpg');
542 | background-position: center;
543 | background-size: cover;
544 | }
545 | .prod-cat-img-3{
546 | height: 100%;
547 | width: 25%;
548 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448503/ecommerce/images/banner/banner-style-4-img-3_wvvw0n.jpg');
549 | background-position: center;
550 | background-size: cover;
551 | }
552 | .prod-cat-img-4{
553 | height: 100%;
554 | width: 25%;
555 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448503/ecommerce/images/banner/banner-style-4-img-4_kptbu5.jpg');
556 | background-position: center;
557 | background-size: cover;
558 | }
559 | .prod-cat-content{
560 | font-family: "Open Sans", sans-serif;
561 | color: #24262b;
562 | margin-top: 40px;
563 | margin-left: 20px;
564 | }
565 | .link-text{
566 | text-decoration: none;
567 | }
568 | .prod-cat-content h4{
569 | font-size: 24px;
570 | font-weight: 500;
571 | margin-bottom: 7px;
572 | }
573 | .prod-cat-content h6{
574 | font-size: 14px;
575 | color: #777777;
576 | font-weight: 100;
577 | letter-spacing: 0.12em;
578 | }
579 |
580 |
581 |
582 | /* the latest blogs ................................................................................ */
583 |
584 |
585 | .master-the-latest-blog{
586 | height: 700px;
587 | width: 100%;
588 | margin-top: 100px;
589 | background-color: #f6f6f6;
590 | }
591 | .the-latest-blog{
592 | margin-left: 8%;
593 | font-family: "Open Sans", sans-serif;
594 | padding-top: 100px;
595 | margin-bottom: 40px;
596 | }
597 | .the-latest-blog h3{
598 | font-size: 26px;
599 | font-weight: 700;
600 | margin-bottom: 7px;
601 | }
602 | .the-latest-blog p{
603 | margin-top: 0;
604 | margin-bottom: 16px;
605 | display: block;
606 | font-size: .875rem;
607 | font-weight: 400;
608 | line-height: 1.56;
609 | color: #777;
610 | }
611 |
612 | .latest-blog-div{
613 | height: 400px;
614 | width: 100%;
615 | display: flex;
616 | }
617 | .latest-blog-posts{
618 | height: 400px;
619 | width: 84%;
620 | display: flex;
621 | gap: 30px;
622 | }
623 | .latest-blog-img{
624 | height: 100%;
625 | width: 33%;
626 | }
627 |
628 | .new-detail-div{
629 | padding-top: 25px;
630 | font-family: "Open Sans", sans-serif;
631 | }
632 |
633 | .rating{
634 | padding-top: 14px;
635 | display: block;
636 |
637 | }
638 | .blog-para{
639 | font-size: 14px;
640 | font-weight: 100;
641 | color: #777777;
642 | letter-spacing: 0.04rem;
643 | margin-bottom: 10px;
644 | line-height: 1.8;
645 | }
646 | .rating h4{
647 | font-size: 14px;
648 | font-weight: 700;
649 | color: #4a4a4a;
650 | }
651 | .latest-blog-posts-startdiv{
652 | height: 100%;
653 | width: 8%;
654 | }
655 | .latest-blog-posts-enddiv{
656 | height: 100%;
657 | width: 7%;
658 | }
659 |
660 | .latest-blog-div1{
661 | width: 100%;
662 | height: 70%;
663 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448511/ecommerce/images/blog/blog-grid-home-1-img-1_msnng2.jpg');
664 | background-position: center;
665 | background-size: cover;
666 | }
667 | .latest-blog-div2{
668 | width: 100%;
669 | height: 70%;
670 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448511/ecommerce/images/blog/blog-grid-home-1-img-2_jilnp7.jpg');
671 | background-position: center;
672 | background-size: cover;
673 | }
674 | .latest-blog-div3{
675 | width: 100%;
676 | height: 70%;
677 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448512/ecommerce/images/blog/blog-grid-home-1-img-3_wt71rn.jpg');
678 | background-position: center;
679 | background-size: cover;
680 | }
681 |
682 |
683 | /* honotemplate.................................................................................... */
684 |
685 | .masterhonotemplate{
686 | height: 400px;
687 | width: 100%;
688 | margin-top: 100px;
689 | background-color: #f6f6f6;
690 | }
691 | .honotemplate-images{
692 | height: 200px;
693 | width: 86%;
694 | display: flex;
695 | position: relative;
696 | top: 25%;
697 | left: 9%;
698 | }
699 | .honotemplate{
700 | font-family: "Open Sans", sans-serif;
701 | font-size: 16px;
702 | font-weight: 600;
703 | color: #24262b;
704 | background: #fff;
705 | border-radius: 5px;
706 | height: 50px;
707 | line-height: 50px;
708 | padding-left: 30px;
709 | padding-right: 30px;
710 | position: absolute;
711 | top: 40%;
712 | left: 40%;
713 | letter-spacing: 0.07rem;
714 | }
715 | .hono-images1{
716 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448541/ecommerce/images/instagram/instagram-1_qc4bd4.jpg');
717 | background-position: center;
718 | background-size: cover;
719 | height: 100%;
720 | width: 16%;
721 | }
722 | .hono-images2{
723 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448541/ecommerce/images/instagram/instagram-2_yqeqyk.jpg');
724 | background-position: center;
725 | background-size: cover;
726 | height: 100%;
727 | width: 16%;
728 | }
729 | .hono-images3{
730 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448542/ecommerce/images/instagram/instagram-3_ce42di.jpg');
731 | background-position: center;
732 | background-size: cover;
733 | height: 100%;
734 | width: 16%;
735 | }
736 | .hono-images4{
737 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448544/ecommerce/images/instagram/instagram-4_tyxpsk.jpg');
738 | background-position: center;
739 | background-size: cover;
740 | height: 100%;
741 | width: 16%;
742 | }
743 | .hono-images5{
744 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448545/ecommerce/images/instagram/instagram-5_azxzna.jpg');
745 | background-position: center;
746 | background-size: cover;
747 | height: 100%;
748 | width: 16%;
749 | }
750 | .hono-images6{
751 | background-image: url('https://res.cloudinary.com/dhrugutmv/image/upload/v1718448545/ecommerce/images/instagram/instagram-6_pwlgs5.jpg');
752 | background-position: center;
753 | background-size: cover;
754 | height: 100%;
755 | width: 16%;
756 | }
--------------------------------------------------------------------------------
/frontend/src/pages/Homepage/Homepage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useRef } from 'react'
2 | import "./Homepage.css"
3 | import Navbar from '../../components/Navbar/Navbar.jsx'
4 | import Footer from '../../components/Footer/Footer.jsx'
5 | import { Link } from 'react-router-dom'
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
7 | import { faArrowRight,faStar } from '@fortawesome/free-solid-svg-icons'
8 | import { items } from '../../components/Data.jsx'
9 |
10 | const item = items.find(item => item.id === 7);
11 | const imgURL = item.imgURL;
12 |
13 | //created this function 'cause everytime when navigated through tag, the loaded page was loded with its middle
14 | //part and some times bottom part.
15 | const scrollToTop = () => {
16 | window.scrollTo(0, 0)
17 | }
18 |
19 | const Homepage = () => {
20 |
21 | const blogsection = useRef(null);
22 | const footersection = useRef(null);
23 |
24 | const scrollToSection = (sectionRef) => {
25 | sectionRef.current.scrollIntoView({ behavior: 'smooth' });
26 | };
27 |
28 |
29 |
30 | return (
31 | <>
32 |
156 |
159 |
160 |
161 |
162 | RELATED PRODUCTS.
157 |Browse the collection of our related products.
158 |
163 |
164 |
165 |
166 |
246 |
247 |
248 |
167 |
168 |
169 |
170 |
171 |
172 |
240 |
241 |
173 |
177 |
187 |
188 |
178 |
179 |
186 | ALIQUAM LOBORTIS
180 | 181 |
182 | *****
183 |
185 | $85.00
184 |
189 |
194 |
204 |
205 |
195 |
196 |
203 | CONDIMENTUM PERFUME
197 | 198 |
199 | *****
200 |
202 | $60.00
201 |
206 |
211 |
221 |
222 |
212 |
213 |
220 | ELECTRIC KETTLE
214 | 215 |
216 | *****
217 |
219 | $100.00
218 |
223 |
228 |
238 |
239 |
229 |
230 |
237 | WINDED CHAIR
231 | 232 |
233 | *****
234 |
236 | $73.00
235 |
242 |
243 |
244 |
245 |
33 |
34 |
35 |
36 |
58 |
59 |
60 | {/* services offered (free shipping, 30 days money back etc) */}
61 |
62 |
42 |
57 |
43 |
46 | Best Of NeoCon
47 |
49 |
50 |
54 |
55 |
56 | 44 | NEW COLLECTION
45 |
46 | Best Of NeoCon
47 |
48 | Gold Award
49 |
50 |
54 |
55 |
70 |
71 |
120 |
121 |
122 |
72 | 
73 |
83 |
73 | 77 | FREE SHIPPING
78 |81 | Get 10% cash back, free shipping, free returns, and more at 1000+ top retailers!
82 |
84 | 
85 |
95 |
85 | 89 | 30 DAYS MONEY BACK
90 |93 | 100% satisfaction guaranteed, or get your money back within 30 days!
94 |
96 | 
97 |
107 |
97 | 101 | SAFE PAYMENT
102 |105 | Pay with the world’s most popular and secure payment methods.
106 |
108 | 
109 |
119 |
109 | 113 | LOYALTY CUSTOMER
114 |117 | Card for the other 30% of their purchases at a rate of 1% cash back.
118 |
123 |
169 |
170 | {/* the new arrival .............................................................................. */}
171 |
172 |
173 |
174 |
175 |
126 |
134 |
135 |
127 |
133 | Mini rechargeable Table Lamp - E216
128 |WE DESIGN YOUR HOME
129 | 130 | 131 | 132 |
136 |
137 |
168 |
138 |
151 |
152 |
139 |
144 |
140 |
143 | Kitchen utensils
141 | SHOP NOW 142 |
145 |
150 |
146 |
149 | Sofas and Armchairs
147 | SHOP NOW 148 |
153 |
166 |
167 |
154 |
159 |
155 |
158 | Chair & Bar stools
156 | SHOP NOW 157 |
160 |
165 |
161 |
164 | Interior lighting
162 | SHOP NOW 163 |
176 |
179 |
180 |
181 |
182 | THE NEW ARRIVALS
177 |Preorder now to receive exclusive deals & gifts
178 |
183 |
373 |
374 |
375 | {/* new part................................................................................... */}
376 |
377 |
184 |
185 |
186 |
187 |
370 |
188 |
276 |
277 |
189 |
193 |
209 |
194 |
195 |
208 | ALIQUAM LOBORTIS
196 | 197 |
198 |
199 |
207 | $85.00
206 |
210 |
215 |
231 |
216 |
217 |
230 | CONDIMENTUM PERFUME
218 | 219 |
220 |
221 |
229 | $60.00
228 |
232 |
237 |
253 |
275 |
238 |
239 |
252 | ELECTRIC KETTLE
240 | 241 |
242 |
243 |
251 | $100.00
250 |
278 |
367 |
368 |
369 |
279 |
284 |
300 |
285 |
286 |
299 | ELECTRIC KETTLE
287 | 288 |
289 |
290 |
298 | $73.00
297 |
301 |
306 |
322 |
307 |
308 |
321 | WINDED CHAIR
309 | 310 |
311 |
312 |
320 | $73.00
319 |
323 |
328 |
344 |
366 |
329 |
330 |
343 | CONDIMENTUM PERFUME
331 | 332 |
333 |
334 |
342 | $73.00
341 |
371 |
372 |
378 |
386 |
387 |
388 |
389 | {/* new part........................................................................................ */}
390 |
391 |
379 |
385 | Modern Furniture Basic Collection
380 |WE DESIGN YOUR HOME MORE BEAUTIFUL
381 | 382 | DISCOVER NOW
392 |
393 |
394 |
512 |
513 |
514 | {/* product categories............................................... */}
515 |
516 |
395 |
398 |
399 |
400 |
401 | BEST SELLERS.
396 |Add our best sellers to your weekly lineup.
397 |
402 |
403 |
404 |
405 |
509 |
510 |
511 |
406 |
407 |
408 |
409 |
410 |
411 |
503 |
504 |
412 |
416 |
432 |
433 |
417 |
418 |
431 | ALIQUAM LOBORTIS
419 | 420 |
421 |
422 |
430 | $85.00
429 |
434 |
439 |
455 |
456 |
440 |
441 |
454 | CONDIMENTUM PERFUME
442 | 443 |
444 |
445 |
453 | $60.00
452 |
457 |
462 |
478 |
479 |
501 |
502 |
463 |
464 |
477 | ELECTRIC KETTLE
465 | 466 |
467 |
468 |
476 | $100.00
475 |
505 |
506 |
507 |
508 |
517 |
551 |
552 |
553 | {/* the blog posts.................................................................... */}
554 |
555 |
556 |
518 |
526 |
519 |
520 |
524 |
525 | BAR STOOL
521 |20 products
522 | 523 |
527 |
534 |
528 |
529 |
533 | ARMCHAIRS
530 |20 products
531 | 532 |
535 |
542 |
536 |
537 |
541 | LIGHTING
538 |20 products
539 | 540 |
543 |
550 |
544 |
545 |
549 | EASY CHAIRS
546 |20 products
547 | 548 |
559 |
560 |
561 |
639 |
640 |
641 | {/* honotemplate............................................................................... */}
642 |
643 |
562 |
565 |
566 |
567 |
568 | THE LATEST BLOGS
563 |Present posts in a best way to highlight interesting moments of your blog.
564 |
569 |
570 |
571 |
638 |
572 |
573 |
574 |
575 |
576 |
577 |
633 |
634 |
578 |
582 |
594 |
595 |
583 |
584 |
593 | Blog Post One
585 | 586 |
587 |
590 |READ MORE
591 |
592 | Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras pretium arcu ex. 588 | Aenean posuere libero eu augue condimentum rhoncus. Praesent
589 |590 |
READ MORE
591 |
596 |
601 |
613 |
614 |
602 |
603 |
612 | Blog Post Two
604 | 605 |
606 |
609 |READ MORE
610 |
611 | Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras pretium arcu ex. 607 | Aenean posuere libero eu augue condimentum rhoncus. Praesent
608 |609 |
READ MORE
610 |
615 |
620 |
631 |
632 |
621 |
622 |
630 | Blog Post Three
623 | 624 |
625 |
627 |READ MORE
628 |
629 | Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras pretium arcu ex.Aenean posuere libero eu augue condimentum rhoncus. Praesent
626 |627 |
READ MORE
628 |
635 |
636 |
637 |
644 |
654 |
655 |
656 | {/* importing footer section............................................................. */}
657 |
658 |
659 |
660 |
661 |
662 | )
663 | }
664 |
665 | export default Homepage
666 |
--------------------------------------------------------------------------------
645 |
653 | HONOTEMPLATE
646 |
647 |
648 |
649 |
650 |
651 |
652 |