Merge branch 'main' into Contributor

Mujtabaa07 · Jan 9, 2025 · 11947f8 · 11947f8
2 parents 3d85486 + 2687ad6
commit 11947f8
Show file tree

Hide file tree

Showing 10 changed files with 15,034 additions and 2,199 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/coffeeShop.git
 
 # Navigate into the project directory
 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
@@ -66,7 +66,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/src/Pages/ExpertBaristas.js b/src/Pages/ExpertBaristas.js
@@ -132,7 +132,6 @@ function ExpertBaristas() {
         >
           Expert baristas excel in making coffee due to their comprehensive knowledge of coffee, practical brewing skills, and passion for the craft. They ensure optimal flavor extraction by meticulously controlling variables like grind size, water temperature, and brewing time. Their expertise allows them to create a perfect cup of coffee tailored to individual preferences, showcasing their attention to detail and dedication. The skillset is honed through extensive training and practice. Expert baristas demonstrate exceptional precision in every step of the coffee-making process. A true expert barista has a passion for coffee that drives them to constantly improve and innovate. They experiment with new coffee blends, brewing methods, and flavor combinations to create unique and memorable coffee experiences.
         </FeatureDescription>
-        <Button>Read More</Button>
       </ExpertContainer>
     </>
   );

diff --git a/src/Pages/ForgetPassword.js b/src/Pages/ForgetPassword.js
@@ -2,12 +2,21 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { motion } from "framer-motion";
 
+const Background = styled.section`
+  background-image: url("https://img.freepik.com/free-photo/hot-latte-art-coffee-cup-wood-table-coffee-shop_1150-8937.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+`;
+
 const ForgetPasswordContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #f5f5f5;
+  padding: 0 1rem;
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.6);
 `;
 
 const ForgetPasswordForm = styled(motion.form)`
@@ -68,31 +77,33 @@ function ForgetPassword() {
   };
 
   return (
-    <ForgetPasswordContainer>
-      <ForgetPasswordForm
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        onSubmit={handleSubmit}
-      >
-        <h2>Forgot Password</h2>
-        <Input
-          type="email"
-          placeholder="Enter your registered email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <Button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-          type="submit"
+    <Background>
+      <ForgetPasswordContainer>
+        <ForgetPasswordForm
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          onSubmit={handleSubmit}
         >
-          Send Credentials
-        </Button>
-        {message && <Message success={isValid}>{message}</Message>}
-      </ForgetPasswordForm>
-    </ForgetPasswordContainer>
+          <h2>Forgot Password</h2>
+          <Input
+            type="email"
+            placeholder="Enter your registered email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <Button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            type="submit"
+          >
+            Send Credentials
+          </Button>
+          {message && <Message success={isValid}>{message}</Message>}
+        </ForgetPasswordForm>
+      </ForgetPasswordContainer>
+    </Background>
   );
 }
 

diff --git a/src/Pages/Home.js b/src/Pages/Home.js
@@ -125,14 +125,14 @@ const FeatureCard = styled(motion.div)`
   padding: 2.5rem;
   border-radius: 15px;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(210, 105, 30, 0.2);
   backdrop-filter: blur(10px);
-  transition: all 0.4s ease;
+  transition: all 0.3s ease-in-out;
 
   &:hover {
     transform: translateY(-10px);
-    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.2);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   }
 `;
 
@@ -143,20 +143,35 @@ const FeatureIcon = styled.img`
   border-radius: 10px;
   margin-bottom: 1.5rem;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
 `;
 
 const FeatureTitle = styled.h3`
   font-size: 1.8rem;
   margin-bottom: 1rem;
   color: #8b4513;
+  transition: color 0.3s ease-in-out;
   font-family: "Playfair Display", serif;
+
+  &:hover {
+    color: #e07a5f;
+  }
 `;
 
 const FeatureDescription = styled.p`
   font-size: 1.1rem;
   color: #6b4423;
   line-height: 1.6;
+  transition: color 0.3s ease-in-out;
   font-family: "Poppins", sans-serif;
+
+  &:hover {
+    color: #3d405b;
+  }
 `;
 
 const SpecialtySection = styled.section`