Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Redesign HeroSection search form UI, remove quick filters, and update headline styling.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-19 10:27:36 +05:30
parent a2860162b2
commit 79f5fadb05
1 changed files with 26 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/home/HeroSection.tsx
View File

@@ -21,11 +21,6 @@ const categories = [
{ value: 'property-management', label: 'Property Management' }, { value: 'property-management', label: 'Property Management' },
]; ];
const quickFilters = [
{ label: 'Professionals', value: 'professionals' },
{ label: 'Lenders', value: 'lenders' },
{ label: 'Agent', value: 'agent' },
];
export function HeroSection() { export function HeroSection() {
const router = useRouter(); const router = useRouter();
@@ -75,42 +70,39 @@ export function HeroSection() {
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-24"> <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-24">
{/* Headline */} {/* Headline */}
<div className="text-center mb-8"> <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"> <h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto">
&ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo; &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
</h1> </h1>
<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> </div>
{/* Search Form */} {/* Search Form */}
<div className="max-w-5xl mx-auto"> <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="bg-[#e58625] rounded-[15px] shadow-lg p-3">
<div className="grid grid-cols-1 md:grid-cols-12 gap-3"> <div className="flex flex-col md:flex-row gap-2">
{/* Type Select */} {/* Type Select */}
<div className="md:col-span-2 relative"> <div className="relative flex-shrink-0 md:w-[160px]">
<button <button
onClick={() => toggleDropdown('type')} 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" 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-fractul text-sm text-[#00293d]"> <span className="font-serif text-sm text-[#00293d]">
{searchParams.type ? propertyTypes.find(t => t.value === searchParams.type)?.label : 'Types'} {searchParams.type ? propertyTypes.find(t => t.value === searchParams.type)?.label : 'Types'}
</span> </span>
<Image <Image
src="/assets/icons/chevron-down-icon.svg" src="/assets/icons/chevron-down-icon.svg"
alt="" alt=""
width={12} width={10}
height={12} height={10}
className={`transition-transform ${openDropdown === 'type' ? 'rotate-180' : ''}`} className={`transition-transform ${openDropdown === 'type' ? 'rotate-180' : ''}`}
/> />
</button> </button>
{openDropdown === 'type' && ( {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"> <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">
{propertyTypes.map((type) => ( {propertyTypes.slice(1).map((type, index, arr) => (
<button <button
key={type.value} key={type.value}
onClick={() => selectOption('type', type.value, type.label)} 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]" 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' : ''}`}
> >
{type.label} {type.label}
</button> </button>
@@ -120,51 +112,51 @@ export function HeroSection() {
</div> </div>
{/* Name Input */} {/* Name Input */}
<div className="md:col-span-3"> <div className="flex-1 md:min-w-[180px]">
<input <input
type="text" type="text"
placeholder="Name or Keyword" placeholder="Name or Keyword"
value={searchParams.name} value={searchParams.name}
onChange={(e) => setSearchParams({ ...searchParams, name: e.target.value })} 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" className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
/> />
</div> </div>
{/* Location Input */} {/* Location Input */}
<div className="md:col-span-2"> <div className="flex-1 md:min-w-[140px]">
<input <input
type="text" type="text"
placeholder="Location" placeholder="Location"
value={searchParams.location} value={searchParams.location}
onChange={(e) => setSearchParams({ ...searchParams, location: e.target.value })} 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" className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
/> />
</div> </div>
{/* Category Select */} {/* Category Select */}
<div className="md:col-span-3 relative"> <div className="relative flex-shrink-0 md:w-[160px]">
<button <button
onClick={() => toggleDropdown('category')} 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" 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-fractul text-sm text-[#00293d]"> <span className="font-serif text-sm text-[#00293d]">
{searchParams.category ? categories.find(c => c.value === searchParams.category)?.label : 'Categories'} {searchParams.category ? categories.find(c => c.value === searchParams.category)?.label : 'Categories'}
</span> </span>
<Image <Image
src="/assets/icons/chevron-down-icon.svg" src="/assets/icons/chevron-down-icon.svg"
alt="" alt=""
width={12} width={10}
height={12} height={10}
className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`} className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
/> />
</button> </button>
{openDropdown === 'category' && ( {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"> <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">
{categories.map((cat) => ( {categories.slice(1).map((cat, index, arr) => (
<button <button
key={cat.value} key={cat.value}
onClick={() => selectOption('category', cat.value, cat.label)} 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]" 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' : ''}`}
> >
{cat.label} {cat.label}
</button> </button>
@@ -174,35 +166,17 @@ export function HeroSection() {
</div> </div>
{/* Search Button */} {/* Search Button */}
<div className="md:col-span-2"> <div className="flex-shrink-0">
<button <button
onClick={handleSearch} 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" className="w-full md:w-[48px] h-[42px] rounded-[7px] bg-[#00293d] hover:bg-[#00293d]/90 text-white transition-colors flex items-center justify-center"
> >
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <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="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16 16L20 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
</svg> </svg>
</button> </button>
</div> </div>
</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> </div>
{/* See All Agents Button */} {/* See All Agents Button */}