├── src ├── components │ ├── assets │ │ ├── asa │ │ └── images │ │ │ └── logo.svg │ ├── flashDeals │ │ ├── style.css │ │ ├── FlashDeals.jsx │ │ └── FlashCard.jsx │ ├── newarrivals │ │ ├── style.css │ │ ├── Cart.jsx │ │ ├── Ndata.js │ │ └── NewArrivals.jsx │ ├── MainPage │ │ ├── Slider.jsx │ │ ├── Home.jsx │ │ ├── Home.css │ │ ├── Sdata.js │ │ ├── SlideCard.jsx │ │ └── Categories.jsx │ ├── wrapper │ │ ├── style.css │ │ └── Wrapper.jsx │ ├── top │ │ ├── style.css │ │ ├── Tdata.js │ │ ├── TopCate.jsx │ │ └── TopCart.jsx │ ├── annocument │ │ └── Annocument.jsx │ ├── discount │ │ ├── Discount.jsx │ │ ├── Dcard.jsx │ │ └── Ddata.js │ ├── shops │ │ ├── Shop.jsx │ │ ├── style.css │ │ ├── Catg.jsx │ │ ├── Sdata.js │ │ └── ShopCart.jsx │ └── Data.js ├── index.js ├── common │ ├── header │ │ ├── Header.jsx │ │ ├── Head.jsx │ │ ├── Search.jsx │ │ ├── Navbar.jsx │ │ └── Header.css │ ├── footer │ │ ├── style.css │ │ └── Footer.jsx │ └── Cart │ │ ├── style.css │ │ └── Cart.jsx ├── pages │ └── Pages.jsx ├── App.js └── App.css ├── https648e99873722947deac636f5--sage-dusk-64ff08.netlify.app.txt ├── public ├── favicon.png ├── images │ ├── banner-1.png │ ├── banner-2.png │ ├── category │ │ ├── cat1.png │ │ ├── cat2.png │ │ ├── cat3.jpg │ │ ├── cat3.png │ │ ├── cat4.png │ │ ├── cat5.png │ │ ├── cat6.png │ │ ├── cat7.png │ │ ├── cat8.png │ │ ├── cat9.png │ │ ├── cat-1.png │ │ ├── cat-2.png │ │ ├── cat-3.png │ │ ├── cat10.png │ │ └── cat11.png │ ├── flash │ │ ├── flash-1.png │ │ ├── flash-2.png │ │ ├── flash-3.png │ │ ├── flash-4.png │ │ └── flash-5.png │ ├── shops │ │ ├── shops-1.png │ │ ├── shops-2.png │ │ ├── shops-3.png │ │ ├── shops-4.png │ │ ├── shops-5.png │ │ ├── shops-6.png │ │ ├── shops-7.png │ │ ├── shops-8.png │ │ ├── shops-9.png │ │ └── shops-10.png │ ├── top │ │ ├── category-1.png │ │ ├── category-2.png │ │ └── category-3.png │ ├── SlideCard │ │ ├── slide-1.png │ │ ├── slide-2.png │ │ ├── slide-3.png │ │ └── slide-4.png │ ├── arrivals │ │ ├── arrivals1.png │ │ ├── arrivals2.png │ │ ├── arrivals3.png │ │ ├── arrivals4.png │ │ ├── arrivals5.png │ │ └── arrivals6.png │ └── discount │ │ ├── discount-1.png │ │ ├── discount-2.png │ │ ├── discount-3.png │ │ ├── discount-4.png │ │ ├── discount-5.png │ │ ├── discount-6.png │ │ ├── discount-7.png │ │ ├── discount-8.png │ │ └── discount-9.png ├── manifest.json └── index.html ├── .gitignore ├── README.md └── package.json /src/components/assets/asa: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /https648e99873722947deac636f5--sage-dusk-64ff08.netlify.app.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/flashDeals/style.css: -------------------------------------------------------------------------------- 1 | .flash { 2 | background: #f6f9fc; 3 | padding: 50px 0; 4 | } 5 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/images/banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/banner-1.png -------------------------------------------------------------------------------- /public/images/banner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/banner-2.png -------------------------------------------------------------------------------- /public/images/category/cat1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat1.png -------------------------------------------------------------------------------- /public/images/category/cat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat2.png -------------------------------------------------------------------------------- /public/images/category/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat3.jpg -------------------------------------------------------------------------------- /public/images/category/cat3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat3.png -------------------------------------------------------------------------------- /public/images/category/cat4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat4.png -------------------------------------------------------------------------------- /public/images/category/cat5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat5.png -------------------------------------------------------------------------------- /public/images/category/cat6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat6.png -------------------------------------------------------------------------------- /public/images/category/cat7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat7.png -------------------------------------------------------------------------------- /public/images/category/cat8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat8.png -------------------------------------------------------------------------------- /public/images/category/cat9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat9.png -------------------------------------------------------------------------------- /public/images/flash/flash-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/flash/flash-1.png -------------------------------------------------------------------------------- /public/images/flash/flash-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/flash/flash-2.png -------------------------------------------------------------------------------- /public/images/flash/flash-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/flash/flash-3.png -------------------------------------------------------------------------------- /public/images/flash/flash-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/flash/flash-4.png -------------------------------------------------------------------------------- /public/images/flash/flash-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/flash/flash-5.png -------------------------------------------------------------------------------- /public/images/shops/shops-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-1.png -------------------------------------------------------------------------------- /public/images/shops/shops-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-2.png -------------------------------------------------------------------------------- /public/images/shops/shops-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-3.png -------------------------------------------------------------------------------- /public/images/shops/shops-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-4.png -------------------------------------------------------------------------------- /public/images/shops/shops-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-5.png -------------------------------------------------------------------------------- /public/images/shops/shops-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-6.png -------------------------------------------------------------------------------- /public/images/shops/shops-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-7.png -------------------------------------------------------------------------------- /public/images/shops/shops-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-8.png -------------------------------------------------------------------------------- /public/images/shops/shops-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-9.png -------------------------------------------------------------------------------- /public/images/category/cat-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat-1.png -------------------------------------------------------------------------------- /public/images/category/cat-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat-2.png -------------------------------------------------------------------------------- /public/images/category/cat-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat-3.png -------------------------------------------------------------------------------- /public/images/category/cat10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat10.png -------------------------------------------------------------------------------- /public/images/category/cat11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/category/cat11.png -------------------------------------------------------------------------------- /public/images/shops/shops-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/shops/shops-10.png -------------------------------------------------------------------------------- /public/images/top/category-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/top/category-1.png -------------------------------------------------------------------------------- /public/images/top/category-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/top/category-2.png -------------------------------------------------------------------------------- /public/images/top/category-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/top/category-3.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/SlideCard/slide-1.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/SlideCard/slide-2.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/SlideCard/slide-3.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/SlideCard/slide-4.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals1.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals2.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals3.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals4.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals5.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/arrivals/arrivals6.png -------------------------------------------------------------------------------- /public/images/discount/discount-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-1.png -------------------------------------------------------------------------------- /public/images/discount/discount-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-2.png -------------------------------------------------------------------------------- /public/images/discount/discount-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-3.png -------------------------------------------------------------------------------- /public/images/discount/discount-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-4.png -------------------------------------------------------------------------------- /public/images/discount/discount-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-5.png -------------------------------------------------------------------------------- /public/images/discount/discount-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-6.png -------------------------------------------------------------------------------- /public/images/discount/discount-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-7.png -------------------------------------------------------------------------------- /public/images/discount/discount-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-8.png -------------------------------------------------------------------------------- /public/images/discount/discount-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativecoder-0717/Ecomerce-Bonik-React/HEAD/public/images/discount/discount-9.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom" 3 | import App from "./App" 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ) 11 | -------------------------------------------------------------------------------- /src/components/newarrivals/style.css: -------------------------------------------------------------------------------- 1 | .heading img { 2 | width: 40px; 3 | height: 40px; 4 | margin-top: 5px; 5 | } 6 | .NewArrivals h4 { 7 | font-weight: 400; 8 | } 9 | .NewArrivals span { 10 | color: #e94560; 11 | font-size: 15px; 12 | font-weight: 500; 13 | } 14 | .NewArrivals .box img { 15 | width: 100%; 16 | height: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/common/header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./Header.css" 3 | import Head from "./Head" 4 | import Search from "./Search" 5 | import Navbar from "./Navbar" 6 | 7 | const Header = ({ CartItem }) => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default Header 18 | -------------------------------------------------------------------------------- /src/components/MainPage/Slider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import SlideCard from "./SlideCard" 3 | 4 | const SliderHome = () => { 5 | return ( 6 | <> 7 |
8 |
9 | 10 |
11 |
12 | 13 | ) 14 | } 15 | 16 | export default SliderHome 17 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/MainPage/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Categories from "./Categories" 3 | import "./Home.css" 4 | import SliderHome from "./Slider" 5 | 6 | const Home = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Home 20 | -------------------------------------------------------------------------------- /src/components/wrapper/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | text-align: center; 3 | } 4 | .wrapper .img { 5 | margin: auto; 6 | width: 70px; 7 | height: 70px; 8 | line-height: 70px; 9 | margin-bottom: 20px; 10 | } 11 | .wrapper .img i { 12 | font-size: 25px; 13 | } 14 | .wrapper .product { 15 | padding: 30px; 16 | } 17 | .wrapper .product h3 { 18 | font-weight: 500; 19 | } 20 | .wrapper p { 21 | font-size: 15px; 22 | margin-top: 20px; 23 | color: grey; 24 | } 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Project Demo : https://648e99873722947deac636f5--sage-dusk-64ff08.netlify.app/ 2 | 3 | ![screencapture-648e99873722947deac636f5-sage-dusk-64ff08-netlify-app-2023-06-18-11_29_31](https://github.com/sunil9813/Bonik-Ecommerice-Website-in-React/assets/67497228/ddc909b1-385d-4d9b-bbfc-e6481f1ad3f9) 4 | 5 | 6 | ![screencapture-648e99873722947deac636f5-sage-dusk-64ff08-netlify-app-cart-2023-06-18-11_30_04](https://github.com/sunil9813/Bonik-Ecommerice-Website-in-React/assets/67497228/37d04d8f-96fb-4502-8087-58e71519b28a) 7 | -------------------------------------------------------------------------------- /src/components/flashDeals/FlashDeals.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import FlashCard from "./FlashCard" 3 | import "./style.css" 4 | 5 | const FlashDeals = ({ productItems, addToCart }) => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 | 12 |

