diff --git a/src/App.js b/src/App.js index 659e908..c2d5fa5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,28 @@ -import React from "react"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; -import ScrollToTop from "./componets/ScrollToTop"; -import { Provider } from "react-redux"; -import { store } from "./Store/index"; -import styled from "styled-components"; -import Navbar from "./componets/Navbar"; -import Footer from "./componets/footer"; -import Home from "./Pages/Home"; -import Login from "./Pages/login"; -import Register from "./Pages/Register"; -import Shop from "./Pages/Shop"; -import Cart from "./Pages/cart"; -import About from "./Pages/About"; -import Contact from "./Pages/contact"; -import Profile from "./Pages/profile"; -import Checkout from "./Pages/checkOut"; -import Testimonial from "./Pages/Testimonial"; -import PremiumBeans from "./Pages/PremiumBeans"; +import React from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import ScrollToTop from './componets/ScrollToTop'; +import { Provider } from 'react-redux'; +import { store } from './Store/index'; +import styled from 'styled-components'; +import Navbar from './componets/Navbar'; +import Footer from './componets/footer'; +import Home from './Pages/Home'; +import Login from './Pages/login'; +import Register from './Pages/Register'; +import Shop from './Pages/Shop'; +import Cart from './Pages/cart'; +import About from './Pages/About'; +import Contact from './Pages/contact'; +import Profile from './Pages/profile'; +import Checkout from './Pages/checkOut'; +import Testimonial from './Pages/Testimonial'; + +import Cake from './Pages/cake'; +import Coffee from './Pages/coffee'; +import Soup from './Pages/soup'; +import Milkshakes from './Pages/milkshake'; +import PremiumBeans from './Pages/PremiumBeans'; import ForgetPassword from "./Pages/ForgetPassword"; import ExpertBaristas from "./Pages/ExpertBaristas"; @@ -55,6 +60,12 @@ function App() { } /> } /> } /> + + } /> + } /> + } /> + } /> + } /> } /> diff --git a/src/Pages/About.js b/src/Pages/About.js index e2bcea2..a42016b 100644 --- a/src/Pages/About.js +++ b/src/Pages/About.js @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { motion } from 'framer-motion'; +import { color, motion } from 'framer-motion'; import Button from '../componets/Button'; const AboutContainer = styled.div` @@ -8,14 +8,24 @@ const AboutContainer = styled.div` max-width: 1200px; margin: 0 auto; background-color: #fffbeb; + + background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20231205/pngtree-creamy-textured-milk-colored-background-image_13815875.png'); + background-size: cover; + background-position: center; + background-attachment: fixed; + + padding-top: 1.5rem; /* Adjusted padding for top */ + `; const Title = styled(motion.h1)` - font-size: 2.5rem; + font-size: 3rem; margin-bottom: 3rem; text-align: center; - color: #78350f; + color: #7c2214; + letter-spacing: 4px; font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); `; const Content = styled(motion.div)` @@ -38,6 +48,7 @@ const TextContent = styled(motion.div)` font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; + font-weight:bold; } `; @@ -54,6 +65,15 @@ const Image = styled(motion.img)` height: auto; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + filter: grayscale(100%) ; + transition: all 0.3s ease; + border: 4px solid black; + &:hover { + filter: grayscale(0%); + box-shadow: 0 0 20px rgba(255, 10, 0, 0.8); + border-width: 6px; + transform: perspective(1000px) rotateX(10deg) rotateY(10deg) scale(1.05); + } `; function About() { diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 08d18d2..f6c02dc 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -19,12 +19,20 @@ const HomeContainer = styled.div` const HeroSection = styled.section` display: flex; + padding:0; + margin:0; + top:-2rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100vh; + + width: 100%; + + gap:-0.5rem; width: 100vw; + background-image: linear-gradient( rgba(44, 19, 11, 0.7), rgba(44, 19, 11, 0.7) @@ -49,8 +57,8 @@ const HeroSection = styled.section` const Title = styled(motion.h1)` font-size: 5rem; - margin-bottom: 1.5rem; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + + font-family: "Playfair Display", serif; color: #ffe4b5; @@ -61,23 +69,22 @@ const Title = styled(motion.h1)` const Subtitle = styled(motion.p)` font-size: 1.8rem; - margin-bottom: 2.5rem; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + font-family: "Poppins", sans-serif; color: #deb887; max-width: 600px; - line-height: 1.4; + @media (max-width: 768px) { font-size: 1.4rem; - padding: 0 20px; + } `; const StyledButton = styled(Button)` background: #d2691e; color: #ffe4b5; - padding: 1rem 2.5rem; + padding:0.8rem; font-size: 1.2rem; border-radius: 30px; border: 2px solid #8b4513; @@ -91,6 +98,10 @@ const StyledButton = styled(Button)` transform: translateY(-3px); box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3); } + + @media (min-width: 783px) { + font-size:0.8rem; + padding: 0.5rem} `; const FeaturesSection = styled.section` @@ -102,15 +113,7 @@ const FeaturesSection = styled.section` position: relative; overflow: visible; - &::before { - content: "☕"; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%); - font-size: 3rem; - color: #8b4513; - } + @media (max-width: 768px) { padding: 4rem 2rem; @@ -196,27 +199,40 @@ const SpecialtyImage = styled(motion.img)` const ScrollIndicator = styled(motion.div)` position: absolute; - bottom: 40px; - left: 50%; + bottom:9rem; + display:flex, + justify-content: center; + justify-items: center; + left: 49.6%; transform: translateX(-50%); color: #ffe4b5; font-size: 2rem; cursor: pointer; animation: bounce 2s infinite; + &::after { + content: "☕"; + position: absolute; + top: 40px; + left: 56%; + transform: translateX(-45%); + font-size: 3rem; + color: #8b4513; + } + @keyframes bounce { 0%, 20%, 50%, 80%, 100% { - transform: translateY(0) translateX(-50%); + transform: translateY(20%) translateX(-50%); } 40% { - transform: translateY(-20px) translateX(-50%); + transform: translateY(-20%) translateX(-50%); } 60% { - transform: translateY(-10px) translateX(-50%); + transform: translateY(20%) translateX(-50%); } } `; diff --git a/src/Pages/PremiumBeans.js b/src/Pages/PremiumBeans.js index 124ceec..af54ffc 100644 --- a/src/Pages/PremiumBeans.js +++ b/src/Pages/PremiumBeans.js @@ -1,134 +1,418 @@ import React from 'react'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; - -const PremiumContainer = styled.div` - padding: 6rem 2rem 4rem 2rem; - max-width: 1200px; - margin: 0 auto; - background-color: #fffbeb; - box-shadow: 1px 1px 5px 6px #888888; - - @media (max-width: 768px) { - padding: 4rem 1rem 2rem 1rem; - } +import styled, { keyframes } from 'styled-components'; + +const Loader = styled.div` + background: linear-gradient(135deg, #FDF5E6, #FFE4B5); + height: 90vh; + width: 100%; + position:relative; + +`; + + +const Container = styled.div` + width: 300px; + height: 280px; + position: absolute; + top: calc(50% - 140px); + left: calc(50% - 150px); +`; + +const CoffeeHeader = styled.div` + width: 100%; + height: 80px; + position: absolute; + top: 0; + left: 0; + background-color: brown; + border-radius: 10px; +`; + +const CoffeeButton = styled.div` + width: 25px; + height: 25px; + position: absolute; + top: 25px; + background-color: #282323; + border-radius: 50%; +`; + +const CoffeeButtonOne = styled(CoffeeButton)` + left: 15px; +`; + +const CoffeeButtonTwo = styled(CoffeeButton)` + left: 50px; +`; + +const CoffeeDisplay = styled.div` + width: 50px; + height: 50px; + position: absolute; + top: calc(50% - 25px); + left: calc(50% - 25px); + border-radius: 50%; + background-color: green; + border: 5px solid #43beae; + box-sizing: border-box; +`; + +const CoffeeDetails = styled.div` + width: 8px; + height: 20px; + position: absolute; + top: 10px; + right: 10px; + background-color: #9b9091; + box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091; +`; + +const CoffeeMedium = styled.div` + width: 90%; + height: 160px; + position: absolute; + top: 80px; + left: calc(50% - 45%); + background-color: #dc6565; +`; + +const CoffeeMediumBefore = styled.div` + width: 90%; + height: 100px; + background-color: #776f6e; + position: absolute; + bottom: 0; + left: calc(50% - 45%); + border-radius: 20px 20px 0 0; +`; + +const CoffeeExit = styled.div` + width: 60px; + height: 20px; + position: absolute; + top: 0; + left: calc(50% - 30px); + background-color: #231f20; +`; + +const CoffeeExitBefore = styled(CoffeeExit)` + height: 5px; + top: 5px; + left: calc(50% - 30px); +`; + +const CoffeeExitAfter = styled(CoffeeExit)` + height: 5px; + top: 15px; + left: calc(50% - 30px); +`; + +const CoffeeArm = styled.div` + width: 70px; + height: 20px; + position: absolute; + top: 15px; + right: 25px; + background-color: #231f20; +`; + +const CoffeeArmBefore = styled.div` + width: 15px; + height: 5px; + position: absolute; + top: 7px; + left: -15px; + background-color: #9e9495; +`; + +const CoffeeCup = styled.div` + width: 80px; + height: 47px; + position: absolute; + bottom: 0; + left: calc(50% - 40px); + background-color: #fff; + border-radius: 0 0 70px 70px / 0 0 110px 110px; +`; + +const CoffeeCupAfter = styled.div` + width: 20px; + height: 20px; + position: absolute; + top: 6px; + right: -13px; + border: 5px solid #fff; + border-radius: 50%; +`; + +const keyframesLiquid = keyframes` + 0% { height: 0px; opacity: 1; } + 5% { height: 0px; opacity: 1; } + 20% { height: 62px; opacity: 1; } + 95% { height: 62px; opacity: 1; } + 100% { height: 62px; opacity: 0; } +`; + +const CoffeeLiquid = styled.div` + width: 6px; + height: 63px; + opacity: 0; + position: absolute; + top: 50px; + left: calc(50% - 3px); + background-color: #74372b; + animation: ${keyframesLiquid} 4s 4s linear infinite; +`; + +const keyframesSmokeOne = keyframes` + 0% { bottom: 20px; opacity: 0; } + 40% { bottom: 50px; opacity: 0.5; } + 80% { bottom: 80px; opacity: 0.3; } + 100% { bottom: 80px; opacity: 0; } `; -const FeatureTitle = styled(motion.h1)` - font-size: 4rem; - margin-top: 2rem; - margin-bottom: 1rem; - color: #78350f; - font-family: 'Playfair Display', serif; +const keyframesSmokeTwo = keyframes` + 0% { bottom: 40px; opacity: 0; } + 40% { bottom: 70px; opacity: 0.5; } + 80% { bottom: 80px; opacity: 0.3; } + 100% { bottom: 80px; opacity: 0; } +`; + +const CoffeeSmoke = styled.div` + width: 8px; + height: 20px; + position: absolute; + border-radius: 5px; + background-color: #e3dada; +`; + +const CoffeeSmokeOne = styled(CoffeeSmoke)` + opacity: 0; + bottom: 50px; + left: 102px; + animation: ${keyframesSmokeOne} 3s 4s linear infinite; +`; + +const CoffeeSmokeTwo = styled(CoffeeSmoke)` + opacity: 0; + bottom: 70px; + left: 118px; + animation: ${keyframesSmokeTwo} 3s 5s linear infinite; +`; + +const CoffeeSmokeThree = styled(CoffeeSmoke)` + opacity: 0; + bottom: 65px; + right: 118px; + animation: ${keyframesSmokeTwo} 3s 6s linear infinite; +`; + +const CoffeeSmokeFour = styled(CoffeeSmoke)` + opacity: 0; + bottom: 50px; + right: 102px; + animation: ${keyframesSmokeOne} 3s 5s linear infinite; +`; + +const CoffeeFooter = styled.div` + width: 95%; + height: 15px; + position: absolute; + bottom: 25px; + left: calc(50% - 47.5%); + background-color: brown; + border-radius: 10px; +`; + +const CoffeeFooterAfter = styled.div` + width: 106%; + height: 26px; + position: absolute; + bottom: 0px; + left: -8px; + background-color: #000; +`; +const CoffeeTap = styled.div` + width: 49px; + height: 30px; + position: absolute; + top: 20px; + left: calc(50% - 22px); + background-color: #231f20; + border-radius:0 0 10px 10px; +`; + +const CoffeeTapNozzle = styled.div` + width: 10px; + height: 10px; + position: absolute; + bottom: -10px; + left: calc(50% - 7px); + background-color: #231f20; + border-radius: 0%; +`; +const CardsContainer = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); display: flex; - flex-wrap: wrap; - flex-direction: column; - align-content: space-around; - font-weight: bold; + justify-content: space-between; + width: 1000px; +`; - @media (max-width: 768px) { - font-size: 2.5rem; /* Adjust font size for smaller screens */ - text-align: center; /* Center the title on smaller screens */ - } +const CardColumn = styled.div` + display: flex; + flex-direction: column; + gap: 40px; `; -const ImageContent = styled(motion.div)` +const Card = styled.div` + width: 240px; + height: 280px; display: flex; - justify-content: center; - align-items: center; - padding: 0; flex-direction: column; - flex-wrap: wrap; - align-content: center; + align-items: center; + background: transparent; +`; + +const CardImage = styled.div` + width: 100%; + height: 200px; + background-size: cover; + background-position: center; + border-radius: 16px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; - @media (max-width: 768px) { - margin-bottom: 2rem; + &:hover { + transform: translateY(-5px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); } `; -const Image = styled(motion.img)` - width: 500px; - height: 400px; - object-fit: cover; - border-radius: 10px; - margin-bottom: 1.5rem; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); - - @media (max-width: 768px) { - width: 100%; - height: auto; - margin-left: 0; - margin-bottom: 1rem; - } +const CardContent = styled.div` + margin-top: 20px; + text-align: center; + font-family: "Arial", sans-serif; `; -const FeatureDescription = styled(motion.p)` - font-size: 1.5rem; - color: #6b4423; - line-height: 1.6; - font-family: 'Poppins', sans-serif; - display: flex; +const CardTitle = styled.h3` + font-size: 18px; + font-weight: bold; + color: #333; margin: 0; - margin-left: 60px; - margin-right: 50px; - - @media (max-width: 768px) { - font-size: 1.2rem; - margin-left: 1rem; - margin-right: 1rem; - text-align: justify; /* Ensure text is justified on small screens */ - } `; -const Button = styled.button` - type: "button"; - class: "btn btn-warning mx-20"; - margin-top: 2rem; - padding: 0.8rem 1.5rem; - color: white; +const CardDescription = styled.p` + font-size: 14px; + color: #666; + margin: 5px 0 0; +`; + +const LearnMoreButton = styled.button` + align-self: flex-start; + padding: 8px 16px; + font-size: 14px; + font-weight: bold; + color: #fff; + background: #41bdad; border: none; - border-radius: 5px; + border-radius: 8px; cursor: pointer; + transition: background 0.3s ease; &:hover { - background-color: #b5651d; - } - - @media (max-width: 768px) { - width: 100%; - padding: 1rem 2rem; - font-size: 1.2rem; + background: #349f90; } `; + function PremiumBeans() { + const beans = [ + { + id: 1, + title: "Arabica Bliss", + description: "A smooth, aromatic blend with a hint of chocolate.", + image: "https://images.pexels.com/photos/1695052/pexels-photo-1695052.jpeg?auto=compress&cs=tinysrgb&w=600", + }, + { + id: 2, + title: "Robusta Roast", + description: "Bold, rich flavor with high caffeine content.", + image: "https://images.pexels.com/photos/1556665/pexels-photo-1556665.jpeg?auto=compress&cs=tinysrgb&w=600", + }, + { + id: 3, + title: "Espresso Elite", + description: "Intense and full-bodied, perfect for espresso lovers.", + image: "https://images.pexels.com/photos/1459339/pexels-photo-1459339.jpeg?auto=compress&cs=tinysrgb&w=600", + }, + { + id: 4, + title: "Colombian Charm", + description: "A bright, fruity coffee from the hills of Colombia.", + image: "https://images.pexels.com/photos/4109748/pexels-photo-4109748.jpeg?auto=compress&cs=tinysrgb&w=600", + }, + ]; return ( - <> - - - Premium Beans - - - Quality Beans - - - Premium coffee beans are often considered the finest quality beans available, predominantly made from 100% Arabica beans. These beans are prized for their exceptional flavor, rich aroma, and smoother, less bitter taste compared to Robusta beans. Sourced from the highest-grade coffee plants, premium beans undergo meticulous cultivation and harvesting processes. Specialty roasting techniques, typically in small batches, ensure that the beans' unique flavors are expertly developed. Many premium coffee brands are committed to ethical sourcing, collaborating closely with farmers to promote sustainable and fair trade practices. The variety of flavors and roasts available, including single-origin beans, dark roasts, light roasts, and flavored beans, caters to diverse palates. Popular premium coffee brands such as Atlas Coffee Club, Starbucks Espresso, Kicking Horse, and Stumptown Coffee Roasters offer distinctive blends and roasts to satisfy different tastes. - - - - + + + {/* Left cards */} + + {beans.slice(0, 2).map((bean) => ( + + + + {bean.title} + {bean.description} + + + ))} + + + + + + + + + + + + + + + + + + + + + + + + {/* Adding the tap */} + + + + + + + + + {beans.slice(2).map((bean) => ( + + + + {bean.title} + {bean.description} + + + ))} + + + ); } diff --git a/src/Pages/Register.js b/src/Pages/Register.js index c0d9a9d..278deed 100644 --- a/src/Pages/Register.js +++ b/src/Pages/Register.js @@ -127,7 +127,11 @@ const Register = () => { const handleSubmit = (e) => { e.preventDefault(); - if (formData.password !== formData.confirmPassword) { + if(formData.password.length < 9){ + setError("Password must have a minimum of 8 characters"); + return; + } + else if (formData.password !== formData.confirmPassword) { setError("Passwords do not match"); return; } diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 7113482..22c7fab 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -1,8 +1,8 @@ -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 { useState } from 'react'; import Button from '../componets/Button'; const ShopContainer = styled.div` @@ -10,6 +10,7 @@ const ShopContainer = styled.div` max-width: 1200px; margin: 0 auto; background-color: #fffbeb; // Warm background color + padding-top: 1.5rem; /* Adjusted padding for top */ `; const Title = styled(motion.h1)` @@ -19,6 +20,19 @@ const Title = styled(motion.h1)` color: #78350f; // Warm brown color `; +const DropdownContainer = styled.div` + display: flex; + justify-content: center; + margin-bottom: 2rem; +`; + +const Dropdown = styled.select` + padding: 0.5rem 1rem; + font-size: 1rem; + border: 1px solid #ddd; + border-radius: 8px; +`; + const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -26,14 +40,24 @@ const ProductGrid = styled.div` max-width: 1100px; // Slightly reduced to center content more margin: 0 auto; `; - const ProductCard = styled(motion.div)` - background-color: white; - border-radius: 8px; + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border-radius: 10px; overflow: hidden; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - position: relative; + 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; + + + &:hover { + transform: translateY(-5px); + box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); + } + + &:hover .overlay { + opacity: 1; + } &:hover .overlay { opacity: 1; @@ -45,6 +69,7 @@ transition: box-shadow 0.3s ease; box-shadow: 0 8px 12px rgba(0,0,0,0.15); } + `; const ProductImage = styled.img` @@ -66,6 +91,13 @@ const Overlay = styled.div` opacity: 0; transition: opacity 0.3s ease; padding: 1rem; + text-align: center; +`; + +const ProductName = styled.h3` + font-size: 1.4rem; + margin-bottom: 0.5rem; + font-weight: 600; box-sizing: border-box; `; @@ -81,454 +113,109 @@ const ProductInfo = styled.div` background-color: white; `; -const ProductName = styled.h3` - font-size: 1.2rem; - margin-bottom: 0.75rem; - color: #78350f; // Warm brown color -`; - const ProductPrice = styled.p` font-size: 1.1rem; - color: #92400e; // Slightly lighter brown + color: #4a2c2a; margin-bottom: 1rem; - font-weight: 500; + font-weight: 600; +`; + +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 20px; + 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; + + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); + } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } `; //changes in the images const products = [ - { - id: 1, - name: "Espresso", - price: 2.5, - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtmOsFrpFh2l-iZTaOA0_1QyRm9cfRMvGv1g&s", - description: "A strong, rich coffee shot, perfect for a quick pick-me-up.", - }, - { - id: 2, - name: "Cappuccino", - price: 3.5, - image: - "https://easy-peasy.ai/cdn-cgi/image/quality=80,format=auto,width=700/https://fdczvxmwwjwpwbeeqcth.supabase.co/storage/v1/object/public/images/642a47ed-9f59-4c02-b9a3-2ff875179476/066b0ee9-c0d4-40f8-b9ef-5ea270079e35.png ", - description: - "Creamy and frothy, a classic Italian coffee with steamed milk.", - }, - { - id: 3, - name: "Latte", - price: 4, - image: - "https://liliebakery.fr/wp-content/uploads/2024/10/latte-macchiato-recette-facile-lilie-bakery.jpg", - description: - "Smooth and milky, a comforting coffee drink with a velvety texture.", - }, - { - id: 4, - name: "Mocha", - price: 4.5, - image: - "https://ichef.bbci.co.uk/food/ic/food_16x9_1600/recipes/the_perfect_mocha_coffee_29100_16x9.jpg", - description: - "A sweet blend of coffee and chocolate, perfect for chocolate lovers.", - }, - { - id: 5, - name: "Americano", - price: 3, - image: - "https://i0.wp.com/misaexpress.in/wp-content/uploads/2023/06/79039.jpg?fit=451%2C451&ssl=1", - description: - "A diluted espresso shot, similar to brewed coffee but stronger.", - }, - { - id: 6, - name: "Macchiato", - price: 3.5, - image: - "https://www.tankcoffee.com/wp-content/uploads/2023/07/A_close-up_shot_of_a_classic_Italian_macchiato.png", - 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'cold' }, + { 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.', type: 'hot' }, + { 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.', type: 'cold' }, + { 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.', type: 'hot' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'hot' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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.', type: 'cold' }, + { 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: 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' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, + { 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.', type: 'food' }, ]; - - - function Shop() { const dispatch = useDispatch(); + const [category, setCategory] = useState('hot'); + const handleAddToCart = (product) => { dispatch(addToCart(product)); }; + const filteredProducts = products.filter((product) => product.type === category); + + + const [itemsNo,setItemsNo]=useState(9); + + const handleItemsNo = ()=>{ + const s = products.length; + if (s==itemsNo) { + setItemsNo(9); + } else { + setItemsNo(Math.min(itemsNo + 9,s)); + } + } return ( - Our Coffee Selection + Our Beverage Selection + + setCategory(e.target.value)}> + + + + + - {products.map((product) => ( + + {filteredProducts.slice(0, itemsNo).map((product) => ( + -
- - - {product.description} - -
+ {product.name} ${product.price.toFixed(2)} - - ))} +
+ +
); } -export default Shop; \ No newline at end of file +export default Shop; diff --git a/src/Pages/cake.js b/src/Pages/cake.js new file mode 100644 index 0000000..f05dddc --- /dev/null +++ b/src/Pages/cake.js @@ -0,0 +1,221 @@ +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 CakeContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + max-width: 1200px; + margin: 0 auto; + 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)); + gap: 2rem; + max-width: 1100px; // Slightly reduced to center content more + margin: 0 auto; +`; +const ProductCard = styled(motion.div)` + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border-radius: 10px; + overflow: hidden; + position: relative; + 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; + + &:hover { + transform: translateY(-5px); + box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); + } + + &:hover .overlay { + opacity: 1; + } +`; + +const ProductImage = styled.img` + width: 100%; + height: 220px; + 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 ProductName = styled.h3` + font-size: 1.4rem; + margin-bottom: 0.5rem; + font-weight: 600; + 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.1rem; + color: #4a2c2a; + margin-bottom: 1rem; + font-weight: 600; +`; + +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 20px; + 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; + + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); + } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } +`; + +const products = [ + { + 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.", + }, +]; +function Cake() { + const dispatch = useDispatch(); + + const handleAddToCart = (product) => { + dispatch(addToCart(product)); + }; + + return ( + + + Our Cake Selection + + + {products.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + ); + } + + export default Cake; + \ No newline at end of file diff --git a/src/Pages/coffee.js b/src/Pages/coffee.js new file mode 100644 index 0000000..76a5ece --- /dev/null +++ b/src/Pages/coffee.js @@ -0,0 +1,336 @@ +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 CoffeeContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + max-width: 1200px; + margin: 0 auto; + 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)); + gap: 2rem; + max-width: 1100px; // Slightly reduced to center content more + margin: 0 auto; +`; +const ProductCard = styled(motion.div)` + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border-radius: 10px; + overflow: hidden; + position: relative; + 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; + + &:hover { + transform: translateY(-5px); + box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); + } + + &:hover .overlay { + opacity: 1; + } +`; + +const ProductImage = styled.img` + width: 100%; + height: 220px; + 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 ProductName = styled.h3` + font-size: 1.4rem; + margin-bottom: 0.5rem; + font-weight: 600; + 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.1rem; + color: #4a2c2a; + margin-bottom: 1rem; + font-weight: 600; +`; + +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 20px; + 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; + + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); + } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } +`; + +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: 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.", + }, +]; +function Coffee() { + const dispatch = useDispatch(); + + const handleAddToCart = (product) => { + dispatch(addToCart(product)); + }; + + return ( + + + Our Coffee Selection + + + {products.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + ); + } + + export default Coffee; + \ No newline at end of file diff --git a/src/Pages/contact.js b/src/Pages/contact.js index 820776d..465da18 100644 --- a/src/Pages/contact.js +++ b/src/Pages/contact.js @@ -7,6 +7,7 @@ const ContactContainer = styled.div` padding: 4rem 2rem; max-width: 800px; margin: 0 auto; + padding-top: 1.5rem; /* Adjusted padding for top */ `; const Title = styled(motion.h1)` diff --git a/src/Pages/milkshake.js b/src/Pages/milkshake.js new file mode 100644 index 0000000..26ea863 --- /dev/null +++ b/src/Pages/milkshake.js @@ -0,0 +1,257 @@ +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 MilkshakeContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + max-width: 1200px; + margin: 0 auto; + 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)); + gap: 2rem; + max-width: 1100px; // Slightly reduced to center content more + margin: 0 auto; +`; +const ProductCard = styled(motion.div)` + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border-radius: 10px; + overflow: hidden; + position: relative; + 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; + + &:hover { + transform: translateY(-5px); + box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); + } + + &:hover .overlay { + opacity: 1; + } +`; + +const ProductImage = styled.img` + width: 100%; + height: 220px; + 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 ProductName = styled.h3` + font-size: 1.4rem; + margin-bottom: 0.5rem; + font-weight: 600; + 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.1rem; + color: #4a2c2a; + margin-bottom: 1rem; + font-weight: 600; +`; + +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 20px; + 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; + + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); + } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } +`; + +const products = [ + { + 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.", + }, +]; +function Milkshake() { + const dispatch = useDispatch(); + + const handleAddToCart = (product) => { + dispatch(addToCart(product)); + }; + + return ( + + + Our Milkshake Selection + + + {products.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + ); + } + + export default Milkshake; + \ No newline at end of file diff --git a/src/Pages/soup.js b/src/Pages/soup.js new file mode 100644 index 0000000..83ff8c4 --- /dev/null +++ b/src/Pages/soup.js @@ -0,0 +1,221 @@ +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 SoupContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + max-width: 1200px; + margin: 0 auto; + 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)); + gap: 2rem; + max-width: 1100px; // Slightly reduced to center content more + margin: 0 auto; +`; +const ProductCard = styled(motion.div)` + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border-radius: 10px; + overflow: hidden; + position: relative; + 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; + + &:hover { + transform: translateY(-5px); + box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); + } + + &:hover .overlay { + opacity: 1; + } +`; + +const ProductImage = styled.img` + width: 100%; + height: 220px; + 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 ProductName = styled.h3` + font-size: 1.4rem; + margin-bottom: 0.5rem; + font-weight: 600; + 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.1rem; + color: #4a2c2a; + margin-bottom: 1rem; + font-weight: 600; +`; + +const StyledButton = styled.button` + background: linear-gradient(145deg, #6b4f4f, #7d5858); + color: white; + border: none; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 20px; + 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; + + &:hover { + background: linear-gradient(145deg, #7d5858, #8e6a6a); + transform: scale(1.05); + } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } +`; + +const products = [ + { + 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 Soup() { + const dispatch = useDispatch(); + + const handleAddToCart = (product) => { + dispatch(addToCart(product)); + }; + + return ( + + + Our Soupshake Selection + + + {products.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + handleAddToCart(product)}>Add to Cart + + + + ))} + + + ); + } + + export default Soup; + \ No newline at end of file diff --git a/src/componets/Dropdown.css b/src/componets/Dropdown.css new file mode 100644 index 0000000..3f74d11 --- /dev/null +++ b/src/componets/Dropdown.css @@ -0,0 +1,25 @@ +.product-submenu{ + width:10rem; + position:absolute; + top:50px; + list-style: none; + text-align: start; +} + + +.product-submenu.clicked { + display: none; +} + + + +.submenu-item { +display: block; +background-color:rgba(44, 19, 11, 0.95) ; +width: 100%; +height: 100%; +text-decoration: none; +color: #deb887; +padding: 16px; + +} \ No newline at end of file diff --git a/src/componets/Dropdown.js b/src/componets/Dropdown.js new file mode 100644 index 0000000..ded2c80 --- /dev/null +++ b/src/componets/Dropdown.js @@ -0,0 +1,107 @@ +import React, { useState } from "react"; +import {productDropdown,ourstoryDropdown,userLoginDropdown,userLogoutDropdown} from "./Navitems"; +import { Link} from "react-router-dom"; +import "./Dropdown.css"; + +export const ProDropdown =()=>{ + const [dropdown,setDropdown] =useState(false); + return <> +
    setDropdown(!dropdown)}> + { + productDropdown.map(item=>{ + return ( + + +
  • setDropdown(false)}> + {item.title} + +
    • + + ) + }) + } + +
