287 lines
9.2 KiB
TypeScript
287 lines
9.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
// Sample agents data for tabs
|
|
const agentsData = [
|
|
{
|
|
id: '1',
|
|
name: 'Arjun Mehta',
|
|
subtitle: '(Residential Property Expert)',
|
|
location: 'San Francisco, CA',
|
|
experience: '10+ years in the real estate industry.',
|
|
expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
|
|
imageUrl: '/assets/images/professional-1.jpg',
|
|
},
|
|
{
|
|
id: '2',
|
|
name: 'Arjun Mehta',
|
|
subtitle: '(Residential Property Expert)',
|
|
location: 'San Francisco, CA',
|
|
experience: '10+ years in the real estate industry.',
|
|
expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
|
|
imageUrl: '/assets/images/professional-2.jpg',
|
|
},
|
|
{
|
|
id: '3',
|
|
name: 'Arjun Mehta',
|
|
subtitle: '(Residential Property Expert)',
|
|
location: 'San Francisco, CA',
|
|
experience: '10+ years in the real estate industry.',
|
|
expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
|
|
imageUrl: '/assets/images/professional-3.jpg',
|
|
},
|
|
];
|
|
|
|
const lendersData = [
|
|
{
|
|
id: '4',
|
|
name: 'Sarah Johnson',
|
|
subtitle: '(Mortgage Specialist)',
|
|
location: 'Los Angeles, CA',
|
|
experience: '10+ years in mortgage lending.',
|
|
expertise: ['FHA Loans', 'Conventional', 'VA Loans', 'Refinancing', 'Jumbo'],
|
|
imageUrl: '/assets/images/professional-1.jpg',
|
|
},
|
|
{
|
|
id: '5',
|
|
name: 'Michael Chen',
|
|
subtitle: '(Senior Loan Officer)',
|
|
location: 'Seattle, WA',
|
|
experience: '7+ years in lending.',
|
|
expertise: ['Jumbo Loans', 'Refinancing', 'Investment', 'First-time', 'USDA'],
|
|
imageUrl: '/assets/images/professional-2.jpg',
|
|
},
|
|
{
|
|
id: '6',
|
|
name: 'Emily Davis',
|
|
subtitle: '(Home Loan Advisor)',
|
|
location: 'Austin, TX',
|
|
experience: '5+ years in mortgage industry.',
|
|
expertise: ['First-time Buyers', 'FHA', 'USDA Loans', 'VA Loans', 'Conventional'],
|
|
imageUrl: '/assets/images/professional-3.jpg',
|
|
},
|
|
];
|
|
|
|
interface ProfessionalCardProps {
|
|
name: string;
|
|
subtitle: string;
|
|
location: string;
|
|
experience: string;
|
|
expertise: string[];
|
|
imageUrl: string;
|
|
}
|
|
|
|
function ProfessionalCard({
|
|
name,
|
|
subtitle,
|
|
location,
|
|
experience,
|
|
expertise,
|
|
imageUrl,
|
|
}: ProfessionalCardProps) {
|
|
return (
|
|
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
|
|
{/* Image */}
|
|
<div className="relative h-[226px] w-full overflow-hidden">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4">
|
|
{/* Name */}
|
|
<h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
|
|
{name}
|
|
</h3>
|
|
|
|
{/* Subtitle */}
|
|
<p className="font-serif font-normal text-[10px] leading-normal text-[#00293d] mt-1">
|
|
{subtitle}
|
|
</p>
|
|
|
|
{/* Verified Badge */}
|
|
<div className="flex items-center gap-1.5 mt-2">
|
|
<Image
|
|
src="/assets/icons/verified-badge-blue.svg"
|
|
alt="Verified"
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
<span className="font-serif font-medium text-[14px] leading-normal text-[#638559]">
|
|
“Verified local agent”
|
|
</span>
|
|
</div>
|
|
|
|
{/* Location */}
|
|
<div className="mt-3">
|
|
<p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
|
|
Location:
|
|
</p>
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
<Image
|
|
src="/assets/icons/location-pin-orange.svg"
|
|
alt="Location"
|
|
width={12}
|
|
height={15}
|
|
/>
|
|
<span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
|
|
{location}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expertise */}
|
|
<div className="mt-3">
|
|
<p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
|
|
Expertise:
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5 mt-2">
|
|
{expertise.slice(0, 6).map((tag, index) => (
|
|
<span
|
|
key={index}
|
|
className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Experience */}
|
|
<p className="mt-3 text-[14px] leading-normal text-[#00293d]">
|
|
<span className="font-fractul font-bold">Experience:</span>
|
|
<span className="font-serif font-normal"> {experience}</span>
|
|
</p>
|
|
|
|
{/* Star Rating */}
|
|
<div className="flex gap-1 mt-3">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Image
|
|
key={i}
|
|
src="/assets/icons/star-yellow.svg"
|
|
alt="Star"
|
|
width={18}
|
|
height={17}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TopProfessionals() {
|
|
const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
|
|
const displayData = activeTab === 'agents' ? agentsData : lendersData;
|
|
|
|
return (
|
|
<section className="py-10 md:py-12 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="text-center mb-10">
|
|
<h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
|
|
“Meet top real estate professionals”
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Tabs Container */}
|
|
<div className="flex justify-center mb-10">
|
|
<div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex items-center">
|
|
{/* Agents Tab */}
|
|
<button
|
|
onClick={() => setActiveTab('agents')}
|
|
className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
|
|
activeTab === 'agents'
|
|
? 'bg-[#00293d] text-[#f0f5fc]'
|
|
: 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={activeTab === 'agents' ? '/assets/icons/agents-tab-icon-orange.svg' : '/assets/icons/agents-tab-icon.svg'}
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
Agents
|
|
</button>
|
|
|
|
{/* Divider */}
|
|
<div className="h-[44px] w-px bg-[#00293d]/20 mx-4" />
|
|
|
|
{/* Lenders Tab */}
|
|
<button
|
|
onClick={() => setActiveTab('lenders')}
|
|
className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
|
|
activeTab === 'lenders'
|
|
? 'bg-[#00293d] text-[#f0f5fc]'
|
|
: 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={activeTab === 'lenders' ? '/assets/icons/lenders-tab-icon-orange.svg' : '/assets/icons/lenders-tab-icon.svg'}
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
Lenders
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cards Grid - 3 cards + CTA sidebar */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{/* Professional Cards */}
|
|
{displayData.map((professional) => (
|
|
<ProfessionalCard
|
|
key={professional.id}
|
|
name={professional.name}
|
|
subtitle={professional.subtitle}
|
|
location={professional.location}
|
|
experience={professional.experience}
|
|
expertise={professional.expertise}
|
|
imageUrl={professional.imageUrl}
|
|
/>
|
|
))}
|
|
|
|
{/* CTA Sidebar Card */}
|
|
<div
|
|
className="rounded-[15px] p-6 flex flex-col items-center justify-center text-center min-h-[400px]"
|
|
style={{
|
|
background: 'linear-gradient(180deg, #C5D6D6 0%, #FFFFFF 100%)',
|
|
}}
|
|
>
|
|
{/* Building Icon */}
|
|
<div className="mb-4">
|
|
<Image
|
|
src="/assets/icons/building-icon.svg"
|
|
alt="Building"
|
|
width={50}
|
|
height={38}
|
|
/>
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<p className="font-fractul font-normal text-[14px] leading-[1.4] text-[#00293d] mb-6">
|
|
Discover 5,000+ Top Real Estate Agents in Our Network.
|
|
</p>
|
|
|
|
{/* Browse Experts Button */}
|
|
<Link href="/agents">
|
|
<button className="bg-[#e58625] hover:bg-[#d47820] text-white font-fractul font-bold text-[16px] leading-[19px] px-8 py-3 rounded-[15px] transition-colors">
|
|
Browse Experts
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|