From 132efa70cfc246da323dd4c435704d692d83530d Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 18 Jan 2026 20:28:09 +0530
Subject: [PATCH] style: Update agent dashboard UI by replacing icons, adding
 new SVG assets, and refining component styles and layout.

---
 .../assets/icons/availability-clock-icon.svg  |  3 ++
 public/assets/icons/testimonial-star-icon.svg |  3 ++
 public/assets/icons/work-environment-icon.svg |  3 ++
 .../dashboard/component/ExperienceSection.tsx | 12 ++++----
 .../agent/dashboard/component/InfoCard.tsx    |  2 +-
 .../component/SpecializationSection.tsx       |  2 +-
 src/app/(agent)/agent/dashboard/page.tsx      | 28 +++++++++----------
 7 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/icons/availability-clock-icon.svg
 create mode 100644 public/assets/icons/testimonial-star-icon.svg
 create mode 100644 public/assets/icons/work-environment-icon.svg

diff --git a/public/assets/icons/availability-clock-icon.svg b/public/assets/icons/availability-clock-icon.svg
new file mode 100644
index 0000000..c4d0cd9
--- /dev/null
+++ b/public/assets/icons/availability-clock-icon.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.75 0C21.3441 0 27.5 6.15588 27.5 13.75C27.5 21.3441 21.3441 27.5 13.75 27.5C6.15588 27.5 0 21.3441 0 13.75C0 6.15588 6.15588 0 13.75 0ZM13.75 5.5C13.3853 5.5 13.0356 5.64487 12.7777 5.90273C12.5199 6.16059 12.375 6.51033 12.375 6.875V13.75C12.3751 14.1146 12.52 14.4643 12.7779 14.7221L16.9029 18.8471C17.1622 19.0976 17.5095 19.2362 17.8701 19.2331C18.2306 19.2299 18.5754 19.0853 18.8304 18.8304C19.0853 18.5754 19.2299 18.2306 19.2331 17.8701C19.2362 17.5095 19.0976 17.1622 18.8471 16.9029L15.125 13.1808V6.875C15.125 6.51033 14.9801 6.16059 14.7223 5.90273C14.4644 5.64487 14.1147 5.5 13.75 5.5Z" fill="#E58625"/>
+</svg>
diff --git a/public/assets/icons/testimonial-star-icon.svg b/public/assets/icons/testimonial-star-icon.svg
new file mode 100644
index 0000000..f35e846
--- /dev/null
+++ b/public/assets/icons/testimonial-star-icon.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 27.5C21.3441 27.5 27.5 21.3441 27.5 13.75C27.5 6.15588 21.3441 0 13.75 0C6.15588 0 0 6.15588 0 13.75C0 21.3441 6.15588 27.5 13.75 27.5ZM12.1839 10.1241L12.0051 10.4472C11.8057 10.8034 11.7068 10.9808 11.5528 11.0976C11.3988 11.2145 11.2063 11.2585 10.8212 11.3451L10.472 11.4249C9.119 11.7301 8.4425 11.8841 8.28162 12.4011C8.12075 12.9195 8.58137 13.4585 9.504 14.5365L9.74325 14.8156C10.0045 15.1222 10.1351 15.2749 10.1942 15.4646C10.2534 15.6544 10.2341 15.8593 10.1942 16.2676L10.1585 16.6389C10.0182 18.0785 9.9495 18.7976 10.3702 19.118C10.791 19.4384 11.4249 19.1455 12.6912 18.5639L13.0199 18.4126C13.3787 18.2476 13.5589 18.1637 13.75 18.1637C13.9411 18.1637 14.1213 18.2463 14.4801 18.4113L14.8088 18.5625C16.0738 19.1469 16.709 19.4384 17.1297 19.118C17.5505 18.7976 17.4818 18.0785 17.3415 16.6403L17.3057 16.2676C17.2659 15.8593 17.2466 15.6544 17.3057 15.4646C17.3649 15.2749 17.4955 15.1209 17.7568 14.8156L17.996 14.5365C18.9172 13.4585 19.3792 12.9195 19.2184 12.4011C19.0575 11.8841 18.381 11.7301 17.028 11.4249L16.6788 11.3451C16.2938 11.2585 16.1012 11.2145 15.9472 11.0976C15.7932 10.9808 15.6943 10.8034 15.4963 10.4472L15.3161 10.1241C14.619 8.87425 14.2711 8.25 13.75 8.25C13.2289 8.25 12.881 8.87425 12.1839 10.1241Z" fill="#E58625"/>
+</svg>
diff --git a/public/assets/icons/work-environment-icon.svg b/public/assets/icons/work-environment-icon.svg
new file mode 100644
index 0000000..011e861
--- /dev/null
+++ b/public/assets/icons/work-environment-icon.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 27.5V5.15625L6.875 0L13.75 5.15625V8.25H27.5V27.5H0ZM2.75 24.75H5.5V22H2.75V24.75ZM2.75 19.25H5.5V16.5H2.75V19.25ZM2.75 13.75H5.5V11H2.75V13.75ZM2.75 8.25H5.5V5.5H2.75V8.25ZM8.25 8.25H11V5.5H8.25V8.25ZM8.25 24.75H24.75V11H8.25V24.75ZM16.5 16.5V13.75H22V16.5H16.5ZM16.5 22V19.25H22V22H16.5ZM11 16.5V13.75H13.75V16.5H11ZM11 22V19.25H13.75V22H11Z" fill="#E58625"/>
+</svg>
diff --git a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
index 945aa5f..d54a523 100644
--- a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
+++ b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
@@ -27,6 +27,8 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
               <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.years}</li>
             </ul>
           </div>
