feat: Add category selection dropdown and state management to the hero section search.

src/components/home/HeroSection.tsx

@@ -10,11 +10,21 @@ export function HeroSection() {
   const router = useRouter();
   const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
   const [searchParams, setSearchParams] = useState({
+    category: '',
     type: '',
     name: '',
     location: '',
   });
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+  // Category options (UI only - no functionality)
+  const categoryOptions = [
+    { id: 'residential', name: 'Residential' },
+    { id: 'commercial', name: 'Commercial' },
+    { id: 'industrial', name: 'Industrial' },
+    { id: 'land', name: 'Land' },
+    { id: 'rental', name: 'Rental' },
+  ];
   const [validationError, setValidationError] = useState<string | null>(null);
 
   // Fetch agent types on mount
@@ -59,6 +69,11 @@ export function HeroSection() {
     setOpenDropdown(openDropdown === dropdown ? null : dropdown);
   };
 
+  const selectCategory = (value: string) => {
+    setSearchParams({ ...searchParams, category: value });
+    setOpenDropdown(null);
+  };
+
   const selectType = (value: string) => {
     setSearchParams({ ...searchParams, type: value });
     setOpenDropdown(null);
@@ -103,7 +118,7 @@ export function HeroSection() {
           <div className="bg-[#e58625] rounded-[15px] shadow-lg p-3">
             <div className="flex flex-col md:flex-row gap-2">
               {/* Type Select */}
-              <div className="relative flex-shrink-0 md:w-[180px]">
+              <div className="relative flex-shrink-0 md:w-[160px]">
                 <button
                   onClick={() => toggleDropdown('type')}
                   className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
@@ -156,6 +171,38 @@ export function HeroSection() {
                 />
               </div>
 
+              {/* Category Select (UI only) */}
+              <div className="relative flex-shrink-0 md:w-[160px]">
+                <button
+                  onClick={() => toggleDropdown('category')}
+                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
+                >
+                  <span className="font-serif text-sm text-[#00293d]">
+                    {searchParams.category ? categoryOptions.find(c => c.id === searchParams.category)?.name : 'Category'}
+                  </span>
+                  <Image
+                    src="/assets/icons/chevron-down-icon.svg"
+                    alt=""
+                    width={10}
+                    height={10}
+                    className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
+                  />
+                </button>
+                {openDropdown === 'category' && (
+                  <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
+                    {categoryOptions.map((category, index, arr) => (
+                      <button
+                        key={category.id}
+                        onClick={() => selectCategory(category.id)}
+                        className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
+                      >
+                        {category.name}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
               {/* Search Button */}
               <div className="flex-shrink-0">
                 <button