Flash Delas

13 |
14 | 15 |
16 |
17 | 18 | ) 19 | } 20 | 21 | export default FlashDeals 22 | -------------------------------------------------------------------------------- /src/components/newarrivals/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Ndata from "./Ndata" 3 | 4 | const Cart = () => { 5 | return ( 6 | <> 7 |
8 | {Ndata.map((val, index) => { 9 | return ( 10 |
11 |
12 | 13 |
14 |

{val.name}

15 | ${val.price} 16 |
17 | ) 18 | })} 19 |
20 | 21 | ) 22 | } 23 | 24 | export default Cart 25 | -------------------------------------------------------------------------------- /src/components/top/style.css: -------------------------------------------------------------------------------- 1 | .TopCate { 2 | position: relative; 3 | } 4 | .TopCate img { 5 | width: 100%; 6 | height: 100%; 7 | border-radius: 5px; 8 | } 9 | .TopCate .nametop { 10 | position: relative; 11 | width: 100%; 12 | } 13 | .TopCate .nametop span { 14 | background: #0f3460; 15 | color: #fff; 16 | font-size: 12px; 17 | padding: 5px 10px; 18 | border-radius: 50px; 19 | margin: 5px; 20 | position: absolute; 21 | top: 10px; 22 | } 23 | .TopCate .nametop .tleft { 24 | left: 0; 25 | } 26 | .TopCate .nametop .tright { 27 | background-color: aliceblue; 28 | color: black; 29 | position: absolute; 30 | right: 0; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/MainPage/Home.css: -------------------------------------------------------------------------------- 1 | .homeSlide h1 { 2 | font-size: 45px; 3 | line-height: 55px; 4 | margin: 50px 0 20px 0; 5 | } 6 | .homeSlide p { 7 | margin: 20px 0; 8 | } 9 | .homeSlide ul { 10 | position: absolute; 11 | bottom: 20px; 12 | } 13 | .homeSlide ul li { 14 | border: 2px solid #b8b7b7; 15 | border-radius: 50%; 16 | padding: 10px; 17 | } 18 | .homeSlide ul li button { 19 | background: transparent !important; 20 | color: transparent !important; 21 | } 22 | .homeSlide ul li button::before { 23 | font-size: 15px !important; 24 | color: #0f3460; 25 | position: absolute; 26 | top: 2px; 27 | left: 0; 28 | margin: auto; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/top/Tdata.js: -------------------------------------------------------------------------------- 1 | const Tdata = [ 2 | { 3 | cover: "./images/top/category-1.png", 4 | para: "headphone", 5 | desc: "3k orders this week", 6 | }, 7 | { 8 | cover: "./images/top/category-2.png", 9 | para: "watch", 10 | desc: "4k orders this week", 11 | }, 12 | { 13 | cover: "./images/top/category-3.png", 14 | para: "sunglass", 15 | desc: "6k orders this week", 16 | }, 17 | { 18 | cover: "./images/top/category-2.png", 19 | para: "watch", 20 | desc: "4k orders this week", 21 | }, 22 | { 23 | cover: "./images/top/category-3.png", 24 | para: "sunglass", 25 | desc: "6k orders this week", 26 | }, 27 | ] 28 | 29 | export default Tdata 30 | -------------------------------------------------------------------------------- /src/common/footer/style.css: -------------------------------------------------------------------------------- 1 | footer { 2 | background-color: #0f3460; 3 | padding: 100px 0; 4 | color: #fff; 5 | } 6 | footer h1 { 7 | margin-bottom: 30px; 8 | color: #e94560; 9 | font-weight: 800; 10 | font-style: italic; 11 | } 12 | footer .img { 13 | background-color: #0c2a4d; 14 | padding: 15px 20px; 15 | border-radius: 5px; 16 | } 17 | footer .img i { 18 | font-size: 20px; 19 | margin: 5px; 20 | } 21 | footer .img span { 22 | margin-top: 5px; 23 | } 24 | footer p { 25 | font-size: 14px; 26 | font-weight: 300; 27 | opacity: 0.5; 28 | margin-bottom: 20px; 29 | } 30 | footer h2 { 31 | margin-bottom: 20px; 32 | } 33 | footer li { 34 | margin-bottom: 10px; 35 | opacity: 0.5; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/newarrivals/Ndata.js: -------------------------------------------------------------------------------- 1 | const Ndata = [ 2 | { 3 | cover: "./images/arrivals/arrivals1.png", 4 | name: "Sunglass", 5 | price: "150", 6 | }, 7 | { 8 | cover: "./images/arrivals/arrivals2.png", 9 | name: "Makeup", 10 | price: "250", 11 | }, 12 | { 13 | cover: "./images/arrivals/arrivals3.png", 14 | name: "Smart Watch", 15 | price: "50", 16 | }, 17 | { 18 | cover: "./images/arrivals/arrivals4.png", 19 | name: "Lipstick", 20 | price: "15", 21 | }, 22 | { 23 | cover: "./images/arrivals/arrivals5.png", 24 | name: "Green Plant", 25 | price: "10", 26 | }, 27 | { 28 | cover: "./images/arrivals/arrivals6.png", 29 | name: "Bonsai tree", 30 | price: "400", 31 | }, 32 | ] 33 | 34 | export default Ndata 35 | -------------------------------------------------------------------------------- /src/components/annocument/Annocument.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Annocument = () => { 4 | const mystyle = { 5 | width: "30%", 6 | height: "340px", 7 | } 8 | const mystyle1 = { 9 | width: "68%", 10 | height: "340px", 11 | } 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Annocument 29 | -------------------------------------------------------------------------------- /src/components/top/TopCate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | import TopCart from "./TopCart" 4 | 5 | const TopCate = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 | 13 |

Top Categories

14 |
15 |
16 | View all 17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | ) 25 | } 26 | 27 | export default TopCate 28 | -------------------------------------------------------------------------------- /src/components/discount/Discount.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Dcard from "./Dcard" 3 | 4 | const Discount = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |
11 | 12 |

