From 8339af0b006cb662dd1a57c8117e7d10f8bbc148 Mon Sep 17 00:00:00 2001 From: mansi066 Date: Mon, 13 Jan 2025 20:43:46 +0530 Subject: [PATCH] Revert "Resolve error" This reverts commit f5f102d9e5116ef73a84926034e607353a73e99a, reversing changes made to bb5b974a9821e962d438d6265476147b0981cda5. --- src/Pages/PremiumBeans.js | 99 +++-------- src/Pages/Shop.js | 328 ++++++++++++++++--------------------- src/Pages/cake.js | 59 +------ src/Pages/coffee.js | 57 +------ src/Pages/milkshake.js | 62 +------ src/Pages/profile.js | 247 ++++++---------------------- src/Pages/soup.js | 61 +------ src/componets/Dropdown.css | 57 ++++--- src/componets/Dropdown.js | 123 +++++++++++--- src/componets/Navbar.css | 15 +- src/componets/Navbar.js | 153 +++-------------- src/componets/Navitems.js | 57 +++---- src/componets/footer.js | 78 ++++----- vercel.json | 1 - 14 files changed, 449 insertions(+), 948 deletions(-) delete mode 100644 vercel.json diff --git a/src/Pages/PremiumBeans.js b/src/Pages/PremiumBeans.js index 33d850b..af54ffc 100644 --- a/src/Pages/PremiumBeans.js +++ b/src/Pages/PremiumBeans.js @@ -3,12 +3,10 @@ import styled, { keyframes } from 'styled-components'; const Loader = styled.div` background: linear-gradient(135deg, #FDF5E6, #FFE4B5); - height: 100vh; + height: 90vh; width: 100%; position:relative; - @media (max-width: 880px) { - height: 1700px; - } + `; @@ -254,68 +252,19 @@ const CoffeeTapNozzle = styled.div` border-radius: 0%; `; const CardsContainer = styled.div` - position: relative; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 500px; + display: flex; justify-content: space-between; width: 1000px; - @media (max-width: 1050px) { - margin:0; - place-items: center; - gap: 340px; - - } - @media (max-width: 940px) { - margin:0; - place-items: center; - gap: 250px; - - } - @media (max-width: 880px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - - } - @media (max-width: 820px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 770px) { - margin: 0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 600px) { - margin: 0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 500px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - `; const CardColumn = styled.div` - display: flex; + display: flex; flex-direction: column; gap: 40px; - @media (max-width: 880px) { - margin-top:100px; - } `; const Card = styled.div` @@ -325,12 +274,6 @@ const Card = styled.div` flex-direction: column; align-items: center; background: transparent; - @media (max-width: 880px) { - width: 480px; - } - @media (max-width: 600px) { - width: 240px; - } `; const CardImage = styled.div` @@ -413,8 +356,20 @@ function PremiumBeans() { }, ]; return ( - - + + + {/* Left cards */} + + {beans.slice(0, 2).map((bean) => ( + + + + {bean.title} + {bean.description} + + + ))} + @@ -445,22 +400,7 @@ function PremiumBeans() { - - - - {/* Left cards */} - {beans.slice(0, 2).map((bean) => ( - - - - {bean.title} - {bean.description} - - - ))} - - {/*Right Cards*/} {beans.slice(2).map((bean) => ( @@ -475,4 +415,5 @@ function PremiumBeans() { ); } + export default PremiumBeans; diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 01cfaa8..5d1d959 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -9,7 +9,7 @@ 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 ButtonGroup from '@mui/material/ButtonGroup'; @@ -21,8 +21,6 @@ const ShopContainer = styled.div` background-color: #fffbeb; padding-top: 1.5rem; padding-top: 1.5rem; /* Adjusted padding for top */ - - `; @@ -38,17 +36,14 @@ const Title = styled(motion.h1)` const ProductGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, max-content)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; margin-top : 50px; - - `; const ProductCard = styled(motion.div)` - background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; overflow: hidden; @@ -638,219 +633,176 @@ const products = [ }, ]; -const SearchFilterContainer = styled.div` - display: flex; - justify-content: center; - - margin-bottom: 2rem; - -`; -const SearchInput = styled.input` - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ddd; - border-radius: 4px 0 0 4px; - outline: none; - width: 300px; - - &:focus { - border-color: #6b4f4f; - } -`; -const SearchButton = styled.button` - padding: 0.5rem 1rem; - font-size: 1rem; - background: linear-gradient(145deg, #6b4f4f, #7d5858); - color: white; - border: none; - border-radius: 0 4px 4px 0; - cursor: pointer; - transition: background 0.3s ease; - &:hover { - background: linear-gradient(145deg, #7d5858, #8e6a6a); - } -`; +function Shop() { + const dispatch = useDispatch(); -function Shop() { - const dispatch = useDispatch(); const [category, setCategory] = useState("hot"); - const [searchQuery, setSearchQuery] = useState(""); + const handleAddToCart = (product) => { dispatch(addToCart(product)); toast.success(`${product.name} added to cart!`); }; + + const handleClick = (value) => { setCategory(value); - }; - - // Filter products based on search query or category - const filteredProducts = products.filter((product) => { - // Check if product matches the selected category - const matchesCategory = category === "all" || product.type === category; - // Check if product name matches the search query (case insensitive) - const matchesSearchQuery = product.name.toLowerCase().includes(searchQuery.toLowerCase()); + } - // If search query is provided, only show products matching the query and selected category - return searchQuery ? matchesSearchQuery : matchesCategory; - }); + const filteredProducts = products.filter((product) => product.type === category); - const [itemsNo, setItemsNo] = useState(9); - const handleItemsNo = () => { + const [itemsNo,setItemsNo]=useState(9); + + const handleItemsNo = ()=>{ const s = products.length; - if (s === itemsNo) { + if (s==itemsNo) { setItemsNo(9); } else { - setItemsNo(Math.min(itemsNo + 9, s)); + setItemsNo(Math.min(itemsNo + 9,s)); } - }; + } - // Group products by type (category) - const groupedProducts = products.reduce((acc, product) => { - if (!acc[product.type]) acc[product.type] = []; - acc[product.type].push(product); - return acc; - }, {}); - - return ( - - + <Title initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}> + Our Coffee Selection + + + + - + + + + + {filteredProducts.slice(0, itemsNo).map((product) => ( + - Cold Beverages - + + + {product.name} + ${product.price.toFixed(2)} + handleAddToCart(product)}> + Add to Cart + + + + ))} +
- - - {/* Dynamically render sections */} -
- {Object.keys(groupedProducts).map((section) => { - const sectionProducts = groupedProducts[section]; - - // Only display the section if it matches the search query or if the search query is empty - const matchesSearchQuery = sectionProducts.some((product) => - product.name.toLowerCase().includes(searchQuery.toLowerCase()) - ); - - // Skip section if no products match the search query and the search query is not empty - if (searchQuery && !matchesSearchQuery) { - return null; - } - - return ( - - - {section === "hot" ? "Our Hot Beverages" : section === "cold" ? "Our Cold Beverages" : section === "food" ? "Our Food Selection" : ""} - - - {sectionProducts.map((product) => { - // If there's a search query, only show products that match - if (searchQuery && !product.name.toLowerCase().includes(searchQuery.toLowerCase())) { - return null; - } - return ( - -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - ); - })} - - - ); - })}
+ + + - - - ); + {[product1, product2, product3, product4].map((productList, index) => ( + + + {index === 0 + ? "Our Tea Selection" + : index === 1 + ? "Our Smoothie and Milkshake Selection" + : index === 2 + ? "Our Cake Selection" + : "Our Soup and Salad Selection"} + + + {productList.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + + + + ))} + + + ))} + +); } export default Shop; diff --git a/src/Pages/cake.js b/src/Pages/cake.js index 8cc9e9f..b9e8f15 100644 --- a/src/Pages/cake.js +++ b/src/Pages/cake.js @@ -13,15 +13,13 @@ const CakeContainer = styled.div` const ProductGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, max-content)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; - justify-content: center; `; const ProductCard = styled(motion.div)` -max-width:345 px; background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; overflow: hidden; @@ -117,45 +115,10 @@ const QuantityDisplay = styled.span` min-width: 20px; text-align: center; `; -const SearchFilterContainer = styled.div` - display: flex; - justify-content: center; - - margin-bottom: 2rem; - -`; -const SearchInput = styled.input` - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ddd; - border-radius: 4px 0 0 4px; - outline: none; - width: 300px; - - &:focus { - border-color: #6b4f4f; - } -`; - -const SearchButton = styled.button` - padding: 0.5rem 1rem; - font-size: 1rem; - background: linear-gradient(145deg, #6b4f4f, #7d5858); - color: white; - border: none; - border-radius: 0 4px 4px 0; - cursor: pointer; - transition: background 0.3s ease; - - &:hover { - background: linear-gradient(145deg, #7d5858, #8e6a6a); - } -`; function Cake() { const dispatch = useDispatch(); const [quantities, setQuantities] = useState({}); - const [searchQuery, setSearchQuery] = useState(''); const handleAddToCart = (product) => { if (!quantities[product.id]) { @@ -236,30 +199,14 @@ function Cake() { description: "Light and fluffy, a sweet strawberry cake with creamy frosting, perfect for summer.", }, ]; - const filteredProducts = products.filter((product) => - product.name.toLowerCase().includes(searchQuery.toLowerCase()) - ); - + return ( Our Cake Selection - - - setSearchQuery(e.target.value)} - /> - console.log("Search clicked!")}> - Search - - - - {filteredProducts.map((product) => ( + {products.map((product) => ( diff --git a/src/Pages/coffee.js b/src/Pages/coffee.js index 81566c1..99ed796 100644 --- a/src/Pages/coffee.js +++ b/src/Pages/coffee.js @@ -13,14 +13,12 @@ const CoffeeContainer = styled.div` const ProductGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, max-content)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; // Slightly reduced to center content more margin: 0 auto; - justify-content: center; `; const ProductCard = styled(motion.div)` -max-width:345 px; background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; overflow: hidden; @@ -134,45 +132,10 @@ const QuantityDisplay = styled.span` min-width: 20px; text-align: center; `; -const SearchFilterContainer = styled.div` - display: flex; - justify-content: center; - - margin-bottom: 2rem; - -`; -const SearchInput = styled.input` - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ddd; - border-radius: 4px 0 0 4px; - outline: none; - width: 300px; - - &:focus { - border-color: #6b4f4f; - } -`; - -const SearchButton = styled.button` - padding: 0.5rem 1rem; - font-size: 1rem; - background: linear-gradient(145deg, #6b4f4f, #7d5858); - color: white; - border: none; - border-radius: 0 4px 4px 0; - cursor: pointer; - transition: background 0.3s ease; - - &:hover { - background: linear-gradient(145deg, #7d5858, #8e6a6a); - } -`; function Coffee() { const dispatch = useDispatch(); const [quantities, setQuantities] = useState({}); - const [searchQuery, setSearchQuery] = useState(''); const handleAddToCart = (product) => { if (!quantities[product.id]) { @@ -381,9 +344,6 @@ function Coffee() { "Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.", }, ]; -const filteredProducts = products.filter((product) => - product.name.toLowerCase().includes(searchQuery.toLowerCase()) -); return ( @@ -394,21 +354,8 @@ const filteredProducts = products.filter((product) => > Our Coffee Selection - - - setSearchQuery(e.target.value)} - /> - console.log("Search clicked!")}> - Search - - - - {filteredProducts.map((product) => ( + {products.map((product) => ( diff --git a/src/Pages/milkshake.js b/src/Pages/milkshake.js index cc9c099..c05a732 100644 --- a/src/Pages/milkshake.js +++ b/src/Pages/milkshake.js @@ -13,15 +13,12 @@ const MilkshakeContainer = styled.div` const ProductGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, max-content)); )); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; // Slightly reduced to center content more margin: 0 auto; - justify-content: center; - `; const ProductCard = styled(motion.div)` -max-width:345 px; background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; overflow: hidden; @@ -135,46 +132,10 @@ const QuantityDisplay = styled.span` min-width: 20px; text-align: center; `; -const SearchFilterContainer = styled.div` - display: flex; - justify-content: center; - - margin-bottom: 2rem; - gap: 5rem; -`; -const SearchInput = styled.input` - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ddd; - border-radius: 4px 0 0 4px; - outline: none; - width: 300px; - - &:focus { - border-color: #6b4f4f; - } -`; - -const SearchButton = styled.button` - padding: 0.5rem 1rem; - font-size: 1rem; - background: linear-gradient(145deg, #6b4f4f, #7d5858); - color: white; - border: none; - border-radius: 0 4px 4px 0; - cursor: pointer; - transition: background 0.3s ease; - - &:hover { - background: linear-gradient(145deg, #7d5858, #8e6a6a); - } -`; - function Milkshake() { const dispatch = useDispatch(); const [quantities, setQuantities] = useState({}); - const [searchQuery, setSearchQuery] = useState(''); const handleAddToCart = (product) => { if (!quantities[product.id]) { @@ -303,11 +264,7 @@ function Milkshake() { description: "Rich and creamy, made with peanut butter, ice cream, and milk, a peanut butter lover's dream.", }, - ]; -const filteredProducts = products.filter((product) => - product.name.toLowerCase().includes(searchQuery.toLowerCase()) -); return ( @@ -316,23 +273,10 @@ const filteredProducts = products.filter((product) => animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Milkshake Selection + Our Milkshake Selection - -
- setSearchQuery(e.target.value)} - /> - console.log("Search clicked!")}> - Search - -
- - {filteredProducts.map((product) => ( + {products.map((product) => ( diff --git a/src/Pages/profile.js b/src/Pages/profile.js index 17b4248..b482de4 100644 --- a/src/Pages/profile.js +++ b/src/Pages/profile.js @@ -1,241 +1,100 @@ -import React, { useState } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import styled, { createGlobalStyle } from 'styled-components'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import styled from 'styled-components'; import { motion } from 'framer-motion'; - -// Global Styles -const GlobalStyle = createGlobalStyle` - body { - font-family: 'Roboto', sans-serif; - margin: 0; - padding: 0; - background-color: ${(props) => (props.darkMode ? '#121212' : '#f4f4f4')}; - color: ${(props) => (props.darkMode ? '#fff' : '#333')}; - transition: all 0.3s ease; - } -`; +import Button from '../componets/Button'; // Corrected import statement const ProfileContainer = styled.div` padding: 4rem 2rem; - max-width: 900px; + max-width: 800px; margin: 0 auto; - display: flex; - flex-direction: column; - align-items: center; `; const Title = styled(motion.h1)` - font-size: 2.8rem; - font-weight: 600; + font-size: 2.5rem; margin-bottom: 2rem; text-align: center; - color: ${(props) => (props.darkMode ? '#fff' : '#333')}; - margin-top: 2rem; + margin-top: 4rem; `; const ProfileInfo = styled(motion.div)` - background-color: ${(props) => (props.darkMode ? '#1f1f1f' : '#ffffff')}; + background-color: white; padding: 2rem; - border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 100%; - max-width: 600px; - text-align: center; - margin-bottom: 2rem; -`; - -const ProfilePicture = styled.div` - width: 120px; - height: 120px; - border-radius: 50%; - margin-bottom: 1.5rem; - background-image: url(${(props) => props.src || '/images/placeholder-avatar.png'}); - background-size: cover; - background-position: center; - background-color: ${(props) => (props.src ? 'transparent' : '#dcdcdc')}; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); `; const InfoItem = styled.div` - margin-bottom: 1.5rem; - font-size: 1.1rem; + margin-bottom: 1rem; `; const Label = styled.span` - font-weight: 500; + font-weight: bold; margin-right: 0.5rem; - color: ${(props) => (props.darkMode ? '#bbb' : '#555')}; `; const OrderHistory = styled(motion.div)` - width: 100%; margin-top: 2rem; - padding: 2rem; - background-color: ${(props) => (props.darkMode ? '#1f1f1f' : '#fff')}; - border-radius: 12px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); `; const Order = styled.div` - background-color: ${(props) => (props.darkMode ? '#333' : '#fff')}; - padding: 1.2rem; + background-color: white; + padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 1rem; - &:hover { - transform: translateY(-4px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - cursor: pointer; - } -`; - -const DarkModeToggle = styled.button` - position: fixed; - top: 20px; - right: 20px; - background: ${(props) => (props.darkMode ? '#fff' : '#333')}; - color: ${(props) => (props.darkMode ? '#333' : '#fff')}; - border: none; - padding: 10px 15px; - border-radius: 50%; - font-size: 1.5rem; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - &:hover { - opacity: 0.8; - } -`; - -// Button Component -const Button = styled.button` - background-color: ${(props) => (props.primary ? '#007bff' : '#ccc')}; - color: ${(props) => (props.primary ? '#fff' : '#333')}; - font-size: 1.1rem; - padding: 0.8rem 1.5rem; - border: none; - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - &:hover { - background-color: ${(props) => (props.primary ? '#0056b3' : '#bbb')}; - transform: translateY(-2px); - } -`; - -const Input = styled.input` - width: 100%; - padding: 10px; - margin-top: 10px; - border-radius: 8px; - border: 1px solid ${(props) => (props.darkMode ? '#555' : '#ccc')}; - background-color: ${(props) => (props.darkMode ? '#333' : '#fff')}; - color: ${(props) => (props.darkMode ? '#fff' : '#333')}; - font-size: 1rem; - outline: none; - transition: all 0.3s ease; `; function Profile() { const UserData = JSON.parse(localStorage.getItem('user')); const user = useSelector((state) => state.auth.user); - const dispatch = useDispatch(); - const [darkMode, setDarkMode] = useState(false); - - const [editing, setEditing] = useState(false); - const [name, setName] = useState(user?.username || ''); - const [email, setEmail] = useState(user?.email || ''); + // Mock order history data const orderHistory = [ { id: 1, date: '2023-05-01', total: 15.99 }, { id: 2, date: '2023-05-15', total: 24.99 }, { id: 3, date: '2023-05-30', total: 19.99 }, ]; - const handleSave = () => { - // You can dispatch an action to update the user information here - // Example: dispatch(updateUser({ name, email })); - setEditing(false); - }; - return ( - <> - - setDarkMode(!darkMode)}> - {darkMode ? '🌙' : '🌞'} - - - - Your Profile - - - - {editing ? ( - <> - - - setName(e.target.value)} - darkMode={darkMode} - /> - - - - setEmail(e.target.value)} - darkMode={darkMode} - /> - - - - ) : ( - <> - - - {user?.username || 'N/A'} - - - - {user?.email || 'N/A'} - - - - )} - - -

Order History

- {orderHistory.map((order) => ( - -

Order ID: {order.id}

-

Date: {order.date}

-

Total: ${order.total.toFixed(2)}

- - ))} - - - - + + + Your Profile + + + + + {UserData.username || 'N/A'} + + + + {UserData.email || 'N/A'} + + + + +

Order History

+ {orderHistory.map((order) => ( + +

Order ID: {order.id}

+

Date: {order.date}

+

Total: ${order.total.toFixed(2)}

+ + ))} + + ); } diff --git a/src/Pages/soup.js b/src/Pages/soup.js index 7dd3c36..26706a0 100644 --- a/src/Pages/soup.js +++ b/src/Pages/soup.js @@ -13,15 +13,12 @@ const SoupContainer = styled.div` const ProductGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, max-content)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; // Slightly reduced to center content more margin: 0 auto; - justify-content: center; - `; const ProductCard = styled(motion.div)` -max-width:345 px; background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; overflow: hidden; @@ -135,45 +132,10 @@ const QuantityDisplay = styled.span` min-width: 20px; text-align: center; `; -const SearchFilterContainer = styled.div` - display: flex; - justify-content: center; - - margin-bottom: 2rem; - -`; -const SearchInput = styled.input` - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ddd; - border-radius: 4px 0 0 4px; - outline: none; - width: 300px; - - &:focus { - border-color: #6b4f4f; - } -`; - -const SearchButton = styled.button` - padding: 0.5rem 1rem; - font-size: 1rem; - background: linear-gradient(145deg, #6b4f4f, #7d5858); - color: white; - border: none; - border-radius: 0 4px 4px 0; - cursor: pointer; - transition: background 0.3s ease; - - &:hover { - background: linear-gradient(145deg, #7d5858, #8e6a6a); - } -`; function Soup() { const dispatch = useDispatch(); const [quantities, setQuantities] = useState({}); - const [searchQuery, setSearchQuery] = useState(''); const handleAddToCart = (product) => { if (!quantities[product.id]) { @@ -267,9 +229,7 @@ function Soup() { "Spicy and aromatic, a Thai soup with lemongrass, kaffir lime leaves, and chilies, often with shrimp.", }, ]; -const filteredProducts = products.filter((product) => - product.name.toLowerCase().includes(searchQuery.toLowerCase()) -); + return ( @@ -278,23 +238,10 @@ const filteredProducts = products.filter((product) => animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Soupshake Selection + Our Soupshake Selection - - - setSearchQuery(e.target.value)} - /> - console.log("Search clicked!")}> - Search - - - - {filteredProducts.map((product) => ( + {products.map((product) => ( diff --git a/src/componets/Dropdown.css b/src/componets/Dropdown.css index 678353f..f5d0a71 100644 --- a/src/componets/Dropdown.css +++ b/src/componets/Dropdown.css @@ -1,36 +1,45 @@ +/* Dropdown container */ .product-submenu { + width: 10rem; position: absolute; top: 50px; - right: 0px; - list-style: none; - text-align: start; - border: 2px solid #8b4513; - border-radius: 8px; - background-color: rgba(44, 19, 11, 0.95); - visibility: visible; - opacity: 1; - transition: opacity 0.3s ease, visibility 0.3s ease; - padding: 0.5rem 0; - } + list-style: none; + text-align: start; + justify-content: center; + padding: -10px -10px; + background-color: rgba(44, 19, 11, 0.95); + border-radius: 8px; + border: 2px solid #8B4513; + z-index: 1000; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} .product-submenu.clicked { - visibility: hidden; - opacity: 0; - } + display: none; +} .submenu-item { display: block; - height: 100%; - text-decoration: none; - padding: 0.5rem 1rem; - white-space: nowrap; - transition: background-color 0.3s ease; - min-width: fit-content; - margin: 0; + width: 100%; + text-decoration: none; + color: #deb887; + padding: -4px; + text-align: start; + background-color: transparent; + transition: background-color 0.2s ease, color 0.2s ease; + } .submenu-item:hover { - background-color: rgba(210, 105, 30, 0.2); - color: #ffe4b5; - cursor: pointer; + background-color: #8B4513; + color: #ffffff; + cursor: pointer; } + +.submenu-item a { + color: inherit; + text-decoration: none; + display: block; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/componets/Dropdown.js b/src/componets/Dropdown.js index 5a7e6ef..ded2c80 100644 --- a/src/componets/Dropdown.js +++ b/src/componets/Dropdown.js @@ -3,26 +3,105 @@ import {productDropdown,ourstoryDropdown,userLoginDropdown,userLogoutDropdown} f import { Link} from "react-router-dom"; import "./Dropdown.css"; -const Dropdown = ({ items }) => { - const [dropdown, setDropdown] = useState(false); - - const toggleDropdown = () => setDropdown((prevState) => !prevState); - - return ( -
    - {items.map((item) => ( -
  • setDropdown(false)}> - {item.title} -
    • - ))} +export const ProDropdown =()=>{ + const [dropdown,setDropdown] =useState(false); + return <> +
      setDropdown(!dropdown)}> + { + productDropdown.map(item=>{ + return ( + + +
    • setDropdown(false)}> + {item.title} + +
      • + + ) + }) + } +
    - ); -}; - -export const OsDropdown = () => ; -export const UsLoginDropdown = () => ; -export const UsLogoutDropdown = () => ; -export const ProDropdown = () => ; + + + }; + + 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 0aa1048..8f4fc3f 100644 --- a/src/componets/Navbar.css +++ b/src/componets/Navbar.css @@ -117,13 +117,12 @@ body.menu-open { width: 100%; background: #2C130B; z-index: 1000; - padding: 15px 30px; /* Increase padding for a larger navbar */ + padding: 10px 20px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); display: flex; - justify-content: space-between; /* Space between logo and menu items */ + justify-content: center; align-items: center; gap: 3rem; - font-size: 18px; /* Increase font size */ ; } @@ -150,14 +149,18 @@ body.menu-open { display: flex; } -/*Deleting conflicting shop dropdown*/ -/* +/*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; } -*/ \ No newline at end of file + diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index cd122eb..3d4edbc 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -14,17 +14,17 @@ import { const NavbarContainer = styled(motion.nav)` display: flex; - width: 100%; + width: 100vw; justify-content: space-between; align-items: center; - padding: 0.5rem 2rem; + padding: 1rem 2rem; background: rgba(44, 19, 11, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(30, 12, 5, 0.2); position: fixed; top: 0; left: 0; - z-index: 1100; + z-index: 1000; transition: all 0.3s ease; border-bottom: 2px solid #8b4513; @@ -36,7 +36,7 @@ const NavbarContainer = styled(motion.nav)` &::before { content: ""; position: absolute; - width: 100%; + width: 100vw; top: 0; left: 0; right: 0; @@ -48,14 +48,12 @@ const NavbarContainer = styled(motion.nav)` `; const Logo = styled(motion.div)` - font-size: 1.8rem; + font-size: 2rem; font-weight: 700; font-family: "Playfair Display", serif; display: flex; align-items: center; cursor: pointer; - gap: 0.5rem; /* Add spacing between the icon and text */ - min-width: 150px; /* Ensure minimum width for logo area */ a { color: #d2691e; @@ -65,7 +63,6 @@ const Logo = styled(motion.div)` -webkit-text-fill-color: transparent; transition: all 0.3s ease; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - white-space: nowrap; /* Prevent logo text from wrapping */ &:hover { opacity: 0.9; @@ -73,40 +70,23 @@ const Logo = styled(motion.div)` } img { - margin-right: 0.5rem; /* Adds space between the image and the text */ + margin-right: 5px; /* Adds space between the image and the text */ width: 30px; /* Adjust size of the image */ height: 30px; /* Adjust size of the image */ - flex-shrink: 0; /* Prevent logo image from shrinking */ } `; const RightNav = styled(motion.div)` display: flex; - - justify-content: center; - - justify-content: flex-end; - + justify-content: space-around; align-items: center; - padding: 0.1rem; - gap: 1rem; /* Space between nav items */ - flex-grow: 1; /* Allow right navigation to take remaining space */ + padding: 1rem 2rem; + position: fixed; top: 0px; - - left: 55vw; //Now the Shop section is completely visible at the top-right section of Navbar. - - - left: 20vw; //Now the Shop section is completely visible at the top-right section of Navbar. - + left: 35vw; //Now the Shop section is completely visible at the top-right section of Navbar. right: 0; - bottom:5; - - z-index: 1000; transition: all 0.3s ease; - @media (max-width: 768px) { - justify-content: flex-end; - } &.scrolled { padding: 0.8rem 2rem; @@ -130,10 +110,9 @@ const NavLinks = styled(motion.div)` display: flex; justify-content: flex-end; align-items: center; - gap: 1.5rem; + gap: 2rem; margin: 10px; align-items: center; - margin-left: ${({ first }) => (first ? '2rem' : '0')}; /* Apply to first item */ @media (max-width: 768px) { display: none; @@ -142,7 +121,7 @@ const NavLinks = styled(motion.div)` const NavLink = styled(motion.div)` position: relative; - padding-bottom: 15px; + a { color: #deb887; text-decoration: none; @@ -150,9 +129,7 @@ const NavLink = styled(motion.div)` font-size: 1.1rem; transition: all 0.3s ease; font-family: "Poppins", sans-serif; - - padding: 20px; - + padding: 25px; &:hover { color: #ffe4b5; @@ -160,7 +137,7 @@ const NavLink = styled(motion.div)` } &.active a { - text-decoration: none; + text-decoration: underline; color: #d2691e; } @@ -168,7 +145,7 @@ const NavLink = styled(motion.div)` content: "☕"; position: absolute; font-size: 0.8rem; - bottom: -8px; + bottom: -15px; left: 50%; transform: translateX(-50%) scale(0); transition: transform 0.3s ease; @@ -191,24 +168,10 @@ const MobileMenuButton = styled(motion.button)` border-radius: 8px; transition: all 0.3s ease; - /* Default styling for mobile */ - @media (max-width: 1024px) { + @media (max-width: 768px) { display: flex; align-items: center; justify-content: center; - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); - } - - @media (max-width: 768px) { - font-size: 1.3rem; - } - - @media (max-width: 480px) { - font-size: 1.2rem; - padding: 0.4rem; } &:hover { @@ -217,7 +180,6 @@ const MobileMenuButton = styled(motion.button)` } `; - const MobileMenu = styled(motion.div)` position: fixed; top: 72px; @@ -242,11 +204,6 @@ const MobileNavLink = styled(motion.div)` color: #deb887; text-decoration: none; font-weight: 500; - font-size: 1.1rem; - padding: 0.5rem; - white-space: nowrap; - transition: all 0.3s ease; - font-family: "Poppins", sans-serif; display: block; transition: all 0.3s ease; font-family: "Poppins", sans-serif; @@ -260,61 +217,34 @@ const MobileNavLink = styled(motion.div)` transform: translateX(10px); } } - - &.active a { - color: #d2691e; - font-weight: bold; - } - - &::after { - content: "☕"; - position: absolute; - font-size: 0.8rem; - bottom: -15px; - left: 50%; - transform: translateX(-50%) scale(0); - transition: transform 0.3s ease; - color: #d2691e; - } - - &:hover::after { - transform: translateX(-50%) scale(1); - } `; const DropdownMenu = styled(motion.div)` display: none; position: absolute; - top: 100%; - right: 0; - - top: 50px; left: 0; - min-width: 180px; - 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; - z-index: 1050; - transition: all 0.2s ease-out; - animation: slideIn 0.3s ease forwards; + padding: 0.5rem 0; + z-index: 1001; a { display: block; - width: 100%; + padding: 0.5rem 1rem; text-decoration: none; color: #deb887; - padding: 0.5rem 1rem; - text-align: start; - background-color: transparent; - transition: background-color 0.2s ease, color 0.2s ease; + font-family: "Poppins", sans-serif; + font-size: 1rem; + transition: background 0.3s ease; &:hover { - background-color: #8b4513; - color: #ffffff; + background: rgba(210, 105, 30, 0.2); + color: #ffe4b5; } } `; @@ -326,44 +256,15 @@ const ShopLink = styled(NavLink)` display: flex; } - a { - color: #deb887; - text-decoration: none; - font-weight: bold; - font-size: 1.1rem; - transition: all 0.3s ease; - font-family: "Poppins", sans-serif; - padding: 20px; - - &:hover { - color: #ffe4b5; - } - } - - &.active a { - text-decoration: none; - color: #d2691e; - } - &::after { - - content: ""; + content: "▼"; font-size: 0.7rem; margin-left: 0.3rem; - - content: "☕"; - position: absolute; - font-size: 0.8rem; - bottom: -15px; - left: 50%; - transform: translateX(-50%) scale(0); - transition: transform 0.3s ease; - color: #d2691e; } &:hover::after { - transform: translateX(-50%) scale(1); + transform: rotate(180deg); } `; diff --git a/src/componets/Navitems.js b/src/componets/Navitems.js index e97b7af..bad558d 100644 --- a/src/componets/Navitems.js +++ b/src/componets/Navitems.js @@ -7,57 +7,44 @@ export const navItems = [ }, { id: 2, - title: "About", - path: "./About", - cName: "nav-item", - }, - { - id: 3, title: "Product", path: "./product", cName: "nav-item", }, { - id: 4, + id: 3, title: "Contact", path: "./contact", cName: "nav-item", }, { - id: 5, + id: 4, title: "Stories", path: "./our-story", cName: "nav-item", }, { - id: 6, + id: 5, title: "User", path: "./user", cName: "nav-item", }, - { - id :6, - title:"About", - path:"./about", - cName:"nav-item", - }, - ]; -export const productDropdown = [ - { - id: 1, - title: "Shop", - path: "./shop", - cName: "submenu-item", - }, +export const productDropdown =[ + { + id:1, + title:"Shop", + path:"./shop", + cName:"submenu-item", + }, - { - id: 2, - title: "Premium Beans", - path: "./premiumBeans", - cName: "submenu-item", - }, + { + id:2, + title:"Premium Beans", + path:"./premiumBeans", + cName:"submenu-item", + }, { id:3, @@ -77,13 +64,13 @@ export const productDropdown = [ export const ourstoryDropdown = [ { id: 1, - title: "About", + title: "about", path: "./about", cName: "submenu-item", }, { id: 2, - title: "Testimonials", + title: "testimonials", path: "./testimonial", cName: "submenu-item", }, @@ -92,13 +79,13 @@ export const ourstoryDropdown = [ export const userLogoutDropdown = [ { id: 1, - title: "Login", + title: "login", path: "./login", cName: "submenu-item", }, { id: 2, - title: "Register", + title: "register", path: "./register", cName: "submenu-item", }, @@ -107,13 +94,13 @@ export const userLogoutDropdown = [ export const userLoginDropdown = [ { id: 1, - title: "Cart", + title: "cart", path: "./cart", cName: "submenu-item", }, { id: 2, - title: "Profile", + title: "profile", path: "./profile", cName: "submenu-item", }, diff --git a/src/componets/footer.js b/src/componets/footer.js index f028651..d4a983d 100644 --- a/src/componets/footer.js +++ b/src/componets/footer.js @@ -2,8 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { motion } from 'framer-motion'; import { Link } from 'react-router-dom'; - -// Styled components for the footer (unchanged) +// Styled components for the footer const FooterContainer = styled.footer` background-color: #78350f; color: #fffbeb; @@ -13,25 +12,26 @@ const FooterContainer = styled.footer` bottom: 0; width: 100%; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); + `; const FooterContent = styled.div` max-width: 1200px; margin: 0 auto; - + p { margin: 0.5rem 0; font-size: 1rem; line-height: 1.5rem; - + &:first-child { font-weight: 500; } } - @media (max-width: 768px) { - display: flex; - flex-direction: column; + @media (max-width:768px){ + display:flex; + flex-direction:column; } `; @@ -40,10 +40,12 @@ const InfoSection = styled.div` justify-content: space-between; margin-top: 1.3rem; margin-bottom: 1.3rem; + // text-align: left; @media (max-width: 768px) { flex-direction: column; - gap: 1.5rem; + gap:1.5rem; + } `; @@ -56,10 +58,9 @@ const InfoColumn = styled.div` margin-bottom: 1rem; } - p, - a { + p, a { font-size: 0.9rem; - color: rgb(255, 255, 255); + color:rgb(255, 255, 255); text-decoration: none; display: block; margin-bottom: 0.5rem; @@ -69,23 +70,23 @@ const InfoColumn = styled.div` color: #fbbf24; } - @media (max-width: 768px) { - h3 { - font-size: 1.2rem; - margin-bottom: 0rem; - } + @media (max-width:768px){ + h3{ + font-size:1.2rem; + margin-bottom:0rem; + } + + p{ + font-size:1rem; + margin:0rem; + } - p { - font-size: 1rem; - margin: 0rem; - } - } `; const SocialIcons = styled.div` display: flex; justify-content: center; - gap: 1rem; + gap: 1rem; //additional gap removed. margin-top: 1rem; @media (max-width: 768px) { @@ -100,7 +101,7 @@ const SocialIcon = styled(motion.a)` padding: 0.5rem; border-radius: 50%; transition: color 0.3s ease; - + &:hover { color: #fbbf24; transform: scale(1.2); @@ -115,6 +116,7 @@ function Footer() { return ( + {/* Social Icons */} - {/* Updated Twitter icon */} + {/* 'className' should've been used instead of 'class'. */} - - {/* LinkedIn icon */} - - + {/* Informational Sections */}

    About Us

    -

    - Founded in 2010, MsCafe is dedicated to serving the finest coffee with passion and - expertise. We source our beans from sustainable farms across the globe. -

    +

    Founded in 2010, MsCafe is dedicated to serving the finest coffee with passion and expertise. We source our beans from sustainable farms across the globe.

     - +

    Quick Links

    Home Shop @@ -186,16 +175,13 @@ function Footer() {

    Location

    123 Coffee St, Bean Town, USA

    -

    - - View on Map - -

    +

    View on Map

    © {new Date().getFullYear()} MsCafe. All rights reserved.

    Made with ♥ by Mscoder

    +     ); diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 41be2e9..0000000 --- a/vercel.json +++ /dev/null @@ -1 +0,0 @@ -{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] } \ No newline at end of file