Lack of Context for Categories

client/src/components/Footer.jsx

@@ -67,6 +67,12 @@ const Footer = () => {
             <li><Link to="/services" className={linkClass("/services")}>Services</Link></li>
             <li><Link to="/bookings" className={linkClass("/bookings")}>Bookings</Link></li>
             <li><Link to="/about" className={linkClass("/about")}>About</Link></li>
+          <h3 className="text-white font-semibold mb-4">Navigation</h3>
+          <ul className="space-y-2 text-sm">
+            <li><a href="/" className="hover:text-blue-400">Home</a></li>
+            <li><a href="/#how-it-works" className="hover:text-blue-400">How it works</a></li>
+            <li><a href="/services" className="hover:text-blue-400">Services</a></li>
+            <li><a href="/register" className="hover:text-blue-400">Join as a Pro</a></li>
             <li><Link to="/register" className={linkClass("/register")}>Join as a Pro</Link></li>
           </ul>
         </div>
@@ -106,6 +112,20 @@ const Footer = () => {
               Subscribe
             </button>
           </form>
+        {/* Legal */}
+        <div>
+          <h3 className="text-white font-semibold mb-4">Legal</h3>
+          <ul className="space-y-2 text-sm">
+            <li><Link to="/privacy" className={linkClass("/privacy")}>Privacy Policy</Link></li>
+            <li><Link to="/terms" className={linkClass("/terms")}>Terms of Service</Link></li>
+          </ul>
+          <div className="mt-5">
+            <h3 className="text-white font-medium mb-3">Contact</h3>
+            <div className="text-sm text-gray-400 space-y-2">
+              <div><span className="text-gray-300 font-semibold">Email:</span> [email protected]</div>
+              <div><span className="text-gray-300 font-semibold">Phone:</span> +1 (000) 000-0000</div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -146,6 +166,10 @@ const Footer = () => {
             <FaEnvelope />
             Contact
           </Link>
+        <div className="flex space-x-4 mt-3 md:mt-0">
+          <a href="#" className="hover:text-blue-400">Help</a>
+          <a href="#" className="hover:text-blue-400">Privacy</a>
+          <a href="#" className="hover:text-blue-400">Terms</a>
         </div>
       </div>
     </footer>

client/src/pages/Home.jsx

@@ -366,6 +366,152 @@ const Home = () => {
         </section>
       )}
 
+      {/* How It Works Section */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-extrabold text-gray-900">How It Works</h2>
+            <p className="mt-4 text-lg text-gray-500">Get your tasks done in three simple steps.</p>
+          </div>
+
+          <div className="relative grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
+            <div className="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-gray-200"></div>
+
+            {[
+              { step: "1", title: "Search", desc: "Find nearby professionals based on skills, ratings, and location.", color: "blue" },
+              { step: "2", title: "Book",   desc: "Choose a time slot and confirm your booking instantly.",           color: "green" },
+              { step: "3", title: "Relax",  desc: "Sit back while the expert completes your task efficiently.",       color: "yellow" },
+            ].map((item) => (
+              <div key={item.step} className="relative p-8 border border-gray-100 rounded-2xl bg-white shadow-sm hover:shadow-xl transition group">
+                <div className={`absolute -top-4 left-1/2 transform -translate-x-1/2 bg-${item.color}-500 text-white text-sm px-3 py-1 rounded-full shadow`}>
+                  {item.step}
+                </div>
+                <div className={`w-14 h-14 bg-${item.color}-100 text-${item.color}-600 rounded-full flex items-center justify-center mx-auto mb-5 text-lg font-bold group-hover:scale-110 transition`}>
+                  {item.step}
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
+                <p className="text-gray-500">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Popular Categories */}
+      {/* Popular Categories */}
+<div className="py-20 bg-gray-50">
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+    <h2 className="text-4xl font-extrabold text-gray-900 mb-4 text-center">
+      Popular Categories
+    </h2>
+
+    <p className="text-center text-gray-500 mb-12">
+      Explore services based on your needs — from home repairs to cleaning and maintenance.
+    </p>
+
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+
+      {[
+        {
+          name: "Electrician",
+          icon: "⚡",
+          desc: "Wiring, repairs & installations"
+        },
+        {
+          name: "Plumber",
+          icon: "🚰",
+          desc: "Pipes, leaks & fittings"
+        },
+        {
+          name: "Carpenter",
+          icon: "🪵",
+          desc: "Furniture & woodwork"
+        },
+        {
+          name: "Cleaner",
+          icon: "🧹",
+          desc: "Home & office cleaning"
+        },
+        {
+          name: "Painter",
+          icon: "🎨",
+          desc: "Wall painting & polishing"
+        },
+        {
+          name: "AC Repair",
+          icon: "❄️",
+          desc: "Cooling system service"
+        },
+        {
+          name: "Pest Control",
+          icon: "🐜",
+          desc: "Remove insects & rodents"
+        },
+        {
+          name: "Mechanic",
+          icon: "🔧",
+          desc: "Vehicle & machine repair"
+        }
+      ].map((category, idx) => (
+
+        <Link
+          key={idx}
+          to={`/services?category=${category.name}`}
+          className="group bg-white p-6 rounded-2xl shadow-sm border border-gray-200 text-center hover:border-blue-500 hover:shadow-xl transition-all duration-300"
+        >
+
+          <div className="text-4xl mb-4 group-hover:scale-110 transition">
+            {category.icon}
+          </div>
+
+          <h3 className="font-semibold text-lg text-gray-800 group-hover:text-blue-600 transition">
+            {category.name}
+          </h3>
+
+          <p className="text-sm text-gray-500 mt-2">
+            {category.desc}
+          </p>
+
+        </Link>
+      ))}
+
+    </div>
+
+  </div>
+</div>
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-extrabold text-gray-900 mb-10 text-center">Popular Categories</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {['Electrician', 'Plumber', 'Carpenter', 'Cleaning', 'Painting', 'AC Repair', 'Pest Control', 'Moving'].map((category, idx) => (
+              <Link
+                key={idx}
+                to="/services"
+                className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 text-center hover:border-blue-500 hover:text-blue-600 hover:shadow-md transition"
+              >
+                <div className="text-3xl mb-3">{categoryIconMap[category] || '🔧'}</div>
+                <span className="font-medium text-lg">{category}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Final CTA Section */}
+      <div className="py-20 bg-blue-600 text-center text-white">
+        <h2 className="text-3xl font-bold mb-4">Need Help Today?</h2>
+        <p className="mb-6 text-blue-100">
+          Book trusted professionals instantly and get your job done without hassle.
+        </p>
+        <Link
+          to="/services"
+          className="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition"
+        >
+          Get Started
+        </Link>
+      </div>
+
       {/* Final CTA */}
       <section className="py-16 sm:py-20 bg-[#0056D2] text-center text-white">
         <div className="max-w-3xl mx-auto px-4 sm:px-6">