Big Discounts

13 |
14 |
15 | View all 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | ) 24 | } 25 | 26 | export default Discount 27 | -------------------------------------------------------------------------------- /src/common/header/Head.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Head = () => { 4 | return ( 5 | <> 6 |
7 |
8 |
9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 🏳️‍⚧️ 18 | 19 | 🏳️‍⚧️ 20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Head 29 | -------------------------------------------------------------------------------- /src/components/newarrivals/NewArrivals.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Cart from "./Cart" 3 | import "./style.css" 4 | 5 | const NewArrivals = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 | 13 |

New Arrivals

14 |
15 |
16 | View all 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default NewArrivals 29 | -------------------------------------------------------------------------------- /src/pages/Pages.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Home from "../components/MainPage/Home" 3 | import FlashDeals from "../components/flashDeals/FlashDeals" 4 | import TopCate from "../components/top/TopCate" 5 | import NewArrivals from "../components/newarrivals/NewArrivals" 6 | import Discount from "../components/discount/Discount" 7 | import Shop from "../components/shops/Shop" 8 | import Annocument from "../components/annocument/Annocument" 9 | import Wrapper from "../components/wrapper/Wrapper" 10 | 11 | const Pages = ({ productItems, addToCart, CartItem, shopItems }) => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | export default Pages 27 | -------------------------------------------------------------------------------- /src/components/discount/Dcard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | import Ddata from "./Ddata" 6 | import "../newarrivals/style.css" 7 | 8 | const Dcard = () => { 9 | const settings = { 10 | dots: false, 11 | infinite: true, 12 | slidesToShow: 6, 13 | slidesToScroll: 1, 14 | autoplay: true, 15 | } 16 | return ( 17 | <> 18 | 19 | {Ddata.map((value, index) => { 20 | return ( 21 | <> 22 |
23 |
24 | 25 |
26 |

{value.name}

27 | {value.price} 28 |
29 | 30 | ) 31 | })} 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Dcard 38 | -------------------------------------------------------------------------------- /src/components/shops/Shop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Catg from "./Catg" 3 | import ShopCart from "./ShopCart" 4 | import "./style.css" 5 | 6 | const Shop = ({ addToCart, shopItems }) => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 |
16 |

Mobile Phones

17 |
18 |
19 | View all 20 | 21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 | ) 31 | } 32 | 33 | export default Shop 34 | -------------------------------------------------------------------------------- /src/components/Data.js: -------------------------------------------------------------------------------- 1 | const Data = { 2 | productItems: [ 3 | { 4 | id: 1, 5 | discount: 50, 6 | cover: "./images/flash/flash-1.png", 7 | name: "Shoes", 8 | price: 100, 9 | }, 10 | { 11 | id: 2, 12 | discount: 40, 13 | cover: "./images/flash/flash-2.png", 14 | name: "Watch", 15 | price: 20, 16 | }, 17 | { 18 | id: 3, 19 | discount: 40, 20 | cover: "./images/flash/flash-3.png", 21 | name: "Smart Mobile Black", 22 | price: 200, 23 | }, 24 | { 25 | id: 4, 26 | discount: 40, 27 | cover: "./images/flash/flash-4.png", 28 | name: "Smart Watch Black", 29 | price: 50, 30 | }, 31 | { 32 | id: 5, 33 | discount: 50, 34 | cover: "./images/flash/flash-1.png", 35 | name: "Shoes", 36 | price: 100, 37 | }, 38 | { 39 | id: 6, 40 | discount: 50, 41 | cover: "./images/flash/flash-3.png", 42 | name: "Shoes", 43 | price: 100, 44 | }, 45 | ], 46 | } 47 | export default Data 48 | -------------------------------------------------------------------------------- /src/components/top/TopCart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | import Tdata from "./Tdata" 6 | 7 | const TopCart = () => { 8 | const settings = { 9 | dots: false, 10 | infinite: true, 11 | slidesToShow: 3, 12 | slidesToScroll: 1, 13 | autoplay: true, 14 | } 15 | return ( 16 | <> 17 | 18 | {Tdata.map((value, index) => { 19 | return ( 20 | <> 21 |
22 |
23 | {value.para} 24 | {value.desc} 25 |
26 |
27 | 28 |
29 |
30 | 31 | ) 32 | })} 33 | 34 | 35 | ) 36 | } 37 | 38 | export default TopCart 39 | -------------------------------------------------------------------------------- /src/components/MainPage/Sdata.js: -------------------------------------------------------------------------------- 1 | const Sdata = [ 2 | { 3 | id: 1, 4 | title: "50% Off For Your First Shopping", 5 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 6 | cover: "./images/SlideCard/slide-1.png", 7 | }, 8 | { 9 | id: 2, 10 | title: "50% Off For Your First Shopping", 11 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 12 | cover: "./images/SlideCard/slide-2.png", 13 | }, 14 | { 15 | id: 3, 16 | title: "50% Off For Your First Shopping", 17 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 18 | cover: "./images/SlideCard/slide-3.png", 19 | }, 20 | { 21 | id: 4, 22 | title: "50% Off For Your First Shopping", 23 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 24 | cover: "./images/SlideCard/slide-4.png", 25 | }, 26 | ] 27 | export default Sdata 28 | -------------------------------------------------------------------------------- /src/components/discount/Ddata.js: -------------------------------------------------------------------------------- 1 | const Ddata = [ 2 | { 3 | cover: "./images/discount/discount-1.png", 4 | name: "BenuX 2022", 5 | price: "$250", 6 | }, 7 | { 8 | cover: "./images/discount/discount-2.png", 9 | name: "Sony TV 1080p", 10 | price: "$450", 11 | }, 12 | { 13 | cover: "./images/discount/discount-3.png", 14 | name: "Sony PS4", 15 | price: "$50", 16 | }, 17 | { 18 | cover: "./images/discount/discount-4.png", 19 | name: "Setgearr 2022", 20 | price: "$100", 21 | }, 22 | { 23 | cover: "./images/discount/discount-5.png", 24 | name: "Tony BGB", 25 | price: "$20", 26 | }, 27 | { 28 | cover: "./images/discount/discount-6.png", 29 | name: "RG products", 30 | price: "$200", 31 | }, 32 | { 33 | cover: "./images/discount/discount-7.png", 34 | name: "Ranasonic 2022", 35 | price: "$300", 36 | }, 37 | { 38 | cover: "./images/discount/discount-8.png", 39 | name: "Pune HD", 40 | price: "$30", 41 | }, 42 | { 43 | cover: "./images/discount/discount-9.png", 44 | name: "Sony CCTV", 45 | price: "$80", 46 | }, 47 | ] 48 | export default Ddata 49 | -------------------------------------------------------------------------------- /src/components/MainPage/SlideCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Sdata from "./Sdata" 3 | import Slider from "react-slick" 4 | import "slick-carousel/slick/slick.css" 5 | import "slick-carousel/slick/slick-theme.css" 6 | 7 | const SlideCard = () => { 8 | const settings = { 9 | dots: true, 10 | infinite: true, 11 | slidesToShow: 1, 12 | slidesToScroll: 1, 13 | autoplay: true, 14 | appendDots: (dots) => { 15 | return
    {dots}
16 | }, 17 | } 18 | return ( 19 | <> 20 | 21 | {Sdata.map((value, index) => { 22 | return ( 23 | <> 24 |
25 |
26 |

{value.title}

27 |

{value.desc}

28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 | ) 36 | })} 37 | 38 | 39 | ) 40 | } 41 | 42 | export default SlideCard 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bonik-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.8.1", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/material": "^5.4.4", 9 | "@mui/styled-engine-sc": "^5.4.2", 10 | "@testing-library/jest-dom": "^5.16.2", 11 | "@testing-library/react": "^12.1.3", 12 | "@testing-library/user-event": "^13.5.0", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "5.0.0", 17 | "react-slick": "^0.28.1", 18 | "slick-carousel": "^1.8.1", 19 | "styled-components": "^5.3.3", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/shops/style.css: -------------------------------------------------------------------------------- 1 | .shop .category { 2 | padding: 30px; 3 | height: 90vh; 4 | } 5 | .chead h1 { 6 | font-size: 20px; 7 | margin-bottom: 20px; 8 | } 9 | .chead h1:nth-child(2) { 10 | opacity: 0.5; 11 | border-left: 3px solid rgba(0, 0, 0, 0.5); 12 | padding-left: 70px; 13 | } 14 | .shop .category .box { 15 | background-color: #f6f9fc; 16 | margin: 15px 0; 17 | padding: 5px 10px; 18 | transition: 0.5s; 19 | border-radius: 5px; 20 | } 21 | .shop .category img { 22 | width: auto; 23 | height: auto; 24 | } 25 | .shop .category .box:hover { 26 | background-color: #fff; 27 | box-shadow: rgb(43 52 69 / 10%) 0px 4px 16px; 28 | } 29 | .shop .box2 { 30 | margin-top: 100px !important; 31 | text-align: center; 32 | } 33 | .shop .category button { 34 | padding: 10px; 35 | background: none; 36 | text-align: center; 37 | font-size: 17px; 38 | font-weight: 500; 39 | } 40 | 41 | .shop .contentWidth { 42 | margin-left: 30px; 43 | } 44 | 45 | .grid1 { 46 | display: grid; 47 | grid-template-columns: repeat(3, 1fr); 48 | grid-gap: 20px; 49 | } 50 | .shop .product img { 51 | width: 100%; 52 | height: 100%; 53 | } 54 | .shop .product { 55 | transition: 0.5s; 56 | } 57 | .shop .product:hover { 58 | box-shadow: rgb(43 52 69 / 10%) 0px 4px 16px; 59 | } 60 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | React Js Ecommerce Template 12 | 13 | 14 | 15 |
16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/components/shops/Catg.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Catg = () => { 4 | const data = [ 5 | { 6 | cateImg: "./images/category/cat-1.png", 7 | cateName: "Apple", 8 | }, 9 | { 10 | cateImg: "./images/category/cat-2.png", 11 | cateName: "Samasung", 12 | }, 13 | { 14 | cateImg: "./images/category/cat-1.png", 15 | cateName: "Oppo", 16 | }, 17 | { 18 | cateImg: "./images/category/cat-2.png", 19 | cateName: "Vivo", 20 | }, 21 | { 22 | cateImg: "./images/category/cat-1.png", 23 | cateName: "Redimi", 24 | }, 25 | { 26 | cateImg: "./images/category/cat-2.png", 27 | cateName: "Sony", 28 | }, 29 | ] 30 | return ( 31 | <> 32 |
33 |
34 |

Brands

35 |

Shops

36 |
37 | {data.map((value, index) => { 38 | return ( 39 |
40 | 41 | {value.cateName} 42 |
43 | ) 44 | })} 45 |
46 | 47 |
48 |
49 | 50 | ) 51 | } 52 | 53 | export default Catg 54 | -------------------------------------------------------------------------------- /src/common/header/Search.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import logo from "../../components/assets/images/logo.svg" 3 | import { Link } from "react-router-dom" 4 | 5 | const Search = ({ CartItem }) => { 6 | // fixed Header 7 | window.addEventListener("scroll", function () { 8 | const search = document.querySelector(".search") 9 | search.classList.toggle("active", window.scrollY > 100) 10 | }) 11 | 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 | All Category 24 |
25 | 26 |
27 | 28 |
29 | 30 | 31 | {CartItem.length === 0 ? "" : CartItem.length} 32 | 33 |
34 |
35 |
36 |
37 | 38 | ) 39 | } 40 | 41 | export default Search 42 | -------------------------------------------------------------------------------- /src/components/wrapper/Wrapper.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Wrapper = () => { 5 | const data = [ 6 | { 7 | cover: , 8 | title: "Worldwide Delivery", 9 | decs: "We offer competitive prices on our 100 million plus product any range.", 10 | }, 11 | { 12 | cover: , 13 | title: "Safe Payment", 14 | decs: "We offer competitive prices on our 100 million plus product any range.", 15 | }, 16 | { 17 | cover: , 18 | title: "Shop With Confidence ", 19 | decs: "We offer competitive prices on our 100 million plus product any range.", 20 | }, 21 | { 22 | cover: , 23 | title: "24/7 Support ", 24 | decs: "We offer competitive prices on our 100 million plus product any range.", 25 | }, 26 | ] 27 | return ( 28 | <> 29 |
30 |
31 | {data.map((val, index) => { 32 | return ( 33 |
34 |
35 | {val.cover} 36 |
37 |

{val.title}

38 |

{val.decs}

39 |
40 | ) 41 | })} 42 |
43 |
44 | 45 | ) 46 | } 47 | 48 | export default Wrapper 49 | -------------------------------------------------------------------------------- /src/components/shops/Sdata.js: -------------------------------------------------------------------------------- 1 | const Sdata = { 2 | shopItems: [ 3 | { 4 | id: 7, 5 | cover: "./images/shops/shops-1.png", 6 | name: "Mapple Earphones", 7 | price: "180", 8 | discount: "25", 9 | }, 10 | { 11 | id: 8, 12 | cover: "./images/shops/shops-2.png", 13 | name: "Vivo android one", 14 | price: "120", 15 | discount: "10", 16 | }, 17 | { 18 | id: 9, 19 | cover: "./images/shops/shops-3.png", 20 | name: "Sony Light", 21 | price: "20", 22 | discount: "50 ", 23 | }, 24 | { 25 | id: 10, 26 | cover: "./images/shops/shops-4.png", 27 | name: "Iphone", 28 | price: "999", 29 | discount: "10 ", 30 | }, 31 | { 32 | id: 11, 33 | cover: "./images/shops/shops-5.png", 34 | name: "Ceats wireless earphone", 35 | price: "80", 36 | discount: "20 ", 37 | }, 38 | { 39 | id: 12, 40 | cover: "./images/shops/shops-7.png", 41 | name: "Redimi Phone", 42 | price: "400", 43 | discount: "20 ", 44 | }, 45 | { 46 | id: 13, 47 | cover: "./images/shops/shops-8.png", 48 | name: "Xeats Bluetooth earphones", 49 | price: "60", 50 | discount: "5 ", 51 | }, 52 | { 53 | id: 14, 54 | cover: "./images/shops/shops-9.png", 55 | name: "Airpod", 56 | price: "120", 57 | discount: "10", 58 | }, 59 | { 60 | id: 15, 61 | cover: "./images/shops/shops-10.png", 62 | name: "Silver Cap", 63 | price: "5", 64 | discount: "2", 65 | }, 66 | ], 67 | } 68 | export default Sdata 69 | -------------------------------------------------------------------------------- /src/components/MainPage/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Categories = () => { 4 | const data = [ 5 | { 6 | cateImg: "./images/category/cat1.png", 7 | cateName: "Fashion", 8 | }, 9 | { 10 | cateImg: "./images/category/cat2.png", 11 | cateName: "Electronic", 12 | }, 13 | { 14 | cateImg: "./images/category/cat3.png", 15 | cateName: "Cars", 16 | }, 17 | { 18 | cateImg: "./images/category/cat4.png", 19 | cateName: "Home & Garden", 20 | }, 21 | { 22 | cateImg: "./images/category/cat5.png", 23 | cateName: "Gifts", 24 | }, 25 | { 26 | cateImg: "./images/category/cat6.png", 27 | cateName: "Music", 28 | }, 29 | { 30 | cateImg: "./images/category/cat7.png", 31 | cateName: "Health & Beauty", 32 | }, 33 | { 34 | cateImg: "./images/category/cat8.png", 35 | cateName: "Pets", 36 | }, 37 | { 38 | cateImg: "./images/category/cat9.png", 39 | cateName: "Baby Toys", 40 | }, 41 | { 42 | cateImg: "./images/category/cat10.png", 43 | cateName: "Groceries", 44 | }, 45 | { 46 | cateImg: "./images/category/cat11.png", 47 | cateName: "Books", 48 | }, 49 | ] 50 | 51 | return ( 52 | <> 53 |
54 | {data.map((value, index) => { 55 | return ( 56 |
57 | 58 | {value.cateName} 59 |
60 | ) 61 | })} 62 |
63 | 64 | ) 65 | } 66 | 67 | export default Categories 68 | -------------------------------------------------------------------------------- /src/common/Cart/style.css: -------------------------------------------------------------------------------- 1 | .cart-items { 2 | background: #f6f9fc; 3 | height: auto; 4 | padding: 50px 0; 5 | } 6 | 7 | .cart-items .cart-details { 8 | width: 70%; 9 | } 10 | 11 | .cart-items .cart-total { 12 | width: 30%; 13 | margin-top: 30px; 14 | margin-left: 30px; 15 | height: 130px; 16 | } 17 | .cart-list { 18 | background: white; 19 | margin-top: 30px; 20 | } 21 | .cart-items .img { 22 | width: 150px; 23 | height: 150px; 24 | } 25 | .cart-items img { 26 | width: 100%; 27 | height: 100%; 28 | object-fit: contain; 29 | } 30 | .cart-items .cart-details h3 { 31 | font-size: 20px; 32 | font-weight: 500; 33 | margin-top: 20px; 34 | } 35 | .cart-items .cart-details h4 { 36 | font-size: 15px; 37 | font-weight: 400; 38 | margin-top: 50px; 39 | color: grey; 40 | } 41 | .cart-items h4 span { 42 | color: #e94560; 43 | margin-left: 20px; 44 | font-weight: 500; 45 | } 46 | .removeCart { 47 | background: none; 48 | font-size: 25px; 49 | text-align: right; 50 | margin-right: 10px; 51 | } 52 | .cartControl { 53 | margin-top: 50px; 54 | } 55 | .cartControl button { 56 | width: 40px; 57 | height: 40px; 58 | margin: 10px; 59 | border-radius: 5px; 60 | font-size: 20px; 61 | } 62 | .incCart { 63 | background: none; 64 | border: 1px solid rgb(3 0 71 / 9%); 65 | color: #e94560; 66 | } 67 | .desCart { 68 | background: #f6f9fc; 69 | } 70 | .cart-total h4 { 71 | font-size: 15px; 72 | font-weight: 400; 73 | } 74 | .cart-total h3 { 75 | font-size: 20px; 76 | font-weight: 500; 77 | color: #e94560; 78 | } 79 | .cart-total h2 { 80 | font-size: 18px; 81 | margin-bottom: 20px; 82 | border-bottom: 1px solid rgb(3 0 71 / 9%); 83 | padding-bottom: 10px; 84 | color: #e94560; 85 | } 86 | .no-items { 87 | color: #e94560; 88 | font-size: 18px; 89 | margin-top: 30px; 90 | height: 130px; 91 | } 92 | -------------------------------------------------------------------------------- /src/common/header/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import { Link } from "react-router-dom" 3 | 4 | const Navbar = () => { 5 | // Toogle Menu 6 | const [MobileMenu, setMobileMenu] = useState(false) 7 | return ( 8 | <> 9 |
10 |
11 |
12 | 13 |

14 | Categories 15 |

16 |
17 | 18 |
19 |
    setMobileMenu(false)}> 20 | {/*
      */} 21 |
    • 22 | home 23 |
      • 24 |
    • 25 | pages 26 |
      • 27 |
    • 28 | user account 29 |
      • 30 |
    • 31 | vendor account 32 |
      • 33 |
    • 34 | track my order 35 |
      • 36 |
    • 37 | contact 38 |
      • 39 |
    40 | 41 | 44 |
45 |
46 |
47 | 48 | ) 49 | } 50 | 51 | export default Navbar 52 | -------------------------------------------------------------------------------- /src/common/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Footer = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |

