Merge branch 'main' into feature/testimonials

Mujtabaa07 · Jan 11, 2025 · 39f569a · 39f569a
2 parents dd0010e + 2d0bf7c
commit 39f569a
Show file tree

Hide file tree

Showing 25 changed files with 18,025 additions and 2,693 deletions.
diff --git a/README.md b/README.md
@@ -41,23 +41,38 @@ Follow the steps below to set up the project locally:
 #### Step 1: Clone the repository
 ```bash
 # Clone the MsCafe repository
-git clone https://github.com/your-username/ms-cafe.git
+
+git clone https://github.com/your-username/coffeeShop.git
 
 # Navigate into the project directory
-cd ms-cafe
+cd coffeeShop
  # Install the required npm packages
 npm install
+
+git clone https://github.com/Mujtabaa07/coffeeShop.git
+```
+```bash
+# Navigate into the project directory
+cd coffeeShop
+```
+```bash
+# Install the required npm packages
+npm install (or) npm i
+```
+```bash
+
 # Start the React development server
 npm start
 ```
 Once the server is running, you can view the app at (http://localhost:3000).
+
 ## Usage
 **To use the app:**
 - **View Coffee Menu:** Browse through the available coffee items on the homepage.
 - **Learn About Coffee:** Check out the sourcing section to learn more about our sustainably sourced beans.
 - **Place an Order:** In future releases, you'll be able to add items to the cart and complete orders.
 
-## ScreenShots:
+## ScreenShots
 ## **Home Page:** 
 ![homepage](https://github.com/user-attachments/assets/2dc9b51d-ce06-4eb6-89fb-774867ede12c)
 ## **Coffee Menu:**
@@ -66,22 +81,23 @@ Once the server is running, you can view the app at (http://localhost:3000).
 ![coffeelogin](https://github.com/user-attachments/assets/c6c7c645-475d-4658-a47c-f0ada0b177d1)
 ## **Testimonials**
 ![testimonials](https://github.com/user-attachments/assets/38d811e3-4acc-4901-9a3d-8e4185c96a2c)
+
 ## Contributing
 We welcome contributions! Follow the steps below to contribute to this project:
 ```bash
 # Click the "Fork" button at the top-right of the repository page to create a copy in your GitHub account.
 ```
 ```bash
 # Clone the forked repository to your local machine
-git clone https://github.com/your-username/ms-cafe.git
+git clone https://github.com/Mujtabaa07/coffeeShop.git
 ```
 ```bash
 # Navigate into the project directory
-cd ms-cafe
+cd coffeeShop
 ```
 ```bash
-#install dependencies
-npm install
+# install dependencies
+npm install (or) npm i
 ```
 ```bash
 # Create a new branch for your feature or fix

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,12 +12,16 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
+    "@dotlottie/react-player": "^1.6.19",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@eslint/config-array": "^0.19.1",
     "@eslint/object-schema": "^2.1.5",
     "@headlessui/react": "^2.1.8",
     "@heroicons/react": "^2.1.5",
     "@jridgewell/sourcemap-codec": "^1.5.0",
     "@lottiefiles/dotlottie-react": "^0.12.0",
+    "@mui/material": "^6.3.1",
     "@reduxjs/toolkit": "^2.2.7",
     "@rollup/plugin-terser": "^0.4.4",
     "@tailwindcss/typography": "^0.5.15",
@@ -36,6 +40,7 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
     "react-scripts": "^5.0.1",
+    "react-toastify": "^11.0.2",
     "rimraf": "^6.0.1",
     "scrolltrigger": "^1.0.1",
     "styled-components": "^6.1.13",
@@ -67,7 +72,10 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
     "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "source-map-loader": "^5.0.0",
     "tailwindcss": "^3.4.13"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -33,6 +33,60 @@
   </head>
   </head>
   <body>
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>
+<style>
+  #preloader {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #988c7a;
+    transition: opacity 0.2s ease; /* change 0.3s to increase or decrease the transition time */
+    opacity: 1;
+    z-index: 9999;
+  }
+  #preloader-lottie {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
+
+<div id="preloader">
+  <div id="preloader-lottie"></div>
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const preloader = document.getElementById("preloader");
+    preloader.style.transition = "opacity 0.3s ease"; //change 0.3s to increase or decrease transition time
+    setTimeout(() => {
+      preloader.style.opacity = "0";
+      setTimeout(() => {
+        preloader.style.display = "none";
+      }, 2500); //change 2500 to increase or decrease the total time the preloader plays
+    }, 2500); //change 2500 to increase or decrease the total time the preloader plays
+  });
+
+  lottie.loadAnimation({
+    container: document.getElementById("preloader-lottie"),
+    renderer: "svg",
+    loop: true,
+    autoplay: true,
+    path: "https://lottie.host/e96ec485-3ef5-4d41-ba4c-deefafe65a54/SCXGNd6miI.json", //this is the URL of the lottie file you want to use
+    rendererSettings: {
+      progressiveLoad: false
+    },
+    events: {
+      complete: () => console.log('Preloader works!'),
+      error: (e) => console.error(e)
+    }
+  });
+</script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
@@ -50,7 +104,7 @@
     <button id="scrollToTop" title="Go to top">
       <i class="fa-solid fa-arrow-up fa-lg"></i>
     </button>
-
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,6 @@
-
 import React from 'react';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ScrollToTop from './componets/ScrollToTop';
 import { Provider } from 'react-redux';
@@ -13,11 +14,11 @@ import Register from './Pages/Register';
 import Shop from './Pages/Shop';
 import Cart from './Pages/cart';
 import About from './Pages/About';
+import Faq from './Pages/Faq';
 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';
@@ -46,6 +47,8 @@ function App() {
         <ScrollToTop />
         <AppContainer>
           <Navbar />
+
+          <ToastContainer position="top-right" autoClose={3000} />
           <ContentContainer>
             <Routes>
               <Route path="/" element={<Home />} />
@@ -60,7 +63,7 @@ function App() {
               <Route path="/contact" element={<Contact />} />
               <Route path="/profile" element={<Profile />} />
               <Route path="/checkout" element={<Checkout />} />
-
+              <Route path="/faq" element={<Faq />} />
               <Route path="/shop/cake" element={<Cake />} />
               <Route path="/shop/coffee" element={<Coffee />} />
               <Route path="/shop/soup" element={<Soup />} />
@@ -79,3 +82,4 @@ function App() {
 }
 
 export default App;
+
diff --git a/src/Pages/About.js b/src/Pages/About.js
@@ -5,27 +5,41 @@ import Button from '../componets/Button';
 
 const AboutContainer = styled.div`
   padding: 6rem 2rem 4rem 2rem;
-  max-width: 1200px;
+  max-width: 1900px;
   margin: 0 auto;
   background-color: #fffbeb;
 
+  background-image: url('https://images.template.net/103700/soft-brown-background-1btgz.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 12px; /* Optional: To add rounded corners to the container */
+  opacity:1;
+  z-index:-1; 
+
+
   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: 3rem;
   margin-bottom: 3rem;
   text-align: center;
+
+  color: color: #5e2e0d;
+  font-weight: bolder;
+
   color: #7c2214;
   letter-spacing: 4px;
   font-weight: bold;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+
 `;
 
 const Content = styled(motion.div)`
@@ -44,8 +58,8 @@ const Content = styled(motion.div)`
 const TextContent = styled(motion.div)`
   flex: 1;
   p {
-    color: #92400e;
-    font-size: 1.1rem;
+    color:color: #5e2e0d;
+    font-size: 1.2rem;
     line-height: 1.8;
     margin-bottom: 1.5rem;
     font-weight:bold;
@@ -58,13 +72,44 @@ const ImageContent = styled(motion.div)`
   justify-content: center;
   align-items: center;
   padding: 1rem;
+  position: relative; /* To contain the overlay */
 `;
 
-const Image = styled(motion.img)`
-  max-width: 100%;
-  height: auto;
+const HoverImage = styled(motion.div)`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 100%; /* Prevent image from overflowing */
   border-radius: 12px;
+  overflow: hidden;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+
+  cursor: pointer;
+  /* Image scaling and hover effect */
+  &:hover img {
+    transform: scale(1.1); /* Scale image on hover */
+  }
+  /* Dark overlay that appears on hover */
+  &:hover .overlay {
+    opacity: 1;
+  }
+  /* Image styling */
+  img {
+    width: 100%;
+    height: auto;
+    transition: transform 0.5s ease; /* Smooth image scaling */
+  }
+  /* Overlay effect */
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
   filter: grayscale(100%) ;
   transition: all 0.3s ease;
   border: 4px solid black;
@@ -73,6 +118,7 @@ const Image = styled(motion.img)`
     box-shadow: 0 0 20px rgba(255, 10, 0, 0.8);
     border-width: 6px;
     transform: perspective(1000px) rotateX(10deg) rotateY(10deg) scale(1.05);
+
   }
 `;
 
@@ -105,14 +151,17 @@ function About() {
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.4 }}
         >
-          <Image 
-            src="https://img.freepik.com/free-photo/digital-lavender-style-interior-design_23-2151561226.jpg?t=st=1727763316~exp=1727766916~hmac=621a2fad85c2229414cc73a6d1c40e4525802c326c6494db624ca97d2fda6bc2&w=1380" 
-            alt="Zumar Cafe Interior" 
-          />
+          <HoverImage>
+            <img 
+              src="https://i.ytimg.com/vi/DyJTVkRP1vY/maxresdefault.jpg" 
+              alt="Zumar Cafe Interior" 
+            />
+            <div className="overlay"></div>
+          </HoverImage>
         </ImageContent>
       </Content>
     </AboutContainer>
   );
 }
 
-export default About;
+export default About;
diff --git a/src/Pages/ExpertBaristas.js b/src/Pages/ExpertBaristas.js
@@ -282,7 +282,9 @@ function ExpertBaristas() {
         >
           Expert baristas excel in making coffee due to their comprehensive knowledge of coffee, practical brewing skills, and passion for the craft...
         </FeatureDescription>
-        <Button onClick={toggleChat}>Chat with a Coffee Expert</Button>
+
+   <Button onClick={toggleChat}>Chat with a Coffee Expert</Button>
+
       </ExpertContainer>
 
       {isChatOpen && (