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

style: refresh UI with updated SVG icons and refined typography in dashboard and footer components.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 21:08:28 +05:30
parent 132efa70cf
commit 24a882460c
14 changed files with 69 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
View File

@@ -28,7 +28,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
</ul>
</div>
{/* Horizontal divider */}
<div className="w-full h-0 border-t-[0.1px] border-solid border-[#00293D]" />
<div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contract closed</p>
<ul className="list-disc list-inside">

28
src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx
View File

@@ -10,25 +10,27 @@ interface SpecializationCardProps {
export function SpecializationCard({ title, items, icon }: SpecializationCardProps) {
return (
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625]">
<div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293d] text-sm mb-4 font-fractul">{title}</h4>
<div className="space-y-1">
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1">
{items.map((item, idx) => (
<p key={idx} className="text-[#00293d] text-sm font-serif">
<p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
{item}
</p>
))}
</div>
<button className="mt-4 inline-flex items-center gap-1 px-4 py-1.5 border border-[#e58625] rounded-full text-[#e58625] text-xs font-medium hover:bg-[#e58625]/5 transition-colors font-fractul">
Show More
<Image
src="/assets/icons/chevron-down-icon.svg"
alt="Show more"
width={12}
height={12}
/>
</button>
<div className="mt-4 flex justify-center">
<button className="inline-flex items-center justify-center gap-1 h-[20px] w-[87px] border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors">
Show More
<Image
src="/assets/icons/chevron-down-icon.svg"
alt="Show more"
width={10}
height={10}
/>
</button>
</div>
</div>
);
}

4
src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
View File

@@ -20,7 +20,7 @@ export function SpecializationSection({ specialization }: SpecializationSectionP
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px]">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
<p className="text-[14px] font-medium text-[#00293D] font-fractul leading-[17px]">Area Of Expertise and Focus</p>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
<SpecializationCard
@@ -78,7 +78,7 @@ export function SpecializationSection({ specialization }: SpecializationSectionP
items={specialization.pricePoints}
icon={
<Image
src="/assets/icons/dollar-icon.svg"
src="/assets/icons/wallet-icon.svg"
alt="Price Point"
width={24}
height={24}

36
src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx
View File

@@ -12,28 +12,22 @@ interface TestimonialCardProps {
export function TestimonialCard({ text, author, role, rating }: TestimonialCardProps) {
return (
<div 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 font-serif">I have been working with Lorem .</p>
<div className="p-4 border border-[#00293D]/10 rounded-[15px]">
<div className="mb-4">
<Image
src="/assets/icons/quote-icon.svg"
alt="Quote"
width={23}
height={13}
className="mb-3"
/>
<p className="font-medium text-[#00293D] text-[14px] leading-[17px] font-fractul">I have been working with Lorem .</p>
</div>
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed font-serif">{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">
<Image
src="/assets/icons/user-placeholder-icon.svg"
alt="User"
width={24}
height={24}
/>
</div>
<div className="flex-1">
<StarRating rating={rating} />
<p className="font-bold text-[#00293d] text-sm font-serif">{author}</p>
<p className="text-[#00293d]/50 text-xs font-fractul">{role}</p>
</div>
<p className="text-[#00293D] text-[14px] leading-[19px] font-normal font-serif mb-4">{text}</p>
<div className="pt-4 border-t border-gray-100 space-y-2">
<StarRating rating={rating} />
<p className="font-normal text-[#00293D] text-[14px] leading-[17px] font-fractul">{author}</p>
<p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D]">{role}</p>
</div>
</div>
);

5
src/app/(agent)/agent/dashboard/component/TestimonialsSection.tsx
View File

@@ -17,8 +17,9 @@ interface TestimonialsSectionProps {
export function TestimonialsSection({ testimonials }: TestimonialsSectionProps) {
return (
<div className="bg-white rounded-[20px] 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">
<h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] text-center mb-4">Testimonials</h2>
<div className="w-full h-px bg-[#00293D]/20 mb-4" />
<p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] 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 lg:grid lg:grid-cols-3 gap-6">

11
src/app/(agent)/agent/dashboard/page.tsx
View File

@@ -58,14 +58,21 @@ const agentData = {
{
id: 1,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
author: 'Conor Kenney',
author: 'Kenedy 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, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
author: 'Conor Kenney',
author: 'Kenedy 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, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
author: 'Kenedy Kenney',
role: 'Chief Operations Officer',
rating: 5,
},

16
src/components/layout/Footer.tsx
View File

@@ -93,7 +93,7 @@ export function Footer() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
{/* Services */}
<div>
<h3 className="font-bold text-[#e58625] text-sm mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#E58625] mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
{footerLinks.services.title}
</h3>
<ul className="space-y-3">
@@ -101,7 +101,7 @@ export function Footer() {
<li key={link.href}>
<Link
href={link.href}
className="text-sm hover:text-[#e58625] transition-colors"
className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] hover:text-[#e58625] transition-colors"
>
{link.label}
</Link>
@@ -112,7 +112,7 @@ export function Footer() {
{/* Service Providers */}
<div>
<h3 className="font-bold text-[#e58625] text-sm mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#E58625] mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
{footerLinks.serviceProviders.title}
</h3>
<ul className="space-y-3">
@@ -120,7 +120,7 @@ export function Footer() {
<li key={link.href}>
<Link
href={link.href}
className="text-sm hover:text-[#e58625] transition-colors"
className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] hover:text-[#e58625] transition-colors"
>
{link.label}
</Link>
@@ -131,7 +131,7 @@ export function Footer() {
{/* Resources */}
<div>
<h3 className="font-bold text-[#e58625] text-sm mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#E58625] mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
{footerLinks.resources.title}
</h3>
<ul className="space-y-3">
@@ -139,7 +139,7 @@ export function Footer() {
<li key={link.href}>
<Link
href={link.href}
className="text-sm hover:text-[#e58625] transition-colors"
className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] hover:text-[#e58625] transition-colors"
>
{link.label}
</Link>
@@ -150,7 +150,7 @@ export function Footer() {
{/* About & Contact */}
<div>
<h3 className="font-bold text-[#e58625] text-sm mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#E58625] mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
{footerLinks.aboutContact.title}
</h3>
<ul className="space-y-3">
@@ -158,7 +158,7 @@ export function Footer() {
<li key={link.href}>
<Link
href={link.href}
className="text-sm hover:text-[#e58625] transition-colors"
className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] hover:text-[#e58625] transition-colors"
>
{link.label}
</Link>