Merge pull request #87 from Dipanita45/prehjbhh

No Search or Quick Access Option

Author: souma9830

client/src/components/Footer.jsx

@@ -1,3 +1,5 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import {
   FaGithub,
@@ -9,6 +11,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 ${
@@ -89,6 +103,7 @@ const Footer = () => {
           </ul>
         </div>
 
+        {/* Newsletter + Search */}
         {/* Newsletter */}
         <div className="lg:col-span-2">
           <h3 className="text-white font-semibold mb-4 tracking-wide">
@@ -99,6 +114,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/Home.jsx

@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import { useMemo } from 'react';
 import { useLocation } from '../context/LocationContext';
 import { getDistanceKm, formatDistance } from '../utils/distance';
@@ -245,6 +246,51 @@ const Home = () => {
         </div>
       </section>
 
+            {/* 🔍 Search Bar (Quick Access) */}
+<div className="mt-6 max-w-2xl mx-auto">
+
+  <div className="flex items-center bg-white shadow-md rounded-xl overflow-hidden border border-gray-200 focus-within:ring-2 focus-within:ring-blue-500 transition">
+
+    <input
+      type="text"
+      placeholder="Search services like Electrician, Plumber..."
+      className="flex-1 px-5 py-3 outline-none text-gray-700"
+    />
+
+    <Link
+      to="/services"
+      className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 font-medium transition"
+    >
+      Search
+    </Link>
+
+  </div>
+
+  {/* ⚡ Quick Access Buttons */}
+  <div className="mt-4 flex flex-wrap justify-center gap-3">
+    {["Electrician", "Plumber", "Cleaner", "AC Technician"].map((item) => (
+      <Link
+        key={item}
+        to={`/services?category=${item}`}
+        className="px-4 py-2 bg-gray-100 hover:bg-blue-100 text-sm rounded-full transition"
+      >
+        {item}
+      </Link>
+    ))}
+  </div>
+
+</div>
+
+            <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
+              <Link
+                to="/services"
+                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 shadow-md hover:shadow-lg transition"
+              >
+                Browse Services
+              </Link>
+              <Link
+                to="/worker-register"
+                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-lg text-blue-600 bg-white border border-gray-200 hover:bg-gray-50 shadow-sm hover:shadow-md transition"
       {/* Popular categories */}
       <section className="py-20 sm:py-24 bg-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -278,6 +324,28 @@ const Home = () => {
         </div>
       </section>
 
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            How It Works
+          </h2>
+          <p className="text-gray-500 mb-16">
+            Get your job done in 3 simple steps
+          </p>
+
+          <div className="max-w-6xl mx-auto mt-10 grid md:grid-cols-3 gap-8">
+    {[
+      { step: "1", title: "Search", desc: "Find skilled workers near you" },
+      { step: "2", title: "Book", desc: "Choose time and confirm instantly" },
+      { step: "3", title: "Relax", desc: "Get your job done stress-free" },
+    ].map((s) => (
+      <div key={s.step} className="p-6 border rounded-xl hover:shadow-lg transition">
+        <div className="text-blue-600 font-bold text-xl">{s.step}</div>
+        <h3 className="font-semibold mt-2">{s.title}</h3>
+        <p className="text-gray-500 mt-1">{s.desc}</p>
+      </div>
+    ))}
+    </div>
+      {/* ── Near You Section ── */}
+      {/* Near You Section */}
       {/* Nearby (location-driven) */}
       {(geoLoading || coords || geoError) && (
         <section className="py-16 sm:py-20 bg-white">