diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 12658b9..ece4153 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -1,4 +1,6 @@ import { useDispatch } from 'react-redux'; +// import React, { useState } from 'react'; +// import { addToCart, removeFromCart } from '../Store/cartSlice'; import styled from 'styled-components'; import { motion } from 'framer-motion'; import { addToCart } from '../Store/cartSlice'; diff --git a/src/Pages/cake.js b/src/Pages/cake.js index 04cda94..45c3170 100644 --- a/src/Pages/cake.js +++ b/src/Pages/cake.js @@ -1,9 +1,8 @@ -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"; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { addToCart, removeFromCart } from '../Store/cartSlice'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; const CakeContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar @@ -12,13 +11,6 @@ const CakeContainer = styled.div` background-color: #fffbeb; // Warm background color `; -const Title = styled(motion.h1)` - font-size: 2.5rem; - margin-bottom: 2rem; - text-align: center; - color: #78350f; // Warm brown color -`; - const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -34,8 +26,8 @@ const ProductCard = styled(motion.div)` box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; - z-index:50; -&:hover { + + &:hover { transform: translateY(-5px); box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); } @@ -43,29 +35,17 @@ const ProductCard = styled(motion.div)` &:hover .overlay { opacity: 1; } - `; const ProductImage = styled.img` width: 100%; height: 220px; - object-fit:center; + object-fit: cover; `; -const Overlay = styled.div` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - padding: 1rem; - text-align: center; +const ProductInfo = styled.div` + padding: 1.25rem; + background-color: white; `; const ProductName = styled.h3` @@ -74,185 +54,126 @@ const ProductName = styled.h3` font-weight: 600; box-sizing: border-box; `; -const ProductInfo1 = styled.div` -display:flex; - align-items:center; - justify-content:space-between; -`; -const OverlayText = styled.p` - font-size: 1rem; - color: #333; - text-align: center; -`; - -const ProductInfo = styled.div` - padding: 1.25rem; - background-color: white; -`; const ProductPrice = styled.p` - font-size: 1.5rem; + font-size: 1.1rem; color: #4a2c2a; margin-bottom: 1rem; font-weight: 600; - text-align:center; `; - -const StyledButton = styled.button` - .CartBtn { - width: 140px; - height: 40px; - border-radius: 12px; - margin-left: 25px - border: none; - background-color: rgb(255, 208, 0); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition-duration: .5s; - overflow: hidden; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103); - position: relative; - } - - .IconContainer { - position: absolute; - left: -50px; - width: 30px; - height: 30px; - background-color: transparent; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - z-index: 2; - transition-duration: .5s; - } - - .icon { - border-radius: 1px; - } - - .text { - height: 100%; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - color: rgb(17, 17, 17); - z-index: 1; - transition-duration: .5s; - font-size: 1.04em; - font-weight: 600; - } - - .CartBtn:hover .IconContainer { - transform: translateX(58px); - border-radius: 40px; - transition-duration: .5s; - } - - .CartBtn:hover .text { - transform: translate(10px,0px); - transition-duration: .5s; - } - - .CartBtn:active { - transform: scale(0.95); - transition-duration: .5s; - } +const Title = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; // Warm brown color `; -const StyledWrapper = styled.div` - .heart-container { - --heart-color: maroon; - position: relative; - width: 50px; - height: 40px; - transition: .3s; - z-index:100; - - } +const Button = styled.button` + background: #78350f; + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .checkbox { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - z-index: 20; - cursor: pointer; + &:hover { + background:#78350f; + transform: scale(1.05); } - - .heart-container .svg-container { - width:100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .svg-outline, - .heart-container .svg-filled { - fill: var(--heart-color); - position: absolute; - } +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + margin-left: 3rem; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + margin-top: 1rem; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .svg-filled { - animation: keyframes-svg-filled 1s; - display: none; + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); } - - .heart-container .svg-celebrate { - position: absolute; - animation: keyframes-svg-celebrate .5s; - animation-fill-mode: forwards; - display: none; - stroke: var(--heart-color); - fill: var(--heart-color); - stroke-width: 2px; + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .checkbox:checked~.svg-container .svg-filled { - display: block - } +const QuantityControls = styled.div` + display: flex; + align-items: center; + gap: 10px; + margin-top: 10px; +`; - .heart-container .checkbox:checked~.svg-container .svg-celebrate { - display: block - } +const QuantityButton = styled(Button)` + padding: 5px 10px; + min-width: 30px; +`; - @keyframes keyframes-svg-filled { - 0% { - transform: scale(0); - } +const QuantityDisplay = styled.span` + font-weight: bold; + min-width: 20px; + text-align: center; +`; - 25% { - transform: scale(1.2); - } +function Cake() { + const dispatch = useDispatch(); + const [quantities, setQuantities] = useState({}); - 50% { - transform: scale(1); - filter: brightness(1.5); + const handleAddToCart = (product) => { + if (!quantities[product.id]) { + setQuantities({ + ...quantities, + [product.id]: 1 + }); + dispatch(addToCart({ ...product, quantity: 1 })); } - } + }; - @keyframes keyframes-svg-celebrate { - 0% { - transform: scale(0); - } + const handleIncrement = (product) => { + const newQuantity = (quantities[product.id] || 0) + 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + }; - 50% { - opacity: 1; - filter: brightness(1.5); + const handleDecrement = (product) => { + if (quantities[product.id] > 1) { + const newQuantity = quantities[product.id] - 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + } else { + setQuantities({ + ...quantities, + [product.id]: 0 + }); + dispatch(removeFromCart(product.id)); } + }; - 100% { - transform: scale(1.4); - opacity: 0; - display: none; - }`; - -const products = [ + const products = [ { id: 36, name: "Oreo cheese cake", @@ -308,80 +229,42 @@ const products = [ "Light and fluffy, a sweet strawberry cake with creamy frosting, perfect for summer.", }, ]; -function Cake() { - const dispatch = useDispatch(); - - const handleAddToCart = (product) => { - dispatch(addToCart(product)); - }; - - return ( - - + <Title initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Our Cake Selection + Our Cake Selection - - {products.map((product) => ( - -
- -
- - - - - - - - - - - - - - - - -
-
-
- - - {product.description} - -
- - - {product.name} - ${product.price.toFixed(2)} - - + + {products.map((product) => ( + + + + {product.name} + ${product.price.toFixed(2)} + {!quantities[product.id] ? ( - handleAddToCart(product)}> - - - - ))} - - - ); - } - - export default Cake; - \ No newline at end of file + + ) : ( + + handleDecrement(product)}>- + {quantities[product.id]} + handleIncrement(product)}>+ + + )} + handleAddToCart(product)}>Buy Now + + + ))} + + + ); +} + +export default Cake; diff --git a/src/Pages/cart.js b/src/Pages/cart.js index 6392b52..5d3f3b5 100644 --- a/src/Pages/cart.js +++ b/src/Pages/cart.js @@ -1,6 +1,6 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { removeFromCart, updateQuantity } from '../Store/cartSlice'; +import { removeFromCart, updateQuantity, clearCart } from '../Store/cartSlice'; // Import clearCart action import styled from 'styled-components'; import { motion } from 'framer-motion'; @@ -46,19 +46,38 @@ const QuantityInput = styled.input` `; const RemoveButton = styled(motion.button)` - background-color: #ff4136; + background:rgb(147, 82, 77); color: white; border: none; padding: 0.5rem; - border-radius: 4px; + border-radius: 6px; cursor: pointer; `; -const TotalPrice = styled.div` - font-size: 1.5rem; - font-weight: bold; - text-align: right; +const SummaryTable = styled.table` + width: 100%; margin-top: 2rem; + border-collapse: collapse; +`; + +const SummaryRow = styled.tr` + border-bottom: 1px solid #ddd; +`; + +const SummaryCell = styled.td` + padding: 0.5rem; + text-align: right; +`; + +const ProceedButton = styled(motion.button)` + background:rgb(171, 73, 28); + color: white; + border: none; + padding: 0.5rem; + border-radius: 4px; + cursor: pointer; + margin-top: 1rem; + width: 100%; `; function Cart() { @@ -78,6 +97,16 @@ function Cart() { 0 ); + const SGST = totalPrice * 0.09; // SGST is 9% + const CGST = totalPrice * 0.09; // CGST is 9% + const finalPrice = totalPrice + SGST + CGST; + + const handleProceedToPayment = () => { + alert('Payment is processing...'); + dispatch(clearCart()); + alert('Thank you!'); + }; + return (

