feat: Redesign the home page hero section with a new background image and enhanced search UI, and standardize user dashboard routing across the application.

src/app/(agent)/layout.tsx

@@ -25,7 +25,7 @@ export default function AgentLayout({
     // Redirect non-agents to user dashboard
     const userRole = (session.user as any)?.role;
     if (userRole !== 'AGENT') {
-      router.replace('/user/userprofile');
+      router.replace('/user/userdashboard');
     }
   }, [session, status, router]);
 

src/app/(user)/layout.tsx

@@ -38,11 +38,13 @@ export default function UserLayout({
   }
 
   return (
-    <div className="min-h-screen bg-white flex flex-col">
+    <div className="min-h-screen bg-[#f0f4f3] flex flex-col">
       {/* Header */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
+      <div className="sticky top-0 z-50 px-4 py-3 bg-[#f0f4f3]">
+        <div className="max-w-7xl mx-auto">
           <CommonHeader />
         </div>
+      </div>
 
       {/* Main Content */}
       <main className="flex-1">

src/app/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
     if (userRole === 'AGENT') {
       router.replace('/agent/dashboard');
     } else {
-      router.replace('/user/userprofile');
+      router.replace('/user/userdashboard');
     }
   }, [session, status, router]);
 

src/components/home/HeroSection.tsx

@@ -2,9 +2,10 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Button } from '../ui/Button';
+import Image from 'next/image';
 
 const propertyTypes = [
+  { value: '', label: 'Types' },
   { value: 'residential', label: 'Residential' },
   { value: 'commercial', label: 'Commercial' },
   { value: 'luxury', label: 'Luxury Homes' },
@@ -12,12 +13,20 @@ const propertyTypes = [
 ];
 
 const categories = [
+  { value: '', label: 'Categories' },
+  { value: 'luxury-broker', label: 'Luxury Broker' },
   { value: 'buying', label: 'Buying Agent' },
   { value: 'selling', label: 'Selling Agent' },
   { value: 'investment', label: 'Investment' },
   { value: 'property-management', label: 'Property Management' },
 ];
 
+const quickFilters = [
+  { label: 'Professionals', value: 'professionals' },
+  { label: 'Lenders', value: 'lenders' },
+  { label: 'Agent', value: 'agent' },
+];
+
 export function HeroSection() {
   const router = useRouter();
   const [searchParams, setSearchParams] = useState({
@@ -26,6 +35,7 @@ export function HeroSection() {
     location: '',
     category: '',
   });
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
 
   const handleSearch = () => {
     const params = new URLSearchParams();
@@ -36,114 +46,177 @@ export function HeroSection() {
     router.push(`/agents?${params.toString()}`);
   };
 
+  const handleSeeAllAgents = () => {
+    router.push('/agents');
+  };
+
+  const toggleDropdown = (dropdown: string) => {
+    setOpenDropdown(openDropdown === dropdown ? null : dropdown);
+  };
+
+  const selectOption = (field: 'type' | 'category', value: string, label: string) => {
+    setSearchParams({ ...searchParams, [field]: value });
+    setOpenDropdown(null);
+  };
+
   return (
-    <section className="relative bg-gradient-to-b from-[#e8f0ee] to-[#f5f9f8] overflow-hidden">
-      {/* Background Pattern */}
-      <div className="absolute inset-0 opacity-10">
-        <svg className="w-full h-full" viewBox="0 0 1440 600" fill="none">
-          {/* City Skyline Pattern */}
-          <rect x="100" y="400" width="60" height="200" fill="#00293d"/>
-          <rect x="180" y="350" width="80" height="250" fill="#00293d"/>
-          <rect x="280" y="380" width="50" height="220" fill="#00293d"/>
-          <rect x="350" y="300" width="100" height="300" fill="#00293d"/>
-          <rect x="470" y="420" width="40" height="180" fill="#00293d"/>
-          <rect x="900" y="380" width="70" height="220" fill="#00293d"/>
-          <rect x="990" y="320" width="90" height="280" fill="#00293d"/>
-          <rect x="1100" y="400" width="60" height="200" fill="#00293d"/>
-          <rect x="1180" y="350" width="80" height="250" fill="#00293d"/>
-          <rect x="1280" y="420" width="50" height="180" fill="#00293d"/>
-        </svg>
+    <section className="relative min-h-[600px] overflow-hidden">
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        <Image
+          src="/assets/images/user_home_top.png"
+          alt=""
+          fill
+          className="object-cover object-center"
+          priority
+        />
       </div>
 
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-24">
         {/* Headline */}
-        <div className="text-center mb-10">
-          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#00293d] mb-4 leading-tight">
+        <div className="text-center mb-8">
+          <h1 className="font-serif text-xl md:text-2xl lg:text-[26px] italic text-[#00293d] mb-3 leading-relaxed max-w-4xl mx-auto">
             &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
           </h1>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            Discover verified, top-rated real estate professionals
+          <p className="font-serif text-sm md:text-base text-[#00293d]/70 tracking-wider">
+            &ldquo;Discover verified, top-rated real estate professionals.&rdquo;
           </p>
         </div>
 
         {/* Search Form */}
-        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 max-w-5xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="max-w-5xl mx-auto">
+          <div className="bg-white/90 backdrop-blur-sm rounded-[15px] shadow-lg p-4 md:p-5">
+            <div className="grid grid-cols-1 md:grid-cols-12 gap-3">
               {/* Type Select */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Types</label>
-              <select
-                value={searchParams.type}
-                onChange={(e) => setSearchParams({ ...searchParams, type: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all bg-white"
+              <div className="md:col-span-2 relative">
+                <button
+                  onClick={() => toggleDropdown('type')}
+                  className="w-full px-4 py-3 rounded-[10px] border-2 border-[#e58625] bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-[#e58625]/30"
                 >
-                <option value="">Professionals</option>
+                  <span className="font-fractul text-sm text-[#00293d]">
+                    {searchParams.type ? propertyTypes.find(t => t.value === searchParams.type)?.label : 'Types'}
+                  </span>
+                  <Image
+                    src="/assets/icons/chevron-down-icon.svg"
+                    alt=""
+                    width={12}
+                    height={12}
+                    className={`transition-transform ${openDropdown === 'type' ? 'rotate-180' : ''}`}
+                  />
+                </button>
+                {openDropdown === 'type' && (
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-white rounded-[10px] border border-gray-200 shadow-lg z-20 max-h-60 overflow-y-auto">
                     {propertyTypes.map((type) => (
-                  <option key={type.value} value={type.value}>{type.label}</option>
+                      <button
+                        key={type.value}
+                        onClick={() => selectOption('type', type.value, type.label)}
+                        className="w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#e58625]/10 first:rounded-t-[10px] last:rounded-b-[10px]"
+                      >
+                        {type.label}
+                      </button>
                     ))}
-              </select>
+                  </div>
+                )}
               </div>
 
               {/* Name Input */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Name or Nickname</label>
+              <div className="md:col-span-3">
                 <input
                   type="text"
-                placeholder="Name or Nickname"
+                  placeholder="Name or Keyword"
                   value={searchParams.name}
                   onChange={(e) => setSearchParams({ ...searchParams, name: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all"
+                  className="w-full px-4 py-3 rounded-[10px] border-2 border-[#e58625] bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d]/50 focus:outline-none focus:ring-2 focus:ring-[#e58625]/30"
                 />
               </div>
 
               {/* Location Input */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Location</label>
+              <div className="md:col-span-2">
                 <input
                   type="text"
                   placeholder="Location"
                   value={searchParams.location}
                   onChange={(e) => setSearchParams({ ...searchParams, location: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all"
+                  className="w-full px-4 py-3 rounded-[10px] border-2 border-[#e58625] bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d]/50 focus:outline-none focus:ring-2 focus:ring-[#e58625]/30"
                 />
               </div>
 
               {/* Category Select */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Categories</label>
-              <select
-                value={searchParams.category}
-                onChange={(e) => setSearchParams({ ...searchParams, category: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all bg-white"
+              <div className="md:col-span-3 relative">
+                <button
+                  onClick={() => toggleDropdown('category')}
+                  className="w-full px-4 py-3 rounded-[10px] border-2 border-[#e58625] bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-[#e58625]/30"
                 >
-                <option value="">Select Category</option>
+                  <span className="font-fractul text-sm text-[#00293d]">
+                    {searchParams.category ? categories.find(c => c.value === searchParams.category)?.label : 'Categories'}
+                  </span>
+                  <Image
+                    src="/assets/icons/chevron-down-icon.svg"
+                    alt=""
+                    width={12}
+                    height={12}
+                    className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
+                  />
+                </button>
+                {openDropdown === 'category' && (
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-white rounded-[10px] border border-gray-200 shadow-lg z-20 max-h-60 overflow-y-auto">
                     {categories.map((cat) => (
-                  <option key={cat.value} value={cat.value}>{cat.label}</option>
+                      <button
+                        key={cat.value}
+                        onClick={() => selectOption('category', cat.value, cat.label)}
+                        className="w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#e58625]/10 first:rounded-t-[10px] last:rounded-b-[10px]"
+                      >
+                        {cat.label}
+                      </button>
                     ))}
-              </select>
                   </div>
-          </div>
-
-          {/* Quick Links */}
-          <div className="flex flex-wrap gap-2 mb-6">
-            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
-              Professionals
-            </button>
-            <span className="text-gray-300">|</span>
-            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
-              Lenders
-            </button>
+                )}
               </div>
 
               {/* Search Button */}
-          <div className="flex justify-center">
-            <Button variant="primary" size="lg" onClick={handleSearch}>
+              <div className="md:col-span-2">
+                <button
+                  onClick={handleSearch}
+                  className="w-full h-full px-6 py-3 rounded-[10px] bg-[#e58625] hover:bg-[#d47720] text-white font-fractul font-bold text-sm transition-colors flex items-center justify-center gap-2"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2"/>
+                    <path d="M16 16L20 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Quick Filter Links */}
+            <div className="flex flex-wrap items-center gap-2 mt-4 pt-4 border-t border-gray-100">
+              {quickFilters.map((filter, index) => (
+                <span key={filter.value} className="flex items-center">
+                  <button
+                    onClick={() => setSearchParams({ ...searchParams, type: filter.value })}
+                    className="font-serif text-sm text-[#00293d] hover:text-[#e58625] transition-colors"
+                  >
+                    {filter.label}
+                  </button>
+                  {index < quickFilters.length - 1 && (
+                    <span className="mx-2 text-gray-300">|</span>
+                  )}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* See All Agents Button */}
+          <div className="flex justify-center mt-6">
+            <button
+              onClick={handleSeeAllAgents}
+              className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] text-white font-fractul font-bold text-base transition-colors shadow-md hover:shadow-lg"
+            >
               See All Agents
-            </Button>
+            </button>
           </div>
 
           {/* Helper Text */}
-          <p className="text-center text-gray-500 text-sm mt-4">
+          <p className="text-center font-serif text-sm text-[#00293d]/60 mt-4 max-w-2xl mx-auto">
             Connect with trusted local agents to explore homes, compare options, and make smarter decisions.
           </p>
         </div>

src/components/layout/CommonHeader.tsx

@@ -20,7 +20,7 @@ export function CommonHeader() {
   const userRole = (session?.user as any)?.role;
 
   // Determine dashboard link based on user role
-  const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/userprofile';
+  const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/userdashboard';
 
   return (
     <header className="bg-[#648188] rounded-[20px] px-8">

src/components/layout/Header.tsx

@@ -47,7 +47,7 @@ export function Header() {
                   </svg>
                 </button>
                 {/* Profile */}
-                <Link href="/user/userprofile" className="p-2 hover:bg-white/10 rounded-full transition-colors">
+                <Link href="/user/userdashboard" className="p-2 hover:bg-white/10 rounded-full transition-colors">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                   </svg>

src/middleware.ts

@@ -2,7 +2,7 @@ import { auth } from "@/auth";
 import { NextResponse } from "next/server";
 
 // Public routes that don't require authentication
-const publicRoutes = ["/login", "/signup", "/forgot-password", "/reset-password", "/verify-email"];
+const publicRoutes = ["/login", "/signup", "/forgot-password", "/reset-password", "/verify-email", "/contact"];
 
 export default auth((req) => {
   const { nextUrl } = req;
@@ -43,7 +43,7 @@ export default auth((req) => {
   if (isLoggedIn) {
     // Prevent regular users from accessing agent routes
     if (isAgentRoute && userRole !== "AGENT") {
-      return NextResponse.redirect(new URL("/user/userprofile", nextUrl.origin));
+      return NextResponse.redirect(new URL("/user/userdashboard", nextUrl.origin));
     }
 
     // Prevent agents from accessing user routes