Feedback page

client/src/App.jsx

@@ -10,6 +10,7 @@ import Services from './pages/Services';
 import WorkerProfile from './pages/WorkerProfile';
 import Profile from './pages/Profile';
 import Bookings from './pages/Bookings';
+import Feedback from "./pages/Feedback";
 import WorkerRegister from './pages/WorkerRegister';
 import HelpCenter from './pages/HelpCenter';
 import TermsOfService from './pages/TermsOfService';
@@ -50,6 +51,25 @@ function AppContent() {
 function App() {
   return (
     <Router>
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <LocationBanner />
+        <main className="flex-grow bg-gray-50">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/services" element={<Services />} />
+            <Route path="/worker/:id" element={<WorkerProfile />} />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="/bookings" element={<Bookings />} />
+            <Route path="/feedback" element={<Feedback />} />
+            {/* TODO: Add more routes here */}
+          </Routes>
+        </main>
+        <Footer />
+      </div>
       <AppContent />
     </Router>
   );

client/src/components/Footer.jsx

@@ -1,4 +1,5 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import {
   FaGithub,
   FaEnvelope,
@@ -9,6 +10,18 @@ import {
 
 const Footer = () => {
   const location = useLocation();
+  const navigate = useNavigate();
+
+  // ✅ Search state
+  const [query, setQuery] = useState("");
+
+  // ✅ Handle search
+  const handleSearch = () => {
+    if (query.trim() !== "") {
+      navigate(`/services?search=${query}`);
+      setQuery("");
+    }
+  };
 
   const linkClass = (path) =>
     `transition duration-200 ${
@@ -83,7 +96,7 @@ const Footer = () => {
           </ul>
         </div>
 
-        {/* Newsletter */}
+        {/* Newsletter + Search */}
         <div className="lg:col-span-2">
           <h3 className="text-white font-semibold mb-4 tracking-wide">
             Stay Updated
@@ -93,6 +106,27 @@ const Footer = () => {
             Get updates on new services, offers, and features directly to your inbox.
           </p>
 
+          {/* 🔍 Footer Search */}
+          <div className="mb-5">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder="Search services..."
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                className="w-full px-4 py-2 rounded-lg bg-gray-900 border border-gray-700 text-sm focus:outline-none focus:border-blue-400"
+              />
+              <button
+                onClick={handleSearch}
+                className="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm transition"
+              >
+                🔍
+              </button>
+            </div>
+          </div>
+
+          {/* Newsletter Form */}
           <form className="flex flex-col sm:flex-row gap-3">
             <input
               type="email"

client/src/pages/Feedback.jsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+
+const Feedback = () => {
+  const [form, setForm] = useState({
+    name: "",
+    rating: 5,
+    message: "",
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // TODO: Send to backend / Firebase later
+    console.log("Feedback submitted:", form);
+
+    setSubmitted(true);
+    setForm({ name: "", rating: 5, message: "" });
+
+    setTimeout(() => setSubmitted(false), 3000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+      <div className="w-full max-w-lg bg-white shadow-lg rounded-2xl p-8">
+
+        <h2 className="text-2xl font-bold text-center mb-6">
+          Give Your Feedback
+        </h2>
+
+        {submitted && (
+          <div className="mb-4 p-3 bg-green-100 text-green-700 rounded-lg text-center">
+            Thank you for your feedback!
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+
+          <input
+            type="text"
+            name="name"
+            placeholder="Your Name"
+            value={form.name}
+            onChange={handleChange}
+            className="w-full border p-3 rounded-lg"
+            required
+          />
+
+          <select
+            name="rating"
+            value={form.rating}
+            onChange={handleChange}
+            className="w-full border p-3 rounded-lg"
+          >
+            <option value="5">⭐⭐⭐⭐⭐ (5)</option>
+            <option value="4">⭐⭐⭐⭐ (4)</option>
+            <option value="3">⭐⭐⭐ (3)</option>
+            <option value="2">⭐⭐ (2)</option>
+            <option value="1">⭐ (1)</option>
+          </select>
+
+          <textarea
+            name="message"
+            placeholder="Your feedback..."
+            value={form.message}
+            onChange={handleChange}
+            className="w-full border p-3 rounded-lg h-32"
+            required
+          />
+
+          <button
+            type="submit"
+            className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition"
+          >
+            Submit Feedback
+          </button>
+
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;