├── .gitignore ├── License.md ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── img │ ├── avatar.jpg │ ├── baner-1.png │ ├── banner-fruits.jpg │ ├── best-product-1.jpg │ ├── best-product-2.jpg │ ├── best-product-3.jpg │ ├── best-product-4.jpg │ ├── best-product-5.jpg │ ├── best-product-6.jpg │ ├── cart-page-header-img.jpg │ ├── featur-1.jpg │ ├── featur-2.jpg │ ├── featur-3.jpg │ ├── fruite-item-1.jpg │ ├── fruite-item-2.jpg │ ├── fruite-item-3.jpg │ ├── fruite-item-4.jpg │ ├── fruite-item-5.jpg │ ├── fruite-item-6.jpg │ ├── hero-img-1.png │ ├── hero-img-2.jpg │ ├── hero-img.jpg │ ├── payment.png │ ├── single-item.jpg │ ├── testimonial-1.jpg │ ├── testimonial-2.jpg │ ├── vegetable-item-1.jpg │ ├── vegetable-item-2.jpg │ ├── vegetable-item-3.png │ ├── vegetable-item-4.jpg │ ├── vegetable-item-5.jpg │ └── vegetable-item-6.jpg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── components │ ├── Cart.jsx │ ├── Checkout.jsx │ ├── Contact.jsx │ ├── Error.jsx │ ├── Home.jsx │ ├── Shop.jsx │ ├── ShopDetail.jsx │ ├── common │ │ ├── Back.jsx │ │ ├── footer │ │ │ └── Footer.jsx │ │ └── header │ │ │ └── Header.jsx │ ├── home │ │ ├── Banner.jsx │ │ ├── Bestseller.jsx │ │ ├── Fact.jsx │ │ ├── Featured.jsx │ │ ├── Fruits.jsx │ │ ├── Hero.jsx │ │ ├── Service.jsx │ │ └── Vegetables.jsx │ ├── pages │ │ └── Pages.jsx │ └── testimonial │ │ ├── Testimonial.jsx │ │ └── TestimonialMain.jsx ├── data │ └── Data.jsx ├── index.css ├── index.js └── redux │ ├── CartSlice.jsx │ └── Store.jsx └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 Rodi Shammout 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files ("Software"), 4 | to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, 5 | publish, distribute, sublicense, and/or sell copies of the Software. 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Live Demo 2 | 3 | https://rodi5.github.io/E-commerce-react/ 4 | 5 | # Getting Started with Create React App 6 | 7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `npm start` 14 | 15 | Runs the app in the development mode.\ 16 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 17 | 18 | The page will reload when you make changes.\ 19 | You may also see any lint errors in the console. 20 | 21 | ### `npm test` 22 | 23 | Launches the test runner in the interactive watch mode.\ 24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 25 | 26 | ### `npm run build` 27 | 28 | Builds the app for production to the `build` folder.\ 29 | It correctly bundles React in production mode and optimizes the build for the best performance. 30 | 31 | The build is minified and the filenames include the hashes.\ 32 | Your app is ready to be deployed! 33 | 34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 35 | 36 | ### `npm run eject` 37 | 38 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 39 | 40 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 41 | 42 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 43 | 44 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 45 | 46 | ## Learn More 47 | 48 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 49 | 50 | To learn React, check out the [React documentation](https://reactjs.org/). 51 | 52 | ### Code Splitting 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 55 | 56 | ### Analyzing the Bundle Size 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 59 | 60 | ### Making a Progressive Web App 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 63 | 64 | ### Advanced Configuration 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 67 | 68 | ### Deployment 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 71 | 72 | ### `npm run build` fails to minify 73 | 74 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fruit-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.11.4", 7 | "@emotion/styled": "^11.11.5", 8 | "@mui/material": "^5.15.20", 9 | "@reduxjs/toolkit": "^2.2.5", 10 | "@testing-library/jest-dom": "^5.17.0", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-redux": "^9.1.2", 16 | "react-router-dom": "^6.23.1", 17 | "react-scripts": "5.0.1", 18 | "react-slick": "^0.30.2", 19 | "slick-carousel": "^1.8.1", 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 | "devDependencies": { 47 | "autoprefixer": "^10.4.19", 48 | "gh-pages": "^6.1.1", 49 | "postcss": "^8.4.38", 50 | "tailwindcss": "^3.4.4" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/favicon.ico -------------------------------------------------------------------------------- /public/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/avatar.jpg -------------------------------------------------------------------------------- /public/img/baner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/baner-1.png -------------------------------------------------------------------------------- /public/img/banner-fruits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/banner-fruits.jpg -------------------------------------------------------------------------------- /public/img/best-product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-1.jpg -------------------------------------------------------------------------------- /public/img/best-product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-2.jpg -------------------------------------------------------------------------------- /public/img/best-product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-3.jpg -------------------------------------------------------------------------------- /public/img/best-product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-4.jpg -------------------------------------------------------------------------------- /public/img/best-product-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-5.jpg -------------------------------------------------------------------------------- /public/img/best-product-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/best-product-6.jpg -------------------------------------------------------------------------------- /public/img/cart-page-header-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/cart-page-header-img.jpg -------------------------------------------------------------------------------- /public/img/featur-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/featur-1.jpg -------------------------------------------------------------------------------- /public/img/featur-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/featur-2.jpg -------------------------------------------------------------------------------- /public/img/featur-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/featur-3.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-1.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-2.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-3.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-4.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-5.jpg -------------------------------------------------------------------------------- /public/img/fruite-item-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/fruite-item-6.jpg -------------------------------------------------------------------------------- /public/img/hero-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/hero-img-1.png -------------------------------------------------------------------------------- /public/img/hero-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/hero-img-2.jpg -------------------------------------------------------------------------------- /public/img/hero-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/hero-img.jpg -------------------------------------------------------------------------------- /public/img/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/payment.png -------------------------------------------------------------------------------- /public/img/single-item.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/single-item.jpg -------------------------------------------------------------------------------- /public/img/testimonial-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/testimonial-1.jpg -------------------------------------------------------------------------------- /public/img/testimonial-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/testimonial-2.jpg -------------------------------------------------------------------------------- /public/img/vegetable-item-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-1.jpg -------------------------------------------------------------------------------- /public/img/vegetable-item-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-2.jpg -------------------------------------------------------------------------------- /public/img/vegetable-item-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-3.png -------------------------------------------------------------------------------- /public/img/vegetable-item-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-4.jpg -------------------------------------------------------------------------------- /public/img/vegetable-item-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-5.jpg -------------------------------------------------------------------------------- /public/img/vegetable-item-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/img/vegetable-item-6.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 21 | 26 | Vegetables Ecommerce 27 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rodi5/E-commerce-react/14a4527b28051f96ec37bac529a26b04baf63e84/public/logo512.png -------------------------------------------------------------------------------- /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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); 2 | body { 3 | font-family: "Raleway", sans-serif; 4 | } 5 | .main { 6 | background-color: #81c408; 7 | } 8 | .secondary { 9 | color: #ffb524; 10 | } 11 | .main-text { 12 | color: #81c408; 13 | } 14 | /* Header */ 15 | .top { 16 | border-radius: 230px 100px; 17 | } 18 | .hov:hover { 19 | color: #ffb524; 20 | } 21 | .nav-hov:hover { 22 | cursor: pointer; 23 | color: #81c408; 24 | } 25 | .transition { 26 | transition: 0.3s; 27 | } 28 | .search { 29 | border: 1px solid #ffb524; 30 | border-radius: 50%; 31 | transition: 0.3s; 32 | } 33 | .search-hov:hover { 34 | background-color: #ffb524; 35 | } 36 | .bord { 37 | background-color: #ffb524; 38 | } 39 | .icon-hov { 40 | transition: 0.3s; 41 | } 42 | .icon-hov:hover { 43 | cursor: pointer; 44 | color: rgba(0,0,0,0.6); 45 | } 46 | .pages { 47 | transition: 0.5s; 48 | } 49 | .pages ul { 50 | visibility: hidden; 51 | transition: 0.1s; 52 | opacity: 0; 53 | } 54 | .pages:hover ul { 55 | visibility: visible; 56 | opacity: 1; 57 | } 58 | .li-hov:hover { 59 | background-color: #ffb524; 60 | } 61 | .bars { 62 | color: #81c408; 63 | border: 1px solid rgba(0,0,0,0.1); 64 | border-radius: 10px; 65 | } 66 | .bar-menu { 67 | position: absolute; 68 | top: 40px; 69 | left: 0; 70 | color: #81c408; 71 | padding: 10px 15px; 72 | } 73 | .bar-menu li { 74 | padding-top: 10px; 75 | padding-bottom: 10px; 76 | } 77 | @media screen and (max-width:1200px){ 78 | .inside { 79 | visibility: hidden; 80 | display: none; 81 | } 82 | .pages:hover .inside { 83 | display: flex; 84 | flex-direction: column; 85 | visibility: visible; 86 | position: relative; 87 | top: 0; 88 | left: 0; 89 | width: 100%; 90 | } 91 | .inside li { 92 | padding-top: 4px; 93 | color: #000; 94 | } 95 | } 96 | @media screen and (min-width:1200px) { 97 | .bar-menu { 98 | display: flex; 99 | flex-direction: row; 100 | position: relative; 101 | top: -20px; 102 | } 103 | .pages:hover .inside { 104 | position: absolute; 105 | } 106 | .pages:hover .inside li { 107 | padding: 5px; 108 | } 109 | } 110 | @media screen and (width:1200px) { 111 | .pages:hover .inside { 112 | position: absolute; 113 | top: 40px; 114 | left: 15px; 115 | padding: 10px 40px 10px 10px; 116 | width: fit-content; 117 | display: flex; 118 | flex-direction: column; 119 | } 120 | .pages:hover .inside li { 121 | padding: 5px; 122 | color: #81c408; 123 | } 124 | } 125 | 126 | 127 | /* Hero */ 128 | .overlay { 129 | background-image: url('../public/img/hero-img.jpg'); 130 | background-repeat: no-repeat; 131 | background-size: cover; 132 | background-position: center; 133 | background-attachment:fixed; 134 | height: 800px; 135 | } 136 | @media screen and (min-width:576px) and (max-width:992px) { 137 | .overlay { 138 | height: 900px; 139 | } 140 | } 141 | 142 | @media screen and (min-width:992px) { 143 | .overlay { 144 | height: 600px; 145 | } 146 | } 147 | .img { 148 | transform: translate(-50%,-50%); 149 | border-radius: 10px; 150 | background-color: #ffb624c9; 151 | } 152 | 153 | /* Featured */ 154 | .after::after { 155 | content: ''; 156 | position: absolute; 157 | width: 35px; 158 | height: 35px; 159 | background-color: #ffb524; 160 | bottom: 30px; 161 | transform: rotate(45deg); 162 | } 163 | 164 | /* Fruits */ 165 | .box { 166 | transition: 0.5s; 167 | } 168 | .box:hover { 169 | box-shadow: 0 0 20px 10px rgba(0,0,0,0.2); 170 | } 171 | 172 | 173 | /* Service */ 174 | .info-service { 175 | position: relative; 176 | width: 250px; 177 | height: 130px; 178 | top: -50%; 179 | left: 50%; 180 | bottom: 0; 181 | transform: translate(-50%, -50%); 182 | } 183 | 184 | /* Banner */ 185 | .buy:hover { 186 | background-color: #81c408; 187 | cursor: pointer; 188 | } 189 | 190 | /* Bestseller */ 191 | .img-best { 192 | border-radius: 50%; 193 | } 194 | .img-sell { 195 | width: 30%; 196 | height: 80%; 197 | } 198 | @media screen and (min-width:640px) { 199 | .img-sell { 200 | width: 40%; 201 | height: 100%; 202 | } 203 | } 204 | @media screen and (min-width:1200px) { 205 | .img-sell { 206 | width: 150px; 207 | height: 150px; 208 | } 209 | } 210 | 211 | /* Footer */ 212 | .footer-head { 213 | color: #fff; 214 | font-size: 20px; 215 | font-weight: 500; 216 | } 217 | .footer-body { 218 | transition: 0.5s; 219 | } 220 | .footer-body:hover { 221 | cursor: pointer; 222 | color: #ffb524; 223 | } 224 | .footer-body , 225 | .footer-contact { 226 | color: rgba(255, 255, 255, .5); 227 | line-height: 2; 228 | font-size: 16px; 229 | } 230 | @media screen and (min-width:992px){ 231 | .footer-head { 232 | font-size: 24px; 233 | } 234 | } 235 | @media screen and (min-width:1200px){ 236 | .footer-head { 237 | font-size: 24px; 238 | } 239 | } 240 | .read { 241 | color: #81c408; 242 | } 243 | .read:hover { 244 | background-color: #ffb524; 245 | color: #fff; 246 | } 247 | .subscribe { 248 | background-color: #81c408; 249 | } 250 | .subscribe:hover { 251 | background-color: #ffb524; 252 | } 253 | .social { 254 | color: #ffb524; 255 | transition: 0.5s; 256 | } 257 | .social:hover { 258 | cursor: pointer; 259 | color: #000; 260 | background-color: #ffb524; 261 | } 262 | 263 | 264 | 265 | /* Back */ 266 | .back { 267 | background-image: url('../public/img/cart-page-header-img.jpg'); 268 | background-position: center; 269 | background-size: cover; 270 | position: relative; 271 | top: 0; 272 | left: 0; 273 | z-index: -1; 274 | width: 100%; 275 | height: 25vh; 276 | padding-top: 40px; 277 | color: #fff; 278 | text-align: center; 279 | } 280 | .back .overlay-back { 281 | position: absolute; 282 | background-color: rgba(0, 0, 0, 0.3); 283 | top: 0; 284 | left: 0; 285 | width: 100%; 286 | height: 25vh; 287 | z-index: 1; 288 | } 289 | .back h1 { 290 | position: relative; 291 | font-size: 40px; 292 | font-weight: 700; 293 | top: 0; 294 | z-index: 999; 295 | } 296 | .back h2 { 297 | position: relative; 298 | font-size: 18px; 299 | font-weight: 500; 300 | text-transform: capitalize; 301 | margin-top: 10px; 302 | z-index: 999; 303 | } 304 | .margin { 305 | margin-top: 14%; 306 | } 307 | 308 | /* Shop */ 309 | .apple { 310 | color: #81c408; 311 | } 312 | .apple:hover { 313 | color: #ffb524; 314 | cursor: pointer; 315 | } 316 | .btn-view { 317 | color: #81c408; 318 | } 319 | .btn-view:hover { 320 | background-color: #ffb524; 321 | color: #fff; 322 | } 323 | .next li { 324 | transition: 0.5s; 325 | } 326 | .next li:hover { 327 | background-color: #81c408; 328 | cursor: pointer; 329 | } 330 | 331 | /* Shop Detail */ 332 | .post:hover { 333 | background-color: #ffb524; 334 | } 335 | .post button { 336 | color: #81c408; 337 | } 338 | .post:hover button { 339 | color: #fff; 340 | } 341 | 342 | /* 404 page */ 343 | .btn-error { 344 | color: #45595b; 345 | } 346 | .btn-error:hover { 347 | background-color: #ffb524; 348 | color: #fff; 349 | } 350 | 351 | /* Contact */ 352 | .input-contact { 353 | color: #81c408; 354 | } 355 | .input-contact:hover { 356 | color: #fff; 357 | background-color: #ffb524; 358 | cursor: pointer; 359 | } 360 | 361 | /* Cart */ 362 | .img-cart { 363 | width: 100px; 364 | height: 100px; 365 | } 366 | .coupon, 367 | .checkout { 368 | color: #81c408; 369 | } 370 | .coupon:hover, 371 | .checkout:hover { 372 | color: #fff; 373 | background-color: #ffb524; 374 | } 375 | 376 | /* Checkout */ 377 | .order { 378 | color: #81c408; 379 | } 380 | .order:hover { 381 | background-color: #ffb524; 382 | color: #fff; 383 | } 384 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Pages from './components/pages/Pages'; 3 | 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Back from "./common/Back"; 3 | import { useSelector, useDispatch } from 'react-redux'; 4 | import { addToCart, removeFromCart ,clearItem ,clearCart } from '../redux/CartSlice'; 5 | 6 | export default function Cart() { 7 | const dispatch = useDispatch(); 8 | const items = useSelector(state => state.cart.items); 9 | const subtotal = useSelector(state => state.cart.subtotal); 10 | const total = useSelector(state => state.cart.total); 11 | 12 | const emptyCartMsg = ( 13 |

Your Cart is Empty

14 | ); 15 | 16 | return ( 17 | <> 18 | 19 | {items.length === 0 ? ( 20 | emptyCartMsg 21 | ) : ( 22 |
23 | 24 |
25 | 26 | 27 | 28 | 31 | 34 | 37 | 40 | 43 | 46 | 47 | 48 | 49 | {items.map(item => ( 50 | 51 | 54 | 57 | 60 | 71 | 74 | 79 | 80 | ))} 81 | 82 |
29 | Products 30 | 32 | Name 33 | 35 | Price 36 | 38 | Quantity 39 | 41 | Total 42 | 44 | Handle 45 |
52 | {item.name} 53 | 55 | {item.name} 56 | 58 | ${item.price} 59 | 61 |
62 | 65 |

{item.quantity}

66 | 69 |
70 | 		72 | ${parseFloat(item.price * item.quantity).toFixed(2)} 73 | 75 | 78 |
83 |
84 |
85 | 86 | 87 |
88 |
89 |
90 |
91 |
92 |

Cart Total

93 |
94 |

Subtotal:

95 | ${subtotal.toFixed(2)} 96 |
97 |
98 |

Shipping

99 |
100 | Flat rate : 101 | $3.00 102 |
103 |
104 |
105 |
106 |

Total

107 | ${(total + 3).toFixed(2)} 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | )} 116 | 117 | ); 118 | } -------------------------------------------------------------------------------- /src/components/Checkout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Back from './common/Back' 3 | 4 | const Checkout = () => { 5 | return ( 6 |
7 | 8 |
9 |

Billing details

10 |
11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 | 55 | 56 |
57 | 58 |
59 |
60 | 61 | 62 | 63 | 66 | 69 | 72 | 75 | 78 | 79 | 80 | 81 | 82 | 85 | 88 | 91 | 94 | 97 | 98 | 99 | 102 | 105 | 108 | 111 | 114 | 115 | 116 | 119 | 122 | 125 | 128 | 131 | 132 | 133 |
64 | Products 65 | 67 | Name 68 | 70 | Price 71 | 73 | Quantity 74 | 76 | Total 77 |
83 | 84 | 86 | Big Banana 87 | 89 | 2.99 $ 90 | 92 | 2 93 | 95 | 2.99 $ 96 |
100 | 101 | 103 | Potatoes 104 | 106 | 2.99 $ 107 | 109 | 2 110 | 112 | 2.99 $ 113 |
117 | 118 | 120 | Awesome Brocoli 121 | 123 | 2.99 $ 124 | 126 | 2 127 | 129 | 2.99 $ 130 |
134 |
135 |

Subtotal

136 | $414.00 137 |
138 |
139 |
140 |

Shipping

141 |
142 |
143 | 144 | 145 |
146 |
147 | 148 | 149 |
150 |
151 | 152 | 153 |
154 |
155 |
156 |
157 |
158 |

Total

159 | $135.00 160 |
161 |
162 |
163 |
164 | 165 | 166 |
167 |

Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.

168 |
169 |
170 |
171 | 172 | 173 |
174 |
175 |
176 | 177 | 178 |
179 |
180 |
181 | 182 | 183 |
184 |
185 |
186 | 187 |
188 |
189 |
190 |
191 |
192 | ) 193 | } 194 | 195 | export default Checkout 196 | -------------------------------------------------------------------------------- /src/components/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Back from './common/Back' 3 | 4 | const Contact = () => { 5 | return ( 6 |
7 | 8 |
9 |

Get in touch

10 |

The contact form is currently inactive. Get a functional and working contact form with Ajax & PHP in a few minutes. Just copy and paste the files, add a little code and you're done.Download Now.

11 |
12 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 |

Address

28 | 123 Street New York.USA 29 |
30 |
31 |
32 | 33 |
34 |

Mail Us

35 | info@example.com 36 |
37 |
38 |
39 | 40 |
41 |

Telephone

42 | (+012) 3456 7890 43 |
44 |
45 |
46 |
47 |
48 |
49 | ) 50 | } 51 | 52 | export default Contact 53 | -------------------------------------------------------------------------------- /src/components/Error.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Back from './common/Back' 3 | import { Link } from 'react-router-dom' 4 | 5 | const Error = () => { 6 | return ( 7 |
8 | 9 |
10 | 11 |

404

12 |

Page Not Found

13 |

We’re sorry, the page you have looked for does not exist in our website! Maybe go to our home page or try to use a search?

14 |
Go Back To Home
15 |
16 |
17 | ) 18 | } 19 | 20 | export default Error 21 | -------------------------------------------------------------------------------- /src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Hero from './home/Hero' 3 | import Featured from './home/Featured' 4 | import Fruits from './home/Fruits' 5 | import Service from './home/Service' 6 | import Vegetables from './home/Vegetables' 7 | import Banner from './home/Banner' 8 | import Bestseller from './home/Bestseller' 9 | import Fact from './home/Fact' 10 | import Testimonial from './testimonial/Testimonial' 11 | 12 | 13 | const Home = () => { 14 | return ( 15 | <> 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default Home 30 | -------------------------------------------------------------------------------- /src/components/Shop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Back from './common/Back' 3 | import { shop_feature ,fruits } from '../data/Data' 4 | import Slider from '@mui/material/Slider'; 5 | import { useDispatch } from 'react-redux'; 6 | import { addToCart } from '../redux/CartSlice'; 7 | 8 | const Shop = () => { 9 | const dispatch = useDispatch(); 10 | return ( 11 |
12 | 13 |
14 |
15 |

Fresh fruits shop

16 |
17 | 18 | 19 |
20 |
21 |
22 | 23 | 29 |
30 |

Categories

31 |
    32 |
    33 |
  • Apples
    • 34 | (3) 35 |
    36 |
    37 |
  • Oranges
    • 38 | (5) 39 |
    40 |
    41 |
  • Strawbery
    • 42 | (2) 43 |
    44 |
    45 |
  • Banana
    • 46 | (8) 47 |
    48 |
    49 |
  • Pumpkin
    • 50 | (5) 51 |
    52 |
53 |
54 |

Price

55 |
56 | 57 |
58 |
59 |

Additional

60 |
61 |
62 | 63 | Organic 64 |
65 |
66 | 67 | Fresh 68 |
69 |
70 | 71 | Sales 72 |
73 |
74 | 75 | Discount 76 |
77 |
78 | 79 | Expired 80 |
81 |
82 |

Featured products

83 |
84 | {shop_feature.slice(0,3).map((val) => { 85 | return ( 86 |
87 |
88 | 89 |
90 |
91 |

{val.name}

92 |
    93 |
  • {val.star}
    • 94 |
  • {val.star}
    • 95 |
  • {val.star}
    • 96 |
  • {val.star}
    • 97 |
  • {val.star}
    • 98 |
99 |
100 | {val.price} 101 | {val.delete} 102 |
103 |
104 |
105 | ) 106 | })} 107 |
108 | 109 |
110 |
111 | 112 |
113 |
114 |

Fresh Fruits Banner

115 |
116 |
117 |
118 |
119 |
120 | {fruits.map((val) => { 121 | return ( 122 |
123 |
124 | 125 | Fruits 126 |
127 |
128 |

{val.name}

129 |

{val.desc}

130 |
131 |
132 |

${val.price} / kg

133 |
134 | {val.icon} 135 | 136 |
137 |
138 |
139 | ) 140 | })} 141 |
142 |
143 |
    144 |
  • ⇐
    • 145 |
  • 1
    • 146 |
  • 2
    • 147 |
  • 3
    • 148 |
  • 4
    • 149 |
  • 5
    • 150 |
  • ⇒
    • 151 |
152 |
153 | ) 154 | } 155 | 156 | export default Shop 157 | -------------------------------------------------------------------------------- /src/components/ShopDetail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Back from './common/Back' 3 | import { shop_feature, vegetables } from '../data/Data' 4 | import { useDispatch } from 'react-redux'; 5 | import { addToCart } from '../redux/CartSlice'; 6 | 7 | const ShopDetail = () => { 8 | const dispatch = useDispatch(); 9 | return ( 10 |
11 | 12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |

Brocoli

21 |

Category: Vegetables

22 |

3,35 $

23 |
    24 |
  • 25 |
  • 26 |
  • 27 |
  • 28 |
  • 29 |
30 |

The generated Lorem Ipsum is therefore always free from repetition injected humour, or non-characteristic words etc

31 |

Susp endisse ultricies nisi vel quam suscipit. Sabertooth peacock flounder; chain pickerel hatchetfish, pencilfish snailfish

32 |
33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 |
43 |
44 |
45 |
    46 |
  • 47 | 48 |
    • 49 |
  • 50 | 51 |
    • 52 |
53 |
54 |
55 |
56 |

The generated Lorem Ipsum is therefore always free from repetition injected humour, or non-characteristic words etc. Susp endisse ultricies nisi vel quam suscipit

57 |

Sabertooth peacock flounder; chain pickerel hatchetfish, pencilfish snailfish filefish Antarctic icefish goldeye aholehole trumpetfish pilot fish airbreathing catfish, electric ray sweeper.

58 |
59 | 60 | 61 | 62 | 65 | 68 | 69 | 70 | 73 | 76 | 77 | 78 | 81 | 84 | 85 | 86 | 89 | 92 | 93 | 94 | 97 | 100 | 101 | 102 |
63 | Weight : 64 | 66 | 1 Kg 67 |
71 | Country of Origin : 72 | 74 | Agro Farm 75 |
79 | Quality : 80 | 82 | Organic 83 |
87 | Check : 88 | 90 | Healthy 91 |
95 | Min Weight : 96 | 98 | 250 Kg 99 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |

Leave a Reply

110 |
111 |
112 | 113 | 114 |
115 | 116 |
117 |
118 |
119 | Please rate: 120 |
    121 |
  • 122 |
  • 123 |
  • 124 |
  • 125 |
  • 126 |
127 |
128 |
129 | 130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 |
139 |
140 |

Categories

141 |
    142 |
    143 |
  • Apples
    • 144 | (3) 145 |
    146 |
    147 |
  • Oranges
    • 148 | (5) 149 |
    150 |
    151 |
  • Strawbery
    • 152 | (2) 153 |
    154 |
    155 |
  • Banana
    • 156 | (8) 157 |
    158 |
    159 |
  • Pumpkin
    • 160 | (5) 161 |
    162 |
163 |

Featured products

164 |
165 | {shop_feature.map((val) => { 166 | return ( 167 |
168 |
169 | 170 |
171 |
172 |

{val.name}

173 |
    174 |
  • {val.star}
    • 175 |
  • {val.star}
    • 176 |
  • {val.star}
    • 177 |
  • {val.star}
    • 178 |
  • {val.star}
    • 179 |
180 |
181 | {val.price} 182 | {val.delete} 183 |
184 |
185 |
186 | ) 187 | })} 188 |
189 | 190 |
191 |
192 | 193 |
194 |
195 |

Fresh Fruits Banner

196 |
197 |
198 |
199 |
200 |
201 |
202 |

Related products

203 |
204 | {vegetables.slice(0,4).map((val) => { 205 | return ( 206 |
207 |
208 | 209 | Vegetables 210 |
211 |
212 |

{val.name}

213 |

{val.desc}

214 |
215 |
216 |

${val.price} / Kg

217 |
218 | {val.icon} 219 | 220 |
221 |
222 |
223 | ) 224 | })} 225 |
226 |
227 |
228 | ) 229 | } 230 | 231 | export default ShopDetail 232 | -------------------------------------------------------------------------------- /src/components/common/Back.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useLocation } from 'react-router-dom'; 3 | 4 | const Back = ({title}) => { 5 | const location = useLocation(); 6 | return ( 7 | <> 8 |
9 |
10 |

{title}

11 |

Home / Pages / {location.pathname.split('/')[1]}

12 |
13 |
14 | 15 | ) 16 | } 17 | 18 | export default Back 19 | -------------------------------------------------------------------------------- /src/components/common/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 |
7 |
8 |

Fruitables

9 |

Fresh products

10 |
11 |
12 | 13 | 14 |
15 |
    16 |
    • 17 |
    • 18 |
    • 19 |
    • 20 |
21 |
22 |
23 |
24 |
25 |

Why People Like us!

26 |

typesetting, remaining essentially unchanged. It was popularised in the 1960s with the like Aldus PageMaker including of Lorem Ipsum.

27 | 28 |
29 |
30 |

Shop Info

31 |
    32 |
  • About Us
    • 33 |
  • Contact Us
    • 34 |
  • Privacy Policy
    • 35 |
  • Terms & Condition
    • 36 |
  • Return Policy
    • 37 |
  • FAQs & Help
    • 38 |
39 |
40 |
41 |

Account

42 |
    43 |
  • My Account
    • 44 |
  • Shop details
    • 45 |
  • Shopping Cart
    • 46 |
  • Wishlist
    • 47 |
  • Order History
    • 48 |
  • International Orders
    • 49 |
50 |
51 |
52 |

Contact

53 |
54 |

Address: 1429 Netus Rd, NY 48247

55 |

Email: Example@gmail.com

56 |

Phone: +0123 4567 8910

57 |

Payment Accepted

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

©Vegetables Ecommerce, All Right Reserved by Rodi Shammout

65 |
66 |
67 | ) 68 | } 69 | 70 | export default Footer 71 | -------------------------------------------------------------------------------- /src/components/common/header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { useState } from 'react' 4 | import { useSelector } from 'react-redux'; 5 | 6 | const Header = () => { 7 | const [bar, setBar] = useState(false); 8 | const totalItems = useSelector(state => state.cart.totalItems); 9 | return ( 10 |
11 |
12 |
13 |
14 | 15 | 123 Street, New York 16 |
17 |
18 | 19 | Email@Example.com 20 |
21 |
22 |
23 | Privacy Policy 24 | / 25 | Terms of Use 26 | / 27 | Sales and Refunds 28 |
29 |
30 |
31 |
Fruitables
32 |
    33 |
  • Home
    • 34 |
  • Shop
    • 35 |
  • Shop Detail
    • 36 |
  • Pages 37 | 38 |
      39 |
    • Cart
      • 40 |
    • Checkout
      • 41 |
    • Testimonial
      • 42 |
    • 404 Page
      • 43 |
    44 |
    • 45 |
  • Contact
    • 46 |
    47 | 48 | 49 | {totalItems} 50 | 51 | 52 |
    53 |
54 | setBar(!bar)}> 55 |
56 |
57 | ) 58 | } 59 | 60 | export default Header 61 | -------------------------------------------------------------------------------- /src/components/home/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Banner = () => { 4 | return ( 5 |
6 |
7 |
8 |

Fresh Exotic Fruits

9 |

in Our Store

10 |

The generated Lorem Ipsum is therefore always free from repetition injected humour, or non-characteristic words etc.

11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 | 1 19 |
20 | 50$ 21 | Kg 22 |
23 |
24 |
25 |
26 |
27 | ) 28 | } 29 | 30 | export default Banner 31 | -------------------------------------------------------------------------------- /src/components/home/Bestseller.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { bsetseller } from '../../data/Data' 3 | import { useDispatch } from 'react-redux'; 4 | import { addToCart } from '../../redux/CartSlice'; 5 | 6 | const Bestseller = () => { 7 | const dispatch = useDispatch(); 8 | return ( 9 |
10 |
11 |

Bestseller Products

12 |

Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.

13 |
14 | {bsetseller.map((val) => { 15 | return ( 16 |
17 |
18 | 19 |
20 |
21 |
{val.name}
22 |
    23 |
  • {val.star}
    • 24 |
  • {val.star}
    • 25 |
  • {val.star}
    • 26 |
  • {val.star}
    • 27 |
  • {val.star}
    • 28 |
29 |

${val.price} / Kg

30 |
31 | {val.icon} 32 | 33 |
34 |
35 |
36 | ) 37 | })} 38 |
39 |
40 |
41 | ) 42 | } 43 | 44 | export default Bestseller 45 | -------------------------------------------------------------------------------- /src/components/home/Fact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { fact } from '../../data/Data' 3 | 4 | const Fact = () => { 5 | return ( 6 |
7 | {fact.map((val) => { 8 | return ( 9 |
10 | {val.icon} 11 |

{val.name}

12 |

{val.num}

13 |
14 | ) 15 | })} 16 |
17 | ) 18 | } 19 | 20 | export default Fact 21 | -------------------------------------------------------------------------------- /src/components/home/Featured.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { featured } from '../../data/Data' 3 | 4 | const Featured = () => { 5 | return ( 6 |
7 |
8 | { 9 | featured.map((val) => { 10 | return ( 11 |
12 |
13 | {val.icon} 14 |
15 |
{val.name}
16 |

{val.desc}

17 |
18 | ) 19 | }) 20 | } 21 |
22 |
23 | ) 24 | } 25 | 26 | export default Featured 27 | -------------------------------------------------------------------------------- /src/components/home/Fruits.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { fruits } from '../../data/Data' 3 | import { useDispatch } from 'react-redux'; 4 | import { addToCart } from '../../redux/CartSlice'; 5 | 6 | const Fruits = () => { 7 | const dispatch = useDispatch(); 8 | return ( 9 |
10 |
11 |

Our Organic Products

12 |
    13 |
  • All Products
    • 14 |
  • Vegetables
    • 15 |
  • Fruits
    • 16 |
  • Bread
    • 17 |
  • Meat
    • 18 |
19 |
20 |
21 | {fruits.map((val) => { 22 | return ( 23 |
24 |
25 | 26 | Fruits 27 |
28 |
29 |

{val.name}

30 |

{val.desc}

31 |
32 |
33 |

${val.price} / Kg

34 |
35 | {val.icon} 36 | 37 |
38 |
39 |
40 | ) 41 | })} 42 |
43 |
44 | ) 45 | } 46 | 47 | export default Fruits 48 | -------------------------------------------------------------------------------- /src/components/home/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Slider from "react-slick"; 3 | 4 | var settings = { 5 | dots: true, 6 | infinite: true, 7 | speed: 500, 8 | slidesToShow: 1, 9 | slidesToScroll: 1, 10 | }; 11 | 12 | const Hero = () => { 13 | return ( 14 | <> 15 |
16 |
17 |
18 |
19 |

100% Organic Foods

20 |

Organic Veggies & Fruits Foods

21 |
22 | 23 | 24 |
25 |
26 |
27 | 28 |
29 | 30 | Fruits 31 |
32 |
33 | 34 | Vesitables 35 |
36 | 37 |
38 |
39 |
40 |
41 | 42 | ) 43 | } 44 | 45 | export default Hero 46 | -------------------------------------------------------------------------------- /src/components/home/Service.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Service = () => { 4 | return ( 5 |
6 |
7 |
8 | 9 |
10 |

Fresh Apples

11 |

20% OFF

12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 |

Tasty Fruits

21 |

Free delivery

22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 |
30 |

Exotic vegitable

31 |

Discount 30$

32 |
33 |
34 |
35 |
36 |
37 | ) 38 | } 39 | 40 | export default Service 41 | -------------------------------------------------------------------------------- /src/components/home/Vegetables.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { vegetables } from '../../data/Data' 3 | import { useDispatch } from 'react-redux'; 4 | import { addToCart } from '../../redux/CartSlice'; 5 | 6 | const Vegetables = () => { 7 | const dispatch = useDispatch(); 8 | return ( 9 |
10 |
11 |

Fresh Organic Vegetables

12 |
13 |
14 | {vegetables.map((val) => { 15 | return ( 16 |
17 |
18 | 19 | Vegetables 20 |
21 |
22 |

{val.name}

23 |

{val.desc}

24 |
25 |
26 |

${val.price} / Kg

27 |
28 | {val.icon} 29 | 30 |
31 |
32 |
33 | ) 34 | })} 35 |
36 |
37 | ) 38 | } 39 | 40 | export default Vegetables 41 | -------------------------------------------------------------------------------- /src/components/pages/Pages.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | BrowserRouter as Router, 4 | // Switch, 5 | Route, 6 | Routes, 7 | // Link 8 | } from "react-router-dom"; 9 | import Header from '../common/header/Header' 10 | import Home from '../Home'; 11 | import Footer from '../common/footer/Footer'; 12 | import Shop from '../Shop'; 13 | import ShopDetail from '../ShopDetail'; 14 | import Testimonial from '../testimonial/Testimonial'; 15 | import TestimonialMain from '../testimonial/TestimonialMain'; 16 | import Error from '../Error'; 17 | import Contact from '../Contact'; 18 | import Cart from '../Cart'; 19 | import Checkout from '../Checkout'; 20 | 21 | 22 | const Pages = () => { 23 | return ( 24 | <> 25 | 26 |
27 | 28 | }> 29 | }> 30 | }> 31 | }> 32 | }> 33 | }> 34 | }> 35 | }> 36 | 37 |