227 lines
9.7 KiB
TypeScript
227 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
|
|
const propertyTypes = [
|
|
{ value: '', label: 'Types' },
|
|
{ value: 'residential', label: 'Residential' },
|
|
{ value: 'commercial', label: 'Commercial' },
|
|
{ value: 'luxury', label: 'Luxury Homes' },
|
|
{ value: 'rentals', label: 'Rentals' },
|
|
];
|
|
|
|
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({
|
|
type: '',
|
|
name: '',
|
|
location: '',
|
|
category: '',
|
|
});
|
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
|
|
|
const handleSearch = () => {
|
|
const params = new URLSearchParams();
|
|
if (searchParams.type) params.set('type', searchParams.type);
|
|
if (searchParams.name) params.set('name', searchParams.name);
|
|
if (searchParams.location) params.set('location', searchParams.location);
|
|
if (searchParams.category) params.set('category', searchParams.category);
|
|
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 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-bottom"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-24">
|
|
{/* Headline */}
|
|
<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">
|
|
“Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.”
|
|
</h1>
|
|
<p className="font-serif text-sm md:text-base text-[#00293d]/70 tracking-wider">
|
|
“Discover verified, top-rated real estate professionals.”
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search Form */}
|
|
<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 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"
|
|
>
|
|
<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) => (
|
|
<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>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Name Input */}
|
|
<div className="md:col-span-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Name or Keyword"
|
|
value={searchParams.name}
|
|
onChange={(e) => setSearchParams({ ...searchParams, name: e.target.value })}
|
|
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 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-[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 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"
|
|
>
|
|
<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) => (
|
|
<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>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search Button */}
|
|
<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-[#00293d] font-fractul font-bold text-base transition-colors shadow-md hover:shadow-lg"
|
|
>
|
|
See All Agents
|
|
</button>
|
|
</div>
|
|
|
|
{/* Helper Text */}
|
|
<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>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|