Bonik

11 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat et lectus vel ut sollicitudin elit at amet.

12 |
13 |
14 | 15 | Google Play 16 |
17 |
18 | 19 | App Store 20 |
21 |
22 |
23 | 24 |
25 |

About Us

26 |
    27 |
  • Careers
    • 28 |
  • Our Stores
    • 29 |
  • Our Cares
    • 30 |
  • Terms & Conditions
    • 31 |
  • Privacy Policy
    • 32 |
33 |
34 |
35 |

Customer Care

36 |
    37 |
  • Help Center
    • 38 |
  • How to Buy
    • 39 |
  • Track Your Order
    • 40 |
  • Corporate & Bulk Purchasing
    • 41 |
  • Returns & Refunds
    • 42 |
43 |
44 |
45 |

Contact Us

46 |
    47 |
  • 70 Washington Square South, New York, NY 10012, United States
    • 48 |
  • Email: uilib.help@gmail.com
    • 49 |
  • Phone: +1 1123 456 780
    • 50 |
51 |
52 |
53 |
54 | 55 | ) 56 | } 57 | 58 | export default Footer 59 | -------------------------------------------------------------------------------- /src/common/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Cart = ({ CartItem, addToCart, decreaseQty }) => { 5 | // Stpe: 7 calucate total of items 6 | const totalPrice = CartItem.reduce((price, item) => price + item.qty * item.price, 0) 7 | 8 | // prodcut qty total 9 | return ( 10 | <> 11 |
12 |
13 | {/* if hamro cart ma kunai pani item xaina bhane no diplay */} 14 | 15 |
16 | {CartItem.length === 0 &&

No Items are add in Cart

} 17 | 18 | {/* yasma hami le cart item lai display garaaxa */} 19 | {CartItem.map((item) => { 20 | const productQty = item.price * item.qty 21 | 22 | return ( 23 |
24 |
25 | 26 |
27 |
28 |

{item.name}

29 |

30 | ${item.price}.00 * {item.qty} 31 | ${productQty}.00 32 |

33 |
34 |
35 |
36 | 39 |
40 | {/* stpe: 5 41 | product ko qty lai inc ra des garne 42 | */} 43 |
44 | 47 | 50 |
51 |
52 | 53 |
54 |
55 | ) 56 | })} 57 |
58 | 59 |
60 |

Cart Summary

61 |
62 |

Total Price :

63 |

${totalPrice}.00

64 |
65 |
66 |
67 |
68 | 69 | ) 70 | } 71 | 72 | export default Cart 73 | -------------------------------------------------------------------------------- /src/components/flashDeals/FlashCard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | 6 | const SampleNextArrow = (props) => { 7 | const { onClick } = props 8 | return ( 9 |
10 | 13 |
14 | ) 15 | } 16 | const SamplePrevArrow = (props) => { 17 | const { onClick } = props 18 | return ( 19 |
20 | 23 |
24 | ) 25 | } 26 | const FlashCard = ({ productItems, addToCart }) => { 27 | const [count, setCount] = useState(0) 28 | const increment = () => { 29 | setCount(count + 1) 30 | } 31 | const settings = { 32 | dots: false, 33 | infinite: true, 34 | speed: 500, 35 | slidesToShow: 4, 36 | slidesToScroll: 1, 37 | nextArrow: , 38 | prevArrow: , 39 | } 40 | 41 | return ( 42 | <> 43 | 44 | {productItems.map((productItems) => { 45 | return ( 46 |
47 |
48 |
49 | {productItems.discount}% Off 50 | 51 |
52 |
53 | 54 |
55 |
56 |
57 |

{productItems.name}

58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 |

${productItems.price}.00

67 | {/* step : 3 68 | if hami le button ma click garryo bahne 69 | */} 70 | 73 |
74 |
75 |
76 |
77 | ) 78 | })} 79 | 80 | 81 | ) 82 | } 83 | 84 | export default FlashCard 85 | -------------------------------------------------------------------------------- /src/components/shops/ShopCart.jsx: -------------------------------------------------------------------------------- 1 | //import React, { useState } from "react" 2 | 3 | //const ShopCart = ({ addToCart, shopItems }) => { 4 | // const [count, setCount] = useState(0) 5 | // const increment = () => { 6 | // setCount(count + 1) 7 | // } 8 | 9 | // return ( 10 | // <> 11 | // {shopItems.map((shopItems) => { 12 | // return ( 13 | //
14 | //
15 | // {shopItems.discount}% Off 16 | // 17 | //
18 | //
19 | // 20 | //
21 | //
22 | //
23 | //

