diff --git a/src/App.css b/src/App.css index 729309b..51245f8 100644 --- a/src/App.css +++ b/src/App.css @@ -4,6 +4,13 @@ .App { text-align: center; } +body { + @apply bg-white text-black; +} + +.dark body { + @apply bg-gray-900 text-white; +} .App-logo { height: 40vmin; diff --git a/src/App.js b/src/App.js index 9c0215f..4c1fc20 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { Provider, useSelector, useDispatch } from 'react-redux'; import { store } from './Store/index'; import { getCurrentUser } from './Store/authSlice'; import styled from 'styled-components'; +import { useState } from "react"; import Navbar from './componets/Navbar'; import Footer from './componets/footer'; @@ -42,6 +43,7 @@ import Reviews from './componets/Reviews'; import AnimatedCursor from 'react-animated-cursor'; import Chatbot from "./componets/Chatbot"; +
; // Styled Containers const AppContainer = styled.div` @@ -49,7 +51,9 @@ const AppContainer = styled.div` flex-direction: column; min-height: 100vh; color: #7c2214; -`; +` + + ; const ContentContainer = styled.div` flex: 1; @@ -97,16 +101,10 @@ const AppContent = () => { const dispatch = useDispatch(); const { token, user } = useSelector((state) => state.auth); - useEffect(() => { - if (token && !user) { - dispatch(getCurrentUser()); - } - }, [token, user, dispatch]); return ( - { outerScale={4} /> - { {/* Protected Routes */} } /> - - } + } /> - - } + } /> - - } + } /> - - } + } /> - + {/* */} {/* Add Chatbot so it floats on every page */} @@ -242,15 +240,21 @@ const AppContent = () => { // ✅ Main App Component with Google OAuth Provider function App() { return ( - - - - - - - - +
+ + + + + + + + + + +
+ ); } + export default App; \ No newline at end of file diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 8779e0d..9ab3ae1 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -13,19 +13,19 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; import ButtonGroup from "@mui/material/ButtonGroup"; const ShopContainer = styled.div` padding: 6rem 2rem 4rem 2rem; - max-width: 1200px; + max-width: max; margin: 0 auto; - background-color: #fffbeb; + background-color: #e8e1c8ff; padding-top: 1.5rem; - padding-top: 1.5rem; /* Adjusted padding for top */ + padding-top: 5rem; /* Adjusted padding for top */ `; const Title = styled(motion.h1)` font-size: clamp(1.5rem, 5vw, 2.5rem); /* Responsive font size */ - margin-bottom: 3rem; + margin-bottom: rem; margin-top: 2rem; padding: 0 1rem; /* Horizontal padding only */ text-align: center; - color: #78350f; + color: #653a24ff; word-wrap: break-word; overflow-wrap: break-word; `; @@ -40,29 +40,29 @@ const ProductGrid = styled.div` const ProductCard = styled(motion.div)` background: linear-gradient(145deg, #ffffff, #e6e6e6); - border-radius: 10px; + border-radius: 8px; overflow: hidden; position: relative; flex-direction: column; - justify-content: space-between; - height : 250px - box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.8); + justify-content: space-between; + height : 470px; + box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(233, 180, 180, 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); + box-shadow: 6px 6px 15px rgba(16, 15, 15, 0.15), -4px -4px 12px rgba(137, 125, 125, 0.9); } &:hover .overlay { - opacity: 1; + opacity: 0.9; } `; const ProductImage = styled(motion.img)` width: 100%; height: 220px; object-fit: cover; - border: 2px solid rgb(65, 21, 5); /* light coffee border */ - border-radius: 12px; + border: 2px solid rgba(77, 39, 26, 1); /* light coffee border */ + border-radius: 10px; box-sizing: border-box; background-color: #f5f5f5; /* subtle warm base behind images */ transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, @@ -90,18 +90,18 @@ const Overlay = styled.div` text-align: center; `; const ProductName = styled.h3` - font-size: 1.4rem; - margin-bottom: 0.5rem; + font-size: 1.3rem; + margin-bottom: 0.2rem; font-weight: 600; box-sizing: border-box; `; const OverlayText = styled.p` font-size: 1rem; - color: #333; + color: #33; text-align: center; `; const ProductInfo = styled.div` - padding: 1.25rem; + padding: 1.2rem; background: url("https://png.pngtree.com/thumb_back/fh260/background/20231205/pngtree-creamy-textured-milk-colored-background-image_13815875.png"); background-size: cover; flex-direction: column; @@ -109,10 +109,17 @@ const ProductInfo = styled.div` `; const ProductPrice = styled.p` font-size: 1.1rem; - color: #4a2c2a; - margin-bottom: 1rem; + color: #5f2c29ff; + margin-bottom: 0.5rem; font-weight: 600; `; +
+ Coffee +
const products = [ { @@ -827,6 +834,60 @@ function Shop() { }; + + + const [likedProducts, setLikedProducts] = useState({}); + + const toggleHeart = (productId) => { + setLikedProducts((prevState) => ({ + ...prevState, + [productId]: !prevState[productId], + })); + }; + const Wrapper = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + padding: 40px; + background-image: url("https://5.imimg.com/data5/SELLER/Default/2021/9/WK/WS/VC/5504430/fresh-roasted-coffee-beans-500x500.jpg"); + background-size: cover; + background-position: center; + border-radius: 12px; + height: 450px; + color: white; + `; + + const TextContent = styled.div` + background-color: rgba(0, 0, 0, 0.6); + padding: 30px; + border-radius: 8px; + max-width: 600px; // increased from 500px + color: #fff; + + h1 { + margin-bottom: 10px; + } + p{ + font-style: script; + color: #f0efdc; + font-size: 1.2rem; + + } + `; + +const Wrapper1 = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + padding: 40px; + background-image: url("https://5.imimg.com/data5/SELLER/Default/2021/9/WK/WS/VC/5504430/fresh-roasted-coffee-beans-500x500.jpg"); + background-size: cover; + background-position: center; + border-radius: 12px; + height: 100vh; // changed from fixed 400px + min-height: 400px; + color: white; +`; // Group products by type (category) const groupedProducts = products.reduce((acc, product) => { if (!acc[product.type]) acc[product.type] = []; @@ -836,14 +897,58 @@ function Shop() { return ( + + +

Welcome to MsCafe Shop

+

Start your day with the perfect brew.

+ + + {/* <Title + initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: "easeOut" }} text-weight="bold-800" > <DynamicText text="Welcome to MsCafe Shop" /> + */} + +
+ setSearchQuery(e.target.value)} + style={{ + padding: "10px", + borderRadius: "20px", + border: "1px solid #ccc", + width: "300px", + }} + /> +