Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0c7239d7a8dfb15475ad150e4e950811284e811c
frontend/src/app/(agent)/agent/dashboard/page.tsx

504 lines
24 KiB
TypeScript
Raw Normal View History

default layuout
2026-01-11 21:30:57 +05:30
'use client';
import { useSession } from 'next-auth/react';
main layout
2026-01-11 22:09:41 +05:30
import Image from 'next/image';
import { useState } from 'react';
// Mock agent data - in production, this would come from API
const agentData = {
name: 'Brian Neeland',
isVerified: true,
title: 'Licensed Real Estate Agent',
location: 'Colorado',
memberSince: 'March 2020',
bio: 'Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client\'s goals.',
expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'],
email: 'brian@gmail.com',
phone: '+91*******7493',
profileImage: '/assets/agent-placeholder.jpg',
experience: {
years: '10+ years',
contracts: '10+ Contracts',
licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'],
expertiseYears: [
{ area: 'Colorado', years: '10 yrs' },
{ area: 'Falcon', years: '10 yrs' },
{ area: 'Colorado', years: '10 yrs' },
{ area: 'Colorado', years: '10 yrs' },
],
certifications: [
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
],
},
availability: {
type: 'Full-time',
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
},
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
specialization: {
types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'],
loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'],
propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'],
hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'],
pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'],
},
testimonials: [
{
id: 1,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy Kenney',
role: 'Chief Operations Officer',
rating: 5,
},
{
id: 2,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy Kenney',
role: 'Chief Operations Officer',
rating: 5,
},
{
id: 3,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
author: 'Kennedy Kenney',
role: 'Chief Operations Officer',
rating: 5,
},
],
};
// Star Rating Component
function StarRating({ rating }: { rating: number }) {
return (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
<svg
key={star}
className={`w-4 h-4 ${star <= rating ? 'text-[#e58625]' : 'text-gray-300'}`}
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
))}
</div>
);
}
// Tag Component
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
return (
<span
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${
variant === 'light'
? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
: variant === 'orange'
? 'border-[#e58625] text-[#e58625] bg-transparent'
: 'border-[#00293d] text-[#00293d] bg-transparent'
}`}
>
{children}
</span>
);
}
// Specialization Card Component
function SpecializationCard({
title,
items,
icon,
}: {
title: string;
items: string[];
icon: React.ReactNode;
}) {
return (
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
<div className="space-y-1">
{items.map((item, idx) => (
<p key={idx} className="text-[#00293d] text-sm">
{item}
</p>
))}
</div>
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
Show More
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
);
}
// Info Card Component
function InfoCard({
title,
content,
icon,
}: {
title: string;
content: React.ReactNode;
icon: React.ReactNode;
}) {
return (
<div className="bg-white rounded-[20px] border border-gray-200 p-6 text-center">
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
{title && <h4 className="font-semibold text-[#00293d] text-sm mb-3">{title}</h4>}
<div className="text-[#00293d] text-sm">{content}</div>
</div>
);
}
default layuout
2026-01-11 21:30:57 +05:30
export default function AgentDashboard() {
const { data: session } = useSession();
return (
<div className="space-y-6">
main layout
2026-01-11 22:09:41 +05:30
{/* Main Profile Section with Left Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Left Sidebar - Status & Contact */}
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
{/* Profile Image */}
<div className="relative">
<div className="w-[140px] h-[140px] rounded-[20px] bg-[#8fa9a8] overflow-hidden mx-auto lg:mx-0">
<div className="w-full h-full bg-gradient-to-br from-[#8fa9a8] to-[#6b8a89] flex items-center justify-center">
<svg className="w-20 h-20 text-white/50" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
<button className="absolute bottom-2 right-2 lg:right-auto lg:left-[110px] bg-white rounded-lg p-1.5 shadow-md hover:bg-gray-50 transition-colors">
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
default layuout
2026-01-11 21:30:57 +05:30
</svg>
main layout
2026-01-11 22:09:41 +05:30
</button>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Status Buttons */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-green-500 rounded-full" />
<span className="text-sm text-[#00293d]">Available.</span>
</div>
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
Connect
</button>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
<span className="text-sm text-[#00293d]">Unavailable.</span>
</div>
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
Connect
</button>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Contact Info */}
<div className="space-y-2 pt-2">
<div className="flex items-center gap-2 text-sm">
<span className="font-bold text-[#00293d]">Email:</span>
<span className="text-[#00293d]">*****brian@gmail.com</span>
</div>
<div className="flex items-center gap-2 text-sm">
<span className="font-bold text-[#00293d]">Ph.No:</span>
<span className="text-[#00293d]">{agentData.phone}</span>
<button className="p-1 hover:bg-gray-100 rounded">
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Right Content - Profile Info */}
<div className="flex-1">
{/* Profile Header 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>
{/* Name and Verification */}
<div className="flex items-center gap-2 mb-1">
<h1 className="text-xl font-bold text-[#00293d]">
<span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
<span className="font-normal">{agentData.name.split(' ')[1]}</span>
</h1>
{agentData.isVerified && (
<span className="text-[#e58625] text-sm font-medium flex items-center gap-1">
(Verified Expert)
<svg className="w-4 h-4 text-[#5ba4a4]" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
</span>
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
<svg className="w-4 h-4 text-[#5ba4a4]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
</div>
default layuout
2026-01-11 21:30:57 +05:30
main layout
2026-01-11 22:09:41 +05:30
{/* Title */}
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
{/* Location and Member Since */}
<div className="flex items-center gap-4 text-sm text-[#00293d]">
<span className="flex items-center gap-1 text-[#e58625] font-medium">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
{agentData.location}
</span>
<span className="flex items-center gap-1">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
</svg>
Member Since {agentData.memberSince}
</span>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center gap-2">
<button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
Message
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Requests
</button>
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Bio */}
<p className="text-[#00293d] text-sm leading-relaxed mb-4">{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">
{agentData.expertise.map((tag, idx) => (
<Tag key={idx}>{tag}</Tag>
))}
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Experience Section */}
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
<h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2>
<div className="flex flex-col lg: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>{agentData.experience.years}</li>
</ul>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
<div>
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract coised</p>
<ul className="list-disc list-inside text-[#00293d] text-sm">
<li>{agentData.experience.contracts}</li>
</ul>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => (
<Tag key={idx} variant="light">
{area}
</Tag>
))}
{agentData.experience.licensingAreas.length > 5 && (
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.licensingAreas.length - 5} More</span>
)}
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
{/* Divider */}
<div className="hidden lg:block 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 &amp; Years</p>
<div className="flex flex-wrap gap-2">
{agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => (
<Tag key={idx} variant="orange">
{item.area} – {item.years}
</Tag>
))}
{agentData.experience.expertiseYears.length > 3 && (
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.expertiseYears.length - 3}More</span>
)}
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
<ul className="space-y-3">
{agentData.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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
main layout
2026-01-11 22:09:41 +05:30
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
main layout
2026-01-11 22:09:41 +05:30
{/* Info Cards Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<InfoCard
title="Availability"
icon={
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
}
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>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
}
/>
<InfoCard
title="Preferred work environment"
icon={
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
}
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
/>
<InfoCard
title=""
icon={
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
}
content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
/>
</div>
{/* Specialization Section - Light Gray Background */}
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d]">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<SpecializationCard
title="Specialization"
items={agentData.specialization.types}
icon={
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
}
/>
<SpecializationCard
title="Loan Type"
items={agentData.specialization.loanTypes}
icon={
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg>
}
/>
<SpecializationCard
title="Property Type"
items={agentData.specialization.propertyTypes}
icon={
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
</svg>
}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
<SpecializationCard
title="Hobbies & Interests"
items={agentData.specialization.hobbies}
icon={
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
}
/>
<SpecializationCard
title="Price Point"
items={agentData.specialization.pricePoints}
icon={
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" />
</svg>
}
/>
</div>
</div>
{/* Testimonials Section */}
<div className="bg-white rounded-[20px] border border-gray-200 p-8">
<h2 className="text-xl font-bold text-[#00293d] 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-1 md:grid-cols-3 gap-6">
{agentData.testimonials.map((testimonial) => (
<div key={testimonial.id} className="p-4">
<div className="flex items-start gap-3 mb-4">
<div className="w-8 h-8 rounded-full bg-[#e58625]/20 flex items-center justify-center flex-shrink-0">
<span className="text-[#e58625] text-lg font-serif">&ldquo;</span>
</div>
<p className="font-bold text-[#00293d] text-sm">I have been working with Lorem .</p>
</div>
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
<div className="flex items-center gap-3 pt-4 border-t border-gray-100">
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
<svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</div>
<div className="flex-1">
<StarRating rating={testimonial.rating} />
<p className="font-bold text-[#00293d] text-sm">{testimonial.author}</p>
<p className="text-[#00293d]/50 text-xs">{testimonial.role}</p>
</div>
</div>
default layuout
2026-01-11 21:30:57 +05:30
</div>
main layout
2026-01-11 22:09:41 +05:30
))}
default layuout
2026-01-11 21:30:57 +05:30
</div>
</div>
</div>
);
}
Reference in New Issue Copy Permalink