Your Cart

@@ -108,7 +137,33 @@ function Cart() { ))} - Total: ${totalPrice.toFixed(2)} + + + + Total: + ${totalPrice.toFixed(2)} + + + SGST (9%): + ${SGST.toFixed(2)} + + + CGST (9%): + ${CGST.toFixed(2)} + + + Final Price: + ${finalPrice.toFixed(2)} + + + + + Proceed to Payment + ); } diff --git a/src/Pages/coffee.js b/src/Pages/coffee.js index a845fc5..99ed796 100644 --- a/src/Pages/coffee.js +++ b/src/Pages/coffee.js @@ -1,9 +1,8 @@ -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"; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { addToCart, removeFromCart } from '../Store/cartSlice'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; const CoffeeContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar @@ -12,13 +11,6 @@ const CoffeeContainer = styled.div` background-color: #fffbeb; // Warm background color `; -const Title = styled(motion.h1)` - font-size: 2.5rem; - margin-bottom: 2rem; - text-align: center; - color: #78350f; // Warm brown color -`; - const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -51,20 +43,9 @@ const ProductImage = styled.img` object-fit: cover; `; -const Overlay = styled.div` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - padding: 1rem; - text-align: center; +const ProductInfo = styled.div` + padding: 1.25rem; + background-color: white; `; const ProductName = styled.h3` @@ -74,186 +55,125 @@ const ProductName = styled.h3` box-sizing: border-box; `; -const OverlayText = styled.p` - font-size: 1rem; - color: #333; - text-align: center; -`; - -const ProductInfo = styled.div` - padding: 1.25rem; - background-color: white; -`; - const ProductPrice = styled.p` - font-size: 1.5rem; + font-size: 1.1rem; color: #4a2c2a; margin-bottom: 1rem; font-weight: 600; `; - - - -const ProductInfo1 = styled.div` -display:flex; - align-items:center; - justify-content:space-between; +const Title = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; // Warm brown color `; +const Button = styled.button` + background: #78350f; + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; -const StyledButton = styled.button` - .CartBtn { - width: 140px; - height: 40px; - border-radius: 12px; - border: none; - background-color: rgb(255, 208, 0); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition-duration: .5s; - overflow: hidden; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103); - position: relative; - } - - .IconContainer { - position: absolute; - left: -50px; - width: 30px; - height: 30px; - background-color: transparent; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - z-index: 2; - transition-duration: .5s; - } - - .icon { - border-radius: 1px; - } - - .text { - height: 100%; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - color: rgb(17, 17, 17); - z-index: 1; - transition-duration: .5s; - font-size: 1.04em; - font-weight: 600; - } - - .CartBtn:hover .IconContainer { - transform: translateX(58px); - border-radius: 40px; - transition-duration: .5s; - } - - .CartBtn:hover .text { - transform: translate(10px,0px); - transition-duration: .5s; - } - - .CartBtn:active { - transform: scale(0.95); - transition-duration: .5s; + &:hover { + background:#78350f; + transform: scale(1.05); } -`; -const StyledWrapper = styled.div` - .heart-container { - --heart-color: maroon; - position: relative; - width: 50px; - height: 40px; - transition: .3s; - z-index:100; + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .checkbox { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - z-index: 20; - cursor: pointer; - } - - .heart-container .svg-container { - width:100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - .heart-container .svg-outline, - .heart-container .svg-filled { - fill: var(--heart-color); - position: absolute; - } +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + margin-left: 3rem; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + margin-top: 1rem; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .svg-filled { - animation: keyframes-svg-filled 1s; - display: none; + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); } - - .heart-container .svg-celebrate { - position: absolute; - animation: keyframes-svg-celebrate .5s; - animation-fill-mode: forwards; - display: none; - stroke: var(--heart-color); - fill: var(--heart-color); - stroke-width: 2px; + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .checkbox:checked~.svg-container .svg-filled { - display: block - } +const QuantityControls = styled.div` + display: flex; + align-items: center; + gap: 10px; + margin-top: 10px; +`; - .heart-container .checkbox:checked~.svg-container .svg-celebrate { - display: block - } +const QuantityButton = styled(Button)` + padding: 5px 10px; + min-width: 30px; +`; - @keyframes keyframes-svg-filled { - 0% { - transform: scale(0); - } +const QuantityDisplay = styled.span` + font-weight: bold; + min-width: 20px; + text-align: center; +`; - 25% { - transform: scale(1.2); - } +function Coffee() { + const dispatch = useDispatch(); + const [quantities, setQuantities] = useState({}); - 50% { - transform: scale(1); - filter: brightness(1.5); + const handleAddToCart = (product) => { + if (!quantities[product.id]) { + setQuantities({ + ...quantities, + [product.id]: 1 + }); + dispatch(addToCart({ ...product, quantity: 1 })); } - } + }; - @keyframes keyframes-svg-celebrate { - 0% { - transform: scale(0); - } + const handleIncrement = (product) => { + const newQuantity = (quantities[product.id] || 0) + 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + }; - 50% { - opacity: 1; - filter: brightness(1.5); + const handleDecrement = (product) => { + if (quantities[product.id] > 1) { + const newQuantity = quantities[product.id] - 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + } else { + setQuantities({ + ...quantities, + [product.id]: 0 + }); + dispatch(removeFromCart(product.id)); } + }; - 100% { - transform: scale(1.4); - opacity: 0; - display: none; - }`; - -const products = [ + const products = [ { id: 1, name: "Espresso", @@ -424,80 +344,42 @@ const products = [ "Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.", }, ]; -function Coffee() { - const dispatch = useDispatch(); - - const handleAddToCart = (product) => { - dispatch(addToCart(product)); - }; return ( - Our Cake Selection - + initial={{ opacity: 0, y: -50 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.5 }} + > + Our Coffee Selection + {products.map((product) => ( - -
- -
- - - - - - - - - - - - - - - - -
-
-
- - - {product.description} - -
+ + - {product.name} ${product.price.toFixed(2)} - - - - handleAddToCart(product)}> - + {!quantities[product.id] ? ( + + + ) : ( + + handleDecrement(product)}>- + {quantities[product.id]} + handleIncrement(product)}>+ + + )} + handleAddToCart(product)}>Buy Now ))} ); - } - - export default Coffee; - \ No newline at end of file +} + +export default Coffee; diff --git a/src/Pages/milkshake.js b/src/Pages/milkshake.js index 2e94224..c05a732 100644 --- a/src/Pages/milkshake.js +++ b/src/Pages/milkshake.js @@ -1,9 +1,8 @@ -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"; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { addToCart, removeFromCart } from '../Store/cartSlice'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; const MilkshakeContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar @@ -12,13 +11,6 @@ const MilkshakeContainer = styled.div` background-color: #fffbeb; // Warm background color `; -const Title = styled(motion.h1)` - font-size: 2.5rem; - margin-bottom: 2rem; - text-align: center; - color: #78350f; // Warm brown color -`; - const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -51,20 +43,9 @@ const ProductImage = styled.img` object-fit: cover; `; -const Overlay = styled.div` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - padding: 1rem; - text-align: center; +const ProductInfo = styled.div` + padding: 1.25rem; + background-color: white; `; const ProductName = styled.h3` @@ -74,183 +55,125 @@ const ProductName = styled.h3` box-sizing: border-box; `; -const OverlayText = styled.p` - font-size: 1rem; - color: #333; - text-align: center; -`; - -const ProductInfo = styled.div` - padding: 1.25rem; - background-color: white; -`; -const ProductInfo1 = styled.div` -display:flex; - align-items:center; - justify-content:space-between; -`; const ProductPrice = styled.p` - font-size: 1.5rem; + font-size: 1.1rem; color: #4a2c2a; margin-bottom: 1rem; font-weight: 600; `; - -const StyledButton = styled.button` - .CartBtn { - width: 140px; - height: 40px; - border-radius: 12px; - border: none; - background-color: rgb(255, 208, 0); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition-duration: .5s; - overflow: hidden; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103); - position: relative; - } - - .IconContainer { - position: absolute; - left: -50px; - width: 30px; - height: 30px; - background-color: transparent; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - z-index: 2; - transition-duration: .5s; - } - - .icon { - border-radius: 1px; - } - - .text { - height: 100%; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - color: rgb(17, 17, 17); - z-index: 1; - transition-duration: .5s; - font-size: 1.04em; - font-weight: 600; - } - - .CartBtn:hover .IconContainer { - transform: translateX(58px); - border-radius: 40px; - transition-duration: .5s; - } - - .CartBtn:hover .text { - transform: translate(10px,0px); - transition-duration: .5s; - } - - .CartBtn:active { - transform: scale(0.95); - transition-duration: .5s; - } +const Title = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; // Warm brown color `; -const StyledWrapper = styled.div` - .heart-container { - --heart-color: maroon; - position: relative; - width: 50px; - height: 40px; - transition: .3s; - z-index:100; - - } - - .heart-container .checkbox { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - z-index: 20; - cursor: pointer; - } - - .heart-container .svg-container { - width:100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } +const Button = styled.button` + background: #78350f; + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .svg-outline, - .heart-container .svg-filled { - fill: var(--heart-color); - position: absolute; + &:hover { + background:#78350f; + transform: scale(1.05); } - - .heart-container .svg-filled { - animation: keyframes-svg-filled 1s; - display: none; + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .svg-celebrate { - position: absolute; - animation: keyframes-svg-celebrate .5s; - animation-fill-mode: forwards; - display: none; - stroke: var(--heart-color); - fill: var(--heart-color); - stroke-width: 2px; - } +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + margin-left: 3rem; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + margin-top: 1rem; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .checkbox:checked~.svg-container .svg-filled { - display: block + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); } - - .heart-container .checkbox:checked~.svg-container .svg-celebrate { - display: block + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - @keyframes keyframes-svg-filled { - 0% { - transform: scale(0); - } +const QuantityControls = styled.div` + display: flex; + align-items: center; + gap: 10px; + margin-top: 10px; +`; - 25% { - transform: scale(1.2); - } +const QuantityButton = styled(Button)` + padding: 5px 10px; + min-width: 30px; +`; - 50% { - transform: scale(1); - filter: brightness(1.5); - } - } +const QuantityDisplay = styled.span` + font-weight: bold; + min-width: 20px; + text-align: center; +`; - @keyframes keyframes-svg-celebrate { - 0% { - transform: scale(0); +function Milkshake() { + const dispatch = useDispatch(); + const [quantities, setQuantities] = useState({}); + + const handleAddToCart = (product) => { + if (!quantities[product.id]) { + setQuantities({ + ...quantities, + [product.id]: 1 + }); + dispatch(addToCart({ ...product, quantity: 1 })); } - - 50% { - opacity: 1; - filter: brightness(1.5); + }; + + const handleIncrement = (product) => { + const newQuantity = (quantities[product.id] || 0) + 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + }; + + const handleDecrement = (product) => { + if (quantities[product.id] > 1) { + const newQuantity = quantities[product.id] - 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + } else { + setQuantities({ + ...quantities, + [product.id]: 0 + }); + dispatch(removeFromCart(product.id)); } + }; - 100% { - transform: scale(1.4); - opacity: 0; - display: none; - }`; - - -const products = [ + const products = [ { id: 26, name: "Strawberry smoothie", @@ -342,79 +265,42 @@ const products = [ "Rich and creamy, made with peanut butter, ice cream, and milk, a peanut butter lover's dream.", }, ]; -function Milkshake() { - const dispatch = useDispatch(); - - const handleAddToCart = (product) => { - dispatch(addToCart(product)); - }; - - return ( - - + <Title initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Our Milkshake Selection + Our Milkshake Selection - - {products.map((product) => ( -
- -
- - - - - - - - - - - - - - - - -
-
-
- - - {product.description} - -
- - - {product.name} - ${product.price.toFixed(2)} - + + {products.map((product) => ( + + + + {product.name} + ${product.price.toFixed(2)} + {!quantities[product.id] ? ( - handleAddToCart(product)}> - - - - - ))} - - - ); - } - - export default Milkshake; - \ No newline at end of file + + ) : ( + + handleDecrement(product)}>- + {quantities[product.id]} + handleIncrement(product)}>+ + + )} + handleAddToCart(product)}>Buy Now + + + ))} + + + ); +} + +export default Milkshake; diff --git a/src/Pages/soup.js b/src/Pages/soup.js index 74b8c03..26706a0 100644 --- a/src/Pages/soup.js +++ b/src/Pages/soup.js @@ -1,9 +1,8 @@ -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"; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { addToCart, removeFromCart } from '../Store/cartSlice'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; const SoupContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar @@ -12,13 +11,6 @@ const SoupContainer = styled.div` background-color: #fffbeb; // Warm background color `; -const Title = styled(motion.h1)` - font-size: 2.5rem; - margin-bottom: 2rem; - text-align: center; - color: #78350f; // Warm brown color -`; - const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -51,20 +43,9 @@ const ProductImage = styled.img` object-fit: cover; `; -const Overlay = styled.div` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - padding: 1rem; - text-align: center; +const ProductInfo = styled.div` + padding: 1.25rem; + background-color: white; `; const ProductName = styled.h3` @@ -74,183 +55,125 @@ const ProductName = styled.h3` box-sizing: border-box; `; -const OverlayText = styled.p` - font-size: 1rem; - color: #333; - text-align: center; -`; - -const ProductInfo = styled.div` - padding: 1.25rem; - background-color: white; -`; - const ProductPrice = styled.p` - font-size: 1.5rem; + font-size: 1.1rem; color: #4a2c2a; margin-bottom: 1rem; font-weight: 600; `; - -const StyledButton = styled.button` - .CartBtn { - width: 140px; - height: 40px; - border-radius: 12px; - border: none; - background-color: rgb(255, 208, 0); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition-duration: .5s; - overflow: hidden; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103); - position: relative; - } - - .IconContainer { - position: absolute; - left: -50px; - width: 30px; - height: 30px; - background-color: transparent; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - z-index: 2; - transition-duration: .5s; - } - - .icon { - border-radius: 1px; - } - - .text { - height: 100%; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - color: rgb(17, 17, 17); - z-index: 1; - transition-duration: .5s; - font-size: 1.04em; - font-weight: 600; - } - - .CartBtn:hover .IconContainer { - transform: translateX(58px); - border-radius: 40px; - transition-duration: .5s; - } - - .CartBtn:hover .text { - transform: translate(10px,0px); - transition-duration: .5s; - } - - .CartBtn:active { - transform: scale(0.95); - transition-duration: .5s; - } +const Title = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; // Warm brown color `; -const StyledWrapper = styled.div` - .heart-container { - --heart-color: maroon; - position: relative; - width: 50px; - height: 40px; - transition: .3s; - z-index:100; - - } - - .heart-container .checkbox { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - z-index: 20; - cursor: pointer; - } - - .heart-container .svg-container { - width:100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } +const Button = styled.button` + background: #78350f; + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .svg-outline, - .heart-container .svg-filled { - fill: var(--heart-color); - position: absolute; + &:hover { + background:#78350f; + transform: scale(1.05); } - - .heart-container .svg-filled { - animation: keyframes-svg-filled 1s; - display: none; + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - .heart-container .svg-celebrate { - position: absolute; - animation: keyframes-svg-celebrate .5s; - animation-fill-mode: forwards; - display: none; - stroke: var(--heart-color); - fill: var(--heart-color); - stroke-width: 2px; - } +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + margin-left: 3rem; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 10px; + margin-top: 1rem; + cursor: pointer; + letter-spacing: 0.6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + transition: background 0.3s ease, transform 0.2s ease; - .heart-container .checkbox:checked~.svg-container .svg-filled { - display: block + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); } - - .heart-container .checkbox:checked~.svg-container .svg-celebrate { - display: block + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } +`; - @keyframes keyframes-svg-filled { - 0% { - transform: scale(0); - } +const QuantityControls = styled.div` + display: flex; + align-items: center; + gap: 10px; + margin-top: 10px; +`; - 25% { - transform: scale(1.2); - } +const QuantityButton = styled(Button)` + padding: 5px 10px; + min-width: 30px; +`; - 50% { - transform: scale(1); - filter: brightness(1.5); - } - } +const QuantityDisplay = styled.span` + font-weight: bold; + min-width: 20px; + text-align: center; +`; - @keyframes keyframes-svg-celebrate { - 0% { - transform: scale(0); +function Soup() { + const dispatch = useDispatch(); + const [quantities, setQuantities] = useState({}); + + const handleAddToCart = (product) => { + if (!quantities[product.id]) { + setQuantities({ + ...quantities, + [product.id]: 1 + }); + dispatch(addToCart({ ...product, quantity: 1 })); } - - 50% { - opacity: 1; - filter: brightness(1.5); + }; + + const handleIncrement = (product) => { + const newQuantity = (quantities[product.id] || 0) + 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + }; + + const handleDecrement = (product) => { + if (quantities[product.id] > 1) { + const newQuantity = quantities[product.id] - 1; + setQuantities({ + ...quantities, + [product.id]: newQuantity + }); + dispatch(addToCart({ ...product, quantity: newQuantity })); + } else { + setQuantities({ + ...quantities, + [product.id]: 0 + }); + dispatch(removeFromCart(product.id)); } + }; - 100% { - transform: scale(1.4); - opacity: 0; - display: none; - }`; - const ProductInfo1 = styled.div` -display:flex; - align-items:center; - justify-content:space-between; -`; - -const products = [ + const products = [ { id: 42, name: "Salad", @@ -306,78 +229,43 @@ const products = [ "Spicy and aromatic, a Thai soup with lemongrass, kaffir lime leaves, and chilies, often with shrimp.", }, ]; -function Soup() { - const dispatch = useDispatch(); - - const handleAddToCart = (product) => { - dispatch(addToCart(product)); - }; - - return ( - - + <Title initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Our Soupshake Selection + Our Soupshake Selection - - {products.map((product) => ( -
- -
- - - - - - - - - - - - - - - - -
-
-
- - - {product.description} - -
- - - {product.name} - ${product.price.toFixed(2)} - + + {products.map((product) => ( + + + + {product.name} + ${product.price.toFixed(2)} + {!quantities[product.id] ? ( - handleAddToCart(product)}> - - - - ))} - - - ); - } - - export default Soup; - \ No newline at end of file + + ) : ( + + handleDecrement(product)}>- + {quantities[product.id]} + handleIncrement(product)}>+ + + )} + handleAddToCart(product)}>Buy Now + + + ))} + + + ); +} + +export default Soup;