From 1abf0ef2eb8c2233a78050f348d099f25431ed06 Mon Sep 17 00:00:00 2001 From: abhas20 Date: Sun, 5 Jan 2025 19:33:42 +0530 Subject: [PATCH 1/2] Added different section --- package-lock.json | 190 ++++++++++++++ src/Pages/Shop.js | 648 ++++++++++++++++++++++++++++------------------ 2 files changed, 586 insertions(+), 252 deletions(-) diff --git a/package-lock.json b/package-lock.json index c69f3e6..6d8cef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,6 +4216,112 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6488,13 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6532,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "license": "MIT", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7879,16 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13766,13 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "license": "MIT", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13845,18 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17666,6 +17815,13 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "license": "MIT", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18917,13 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19196,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19480,19 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 5129f86..3d94afe 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -18,6 +18,7 @@ const Title = styled(motion.h1)` margin-bottom: 2rem; text-align: center; color: #78350f; // Warm brown color + margin-top: 2rem; // Added top margin for spacing `; const ProductGrid = styled.div` @@ -26,6 +27,8 @@ const ProductGrid = styled.div` gap: 2rem; max-width: 1100px; // Slightly reduced to center content more margin: 0 auto; + padding: 2rem; + `; const ProductCard = styled(motion.div)` background: linear-gradient(145deg, #ffffff, #e6e6e6); @@ -279,60 +282,7 @@ const products = [ description: "Espresso served with sweetened condensed milk, creating a layered effect.", }, - { - id: 19, - name: "Chai", - price: 7.3, - image: - "https://img.freepik.com/free-photo/frappe-glass-slices-bread-with-seeds_23-2148623233.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid", - description: - "Spiced black tea brewed with milk and sweetened, aromatic and comforting.", - }, - { - id: 20, - name: "Lemon Tea", - price: 4.1, - image: - "https://img.freepik.com/free-photo/cup-hot-mint-tea_144627-34462.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", - description: - "Refreshing black tea infused with lemon, perfect for a soothing experience.", - }, - { - id: 21, - name: "Green Tea", - price: 3.4, - image: - "https://img.freepik.com/free-photo/cup-green-tea_144627-34463.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", - description: - "Light and delicate, made from unfermented tea leaves, rich in antioxidants.", - }, - { - id: 22, - name: "Black Tea", - price: 4.5, - image: - "https://img.freepik.com/free-photo/cup-black-tea_144627-34464.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", - description: - "Strong and full-bodied, made from fully oxidized tea leaves, classic and robust.", - }, - { - id: 23, - name: "Herbal Tea", - price: 5.5, - image: - "https://img.freepik.com/premium-photo/black-tea-cup-glass-mint-tea-leaves-white-isolated_127657-17608.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ", - description: - "Caffeine-free tea made from herbs, fruits, or spices, naturally soothing.", - }, - { - id: 24, - name: "Iced Tea", - price: 5.6, - image: - "https://img.freepik.com/free-vector/long-island-ice-tea-cocktail-realistic_1284-3888.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ", - description: - "Refreshing chilled tea, often sweetened and served with lemon, perfect for hot days.", - }, + { id: 25, name: "Irish Coffee", @@ -342,206 +292,268 @@ const products = [ description: "Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.", }, - { - id: 26, - name: "Strawberry smoothie", - price: 6.2, - image: - "https://www.eatingwell.com/thmb/TBp6lbiwoYPhRP4N__4sROiUDhA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/mixed-berry-breakfast-smoothie-7959466-1x1-e0ad2304222e49508cda7b73b21de921.jpg", - description: - "Creamy and sweet, made with fresh strawberries, yogurt, and a touch of honey.", - }, - { - id: 27, - name: "Mango smoothie", - price: 3.2, - image: - "https://cdn.loveandlemons.com/wp-content/uploads/2023/05/mango-smoothie.jpg", - description: - "Tropical and refreshing, blended with ripe mangoes, banana, and coconut milk.", - }, - { - id: 28, - name: "Strawberry banana smoothie", - price: 6.45, - image: - "https://www.purelykaylie.com/wp-content/uploads/2023/07/strawberry-banana-smoothie-bowl-5.jpg", - description: - "A classic combination of strawberries and bananas, creamy and naturally sweet.", - }, - { - id: 29, - name: "Creamy, Nutty Coffee Smoothie", - price: 7.2, - image: - "https://www.seriouseats.com/thmb/dwKjOOPQu1ki3pSf1M4eB7FGVzI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/20240206-SEA-Coffee-Smoothie-hero-27d1864a41cc411ea7ff0c64ada77a2e.jpg", - description: - "A rich blend of coffee, nuts, and cream, perfect for a morning energy boost.", - }, - { - id: 30, - name: "Coffee Smoothie", - price: 6.3, - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-Y9in1wQf-XCl9sdyuw5pXWT_CrYn8P5j7A&s", - description: - "Creamy and caffeinated, made with cold brew, banana, and almond milk.", - }, - { - id: 31, - name: "Chocolate Milkshake", - price: 5.2, - image: - "https://www.sharmispassions.com/wp-content/uploads/2012/07/chocolate-milkshake1.jpg", - description: - "Rich and indulgent, made with chocolate ice cream, milk, and whipped cream.", - }, - { - id: 32, - name: "Oreo Milkshake", - price: 5.2, - image: - "https://www.solara.in/cdn/shop/articles/Oreo_Milkshake.jpg?v=1715757748&width=2048", - description: - "Creamy and delicious, blended with Oreo cookies, ice cream, and milk.", - }, - { - id: 33, - name: "Strawberry Oreo Milkshake", - price: 2.6, - image: - "https://marleysmenu.com/wp-content/uploads/2021/08/Strawberry-Oreo-Milkshake-Featured-Image.jpg", - description: - "A sweet blend of strawberries, Oreo cookies, and ice cream, perfect for dessert lovers.", - }, - { - id: 34, - name: "Mixed Nut and Fruit Milkshake", - price: 8.2, - image: - "https://images.mrcook.app/recipe-image/018d50f7-344f-7744-97e3-1f89e5a3cf29", - description: - "A nutritious blend of mixed nuts, fruits, and milk, creamy and satisfying.", - }, - { - id: 35, - name: "Peanut Butter Milkshake", - price: 5.8, - image: - "https://www.julieseatsandtreats.com/wp-content/uploads/2021/08/Peanut-Butter-Milkshake-Square.jpg", - description: - "Rich and creamy, made with peanut butter, ice cream, and milk, a peanut butter lover's dream.", - }, - { - id: 36, - name: "Oreo cheese cake", - price: 9.2, - image: - "https://handletheheat.com/wp-content/uploads/2015/11/oreo-cheesecake-recipe-SQUARE.jpg", - description: - "Creamy cheesecake with an Oreo crust and topping, rich and indulgent.", - }, - { - id: 37, - name: "Chocolate cake", - price: 7.2, - image: - "https://img.freepik.com/free-photo/chocolate-cake_1203-8942.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Moist and decadent, a classic chocolate cake perfect for any celebration.", - }, - { - id: 38, - name: "Red velvet cake", - price: 4.2, - image: - "https://img.freepik.com/free-photo/top-view-red-strawberry-cake-delicious-with-tea-table-fruit-color-cake-biscuit-sweet_140725-28319.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Rich and velvety, a moist red cake with cream cheese frosting, elegant and delicious.", - }, - { - id: 39, - name: "Cheese cake", - price: 8.2, - image: - "https://img.freepik.com/premium-photo/citrus-cheesecake-cake-with-kumquats_82780-1574.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Creamy and smooth, a classic cheesecake with a graham cracker crust, perfect for dessert.", - }, - { - id: 40, - name: "Blueberry cake", - price: 3.2, - image: - "https://img.freepik.com/premium-photo/pieces-pie-from-cottage-cheese-blueberries_116441-1516.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Moist and bursting with blueberries, a sweet and tangy cake perfect for any occasion.", - }, - { - id: 41, - name: "Strawberry cake", - price: 6, - image: - "https://img.freepik.com/free-photo/delicious-cake-with-strawberries_23-2150797874.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Light and fluffy, a sweet strawberry cake with creamy frosting, perfect for summer.", - }, - { - id: 42, - name: "Salad", - price: 7.3, - image: - "https://img.freepik.com/free-photo/dietary-salad-with-tomatoes-feta-lettuce-spinach-pine-nuts_2829-20128.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Fresh and healthy, a mix of greens, vegetables, and a tangy dressing, perfect for a light meal.", - }, - { - id: 43, - name: "Tomato soup", - price: 6.7, - image: - "https://img.freepik.com/free-photo/portrait-shooting-tomato-soup-with-crackers-cheese-tomatoes-bread-table_141793-2858.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Warm and comforting, a classic tomato soup perfect for a cozy meal, often served with grilled cheese.", - }, - { - id: 44, - name: "Chicken Noodle soup", - price: 8.2, - image: - "https://img.freepik.com/free-photo/delicious-noodle-soup-with-chicken-uncooked-pasta-small-brown-bowl-spoon-garlic-dark-background_140725-140085.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Hearty and soothing, a classic soup with chicken, noodles, and vegetables, perfect for cold days.", - }, - { - id: 45, - name: "Miso soup", - price: 7.5, - image: - "https://img.freepik.com/free-photo/top-view-japanese-food-bowls-arrangement_23-2148809848.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Savory and umami-rich, a traditional Japanese soup made with miso paste and dashi broth.", - }, - { - id: 46, - name: "Cold cucumber soup", - price: 7.34, - image: - "https://img.freepik.com/free-photo/cold-cucumber-soup-with-dried-tomatoes-mozzarella_2829-14287.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Refreshing and cool, a chilled soup made with cucumbers, yogurt, and herbs, perfect for summer.", - }, - { - id: 47, - name: "Tom Yum Soup", - price: 9.2, - image: - "https://img.freepik.com/free-photo/tom-yum-kung-thai-hot-spicy-soup-shrimp-with-lemon-grass-lemon-galangal-chilli-wooden-table-thailand-food_1150-21078.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", - description: - "Spicy and aromatic, a Thai soup with lemongrass, kaffir lime leaves, and chilies, often with shrimp.", - }, + +]; + +const product1=[{ + id: 19, + name: "Chai", + price: 7.3, + image: + "https://img.freepik.com/free-photo/frappe-glass-slices-bread-with-seeds_23-2148623233.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid", + description: + "Spiced black tea brewed with milk and sweetened, aromatic and comforting.", +}, +{ + id: 20, + name: "Lemon Tea", + price: 4.1, + image: + "https://img.freepik.com/free-photo/cup-hot-mint-tea_144627-34462.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", + description: + "Refreshing black tea infused with lemon, perfect for a soothing experience.", +}, +{ + id: 21, + name: "Green Tea", + price: 3.4, + image: + "https://img.freepik.com/free-photo/cup-green-tea_144627-34463.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", + description: + "Light and delicate, made from unfermented tea leaves, rich in antioxidants.", +}, +{ + id: 22, + name: "Black Tea", + price: 4.5, + image: + "https://img.freepik.com/free-photo/cup-black-tea_144627-34464.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ", + description: + "Strong and full-bodied, made from fully oxidized tea leaves, classic and robust.", +}, +{ + id: 23, + name: "Herbal Tea", + price: 5.5, + image: + "https://img.freepik.com/premium-photo/black-tea-cup-glass-mint-tea-leaves-white-isolated_127657-17608.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ", + description: + "Caffeine-free tea made from herbs, fruits, or spices, naturally soothing.", +}, +{ + id: 24, + name: "Iced Tea", + price: 5.6, + image: + "https://img.freepik.com/free-vector/long-island-ice-tea-cocktail-realistic_1284-3888.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ", + description: + "Refreshing chilled tea, often sweetened and served with lemon, perfect for hot days.", +},]; + +const product2=[{ + id: 26, + name: "Strawberry smoothie", + price: 6.2, + image: + "https://www.eatingwell.com/thmb/TBp6lbiwoYPhRP4N__4sROiUDhA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/mixed-berry-breakfast-smoothie-7959466-1x1-e0ad2304222e49508cda7b73b21de921.jpg", + description: + "Creamy and sweet, made with fresh strawberries, yogurt, and a touch of honey.", +}, +{ + id: 27, + name: "Mango smoothie", + price: 3.2, + image: + "https://cdn.loveandlemons.com/wp-content/uploads/2023/05/mango-smoothie.jpg", + description: + "Tropical and refreshing, blended with ripe mangoes, banana, and coconut milk.", +}, +{ + id: 28, + name: "Strawberry banana smoothie", + price: 6.45, + image: + "https://www.purelykaylie.com/wp-content/uploads/2023/07/strawberry-banana-smoothie-bowl-5.jpg", + description: + "A classic combination of strawberries and bananas, creamy and naturally sweet.", +}, +{ + id: 29, + name: "Creamy, Nutty Coffee Smoothie", + price: 7.2, + image: + "https://www.seriouseats.com/thmb/dwKjOOPQu1ki3pSf1M4eB7FGVzI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/20240206-SEA-Coffee-Smoothie-hero-27d1864a41cc411ea7ff0c64ada77a2e.jpg", + description: + "A rich blend of coffee, nuts, and cream, perfect for a morning energy boost.", +}, +{ + id: 30, + name: "Coffee Smoothie", + price: 6.3, + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-Y9in1wQf-XCl9sdyuw5pXWT_CrYn8P5j7A&s", + description: + "Creamy and caffeinated, made with cold brew, banana, and almond milk.", +}, +{ + id: 31, + name: "Chocolate Milkshake", + price: 5.2, + image: + "https://www.sharmispassions.com/wp-content/uploads/2012/07/chocolate-milkshake1.jpg", + description: + "Rich and indulgent, made with chocolate ice cream, milk, and whipped cream.", +}, +{ + id: 32, + name: "Oreo Milkshake", + price: 5.2, + image: + "https://www.solara.in/cdn/shop/articles/Oreo_Milkshake.jpg?v=1715757748&width=2048", + description: + "Creamy and delicious, blended with Oreo cookies, ice cream, and milk.", +}, +{ + id: 33, + name: "Strawberry Oreo Milkshake", + price: 2.6, + image: + "https://marleysmenu.com/wp-content/uploads/2021/08/Strawberry-Oreo-Milkshake-Featured-Image.jpg", + description: + "A sweet blend of strawberries, Oreo cookies, and ice cream, perfect for dessert lovers.", +}, +{ + id: 34, + name: "Mixed Nut and Fruit Milkshake", + price: 8.2, + image: + "https://images.mrcook.app/recipe-image/018d50f7-344f-7744-97e3-1f89e5a3cf29", + description: + "A nutritious blend of mixed nuts, fruits, and milk, creamy and satisfying.", +}, +{ + id: 35, + name: "Peanut Butter Milkshake", + price: 5.8, + image: + "https://www.julieseatsandtreats.com/wp-content/uploads/2021/08/Peanut-Butter-Milkshake-Square.jpg", + description: + "Rich and creamy, made with peanut butter, ice cream, and milk, a peanut butter lover's dream.", +}, ]; +const product3=[{ + id: 36, + name: "Oreo cheese cake", + price: 9.2, + image: + "https://handletheheat.com/wp-content/uploads/2015/11/oreo-cheesecake-recipe-SQUARE.jpg", + description: + "Creamy cheesecake with an Oreo crust and topping, rich and indulgent.", +}, +{ + id: 37, + name: "Chocolate cake", + price: 7.2, + image: + "https://img.freepik.com/free-photo/chocolate-cake_1203-8942.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Moist and decadent, a classic chocolate cake perfect for any celebration.", +}, +{ + id: 38, + name: "Red velvet cake", + price: 4.2, + image: + "https://img.freepik.com/free-photo/top-view-red-strawberry-cake-delicious-with-tea-table-fruit-color-cake-biscuit-sweet_140725-28319.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Rich and velvety, a moist red cake with cream cheese frosting, elegant and delicious.", +}, +{ + id: 39, + name: "Cheese cake", + price: 8.2, + image: + "https://img.freepik.com/premium-photo/citrus-cheesecake-cake-with-kumquats_82780-1574.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Creamy and smooth, a classic cheesecake with a graham cracker crust, perfect for dessert.", +}, +{ + id: 40, + name: "Blueberry cake", + price: 3.2, + image: + "https://img.freepik.com/premium-photo/pieces-pie-from-cottage-cheese-blueberries_116441-1516.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Moist and bursting with blueberries, a sweet and tangy cake perfect for any occasion.", +}, +{ + id: 41, + name: "Strawberry cake", + price: 6, + image: + "https://img.freepik.com/free-photo/delicious-cake-with-strawberries_23-2150797874.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Light and fluffy, a sweet strawberry cake with creamy frosting, perfect for summer.", +}, +]; + +const product4=[{ + id: 42, + name: "Salad", + price: 7.3, + image: + "https://img.freepik.com/free-photo/dietary-salad-with-tomatoes-feta-lettuce-spinach-pine-nuts_2829-20128.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Fresh and healthy, a mix of greens, vegetables, and a tangy dressing, perfect for a light meal.", +}, +{ + id: 43, + name: "Tomato soup", + price: 6.7, + image: + "https://img.freepik.com/free-photo/portrait-shooting-tomato-soup-with-crackers-cheese-tomatoes-bread-table_141793-2858.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Warm and comforting, a classic tomato soup perfect for a cozy meal, often served with grilled cheese.", +}, +{ + id: 44, + name: "Chicken Noodle soup", + price: 8.2, + image: + "https://img.freepik.com/free-photo/delicious-noodle-soup-with-chicken-uncooked-pasta-small-brown-bowl-spoon-garlic-dark-background_140725-140085.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Hearty and soothing, a classic soup with chicken, noodles, and vegetables, perfect for cold days.", +}, +{ + id: 45, + name: "Miso soup", + price: 7.5, + image: + "https://img.freepik.com/free-photo/top-view-japanese-food-bowls-arrangement_23-2148809848.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Savory and umami-rich, a traditional Japanese soup made with miso paste and dashi broth.", +}, +{ + id: 46, + name: "Cold cucumber soup", + price: 7.34, + image: + "https://img.freepik.com/free-photo/cold-cucumber-soup-with-dried-tomatoes-mozzarella_2829-14287.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Refreshing and cool, a chilled soup made with cucumbers, yogurt, and herbs, perfect for summer.", +}, +{ + id: 47, + name: "Tom Yum Soup", + price: 9.2, + image: + "https://img.freepik.com/free-photo/tom-yum-kung-thai-hot-spicy-soup-shrimp-with-lemon-grass-lemon-galangal-chilli-wooden-table-thailand-food_1150-21078.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid", + description: + "Spicy and aromatic, a Thai soup with lemongrass, kaffir lime leaves, and chilies, often with shrimp.", +},]; + + function Shop() { const dispatch = useDispatch(); @@ -584,6 +596,138 @@ function Shop() { ))} + + Our Tea Selection + + + {product1.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + Our Milksake & Smoothie Selection + + + {product2.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + Our Cake Selection + + + {product3.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + Our Soup Selection + + + {product4.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + ); } From e69e83451a158aac0fff6695a802101ba8111508 Mon Sep 17 00:00:00 2001 From: abhas20 Date: Sun, 5 Jan 2025 19:54:49 +0530 Subject: [PATCH 2/2] added few comments --- src/Pages/Shop.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 3d94afe..62b2d32 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -121,6 +121,7 @@ const StyledButton = styled.button` } `; +// Added Cofee data const products = [ { id: 1, @@ -295,6 +296,7 @@ const products = [ ]; +// Added Tea data const product1=[{ id: 19, name: "Chai", @@ -350,6 +352,7 @@ const product1=[{ "Refreshing chilled tea, often sweetened and served with lemon, perfect for hot days.", },]; +// Added Milkshake & Smoothie data const product2=[{ id: 26, name: "Strawberry smoothie", @@ -442,6 +445,7 @@ const product2=[{ }, ]; +// Added Cake data const product3=[{ id: 36, name: "Oreo cheese cake", @@ -498,6 +502,7 @@ const product3=[{ }, ]; +// Added Soup data const product4=[{ id: 42, name: "Salad",