added feedback page

src/App.js

@@ -28,7 +28,7 @@ import ForgetPassword from "./Pages/ForgetPassword";
 import ExpertBaristas from "./Pages/ExpertBaristas";
 import Reviews from "./componets/Reviews";
 import AnimatedCursor from "react-animated-cursor";
-
+import Feedback from './Pages/Feedback';
 const AppContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -76,6 +76,7 @@ function App() {
               <Route path="/shop/soup" element={<Soup />} />
               <Route path="/shop/milkshake" element={<Milkshakes />} />
               <Route path="/premiumbeans" element={<PremiumBeans />} />
+              <Route path="/feedback" element={<Feedback />} />
               <Route path="/expertbaristas" element={<ExpertBaristas />} />
             </Routes>
           </ContentContainer>

src/Pages/Feedback.css

@@ -0,0 +1,100 @@
+
+.feedback-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    background-color: #f0f0f0;
+    min-height: 100vh;
+    font-family: 'Arial', sans-serif;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .feedback-title {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    color: #7c2214;
+    text-align: center;
+    font-weight: 500;
+    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
+  }
+
+  .feedback-form {
+    width: 100%;
+    max-width: 600px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 2rem;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+  }
+
+  .form-field {
+    margin-bottom: 1.5rem;
+  }
+
+  .label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    color: #333;
+    font-size: 17px;
+  }
+
+  input, textarea, select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+  }
+  input:hover,textarea:hover,select:hover{
+    border-color: #7c2214;
+    transform: scale(1.04);
+    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+  }
+
+  input:focus, textarea:focus, select:focus {
+    border-color: #7c2214;
+    outline: none;
+  }
+
+  .textarea {
+    min-height: 100px;
+  }
+
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    background-color: #7c2214;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  .btn:hover {
+    background-color: rgb(150, 32, 19);
+    color: white;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+    transform: scale(1.05);
+  }
+
+  .btn:focus {
+    outline: none;
+  }
+
+  .heading1 {
+    font-weight: 500;
+    margin-left: 650px;
+    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+    color: #410e06;
+  }
+

src/Pages/Feedback.js

@@ -0,0 +1,72 @@
+// src/Pages/Feedback.js
+import React, { useState } from 'react';
+import './Feedback.css';
+
+function Feedback() {
+  const [rating, setRating] = useState(0);
+  const [comments, setComments] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [date, setDate] = useState('');
+  const [visitType, setVisitType] = useState('dine-in');
+  const [followUp, setFollowUp] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Process the feedback data
+    console.log({
+      rating,
+      comments,
+      name,
+      email,
+      date,
+      visitType,
+    });
+    // Clear form
+    setRating(0);
+    setComments('');
+    setName('');
+    setEmail('');
+    setDate('');
+    setVisitType('dine-in');
+  };
+
+  return (
+    <div className="feedback-container">
+      <h1 className="feedback-title">Feedback</h1>
+      <form className="feedback-form" onSubmit={handleSubmit}>
+        <div className="form-field">
+          <label className="label">Rating: </label>
+          <input type="number" value={rating} onChange={(e) => setRating(e.target.value)} max={5} min={1} />
+        </div>
+        <div className="form-field">
+          <label className="label">Comments: </label>
+          <textarea className="textarea" value={comments} onChange={(e) => setComments(e.target.value)} />
+        </div>
+        <div className="form-field">
+          <label className="label">Name: </label>
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </div>
+        <div className="form-field">
+          <label className="label">Email: </label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        </div>
+        <div className="form-field">
+          <label className="label">Date of Visit: </label>
+          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+        </div>
+        <div className="form-field">
+          <label className="label">Visit Type: </label>
+          <select value={visitType} onChange={(e) => setVisitType(e.target.value)}>
+            <option value="dine-in">Dine-In</option>
+            <option value="take-out">Take-Out</option>
+            <option value="delivery">Delivery</option>
+          </select>
+        </div>
+        <button className="btn" type="submit">Submit Feedback</button>
+      </form>
+    </div>
+  );
+}
+
+export default Feedback;

src/componets/Navbar.js

@@ -441,7 +441,7 @@ function Navbar() {
                   </NavLinks>
                 );
               }
-
+                
               if (items.title === "User") {
                 return (
                   <NavLinks key={items.id}>
@@ -461,6 +461,18 @@ function Navbar() {
                   </NavLinks>
                 );
               }
+
+              if(items.title === "Feedback"){
+                return(
+                  <NavLinks key={items.id}>
+                    <li className={location.pathname === items.path ? "active": ""}>
+                      <NavLink whileHover={{scale:1.05}}>
+                        <Link to="/feedback">{items.title}</Link>
+                      </NavLink>
+                    </li>
+                  </NavLinks>
+                );
+              }
 
               return (
                 <NavLinks key={items.id}>
@@ -582,6 +594,11 @@ function Navbar() {
                 Contact
               </Link>
             </MobileNavLink>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
+              <Link to="/feedback" onClick={toggleMenu}>
+                Feedback
+              </Link>
+            </MobileNavLink>
             {isLoggedIn ? (
               <>
                 <MobileNavLink whileHover={{ scale: 1.02 }}>

src/componets/Navitems.js

@@ -36,6 +36,12 @@ export const navItems = [
     path: "./user",
     cName: "nav-item",
   },
+  {
+    id: 7,
+    title: "Feedback",
+    path: "./feedback",
+    cName: "nav-item",
+  },
 
 ];