From 2b01a8c41878624bfbb770a015fecfeac84f132e Mon Sep 17 00:00:00 2001 From: Rupesh Varshney <146447594+rupeshv2121@users.noreply.github.com> Date: Wed, 1 Jan 2025 20:53:35 +0530 Subject: [PATCH 1/3] Fix CSS of Buttons --- src/Pages/Shop.js | 489 +++++++++++++++++++++++++++++++++++----- src/componets/Button.js | 9 +- 2 files changed, 437 insertions(+), 61 deletions(-) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index ff7493f..881d9dd 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -1,9 +1,9 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; -import { addToCart } from '../Store/cartSlice'; -import Button from '../componets/Button'; +import { motion } from "framer-motion"; +import React from "react"; +import { useDispatch } from "react-redux"; +import styled from "styled-components"; +import { addToCart } from "../Store/cartSlice"; +import Button from "../componets/Button"; const ShopContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar @@ -74,7 +74,6 @@ const OverlayText = styled.p` text-align: center; `; - const ProductInfo = styled.div` padding: 1.25rem; background-color: white; @@ -94,54 +93,428 @@ const ProductPrice = styled.p` `; const products = [ - { id: 1, name: 'Espresso', price: 2.5, image: 'https://img.freepik.com/free-photo/caramel-latte-with-chocolade-table_140725-4.jpg?t=st=1727759794~exp=1727763394~hmac=c764d48b2b28767da2c6b996ec20e0d6a5857c19724850db5e46498687e16225&w=740', description: 'A strong, rich coffee shot, perfect for a quick pick-me-up.' }, - { id: 2, name: 'Cappuccino', price: 3.5, image: 'https://img.freepik.com/free-photo/delicious-organic-latte-macchiato-with-milk_23-2148420329.jpg?t=st=1727761406~exp=1727765006~hmac=10f2d9d7a08693daef2ef87ff4edd99d5bc33e1813adb65c8628d088268239b5&w=1380 ', description: 'Creamy and frothy, a classic Italian coffee with steamed milk.' }, - { id: 3, name: 'Latte', price: 4, image: 'https://img.freepik.com/free-photo/cold-chocolate-cocktail-with-ice-cream_140725-940.jpg?t=st=1727759865~exp=1727763465~hmac=ad44e2430bff005bce4db484fbef6f2ec22f05b97b41c8c6c28ecb8508c2d909&w=740 ', description: 'Smooth and milky, a comforting coffee drink with a velvety texture.' }, - { id: 4, name: 'Mocha', price: 4.5, image: 'https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691385.jpg?t=st=1727759888~exp=1727763488~hmac=ea5484acf51753db6069801c3df0caa601e5d09a2265109ba218d040acb3e53c&w=1380 ', description: 'A sweet blend of coffee and chocolate, perfect for chocolate lovers.' }, - { id: 5, name: 'Americano', price: 3, image: 'https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691389.jpg?t=st=1727759909~exp=1727763509~hmac=615986b69635b1e5a35b3a09347203d49046878d7525a9588f94211a3947ff58&w=1380 ', description: 'A diluted espresso shot, similar to brewed coffee but stronger.' }, - { id: 6, name: 'Macchiato', price: 3.5, image: 'https://img.freepik.com/free-photo/assortment-with-frappe-dark-background_23-2148436976.jpg?t=st=1727761354~exp=1727764954~hmac=20b5ddf356f56d12e139084bc8e2c14ad3c71677269de9680db9dc4d09250774&w=740 ', description: 'An espresso with a dollop of foamed milk, rich and creamy.' }, - { id: 7, name: 'Turkish Coffee', price: 3, image: 'https://img.freepik.com/premium-photo/pouring-turkish-coffee_772702-2136.jpg?w=360', description: 'Thick, strong, and unfiltered coffee, traditionally served in small cups.' }, - { id: 8, name: 'Flat white', price: 5.5, image: 'https://static.toiimg.com/thumb/86699095.cms?imgsize=59654&width=509&height=340 ', description: 'Velvety microfoam poured over a double shot of espresso, smooth and creamy.' }, - { id: 9, name: 'Nitro Cold Brew', price: 4.5, image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_ZcJOr1zaqJ-TkW9Ie1PcNRRrgPDnNSgX9A&s ', description: 'Cold brew infused with nitrogen, creating a creamy, Guinness-like texture.' }, - { id: 10, name: 'Doppio', price: 3.4, image: 'https://lifeboostcoffee.com/cdn/shop/articles/Doppio_Espresso_Macchiato.jpg?v=1655197439 ', description: 'A double shot of espresso, strong and intense, perfect for espresso lovers.' }, - { id: 11, name: 'Viennese Coffee', price: 4, image: 'https://irepo.primecp.com/2015/10/241007/Vienna-Coffee-01-12-07-OR_Category-CategoryPageDefault_ID-1242862.jpg?v=1242862 ', description: 'Espresso topped with whipped cream, often served with chocolate shavings.' }, - { id: 12, name: 'Ristretto', price: 5.2, image: 'https://www.castironketo.net/wp-content/uploads/2023/10/is-ristretto-keto-friendly-header-image.jpg ', description: 'A short shot of espresso, sweeter and more concentrated than regular espresso.' }, - { id: 13, name: 'Red Eye', price: 6.2, image: 'https://www.sessioncoffeedenver.com/wp-content/uploads/2024/04/what-is-a-red-eye-coffee.jpg ', description: 'A cup of brewed coffee with a shot of espresso, extra strong and caffeinated.' }, - { id: 14, name: 'Frappé', price: 8.2, image: 'https://img.sndimg.com/food/image/upload/f_auto,c_thumb,q_55,w_860,ar_3:2/v1/img/recipes/23/29/18/x38TQCFcRRiV1FJYbTLP_coffeefrappe2.jpg', description: 'Iced coffee drink blended with milk and sugar, often topped with whipped cream.' }, - { id: 15, name: 'Affogato', price: 8.6, image: 'https://static.wixstatic.com/media/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg/v1/fill/w_568,h_770,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg', description: 'A scoop of vanilla gelato drowned in a shot of hot espresso, sweet and creamy.' }, - { id: 16, name: 'Cortado', price: 6, image: 'https://cdn.shopify.com/s/files/1/0677/6524/0096/files/coffee-in-a-glass-2022-11-02-18-50-07-utc_600x600.jpg?v=1683831169', description: 'Espresso cut with a small amount of warm milk to reduce acidity.' }, - { id: 17, name: 'Café au lait', price: 3.8, image: 'https://blackturtlecoffee.com/cdn/shop/articles/Cafe-Au-Lait-004.jpg?v=1672848240', description: 'Coffee with hot milk, similar to a latte but with a stronger coffee flavor.' }, - { id: 18, name: 'Café Bombón', price: 4.6, image: 'https://www.theworktop.com/wp-content/uploads/2021/11/cafe-bombon.jpg', 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', price: 7.2, image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNlPYx_StS2Y7x9s4hukcCyJZaDm54mgbe8g&s', 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.' }, -] + { + id: 1, + name: "Espresso", + price: 2.5, + image: + "https://img.freepik.com/free-photo/caramel-latte-with-chocolade-table_140725-4.jpg?t=st=1727759794~exp=1727763394~hmac=c764d48b2b28767da2c6b996ec20e0d6a5857c19724850db5e46498687e16225&w=740", + description: "A strong, rich coffee shot, perfect for a quick pick-me-up.", + }, + { + id: 2, + name: "Cappuccino", + price: 3.5, + image: + "https://img.freepik.com/free-photo/delicious-organic-latte-macchiato-with-milk_23-2148420329.jpg?t=st=1727761406~exp=1727765006~hmac=10f2d9d7a08693daef2ef87ff4edd99d5bc33e1813adb65c8628d088268239b5&w=1380 ", + description: + "Creamy and frothy, a classic Italian coffee with steamed milk.", + }, + { + id: 3, + name: "Latte", + price: 4, + image: + "https://img.freepik.com/free-photo/cold-chocolate-cocktail-with-ice-cream_140725-940.jpg?t=st=1727759865~exp=1727763465~hmac=ad44e2430bff005bce4db484fbef6f2ec22f05b97b41c8c6c28ecb8508c2d909&w=740 ", + description: + "Smooth and milky, a comforting coffee drink with a velvety texture.", + }, + { + id: 4, + name: "Mocha", + price: 4.5, + image: + "https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691385.jpg?t=st=1727759888~exp=1727763488~hmac=ea5484acf51753db6069801c3df0caa601e5d09a2265109ba218d040acb3e53c&w=1380 ", + description: + "A sweet blend of coffee and chocolate, perfect for chocolate lovers.", + }, + { + id: 5, + name: "Americano", + price: 3, + image: + "https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691389.jpg?t=st=1727759909~exp=1727763509~hmac=615986b69635b1e5a35b3a09347203d49046878d7525a9588f94211a3947ff58&w=1380 ", + description: + "A diluted espresso shot, similar to brewed coffee but stronger.", + }, + { + id: 6, + name: "Macchiato", + price: 3.5, + image: + "https://img.freepik.com/free-photo/assortment-with-frappe-dark-background_23-2148436976.jpg?t=st=1727761354~exp=1727764954~hmac=20b5ddf356f56d12e139084bc8e2c14ad3c71677269de9680db9dc4d09250774&w=740 ", + description: "An espresso with a dollop of foamed milk, rich and creamy.", + }, + { + id: 7, + name: "Turkish Coffee", + price: 3, + image: + "https://img.freepik.com/premium-photo/pouring-turkish-coffee_772702-2136.jpg?w=360", + description: + "Thick, strong, and unfiltered coffee, traditionally served in small cups.", + }, + { + id: 8, + name: "Flat white", + price: 5.5, + image: + "https://static.toiimg.com/thumb/86699095.cms?imgsize=59654&width=509&height=340 ", + description: + "Velvety microfoam poured over a double shot of espresso, smooth and creamy.", + }, + { + id: 9, + name: "Nitro Cold Brew", + price: 4.5, + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_ZcJOr1zaqJ-TkW9Ie1PcNRRrgPDnNSgX9A&s ", + description: + "Cold brew infused with nitrogen, creating a creamy, Guinness-like texture.", + }, + { + id: 10, + name: "Doppio", + price: 3.4, + image: + "https://lifeboostcoffee.com/cdn/shop/articles/Doppio_Espresso_Macchiato.jpg?v=1655197439 ", + description: + "A double shot of espresso, strong and intense, perfect for espresso lovers.", + }, + { + id: 11, + name: "Viennese Coffee", + price: 4, + image: + "https://irepo.primecp.com/2015/10/241007/Vienna-Coffee-01-12-07-OR_Category-CategoryPageDefault_ID-1242862.jpg?v=1242862 ", + description: + "Espresso topped with whipped cream, often served with chocolate shavings.", + }, + { + id: 12, + name: "Ristretto", + price: 5.2, + image: + "https://www.castironketo.net/wp-content/uploads/2023/10/is-ristretto-keto-friendly-header-image.jpg ", + description: + "A short shot of espresso, sweeter and more concentrated than regular espresso.", + }, + { + id: 13, + name: "Red Eye", + price: 6.2, + image: + "https://www.sessioncoffeedenver.com/wp-content/uploads/2024/04/what-is-a-red-eye-coffee.jpg ", + description: + "A cup of brewed coffee with a shot of espresso, extra strong and caffeinated.", + }, + { + id: 14, + name: "Frappé", + price: 8.2, + image: + "https://img.sndimg.com/food/image/upload/f_auto,c_thumb,q_55,w_860,ar_3:2/v1/img/recipes/23/29/18/x38TQCFcRRiV1FJYbTLP_coffeefrappe2.jpg", + description: + "Iced coffee drink blended with milk and sugar, often topped with whipped cream.", + }, + { + id: 15, + name: "Affogato", + price: 8.6, + image: + "https://static.wixstatic.com/media/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg/v1/fill/w_568,h_770,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg", + description: + "A scoop of vanilla gelato drowned in a shot of hot espresso, sweet and creamy.", + }, + { + id: 16, + name: "Cortado", + price: 6, + image: + "https://cdn.shopify.com/s/files/1/0677/6524/0096/files/coffee-in-a-glass-2022-11-02-18-50-07-utc_600x600.jpg?v=1683831169", + description: + "Espresso cut with a small amount of warm milk to reduce acidity.", + }, + { + id: 17, + name: "Café au lait", + price: 3.8, + image: + "https://blackturtlecoffee.com/cdn/shop/articles/Cafe-Au-Lait-004.jpg?v=1672848240", + description: + "Coffee with hot milk, similar to a latte but with a stronger coffee flavor.", + }, + { + id: 18, + name: "Café Bombón", + price: 4.6, + image: + "https://www.theworktop.com/wp-content/uploads/2021/11/cafe-bombon.jpg", + 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", + price: 7.2, + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNlPYx_StS2Y7x9s4hukcCyJZaDm54mgbe8g&s", + 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.", + }, +]; function Shop() { const dispatch = useDispatch(); @@ -167,7 +540,7 @@ function Shop() { animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} > -
+
{product.description} @@ -176,7 +549,9 @@ function Shop() { {product.name} ${product.price.toFixed(2)} - + ))} diff --git a/src/componets/Button.js b/src/componets/Button.js index 807d39f..062cf7c 100644 --- a/src/componets/Button.js +++ b/src/componets/Button.js @@ -1,19 +1,20 @@ +import { motion } from 'framer-motion'; import React from 'react'; import styled from 'styled-components'; -import { motion } from 'framer-motion'; const StyledButton = styled(motion.button)` padding: 0.5rem 1rem; font-size: 1rem; - background-color: ${props => props.primary ? '#7c2214' : 'transparent'}; - color: ${props => props.primary ? 'white' : '#7c2214'}; + background-color: ${props => props.primary ? '#7c2214' : '#7c2214'}; + color: ${props => props.primary ? 'white' : 'white'}; border: 2px solid #7c2214; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; &:hover { - background-color: ${props => props.primary ? '#5e1a0f' : 'rgba(124, 34, 20, 0.1)'}; + background-color: ${props => props.primary ? '#7c2214' : 'white'}; + color: ${props => props.primary ? '#7c2214' : '#7c2214'} } `; From 64e1387fa9d1fbac4e64b815bbae8aded09d60ad Mon Sep 17 00:00:00 2001 From: Rupesh Varshney <146447594+rupeshv2121@users.noreply.github.com> Date: Wed, 1 Jan 2025 23:58:58 +0530 Subject: [PATCH 2/3] Issue Resolved --- src/Pages/Home.css | 18 +++++++++--------- src/Pages/Home.js | 12 ++++++------ src/componets/Button.js | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/Pages/Home.css b/src/Pages/Home.css index 1b4f556..03b81f2 100644 --- a/src/Pages/Home.css +++ b/src/Pages/Home.css @@ -1,12 +1,12 @@ /* CafeHome.css */ -@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap"); :root { - --primary-coffee: #8B4513; - --secondary-coffee: #D2691E; - --cream: #FFE4B5; - --light-cream: #FDF5E6; - --dark-coffee: #2C130B; + --primary-coffee: #8b4513; + --secondary-coffee: #d2691e; + --cream: #ffe4b5; + --light-cream: #fdf5e6; + --dark-coffee: #2c130b; } /* Custom Scrollbar */ @@ -79,11 +79,11 @@ html { .hero-section { background-attachment: scroll; } - + .feature-card { margin: 1rem; } - + .specialty-image { width: 250px; height: 250px; @@ -95,4 +95,4 @@ html { ::selection { background: var(--secondary-coffee); color: var(--cream); -} \ No newline at end of file +} diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 5064dd9..565c09f 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -1,9 +1,9 @@ -import React, { useEffect, useRef } from 'react'; -import { Link } from 'react-router-dom'; +import { motion } from 'framer-motion'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import React, { useEffect, useRef } from 'react'; +import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { motion } from 'framer-motion'; import Button from '../componets/Button'; import './Home.css'; @@ -222,7 +222,7 @@ function Home() { useEffect(() => { const features = featuresRef.current.children; const specialties = specialtyRef.current.children; - + gsap.fromTo( features, { y: 50, opacity: 0 }, @@ -280,8 +280,8 @@ function Home() { ↓ - - + + Premium Beans We source the finest coffee beans from around the world. diff --git a/src/componets/Button.js b/src/componets/Button.js index 062cf7c..3c6afe6 100644 --- a/src/componets/Button.js +++ b/src/componets/Button.js @@ -14,7 +14,7 @@ const StyledButton = styled(motion.button)` &:hover { background-color: ${props => props.primary ? '#7c2214' : 'white'}; - color: ${props => props.primary ? '#7c2214' : '#7c2214'} + color: ${props => props.primary ? 'white' : '#7c2214'} } `; From 034496796dc4946410728dd04d58cb85b87ff650 Mon Sep 17 00:00:00 2001 From: Rupesh Varshney <146447594+rupeshv2121@users.noreply.github.com> Date: Thu, 2 Jan 2025 11:23:26 +0530 Subject: [PATCH 3/3] Fix the Issue --- src/Pages/Shop.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index b7b3b4b..739b892 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -5,11 +5,6 @@ import { useDispatch } from "react-redux"; import styled from "styled-components"; import { addToCart } from "../Store/cartSlice"; import Button from "../componets/Button"; -import React from 'react'; -import { useDispatch } from 'react-redux'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; -import { addToCart } from '../Store/cartSlice'; const ShopContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar