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

ui: Apply font-fractul and font-serif typography to various text elements and buttons across agent dashboard components.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 17:56:24 +05:30
parent 59fcc65489
commit f9a9ab0d5a
5 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,8 @@ export function InfoCard({ title, content, icon }: InfoCardProps) {
return ( return (
<div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center"> <div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
<div className="flex justify-center mb-3">{icon}</div> <div className="flex justify-center mb-3">{icon}</div>
{title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>} {title && <h4 className="font-bold text-[#00293d] text-sm mb-3 font-fractul">{title}</h4>}
<div className="text-[#00293d] text-sm">{content}</div> <div className="text-[#00293d] text-sm font-serif">{content}</div>
</div> </div>
); );
} }

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

@@ -12,15 +12,15 @@ export function SpecializationCard({ title, items, icon }: SpecializationCardPro
return ( return (
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm"> <div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
<div className="flex justify-center mb-3">{icon}</div> <div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4> <h4 className="font-bold text-[#00293d] text-sm mb-4 font-fractul">{title}</h4>
<div className="space-y-1"> <div className="space-y-1">
{items.map((item, idx) => ( {items.map((item, idx) => (
<p key={idx} className="text-[#00293d] text-sm"> <p key={idx} className="text-[#00293d] text-sm font-serif">
{item} {item}
</p> </p>
))} ))}
</div> </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"> <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 Show More
<Image <Image
src="/assets/icons/chevron-down-icon.svg" src="/assets/icons/chevron-down-icon.svg"

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

@@ -8,7 +8,7 @@ interface TagProps {
export function Tag({ children, variant = 'default' }: TagProps) { export function Tag({ children, variant = 'default' }: TagProps) {
return ( return (
<span <span
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${ className={`inline-flex items-center px-3 py-1 rounded-full text-sm border font-fractul ${
variant === 'light' variant === 'light'
? 'border-[#00293d]/30 text-[#00293d] bg-transparent' ? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
: variant === 'orange' : variant === 'orange'

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

@@ -17,9 +17,9 @@ export function TestimonialCard({ text, author, role, rating }: TestimonialCardP
<div className="w-8 h-8 rounded-full bg-[#e58625]/20 flex items-center justify-center flex-shrink-0"> <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> <span className="text-[#e58625] text-lg font-serif">&ldquo;</span>
</div> </div>
<p className="font-bold text-[#00293d] text-sm">I have been working with Lorem .</p> <p className="font-bold text-[#00293d] text-sm font-serif">I have been working with Lorem .</p>
</div> </div>
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{text}</p> <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="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"> <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
<Image <Image
@@ -31,8 +31,8 @@ export function TestimonialCard({ text, author, role, rating }: TestimonialCardP
</div> </div>
<div className="flex-1"> <div className="flex-1">
<StarRating rating={rating} /> <StarRating rating={rating} />
<p className="font-bold text-[#00293d] text-sm">{author}</p> <p className="font-bold text-[#00293d] text-sm font-serif">{author}</p>
<p className="text-[#00293d]/50 text-xs">{role}</p> <p className="text-[#00293d]/50 text-xs font-fractul">{role}</p>
</div> </div>
</div> </div>
</div> </div>

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

@@ -106,18 +106,18 @@ export default function AgentDashboard() {
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-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"> <div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" /> <span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Available.</span> <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div> </div>
<button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px]"> <button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px] font-fractul">
Connect Connect
</button> </button>
</div> </div>
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-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"> <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="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Unavailable.</span> <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
</div> </div>
<button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px]"> <button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px] font-fractul">
Connect Connect
</button> </button>
</div> </div>
@@ -146,8 +146,8 @@ export default function AgentDashboard() {
{/* Name and Info - Centered for Mobile */} {/* Name and Info - Centered for Mobile */}
<div className="text-center mb-4"> <div className="text-center mb-4">
<div className="flex items-center justify-center gap-2 mb-1"> <div className="flex items-center justify-center gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]"> <h1 className="text-[18px] text-[#00293d] font-serif">
<span className="font-bold">{firstName}</span>{' '} <span className="font-semibold">{firstName}</span>{' '}
<span className="font-normal">{lastName}</span> <span className="font-normal">{lastName}</span>
</h1> </h1>
{agentData.isVerified && ( {agentData.isVerified && (
@@ -172,8 +172,8 @@ export default function AgentDashboard() {
/> />
</button> </button>
</div> </div>
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p> <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]"> <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"> <span className="flex items-center gap-1 text-[#e58625] font-medium">
<Image <Image
src="/assets/icons/location-icon.svg" src="/assets/icons/location-icon.svg"
@@ -234,18 +234,18 @@ export default function AgentDashboard() {
<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] px-4">
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" /> <span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Available.</span> <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div> </div>
<button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors"> <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
Connect Connect
</button> </button>
</div> </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] px-4">
<div className="flex items-center gap-2 flex-1"> <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="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d]">Unavailable.</span> <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
</div> </div>
<button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors"> <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
Connect Connect
</button> </button>
</div> </div>
@@ -279,8 +279,8 @@ export default function AgentDashboard() {
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4"> <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]"> <h1 className="text-[18px] text-[#00293d] font-serif">
<span className="font-bold">{firstName}</span>{' '} <span className="font-semibold">{firstName}</span>{' '}
<span className="font-normal">{lastName}</span> <span className="font-normal">{lastName}</span>
</h1> </h1>
{agentData.isVerified && ( {agentData.isVerified && (
@@ -305,8 +305,8 @@ export default function AgentDashboard() {
/> />
</button> </button>
</div> </div>
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p> <p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
<div className="flex items-center gap-4 text-sm text-[#00293d]"> <div className="flex items-center gap-4 text-sm text-[#00293d] font-fractul">
<span className="flex items-center gap-1 text-[#e58625] font-medium"> <span className="flex items-center gap-1 text-[#e58625] font-medium">
<Image <Image
src="/assets/icons/location-icon.svg" src="/assets/icons/location-icon.svg"
@@ -352,7 +352,7 @@ export default function AgentDashboard() {
</div> </div>
{/* Bio */} {/* Bio */}
<p className="text-[#00293d] text-sm leading-relaxed mb-4">{agentData.bio}</p> <p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif">{agentData.bio}</p>
{/* Expertise Tags */} {/* Expertise Tags */}
<div> <div>
@@ -369,7 +369,7 @@ export default function AgentDashboard() {
{/* Experience Section */} {/* Experience Section */}
<div className="lg:hidden"> <div className="lg:hidden">
<h2 className="text-xl font-bold text-[#00293d] text-center mb-6">Experience</h2> <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="space-y-4 px-4">
<div className="border-b border-gray-200 pb-4"> <div className="border-b border-gray-200 pb-4">
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p> <p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
@@ -423,7 +423,7 @@ export default function AgentDashboard() {
{/* Desktop Experience Section */} {/* Desktop Experience Section */}
<div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6"> <div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
<h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2> <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6">Experience</h2>
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
<div> <div>
@@ -532,7 +532,7 @@ export default function AgentDashboard() {
{/* Specialization Section - Single Column on Mobile */} {/* Specialization Section - Single Column on Mobile */}
<div className="bg-[#e8e8e8] rounded-[20px] p-8"> <div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d]">Specialization</h2> <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> <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div> </div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6"> <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
@@ -603,7 +603,7 @@ export default function AgentDashboard() {
{/* Testimonials Section - Single Column on Mobile */} {/* Testimonials Section - Single Column on Mobile */}
<div className="bg-white rounded-[20px] border border-gray-200 p-8"> <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> <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"> <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. Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
</p> </p>