+ + + }; + + export const OsDropdown =()=>{ + const [dropdown,setDropdown] =useState(false); + return <> +
    setDropdown(!dropdown)}> + { + ourstoryDropdown.map(item=>{ + return ( + + +
  • setDropdown(false)}> + {item.title} + +
    • + + ) + }) + } + +
+ + + }; + + export const UsLoginDropdown =()=>{ + const [dropdown,setDropdown] =useState(false); + return <> +
    setDropdown(!dropdown)}> + { + userLoginDropdown.map(item=>{ + return ( + + +
  • setDropdown(false)}> + {item.title} + +
    • + + + ) + }) + } + +
+ + + }; + + + export const UsLogoutDropdown =()=>{ + const [dropdown,setDropdown] =useState(false); + return <> +
    setDropdown(!dropdown)}> + { + userLogoutDropdown.map(item=>{ + return ( + + +
  • setDropdown(false)}> + {item.title} + +
    • + + ) + }) + } + +
+ + + }; + diff --git a/src/componets/Navbar.css b/src/componets/Navbar.css index abf64f3..8f4fc3f 100644 --- a/src/componets/Navbar.css +++ b/src/componets/Navbar.css @@ -143,3 +143,24 @@ body.menu-open { background-color: #D2691E; transition: width 0.3s ease; } + + +.head{ + display: flex; +} + +/*dropdown menu for shop*/ +.dropdown-menu { + display: none; + text-decoration: none; + /* position: absolute; + background: rgba(44, 19, 11, 0.95); + border: 2px solid #8B4513; + z-index: 1001; + border-radius: 8px; */ +} + +.nav-link:hover .dropdown-menu { + display: flex; +} + diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 87eb5d9..111d64e 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -4,9 +4,12 @@ import { useSelector, useDispatch } from "react-redux"; import { logout } from "../Store/authSlice"; import styled from "styled-components"; import { motion, AnimatePresence } from "framer-motion"; +import { navItems } from "./Navitems"; +import { ProDropdown, OsDropdown, UsLoginDropdown, UsLogoutDropdown } from "./Dropdown"; const NavbarContainer = styled(motion.nav)` display: flex; + width: 100vw; justify-content: space-between; align-items: center; padding: 1rem 2rem; @@ -16,7 +19,6 @@ const NavbarContainer = styled(motion.nav)` position: fixed; top: 0; left: 0; - right: 0; z-index: 1000; transition: all 0.3s ease; border-bottom: 2px solid #8b4513; @@ -29,6 +31,7 @@ const NavbarContainer = styled(motion.nav)` &::before { content: ""; position: absolute; + width: 100vw; top: 0; left: 0; right: 0; @@ -68,9 +71,42 @@ const Logo = styled(motion.div)` } `; +const RightNav = styled(motion.div)` + display: flex; + justify-content: space-around; + align-items: center; + padding: 1rem 2rem; + position: fixed; + top: 0px; + left: 40vw; + right: 0; + z-index: 1000; + transition: all 0.3s ease; + + &.scrolled { + padding: 0.8rem 2rem; + background: rgba(44, 19, 11, 0.98); + } + + &::before { + content: ""; + position: absolute; + top: 0; + left: 100px; + right: 0; + bottom: 0; + background: url("/coffee-beans-pattern.png") repeat; + opacity: 0.05; + pointer-events: none; + } +`; + const NavLinks = styled(motion.div)` display: flex; + justify-content: flex-end; + align-items: center; gap: 2rem; + margin: 10px; align-items: center; @media (max-width: 768px) { @@ -84,15 +120,17 @@ const NavLink = styled(motion.div)` a { color: #deb887; text-decoration: none; - font-weight: 500; - font-size: 0.9rem; + font-weight: bold; + font-size: 1.1rem; transition: all 0.3s ease; font-family: "Poppins", sans-serif; + padding: 25px; &:hover { color: #ffe4b5; } } + &.active a { text-decoration: underline; color: #d2691e; @@ -176,7 +214,60 @@ const MobileNavLink = styled(motion.div)` } `; +const DropdownMenu = styled(motion.div)` + display: none; + position: absolute; + top: 100%; + left: 0; + background: rgba(44, 19, 11, 0.95); + border: 2px solid #8b4513; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); + border-radius: 8px; + display: none; + flex-direction: column; + padding: 0.5rem 0; + z-index: 1001; + + a { + display: block; + padding: 0.5rem 1rem; + text-decoration: none; + color: #deb887; + font-family: 'Poppins', sans-serif; + font-size: 1rem; + transition: background 0.3s ease; + + &:hover { + background: rgba(210, 105, 30, 0.2); + color: #ffe4b5; + } + } +`; + +const ShopLink = styled(NavLink)` + position: relative; + + &:hover ${DropdownMenu} { + display: flex; + } + + &::after { + content: '▼'; + font-size: 0.7rem; + margin-left: 0.3rem; + transition: transform 0.3s ease; + } + + &:hover::after { + transform: rotate(180deg); + } +`; + function Navbar() { + const [prodropdown, setproDropdown] = useState(false); + const [osdropdown, setosDropdown] = useState(false); + const [uslogindropdown, setusloginDropdown] = useState(false); + const [uslogoutdropdown, setuslogoutDropdown] = useState(false); const [isOpen, setIsOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); @@ -212,118 +303,163 @@ function Navbar() { Logo MsCafe - - {/* */} - - Home - - {/* */} - - Shop - - - {/* */} - - About - - - {/* */} - - Testimonial - - {/* */} - - Premium Beans - - {/* */} - - Expert Baristas - - - {/* */} - - Contact - - - {isLoggedIn ? ( - <> - - Profile + +
    + + {navItems.map((items) => { + if (items.title === "Product") { + return ( + +
  • setproDropdown(true)} + onMouseLeave={() => setproDropdown(false)} + > + + {items.title} + {prodropdown && } + +
    • +     + ); + } + + if (items.title === "Stories") { + return ( + +
  • setosDropdown(true)} + onMouseLeave={() => setosDropdown(false)} + > + + {items.title} + {osdropdown && } + +
    • +     + ); + } + + if (items.title === "User") { + return ( + + {isLoggedIn ? ( + <> +
  • setusloginDropdown(true)} + onMouseLeave={() => setusloginDropdown(false)} + > + + {items.title} + {uslogindropdown && } + +
    • +
  • + + {items.title} + {uslogoutdropdown && } + +
    • + + ) : ( +
  • setuslogoutDropdown(true)} + onMouseLeave={() => setuslogoutDropdown(false)} + > + + {items.title} + {uslogoutdropdown && } + +
    • + )} +     + ); + } + + return ( + +
  • + + {items.title} + +
    • +     + ); + })} + + + Home - - Cart + + + Shop + + Cakes + Coffee + Soups + Milkshakes + + + + + About + + + + Testimonial - { - handleLogout(); - setIsOpen(false); // Ensure mobile menu closes after logout - }} - style={{ cursor: "pointer" }} - > - Logout + + + Premium Beans - - ) : ( - <> - - Login + + + Expert Baristas - - Register + + + Contact - - )} - - - {isOpen ? "×" : "☰"} - + + {isLoggedIn ? ( + <> + + Profile + + + Cart + + { + handleLogout(); + setIsOpen(false); // Ensure mobile menu closes after logout + }} + style={{ cursor: "pointer" }} + > + Logout + + + ) : null} + + + + {isOpen ? "×" : "☰"} + +     +
+ {isOpen && ( - + Home diff --git a/src/componets/Navitems.js b/src/componets/Navitems.js new file mode 100644 index 0000000..2afa9cd --- /dev/null +++ b/src/componets/Navitems.js @@ -0,0 +1,113 @@ +export const navItems = [ + { + id:1, + title:"Home", + path:"./", + cName:"nav-item", + }, + { + id:2, + title:"Product", + path:"./product", + cName:"nav-item", + }, + + + + { + id:3, + title:"Contact", + path:"./contact", + cName:"nav-item", + }, + + { + id:4, + title:"Stories", + path:"./our-story", + cName:"nav-item", + }, + + { + id:5, + title:"User", + path:"./user", + cName:"nav-item", + }, +]; + +export const productDropdown =[ + { + id:1, + title:"Shop", + path:"./shop", + cName:"submenu-item", + }, + + { + id:2, + title:"Premium Beans", + path:"./premiumBeans", + cName:"submenu-item", + }, + + { + id:3, + title:"expert bistas", + path:"./expertbaristas", + cName:"submenu-item", + }, +]; + +export const ourstoryDropdown =[ + { + id:1, + title:"about", + path:"./about", + cName:"submenu-item", + }, + + { + id:2, + title:"testimonials", + path:"./testimonial", + cName:"submenu-item", + }, + + +]; + +export const userLogoutDropdown =[ + { + id:1, + title:"login", + path:"./login", + cName:"submenu-item", + }, + + { + id:2, + title:"register", + path:"./register", + cName:"submenu-item", + }, +]; + +export const userLoginDropdown =[ + { + id:1, + title:"cart", + path:"./cart", + cName:"submenu-item", + }, + + { + id:2, + title:"profile", + path:"./profile", + cName:"submenu-item", + }, + + +]; + diff --git a/src/componets/faq.js b/src/componets/faq.js index 541860f..1a0eae0 100644 --- a/src/componets/faq.js +++ b/src/componets/faq.js @@ -1,75 +1,208 @@ -import React, { useState } from "react"; -import "./faq.css"; +import React from 'react'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; -const FAQ = () => { - const [openIndex, setOpenIndex] = useState(null); +const FAQContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; + max-width: 1200px; + margin: 0 auto; + background-color: #fffbeb; + box-shadow: 1px 1px 5px 6px #888888; +`; - // Updated FAQ questions and answers - const faqs = [ - { - question: "How do I place an order?", - answer: - "To place an order, browse our collection and click the 'Add to Cart' button. When you're ready, proceed to checkout.", - }, - { - question: "Can I modify my order after placing it?", - answer: - "Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed.", - }, - { - question: "Is it safe to use my credit card on your site?", - answer: - "Yes, our website uses SSL encryption to ensure your payment information is secure.", - }, - { - question: "What payment methods do you accept?", - answer: - "We accept credit/debit cards, PayPal, and other popular methods.", - }, - { - question: "How long will it take to receive my order?", - answer: - "Delivery typically takes 5-7 business days, depending on your location. You will receive a tracking number once your order is shipped.", - }, - { - question: "Do you ship internationally?", - answer: "Yes, we offer international shipping to most countries.", - }, - ]; +const FAQHeading = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; + font-family: 'Playfair Display', serif; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-content: space-around; + font-weight: bold; - const toggleAnswer = (index) => { - if (openIndex === index) { - setOpenIndex(null); // Close if the same question is clicked - } else { - setOpenIndex(index); // Open the clicked question - } - }; + @media (max-width: 768px) { + font-size: 2rem; + text-align: center; + } +`; +const FAQContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 0; + flex-direction: column; + flex-wrap: wrap; + align-content: center; +`; + +const FAQItem = styled(motion.div)` + background-color: white; + padding: 2.5rem; + border-radius: 8px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 600px; + margin: 0 auto; + margin-bottom: 2rem; + transition: all 0.3s ease; + cursor: pointer; + + &:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); + background-color:rgb(241, 224, 198)/* Coffee color */ + } +`; + +const Question = styled(motion.h3)` + font-size: 1.5rem; + margin-bottom: 1rem; + color: #78350f; + font-family: 'Playfair Display', serif; + cursor: pointer; + font-weight: 550; +`; + +const Answer = styled(motion.p)` + font-size: 1.1rem; + color: #6b4423; + line-height: 1.6; + font-family: 'Poppins', sans-serif; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-out; +`; + +function FAQ() { return ( -
-
- {faqs.map((q, idx) => ( -
toggleAnswer(idx)} + + + Frequently Asked Questions (FAQs) + + + { + const answer = document.getElementById('answer1'); + if (answer.style.maxHeight) { + answer.style.maxHeight = null; + } else { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } + }} + > + + How do I place an order? + + + To place an order, browse our collection and click the 'Add to Cart' button. When you're ready, proceed to checkout. + + + { + const answer = document.getElementById('answer2'); + if (answer.style.maxHeight) { + answer.style.maxHeight = null; + } else { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } + }} + > + + Can I modify my order after placing it? + + + Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed. + + + { + const answer = document.getElementById('answer3'); + if (answer.style.maxHeight) { + answer.style.maxHeight = null; + } else { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } + }} + > + + What payment methods do you accept? + + + We accept various payment methods including credit cards, PayPal, and bank transfers. + + + { + const answer = document.getElementById('answer4'); + if (answer.style.maxHeight) { + answer.style.maxHeight = null; + } else { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } + }} + > + + How can I track my order? + + -
-

{q.question}

- -
-
-

{q.answer}

-
-
- ))} -
-
+ After your order is shipped, you will receive a tracking number via email to monitor your shipment. + + + + ); -}; +} -export default FAQ; +export default FAQ; \ No newline at end of file