Merge pull request #227 from mansi066/main

Add cozyAmbiance page
Mujtabaa07 · Jan 25, 2025 · b5b5372 · b5b5372
2 parents fa6640f + 6dac0b8
commit b5b5372
Show file tree

Hide file tree

Showing 17 changed files with 572 additions and 914 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -26,6 +26,7 @@ import Milkshakes from './Pages/milkshake';
 import PremiumBeans from './Pages/PremiumBeans';
 import ForgetPassword from "./Pages/ForgetPassword";
 import ExpertBaristas from "./Pages/ExpertBaristas";
+import CozyAmbiance from "./Pages/CozyAmbiance";
 import Reviews from "./componets/Reviews";
 import AnimatedCursor from "react-animated-cursor";
 import Feedback from './Pages/Feedback';
@@ -78,6 +79,7 @@ function App() {
               <Route path="/premiumbeans" element={<PremiumBeans />} />
               <Route path="/feedback" element={<Feedback />} />
               <Route path="/expertbaristas" element={<ExpertBaristas />} />
+              <Route path="/cozyambiance" element={<CozyAmbiance />} />
             </Routes>
           </ContentContainer>
           <Reviews />

diff --git a/src/Pages/CozyAmbiance.css b/src/Pages/CozyAmbiance.css
@@ -0,0 +1,57 @@
+.card{
+    width:25rem;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    background: #fdf5e6;
+    @media (max-width: 768px) {
+       width:20rem;
+}
+}
+
+h2 {
+    font-size: 2rem;
+    justify-content: center;
+    color: #78350f;
+    font-weight: 500;
+    display: flex;
+}
+.card-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    justify-items: center;
+    margin-top: 12px;
+    @media (max-width: 768px) {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+}
+}
+img{
+    width: 500px;
+    height: 500px;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 1.5rem;
+
+    @media (max-width: 768px) {
+      width: 100%;
+      height: auto;
+      margin-left: 0;
+      margin-bottom: 1rem;
+    }
+}
+.card-img-top {
+    width: 500px;
+    height: 300px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.card {
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .card:hover {
+    transform: translateY(-10px);
+  }
+
+
+
diff --git a/src/Pages/CozyAmbiance.js b/src/Pages/CozyAmbiance.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import "./CozyAmbiance.css";
+
+
+const CozyContainer = 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;
+  }
+`;
+const FeatureTitle = styled(motion.h1)`
+  font-size: 4rem;
+  margin-top: -4rem;
+  margin-bottom: 1rem;
+  color: #78350f;
+  font-family: 'Playfair Display', serif;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-content: space-around;
+  font-weight: bold;
+
+  @media (max-width: 768px) {
+    font-size: 2.5rem; /* Adjust font size for smaller screens */
+    text-align: center; /* Center the title on smaller screens */
+    margin-top: 0; /* Reset margin for better spacing on smaller screens */
+  }
+`;
+
+
+function CozyAmbiance() {
+  return (
+    <>
+    <CozyContainer>
+    <FeatureTitle
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+         Cozy Ambiance
+        </FeatureTitle>
+        <div className="card-container">
+    <div className="card" >
+  <img src="https://plus.unsplash.com/premium_photo-1661549768416-f2f9744fc69d?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8d2FybSUyMGVudmlyb25tZW50fGVufDB8fDB8fHww" className="card-img-top" alt="warm environment"/>
+  <div className="card-body">
+    <h2 >Warm Environment</h2>
+    <p className="card-text">Experience the warmth and coziness of MS Cafe from the comfort of your own home. Our virtual cafe brings the inviting ambiance of a physical cafe right to your screen.</p>
+  </div>
+</div>
+<div className="card" >
+  <img src="https://images.unsplash.com/photo-1471440671318-55bdbb772f93?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="card-img-top" alt="Comforting sounds"/>
+  <div className="card-body">
+    <h2 >Comforting Sounds</h2>
+     <p className="card-text">Immerse yourself in a symphony of comforting sounds with MS Cafe's online experience. Enjoy the gentle hum of background music, the soothing rustle of leaves.</p>
+  </div>
+</div>
+<div className="card" >
+  <img src="https://media.istockphoto.com/id/1130676968/photo/customer-at-a-coffee-shop-buying-fresh-coffee.jpg?s=1024x1024&w=is&k=20&c=FKfH3o--Rt66pEWLZfx5poaadUN9gDqmKkNSV5YRzRY=" className="card-img-top" alt="Delicius Offering"/>
+  <div className="card-body">
+  <h2 >Delicius Offerings</h2>
+    <p className="card-text">Indulge in the delicious offerings of MS Cafe, all available online. From rich, aromatic coffee blends to mouthwatering pastries, our menu is crafted to satisfy your cravings.</p>
+  </div>    
+</div>
+<div className="card" >
+  <img src=" https://images.unsplash.com/photo-1588196749597-9ff075ee6b5b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="card-img-top" alt="Personalized Service"/>
+  <div className="card-body">
+  <h2>Personalized Service</h2>
+    <p className="card-text">At MS Cafe, personalized service is at the heart of our online experience. Our attentive staff is dedicated to catering to your individual needs, whether it's a custom coffee order or a special request.</p>
+  </div>
+</div>
+</div>
+    </CozyContainer>
+  </>
+  )
+}
+
+export default CozyAmbiance
+
diff --git 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,13 +252,11 @@ 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) {    
@@ -311,12 +307,9 @@ const CardsContainer = styled.div`
 `;
 
 const CardColumn = styled.div`
-  display: flex;  
+  display: flex;
   flex-direction: column;
   gap: 40px;
-  @media (max-width: 880px) {        
-    margin-top:100px;    
-  }
 `;
 
 const Card = styled.div`
@@ -468,8 +461,21 @@ function PremiumBeans() {
     },
   ];
   return (
-    <Loader >     
-
+    <Loader >
+      <CardsContainer>
+        {/* Left cards */}
+        <CardColumn>
+          {beans.slice(0, 2).map((bean) => (
+            <Card key={bean.id}>
+              <CardImage style={{ backgroundImage: `url(${bean.image})` }} />
+              <CardContent>
+                <CardTitle>{bean.title}</CardTitle>
+                <CardDescription>{bean.description}</CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </CardColumn>
+        </CardsContainer>
     <Container>
       <CoffeeHeader>
         <CoffeeButtonOne />
@@ -516,7 +522,6 @@ function PremiumBeans() {
           ))}
     </CardColumn>
     <CardColumn>
-    {/*Right Cards*/}
           {beans.slice(2).map((bean) => (
             <Card key={bean.id}>
               <CardImage style={{ backgroundImage: `url(${bean.image})` }} />
@@ -532,4 +537,5 @@ function PremiumBeans() {
     </Loader>
   );
 }
+
 export default PremiumBeans;
diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js
@@ -894,4 +894,4 @@ function Shop() {
   );
 }
 
-export default Shop;
+export default Shop;
diff --git a/src/Pages/cake.js b/src/Pages/cake.js
@@ -18,15 +18,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;
@@ -251,10 +249,7 @@ 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 (
     <CakeContainer>
 
@@ -284,7 +279,7 @@ function Cake() {
   </SearchFilterContainer>
 
       <ProductGrid>
-        {filteredProducts.map((product) => (
+        {products.map((product) => (
           <ProductCard key={product.id}>
             <div style={{ position: 'relative' }}>
               <ProductImage src={product.image} alt={product.name} />

diff --git a/src/Pages/coffee.js b/src/Pages/coffee.js
@@ -14,14 +14,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;
@@ -135,40 +133,6 @@ 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();
@@ -390,9 +354,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 (
     <CoffeeContainer>
@@ -403,21 +364,8 @@ const filteredProducts = products.filter((product) =>
         >
           Our Coffee Selection
         </Title>
-        <SearchFilterContainer>
-
-      <SearchInput
-    type="text"
-    placeholder="Search for coffee..."
-    value={searchQuery}
-    onChange={(e) => setSearchQuery(e.target.value)}
-  />
-  <SearchButton onClick={() => console.log("Search clicked!")}>
-    Search
-  </SearchButton>
-
-  </SearchFilterContainer>
       <ProductGrid>
-        {filteredProducts.map((product) => (
+        {products.map((product) => (
           <ProductCard key={product.id}>
             <div style={{ position: 'relative' }}>
               <ProductImage src={product.image} alt={product.name} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -894,4 +894,4 @@ function Shop() { @@
       );
     }
-    export default Shop;
+    export default Shop;