+          {/* Horizontal divider */}
+          <div className="w-full h-0 border-t-[0.1px] border-solid border-[#00293D]" />
           <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">
@@ -56,7 +58,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
             <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
             <div className="flex flex-wrap gap-2">
               {experience.expertiseYears.slice(0, 4).map((item, idx) => (
-                <Tag key={idx} variant="orange">
+                <Tag key={idx} variant="light">
                   {item.area} – {item.years}
                 </Tag>
               ))}
@@ -64,12 +66,12 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
             </div>
           </div>
           <div>
-            <p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] 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 key={idx}>
+                  <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">• {cert.name}</span>
+                  <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
                 </li>
               ))}
             </ul>
diff --git a/src/app/(agent)/agent/dashboard/component/InfoCard.tsx b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
index 7c14f49..01ee92c 100644
--- a/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
+++ b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx
@@ -10,7 +10,7 @@ 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 font-fractul">{title}</h4>}
+      {title && <h4 className="font-semibold text-[#00293D] text-[14px] leading-[19px] mb-3 font-serif">{title}</h4>}
       <div className="text-[#00293d] text-sm font-serif">{content}</div>
     </div>
   );
diff --git a/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx b/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
index 73253a3..8fbfecb 100644
--- a/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
+++ b/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
@@ -19,7 +19,7 @@ export function SpecializationSection({ specialization }: SpecializationSectionP
   return (
     <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>
+        <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>
       </div>
       <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx
index 4627602..a770dbd 100644
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -136,46 +136,46 @@ export default function AgentDashboard() {
               title="Availability"
               icon={
                 <Image
-                  src="/assets/icons/clock-icon.svg"
+                  src="/assets/icons/availability-clock-icon.svg"
                   alt="Availability"
-                  width={32}
-                  height={32}
+                  width={28}
+                  height={31}
                 />
               }
               content={
                 <div>
-                  <p className="font-semibold mb-2">{agentData.availability.type}</p>
+                  <p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{agentData.availability.type}</p>
                   <div className="space-y-1">
                     {agentData.availability.days.map((day) => (
-                      <p key={day}>{day}</p>
+                      <p key={day} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{day}</p>
                     ))}
                   </div>
                 </div>
               }
             />
             <InfoCard
-              title="Preferred work environment"
+              title=""
               icon={
                 <Image
-                  src="/assets/icons/location-large-icon.svg"
+                  src="/assets/icons/work-environment-icon.svg"
                   alt="Work environment"
-                  width={32}
-                  height={32}
+                  width={28}
+                  height={28}
                 />
               }
-              content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
+              content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{agentData.preferredWorkEnvironment}</p>}
             />
             <InfoCard
               title=""
               icon={
                 <Image
-                  src="/assets/icons/star-icon.svg"
+                  src="/assets/icons/testimonial-star-icon.svg"
                   alt="Testimonial"
-                  width={32}
-                  height={32}
+                  width={28}
+                  height={28}
                 />
               }
-              content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
+              content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
             />
           </div>