+ {/* Left Side: Image */}
+
+
);
-};
+}
-export default Register;
+export default SignupPage;
diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js
index 01cfaa8..1d772a2 100644
--- a/src/Pages/Shop.js
+++ b/src/Pages/Shop.js
@@ -5,11 +5,13 @@ import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { addToCart } from '../Store/cartSlice';
-import { useState } from 'react';
+import { useState } from 'react';
import Button from '../componets/Button';
import { toast, ToastContainer } from 'react-toastify'; // Add this import
import 'react-toastify/dist/ReactToastify.css';
import DynamicText from "./dynamicText";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
import ButtonGroup from '@mui/material/ButtonGroup';
@@ -188,7 +190,7 @@ const products = [
{ 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.', type: 'cold' },
{ 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.', type: 'cold' },
{ 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.', type: 'cold' },
- { 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.", type: 'cold'},
+ { 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.", type: 'cold' },
{ 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.', type: 'food' },
{ 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.', type: 'food' },
{ 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.', type: 'food' },
@@ -363,7 +365,7 @@ const products = [
description:
"Espresso served with sweetened condensed milk, creating a layered effect.",
},
-
+
{
id: 25,
name: "Irish Coffee",
@@ -373,269 +375,269 @@ const products = [
description:
"Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.",
},
-
+
];
- // Tea Section
- 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.",
- },
+// Tea Section
+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.",
+},
];
- // Milkshake and Smothiee
- 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.",
- },
+// Milkshake and Smothiee
+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.",
+},
];
- // Cake Section
- 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.",
- },
+// Cake Section
+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.",
+},
];
- // Soup Section
- 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.",
- },
+// Soup Section
+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.",
+},
];
const SearchFilterContainer = styled.div`
@@ -648,23 +650,26 @@ const SearchFilterContainer = styled.div`
const SearchInput = styled.input`
padding: 0.5rem;
font-size: 1rem;
- border: 1px solid #ddd;
- border-radius: 4px 0 0 4px;
+ border: 2px solid brown; /* Updated border width and color */
+ border-radius: 20px; /* Increased roundness */
outline: none;
width: 300px;
+ margin-right: 1rem; /* Added margin on the right */
&:focus {
- border-color: #6b4f4f;
+ border-color: #6b4f4f; /* Focus state border color */
}
`;
+
const SearchButton = styled.button`
padding: 0.5rem 1rem;
font-size: 1rem;
+ font-weight: bold;
background: linear-gradient(145deg, #6b4f4f, #7d5858);
color: white;
border: none;
- border-radius: 0 4px 4px 0;
+ border-radius: 15px 15px 15px 15px;
cursor: pointer;
transition: background 0.3s ease;
@@ -702,9 +707,18 @@ function Shop() {
const [itemsNo, setItemsNo] = useState(9);
+ const [likedProducts, setLikedProducts] = useState({});
+
+ const toggleHeart = (productId) => {
+ setLikedProducts((prevState) => ({
+ ...prevState,
+ [productId]: !prevState[productId],
+ }));
+ };
+
const handleItemsNo = () => {
const s = products.length;
- if (s === itemsNo) {
+ if (s == itemsNo) {
setItemsNo(9);
} else {
setItemsNo(Math.min(itemsNo + 9, s));
@@ -724,7 +738,7 @@ function Shop() {
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
- text-weight="extrabold"
+ text-weight="bold-800"
>
+ 
-
- {error && {error} }
- {isSubmitted && (
- Registration successful!
- )}
- Already have an account? Login
-
-
-
+
+ {/* Right Side: Signup Form */}
+
-
- {error &&
+
+ + Create an Account +
+ ++ Already have an account?{" "} + + Log In + +
+ toggleHeart(product.id)}
+ style={{
+ position: 'absolute',
+ top: '10px',
+ right: '10px',
+ cursor: 'pointer',
+ fontSize: '24px',
+ color: likedProducts[product.id] ? 'red' : 'gray',
+ zIndex: 2,
+ }}
+ >
+
+
+
+ What Our Customers Say
-
+
-
-
-
+
+
@@ -59,11 +76,20 @@ function Testimonial() {