{shopItems.name}

24 | //
25 | // 26 | // 27 | // 28 | // 29 | // 30 | //
31 | //
32 | //

${shopItems.price}.00

33 | // 36 | //
37 | //
38 | //
39 | // ) 40 | // })} 41 | // 42 | // ) 43 | //} 44 | 45 | //export default ShopCart 46 | 47 | import React, { useState } from "react" 48 | 49 | const ShopCart = ({ shopItems, addToCart }) => { 50 | const [count, setCount] = useState(0) 51 | const increment = () => { 52 | setCount(count + 1) 53 | } 54 | 55 | return ( 56 | <> 57 | {shopItems.map((shopItems, index) => { 58 | return ( 59 |
60 |
61 |
62 | {shopItems.discount}% Off 63 | 64 |
65 |
66 | 67 |
68 |
69 |
70 |

{shopItems.name}

71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |

${shopItems.price}.00

80 | {/* step : 3 81 | if hami le button ma click garryo bahne 82 | */} 83 | 86 |
87 |
88 |
89 |
90 | ) 91 | })} 92 | 93 | ) 94 | } 95 | 96 | export default ShopCart 97 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import "./App.css" 3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom" 4 | import Header from "./common/header/Header" 5 | import Pages from "./pages/Pages" 6 | import Data from "./components/Data" 7 | import Cart from "./common/Cart/Cart" 8 | import Footer from "./common/footer/Footer" 9 | import Sdata from "./components/shops/Sdata" 10 | 11 | function App() { 12 | /* 13 | step1 : const { productItems } = Data 14 | lai pass garne using props 15 | 16 | Step 2 : item lai cart ma halne using useState 17 | ==> CartItem lai pass garre using props from ani import garrxa in cartItem ma 18 | 19 | Step 3 : chai flashCard ma xa button ma 20 | 21 | Step 4 : addToCart lai chai pass garne using props in pages and cart components 22 | */ 23 | 24 | //Step 1 : 25 | const { productItems } = Data 26 | const { shopItems } = Sdata 27 | 28 | //Step 2 : 29 | const [CartItem, setCartItem] = useState([]) 30 | 31 | //Step 4 : 32 | const addToCart = (product) => { 33 | // if hamro product alredy cart xa bhane find garna help garxa 34 | const productExit = CartItem.find((item) => item.id === product.id) 35 | // if productExit chai alredy exit in cart then will run fun() => setCartItem 36 | // ani inside => setCartItem will run => map() ani yo map() chai each cart ma 37 | // gayara check garxa if item.id ra product.id chai match bhayo bhane 38 | // productExit product chai display garxa 39 | // ani increase exits product QTY by 1 40 | // if item and product doesnt match then will add new items 41 | if (productExit) { 42 | setCartItem(CartItem.map((item) => (item.id === product.id ? { ...productExit, qty: productExit.qty + 1 } : item))) 43 | } else { 44 | // but if the product doesnt exit in the cart that mean if card is empty 45 | // then new product is added in cart and its qty is initalize to 1 46 | setCartItem([...CartItem, { ...product, qty: 1 }]) 47 | } 48 | } 49 | 50 | // Stpe: 6 51 | const decreaseQty = (product) => { 52 | // if hamro product alredy cart xa bhane find garna help garxa 53 | const productExit = CartItem.find((item) => item.id === product.id) 54 | 55 | // if product is exit and its qty is 1 then we will run a fun setCartItem 56 | // inside setCartItem we will run filter to check if item.id is match to product.id 57 | // if the item.id is doesnt match to product.id then that items are display in cart 58 | // else 59 | if (productExit.qty === 1) { 60 | setCartItem(CartItem.filter((item) => item.id !== product.id)) 61 | } else { 62 | // if product is exit and qty of that produt is not equal to 1 63 | // then will run function call setCartItem 64 | // inside setCartItem we will run map method 65 | // this map() will check if item.id match to produt.id then we have to desc the qty of product by 1 66 | setCartItem(CartItem.map((item) => (item.id === product.id ? { ...productExit, qty: productExit.qty - 1 } : item))) 67 | } 68 | } 69 | 70 | return ( 71 | <> 72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |