feat: Redesign "Top Professionals" section with new ProfessionalCard component and dedicated assets, replacing FeaturedAgents.
This commit is contained in:
pradeepkumar
3
public/assets/icons/agents-tab-icon.svg
Normal file
3
public/assets/icons/agents-tab-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 10C12.21 10 14 8.21 14 6C14 3.79 12.21 2 10 2C7.79 2 6 3.79 6 6C6 8.21 7.79 10 10 10ZM10 12C7.33 12 2 13.34 2 16V18H18V16C18 13.34 12.67 12 10 12Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
3
public/assets/icons/building-icon.svg
Normal file
3
public/assets/icons/building-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="50" height="38" viewBox="0 0 50 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 33V5C5 3.9 5.9 3 7 3H21C22.1 3 23 3.9 23 5V33H5ZM27 33V13C27 11.9 27.9 11 29 11H43C44.1 11 45 11.9 45 13V33H27ZM9 9V13H13V9H9ZM9 17V21H13V17H9ZM9 25V29H13V25H9ZM17 9V13H21V9H17ZM17 17V21H21V17H17ZM17 25V29H21V25H17ZM31 17V21H35V17H31ZM31 25V29H35V25H31ZM39 17V21H43V17H39ZM39 25V29H43V25H39Z" fill="#5BA4A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 425 B |
3
public/assets/icons/lenders-tab-icon.svg
Normal file
3
public/assets/icons/lenders-tab-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 2H15V0H13V2H7V0H5V2H3C1.9 2 1 2.9 1 4V18C1 19.1 1.9 20 3 20H17C18.1 20 19 19.1 19 18V4C19 2.9 18.1 2 17 2ZM17 18H3V8H17V18ZM17 6H3V4H17V6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 278 B |
3
public/assets/icons/star-rating-filled.svg
Normal file
3
public/assets/icons/star-rating-filled.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 0L11.0206 6.21885H17.5595L12.2694 10.0623L14.2901 16.2812L9 12.4377L3.70993 16.2812L5.73056 10.0623L0.440492 6.21885H6.97937L9 0Z" fill="#FFDE21"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 263 B |
3
public/assets/icons/star-rating-icon.svg
Normal file
3
public/assets/icons/star-rating-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M7 9.5C6.33696 9.5 5.70107 9.23661 5.23223 8.76777C4.76339 8.29893 4.5 7.66304 4.5 7C4.5 6.33696 4.76339 5.70107 5.23223 5.23223C5.70107 4.76339 6.33696 4.5 7 4.5C7.66304 4.5 8.29893 4.76339 8.76777 5.23223C9.23661 5.70107 9.5 6.33696 9.5 7C9.5 7.3283 9.43534 7.65339 9.3097 7.95671C9.18406 8.26002 8.99991 8.53562 8.76777 8.76777C8.53562 8.99991 8.26002 9.18406 7.95671 9.3097C7.65339 9.43534 7.3283 9.5 7 9.5ZM7 0C5.14348 0 3.36301 0.737498 2.05025 2.05025C0.737498 3.36301 0 5.14348 0 7C0 12.25 7 20 7 20C7 20 14 12.25 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0Z" fill="var(--fill-0, #E58625)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 832 B |
3
public/assets/icons/verified-badge-green.svg
Normal file
3
public/assets/icons/verified-badge-green.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.90906 19.091L5.18198 16.1819L1.9091 15.4546L2.22733 12.091L0 9.54548L2.22733 6.99999L1.9091 3.6364L5.18198 2.90907L6.90906 0L10.0001 1.31813L13.0911 0L14.8182 2.90907L18.0911 3.6364L17.7728 6.99999L20 9.54548L17.7728 12.091L18.0911 15.4546L14.8182 16.1819L13.0911 19.091L10.0001 17.7728L6.90906 19.091ZM9.04553 12.7728L14.1819 7.63638L12.9092 6.31817L9.04553 10.1818L7.09093 8.2727L5.8183 9.54548L9.04553 12.7728Z" fill="#638559"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
BIN
public/assets/images/professional-1.jpg
Normal file
BIN
public/assets/images/professional-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 453 KiB |
BIN
public/assets/images/professional-2.jpg
Normal file
BIN
public/assets/images/professional-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
public/assets/images/professional-3.jpg
Normal file
BIN
public/assets/images/professional-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
@@ -2,7 +2,6 @@
|
||||
|
||||
import { HeroSection } from '@/components/home/HeroSection';
|
||||
import { FeaturesSection } from '@/components/home/FeaturesSection';
|
||||
import { FeaturedAgents } from '@/components/home/FeaturedAgents';
|
||||
import { TopProfessionals } from '@/components/home/TopProfessionals';
|
||||
import { TestimonialsSection } from '@/components/home/TestimonialsSection';
|
||||
|
||||
@@ -11,7 +10,6 @@ export default function UserDashboard() {
|
||||
<div>
|
||||
<HeroSection />
|
||||
<FeaturesSection />
|
||||
<FeaturedAgents />
|
||||
<TopProfessionals />
|
||||
<TestimonialsSection />
|
||||
</div>
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { AgentCard } from '../ui/AgentCard';
|
||||
|
||||
// Sample featured agents data
|
||||
const featuredAgents = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Andrew Collins',
|
||||
title: 'Rental & Investment Consultant',
|
||||
location: 'New York',
|
||||
rating: 4.8,
|
||||
reviewCount: 124,
|
||||
experience: '8+ years in the real estate industry',
|
||||
expertise: ['Residential', 'Commercial', 'Investment'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Dempsi',
|
||||
title: 'Real Estate & Investment Consultant',
|
||||
location: 'Atlanta',
|
||||
rating: 4.9,
|
||||
reviewCount: 98,
|
||||
experience: '5+ years in the real estate industry',
|
||||
expertise: ['Luxury Homes', 'First-time Buyers'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Daniel',
|
||||
title: 'Rental & Investment Consultant',
|
||||
location: 'San Diego',
|
||||
rating: 4.7,
|
||||
reviewCount: 156,
|
||||
experience: '7 years in the real estate industry',
|
||||
expertise: ['Property Management', 'Rentals'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
},
|
||||
];
|
||||
|
||||
export function FeaturedAgents() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-[#f5f9f8]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{featuredAgents.map((agent) => (
|
||||
<AgentCard
|
||||
key={agent.id}
|
||||
name={agent.name}
|
||||
title={agent.title}
|
||||
location={agent.location}
|
||||
rating={agent.rating}
|
||||
reviewCount={agent.reviewCount}
|
||||
experience={agent.experience}
|
||||
expertise={agent.expertise}
|
||||
imageUrl={agent.imageUrl}
|
||||
isVerified={agent.isVerified}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -2,46 +2,36 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { AgentCard } from '../ui/AgentCard';
|
||||
import { Button } from '../ui/Button';
|
||||
import Image from 'next/image';
|
||||
|
||||
// Sample agents data for tabs
|
||||
const agentsData = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Arjun Mehta',
|
||||
title: 'Professional/General Agent',
|
||||
subtitle: '(Residential Property Expert)',
|
||||
location: 'San Francisco, CA',
|
||||
rating: 4.9,
|
||||
reviewCount: 87,
|
||||
experience: '6+ years in the real estate industry',
|
||||
expertise: ['Residential', 'Luxury', 'Commercial'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
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',
|
||||
title: 'Top-tier Real Agent',
|
||||
subtitle: '(Residential Property Expert)',
|
||||
location: 'San Francisco, CA',
|
||||
rating: 4.8,
|
||||
reviewCount: 65,
|
||||
experience: '8+ years in the real estate industry',
|
||||
expertise: ['Investment', 'Commercial', 'Property Management'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
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',
|
||||
title: 'Verified Real Agent',
|
||||
subtitle: '(Residential Property Expert)',
|
||||
location: 'San Francisco, CA',
|
||||
rating: 4.7,
|
||||
reviewCount: 42,
|
||||
experience: '6+ years in the real estate industry',
|
||||
expertise: ['Residential', 'First-time Buyers', 'Rentals'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
experience: '10+ years in the real estate industry.',
|
||||
expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
|
||||
imageUrl: '/assets/images/professional-3.jpg',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -49,119 +39,243 @@ const lendersData = [
|
||||
{
|
||||
id: '4',
|
||||
name: 'Sarah Johnson',
|
||||
title: 'Mortgage Specialist',
|
||||
subtitle: '(Mortgage Specialist)',
|
||||
location: 'Los Angeles, CA',
|
||||
rating: 4.9,
|
||||
reviewCount: 112,
|
||||
experience: '10+ years in mortgage lending',
|
||||
expertise: ['FHA Loans', 'Conventional', 'VA Loans'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
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',
|
||||
title: 'Senior Loan Officer',
|
||||
subtitle: '(Senior Loan Officer)',
|
||||
location: 'Seattle, WA',
|
||||
rating: 4.8,
|
||||
reviewCount: 89,
|
||||
experience: '7+ years in lending',
|
||||
expertise: ['Jumbo Loans', 'Refinancing', 'Investment'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
experience: '7+ years in lending.',
|
||||
expertise: ['Jumbo Loans', 'Refinancing', 'Investment', 'First-time', 'USDA'],
|
||||
imageUrl: '/assets/images/professional-2.jpg',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Emily Davis',
|
||||
title: 'Home Loan Advisor',
|
||||
subtitle: '(Home Loan Advisor)',
|
||||
location: 'Austin, TX',
|
||||
rating: 4.7,
|
||||
reviewCount: 76,
|
||||
experience: '5+ years in mortgage industry',
|
||||
expertise: ['First-time Buyers', 'FHA', 'USDA Loans'],
|
||||
imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
|
||||
isVerified: true,
|
||||
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 border border-[#00293d]/10 rounded-[15px] overflow-hidden shadow-lg">
|
||||
{/* Image */}
|
||||
<div className="relative h-[226px] w-full overflow-hidden rounded-t-[15px]">
|
||||
<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-[17px] text-[#00293d]">
|
||||
{name}
|
||||
</h3>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="font-serif font-normal text-[10px] leading-[13px] text-[#00293d] mt-1">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
{/* Verified Badge */}
|
||||
<div className="flex items-center gap-1.5 mt-2">
|
||||
<Image
|
||||
src="/assets/icons/verified-badge-green.svg"
|
||||
alt="Verified"
|
||||
width={14}
|
||||
height={14}
|
||||
/>
|
||||
<span className="font-serif font-medium text-[14px] leading-[17px] text-[#638559]">
|
||||
“Verified local agent”
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="mt-3">
|
||||
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293d]">
|
||||
Location:
|
||||
</p>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<Image
|
||||
src="/assets/icons/location-filled-icon.svg"
|
||||
alt="Location"
|
||||
width={12}
|
||||
height={12}
|
||||
/>
|
||||
<span className="font-serif font-normal text-[10px] leading-[13px] text-[#00293d]">
|
||||
{location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expertise */}
|
||||
<div className="mt-3">
|
||||
<p className="font-fractul font-bold text-[14px] leading-[17px] 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 border-[#00293d] rounded-[15px] px-2 py-0.5 font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experience */}
|
||||
<p className="mt-3 text-[14px] leading-[17px] 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-rating-filled.svg"
|
||||
alt="Star"
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TopProfessionals() {
|
||||
const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
|
||||
const displayData = activeTab === 'agents' ? agentsData : lendersData;
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<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="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
|
||||
<h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
|
||||
“Meet top real estate professionals”
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex justify-center gap-4 mb-10">
|
||||
<button
|
||||
onClick={() => setActiveTab('agents')}
|
||||
className={`px-8 py-3 rounded-full font-medium transition-all ${
|
||||
activeTab === 'agents'
|
||||
? 'bg-[#00293d] text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
Agents
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('lenders')}
|
||||
className={`px-8 py-3 rounded-full font-medium transition-all ${
|
||||
activeTab === 'lenders'
|
||||
? 'bg-[#00293d] text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
Lenders
|
||||
</button>
|
||||
</div>
|
||||
{/* Tabs Container */}
|
||||
<div className="flex justify-center mb-10">
|
||||
<div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex gap-1">
|
||||
{/* Agents Tab */}
|
||||
<button
|
||||
onClick={() => setActiveTab('agents')}
|
||||
className={`flex items-center gap-2 px-8 py-3 rounded-[15px] font-serif font-semibold text-[17px] transition-all ${
|
||||
activeTab === 'agents'
|
||||
? 'bg-[#00293d] text-[#f0f5fc]'
|
||||
: 'bg-transparent text-[#00293d] hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/agents-tab-icon.svg"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className={activeTab === 'agents' ? 'brightness-0 invert' : ''}
|
||||
/>
|
||||
Agents
|
||||
</button>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
|
||||
{displayData.map((professional) => (
|
||||
<AgentCard
|
||||
key={professional.id}
|
||||
name={professional.name}
|
||||
title={professional.title}
|
||||
location={professional.location}
|
||||
rating={professional.rating}
|
||||
reviewCount={professional.reviewCount}
|
||||
experience={professional.experience}
|
||||
expertise={professional.expertise}
|
||||
imageUrl={professional.imageUrl}
|
||||
isVerified={professional.isVerified}
|
||||
/>
|
||||
))}
|
||||
{/* Divider */}
|
||||
<div className="w-px bg-[#00293d]/20 mx-2" />
|
||||
|
||||
{/* Browse Experts CTA Card */}
|
||||
<div className="bg-[#f5a623]/10 rounded-2xl p-8 flex flex-col items-center justify-center text-center">
|
||||
<p className="text-[#00293d] font-medium mb-2">
|
||||
Discover 6,000+ Top Real Estate Agents in Our Network
|
||||
</p>
|
||||
<Link href="/agents">
|
||||
<Button variant="primary" size="md">
|
||||
Browse Experts
|
||||
</Button>
|
||||
</Link>
|
||||
{/* Lenders Tab */}
|
||||
<button
|
||||
onClick={() => setActiveTab('lenders')}
|
||||
className={`flex items-center gap-2 px-8 py-3 rounded-[15px] font-serif font-semibold text-[17px] transition-all ${
|
||||
activeTab === 'lenders'
|
||||
? 'bg-[#00293d] text-[#f0f5fc]'
|
||||
: 'bg-transparent text-[#00293d] hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/lenders-tab-icon.svg"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className={activeTab === 'lenders' ? 'brightness-0 invert' : ''}
|
||||
/>
|
||||
Lenders
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination Dots */}
|
||||
<div className="flex justify-center gap-2">
|
||||
{[0, 1, 2, 3].map((dot) => (
|
||||
<button
|
||||
key={dot}
|
||||
className={`w-2 h-2 rounded-full transition-all ${
|
||||
dot === 0 ? 'bg-[#f5a623] w-8' : 'bg-gray-300 hover:bg-gray-400'
|
||||
}`}
|
||||
{/* 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="bg-white border border-[#00293d]/10 rounded-[15px] p-6 flex flex-col items-center justify-center text-center shadow-lg min-h-[400px]">
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user