feat: Add location pin icon and update edit pencil icons to orange in the agent dashboard.
This commit is contained in:
pradeepkumar
@@ -16,86 +16,24 @@ interface ExperienceSectionProps {
|
||||
|
||||
export function ExperienceSection({ experience }: ExperienceSectionProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif mb-6">Experience</h2>
|
||||
<div className="flex flex-row gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{experience.years}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{experience.contracts}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing & Areas</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{experience.licensingAreas.map((area, idx) => (
|
||||
<Tag key={idx} variant="light">
|
||||
{area}
|
||||
</Tag>
|
||||
))}
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+3 More</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px bg-gray-200" />
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise & Years</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{experience.expertiseYears.slice(0, 4).map((item, idx) => (
|
||||
<Tag key={idx} variant="orange">
|
||||
{item.area} – {item.years}
|
||||
</Tag>
|
||||
))}
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+3More</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
|
||||
<ul className="space-y-3">
|
||||
{experience.certifications.map((cert, idx) => (
|
||||
<li key={idx} className="text-[#00293d] text-sm">
|
||||
<span>• {cert.name}</span>
|
||||
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Layout */}
|
||||
<div className="lg:hidden">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-6">Experience</h2>
|
||||
<div className="space-y-4 px-4">
|
||||
<div className="border-b border-gray-200 pb-4">
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif mb-6 text-center lg:text-left">Experience</h2>
|
||||
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{experience.years}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-b border-gray-200 pb-4">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{experience.contracts}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing & Areas</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{experience.licensingAreas.map((area, idx) => (
|
||||
@@ -103,22 +41,26 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
|
||||
{area}
|
||||
</Tag>
|
||||
))}
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
|
||||
+3 More
|
||||
</span>
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+3 More</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
</div>
|
||||
|
||||
{/* Divider - Hidden on mobile, visible on desktop */}
|
||||
<div className="hidden lg:block w-px bg-gray-200" />
|
||||
<div className="lg:hidden border-t border-gray-200" />
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise & Years</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{experience.expertiseYears.map((item, idx) => (
|
||||
<Tag key={idx} variant="light">
|
||||
{experience.expertiseYears.slice(0, 4).map((item, idx) => (
|
||||
<Tag key={idx} variant="orange">
|
||||
{item.area} – {item.years}
|
||||
</Tag>
|
||||
))}
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
|
||||
+3More
|
||||
</span>
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+3More</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -126,14 +68,14 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
|
||||
<ul className="space-y-3">
|
||||
{experience.certifications.map((cert, idx) => (
|
||||
<li key={idx} className="text-[#00293d] text-sm">
|
||||
<span className="font-serif">• {cert.name}</span>
|
||||
<p className="text-[#00293d]/50 text-sm ml-3 font-serif">{cert.org}</p>
|
||||
<span>• {cert.name}</span>
|
||||
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -76,139 +76,13 @@ export default function AgentDashboard() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Mobile: Profile Image at Top */}
|
||||
<div className="lg:hidden flex flex-col items-center">
|
||||
{/* Profile Image */}
|
||||
<div className="relative w-[200px] mb-4">
|
||||
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
|
||||
<Image
|
||||
src={agentData.profileImage}
|
||||
alt="Profile"
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
{/* Edit Icon - Top Right Outside */}
|
||||
<button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-icon.svg"
|
||||
alt="Edit profile"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Available/Unavailable Buttons */}
|
||||
<div className="w-full max-w-[354px] space-y-2 mb-4">
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="w-3 h-3 bg-green-500 rounded-full" />
|
||||
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
|
||||
</div>
|
||||
<button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px] font-fractul">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
|
||||
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
|
||||
</div>
|
||||
<button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px] font-fractul">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info Card */}
|
||||
<div className="w-full max-w-[354px] border border-[#00293d]/10 rounded-[15px] p-4 mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-bold text-[#00293d] text-sm">Email:</span>
|
||||
<span className="text-[#00293d] text-sm font-serif">********brian@gmail.com</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
|
||||
<span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
|
||||
<button className="p-1 hover:bg-gray-100 rounded ml-auto">
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
alt="Edit phone"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name and Info - Centered for Mobile */}
|
||||
<div className="text-center mb-4">
|
||||
<div className="flex items-center justify-center gap-2 mb-1">
|
||||
<h1 className="text-[18px] text-[#00293d] font-serif">
|
||||
<span className="font-semibold">{firstName}</span>{' '}
|
||||
<span className="font-normal">{lastName}</span>
|
||||
</h1>
|
||||
{agentData.isVerified && (
|
||||
<>
|
||||
<Image
|
||||
src="/assets/icons/verified-icon.svg"
|
||||
alt="Verified"
|
||||
width={15}
|
||||
height={14}
|
||||
/>
|
||||
<span className="text-[14px] text-[#638559] font-medium font-serif">
|
||||
(Verified Expert)
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
alt="Edit name"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
|
||||
<div className="flex items-center justify-center gap-4 text-sm text-[#00293d] font-fractul">
|
||||
<span className="flex items-center gap-1 text-[#e58625] font-medium">
|
||||
<Image
|
||||
src="/assets/icons/location-icon.svg"
|
||||
alt="Location"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
{agentData.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Image
|
||||
src="/assets/icons/calendar-icon.svg"
|
||||
alt="Calendar"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Member Since {agentData.memberSince}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bio - Centered for Mobile */}
|
||||
<p className="text-[#00293d] text-sm leading-relaxed text-center max-w-[338px] mb-4 font-serif">
|
||||
{agentData.bio}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop: Original Layout - Sidebar + Right Content (Profile + Experience) */}
|
||||
<div className="hidden lg:flex flex-row gap-6 items-stretch">
|
||||
{/* Main Layout - Responsive: Column on mobile, Row on desktop */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
|
||||
{/* Left Sidebar - Status & Contact */}
|
||||
<div className="w-[280px] flex-shrink-0 space-y-4">
|
||||
<div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
|
||||
{/* Profile Image */}
|
||||
<div className="relative w-[260px]">
|
||||
<div className="w-[260px] h-[260px] rounded-[15px] overflow-hidden">
|
||||
<div className="relative w-[200px] lg:w-[260px]">
|
||||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden">
|
||||
<Image
|
||||
src={agentData.profileImage}
|
||||
alt="Profile"
|
||||
@@ -231,8 +105,8 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Status Buttons */}
|
||||
<div className="w-full space-y-2">
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
|
||||
<div className="w-full max-w-[354px] lg:max-w-none space-y-2">
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] px-4">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="w-3 h-3 bg-green-500 rounded-full" />
|
||||
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
|
||||
@@ -241,7 +115,7 @@ export default function AgentDashboard() {
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
|
||||
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] px-4">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
|
||||
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
|
||||
@@ -253,7 +127,7 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="w-full border border-[#00293d]/10 rounded-[15px] p-4 mt-2">
|
||||
<div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-bold text-[#00293d] text-sm">Email:</span>
|
||||
<span className="text-[#00293d] text-sm font-serif">********brain@gmail.com</span>
|
||||
@@ -281,14 +155,14 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Profile Info + Experience */}
|
||||
{/* Right Content - Profile Info + Experience + All Sections */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{/* Profile Card */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
|
||||
{/* Name and Actions Row */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="text-center lg:text-left">
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
|
||||
<h1 className="text-[18px] text-[#00293d] font-serif">
|
||||
<span className="font-semibold">{firstName}</span>{' '}
|
||||
<span className="font-normal">{lastName}</span>
|
||||
@@ -308,7 +182,7 @@ export default function AgentDashboard() {
|
||||
)}
|
||||
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
src="/assets/icons/edit-pencil-orange-icon.svg"
|
||||
alt="Edit name"
|
||||
width={16}
|
||||
height={16}
|
||||
@@ -316,13 +190,13 @@ export default function AgentDashboard() {
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
|
||||
<div className="flex items-center gap-4 text-sm text-[#00293d] font-fractul">
|
||||
<div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
|
||||
<span className="flex items-center gap-1 text-[#e58625] font-medium">
|
||||
<Image
|
||||
src="/assets/icons/location-icon.svg"
|
||||
src="/assets/icons/location-pin-icon.svg"
|
||||
alt="Location"
|
||||
width={16}
|
||||
height={16}
|
||||
width={21}
|
||||
height={19}
|
||||
/>
|
||||
{agentData.location}
|
||||
</span>
|
||||
@@ -339,7 +213,7 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center lg:justify-start gap-3">
|
||||
<button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
|
||||
<Image
|
||||
src="/assets/icons/message-dark-icon.svg"
|
||||
@@ -362,12 +236,12 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif">{agentData.bio}</p>
|
||||
<p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif text-center lg:text-left">{agentData.bio}</p>
|
||||
|
||||
{/* Expertise Tags */}
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2 text-center lg:text-left">Expertise:</p>
|
||||
<div className="flex flex-wrap gap-2 justify-center lg:justify-start">
|
||||
{agentData.expertise.map((tag, idx) => (
|
||||
<Tag key={idx}>{tag}</Tag>
|
||||
))}
|
||||
@@ -375,11 +249,11 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experience Section - Inside the same row */}
|
||||
{/* Experience Section */}
|
||||
<ExperienceSection experience={agentData.experience} />
|
||||
|
||||
{/* Info Cards Section - Desktop */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{/* Info Cards Section */}
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
|
||||
<InfoCard
|
||||
title="Availability"
|
||||
icon={
|
||||
@@ -427,13 +301,13 @@ export default function AgentDashboard() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Specialization Section - Desktop */}
|
||||
{/* Specialization Section */}
|
||||
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
|
||||
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
|
||||
<SpecializationCard
|
||||
title="Specialization"
|
||||
items={agentData.specialization.types}
|
||||
@@ -471,7 +345,7 @@ export default function AgentDashboard() {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6 max-w-2xl mx-auto">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
|
||||
<SpecializationCard
|
||||
title="Hobbies & Interests"
|
||||
items={agentData.specialization.hobbies}
|
||||
@@ -499,13 +373,13 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section - Desktop */}
|
||||
{/* Testimonials Section */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-8">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
|
||||
<p className="text-[#00293d]/70 text-sm text-center mb-8">
|
||||
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
|
||||
{agentData.testimonials.map((testimonial) => (
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
@@ -519,151 +393,6 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Experience Section */}
|
||||
<div className="lg:hidden">
|
||||
<ExperienceSection experience={agentData.experience} />
|
||||
</div>
|
||||
|
||||
{/* Info Cards Section - Mobile */}
|
||||
<div className="flex flex-col gap-6 lg:hidden">
|
||||
<InfoCard
|
||||
title="Availability"
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/clock-icon.svg"
|
||||
alt="Availability"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="font-semibold mb-2">{agentData.availability.type}</p>
|
||||
<div className="space-y-1">
|
||||
{agentData.availability.days.map((day) => (
|
||||
<p key={day}>{day}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<InfoCard
|
||||
title="Preferred work environment"
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/location-large-icon.svg"
|
||||
alt="Work environment"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
|
||||
/>
|
||||
<InfoCard
|
||||
title=""
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/star-icon.svg"
|
||||
alt="Testimonial"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={<p className="text-sm leading-relaxed italic">“{agentData.testimonialHighlight}”</p>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Specialization Section - Mobile */}
|
||||
<div className="bg-[#e8e8e8] rounded-[20px] p-8 lg:hidden">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
|
||||
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 mb-6">
|
||||
<SpecializationCard
|
||||
title="Specialization"
|
||||
items={agentData.specialization.types}
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/home-icon.svg"
|
||||
alt="Specialization"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Loan Type"
|
||||
items={agentData.specialization.loanTypes}
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/wallet-icon.svg"
|
||||
alt="Loan Type"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Property Type"
|
||||
items={agentData.specialization.propertyTypes}
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/chart-icon.svg"
|
||||
alt="Property Type"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<SpecializationCard
|
||||
title="Hobbies & Interests"
|
||||
items={agentData.specialization.hobbies}
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/heart-icon.svg"
|
||||
alt="Hobbies"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Price Point"
|
||||
items={agentData.specialization.pricePoints}
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/dollar-icon.svg"
|
||||
alt="Price Point"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section - Mobile */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-8 lg:hidden">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
|
||||
<p className="text-[#00293d]/70 text-sm text-center mb-8">
|
||||
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
|
||||
</p>
|
||||
<div className="flex flex-col gap-6">
|
||||
{agentData.testimonials.map((testimonial) => (
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
text={testimonial.text}
|
||||
author={testimonial.author}
|
||||
role={testimonial.role}
|
||||
rating={testimonial.rating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user