From f9a9ab0d5afcc09df108c88863a0cf9ead9444ff Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 18 Jan 2026 17:56:24 +0530
Subject: [PATCH] ui: Apply `font-fractul` and `font-serif` typography to
 various text elements and buttons across agent dashboard components.

---
 .../agent/dashboard/component/InfoCard.tsx    |  4 +-
 .../component/SpecializationCard.tsx          |  6 +--
 .../(agent)/agent/dashboard/component/Tag.tsx |  2 +-
 .../dashboard/component/TestimonialCard.tsx   |  8 ++--
 src/app/(agent)/agent/dashboard/page.tsx      | 42 +++++++++----------
 5 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/app/(agent)/agent/dashboard/component/InfoCard.tsx b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
index 7c5073e..7c14f49 100644
--- a/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
+++ b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
@@ -10,8 +10,8 @@ export function InfoCard({ title, content, icon }: InfoCardProps) {
   return (
     <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>
-      {title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>}
-      <div className="text-[#00293d] text-sm">{content}</div>
+      {title && <h4 className="font-bold text-[#00293d] text-sm mb-3 font-fractul">{title}</h4>}
+      <div className="text-[#00293d] text-sm font-serif">{content}</div>
     </div>
   );
 }
diff --git a/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx b/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx
index ddf2460..4404ae9 100644
--- a/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx
+++ b/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx
@@ -12,15 +12,15 @@ export function SpecializationCard({ title, items, icon }: SpecializationCardPro
   return (
     <div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
       <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">
         {items.map((item, idx) => (
-          <p key={idx} className="text-[#00293d] text-sm">
+          <p key={idx} className="text-[#00293d] text-sm font-serif">
             {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">
+      <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"
diff --git a/src/app/(agent)/agent/dashboard/component/Tag.tsx b/src/app/(agent)/agent/dashboard/component/Tag.tsx
index de1ea9d..aed7268 100644
--- a/src/app/(agent)/agent/dashboard/component/Tag.tsx
+++ b/src/app/(agent)/agent/dashboard/component/Tag.tsx
@@ -8,7 +8,7 @@ interface TagProps {
 export function Tag({ children, variant = 'default' }: TagProps) {
   return (
     <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'
           ? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
           : variant === 'orange'
diff --git a/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx b/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx
index 1bb3b47..0869d8d 100644
--- a/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx
+++ b/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx
@@ -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">
           <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>
+        <p className="font-bold text-[#00293d] text-sm font-serif">I have been working with Lorem .</p>
       </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="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
           <Image
@@ -31,8 +31,8 @@ export function TestimonialCard({ text, author, role, rating }: TestimonialCardP
         </div>
         <div className="flex-1">
           <StarRating rating={rating} />
-          <p className="font-bold text-[#00293d] text-sm">{author}</p>
-          <p className="text-[#00293d]/50 text-xs">{role}</p>
+          <p className="font-bold text-[#00293d] text-sm font-serif">{author}</p>
+          <p className="text-[#00293d]/50 text-xs font-fractul">{role}</p>
         </div>
       </div>
     </div>
diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx
index dc69ad4..a06d49a 100644
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -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 gap-2 flex-1">
               <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>
-            <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
             </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]">Unavailable.</span>
+              <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]">
+            <button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px] font-fractul">
               Connect
             </button>
           </div>
@@ -146,8 +146,8 @@ export default function AgentDashboard() {
         {/* 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-[family-name:var(--font-fractul)]">
-              <span className="font-bold">{firstName}</span>{' '}
+            <h1 className="text-[18px] text-[#00293d] font-serif">
+              <span className="font-semibold">{firstName}</span>{' '}
               <span className="font-normal">{lastName}</span>
             </h1>
             {agentData.isVerified && (
@@ -172,8 +172,8 @@ export default function AgentDashboard() {
               />
             </button>
           </div>
-          <p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
-          <div className="flex items-center justify-center gap-4 text-sm text-[#00293d]">
+          <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"
@@ -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 gap-2 flex-1">
                 <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>
-              <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
               </button>
             </div>
             <div className="flex items-center border border-[#00293d]/10 rounded-[15px] 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]">Unavailable.</span>
+                <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
               </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
               </button>
             </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>
                 <div className="flex items-center gap-2 mb-1">
-                  <h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]">
-                    <span className="font-bold">{firstName}</span>{' '}
+                  <h1 className="text-[18px] text-[#00293d] font-serif">
+                    <span className="font-semibold">{firstName}</span>{' '}
                     <span className="font-normal">{lastName}</span>
                   </h1>
                   {agentData.isVerified && (
@@ -305,8 +305,8 @@ export default function AgentDashboard() {
                     />
                   </button>
                 </div>
-                <p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
-                <div className="flex items-center gap-4 text-sm text-[#00293d]">
+                <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">
                   <span className="flex items-center gap-1 text-[#e58625] font-medium">
                     <Image
                       src="/assets/icons/location-icon.svg"
@@ -352,7 +352,7 @@ export default function AgentDashboard() {
             </div>
 
             {/* 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 */}
             <div>
@@ -369,7 +369,7 @@ export default function AgentDashboard() {
 
       {/* Experience Section */}
       <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="border-b border-gray-200 pb-4">
             <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 */}
       <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-1 space-y-6">
             <div>
@@ -532,7 +532,7 @@ export default function AgentDashboard() {
       {/* Specialization Section - Single Column on Mobile */}
       <div className="bg-[#e8e8e8] rounded-[20px] p-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>
         </div>
         <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 */}
       <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">
           Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
         </p>