From 867fb0693b8e30d61e550f42e81bd62558ee2f73 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 18 Jan 2026 19:39:46 +0530
Subject: [PATCH] feat: Add ProfileCard, SpecializationSection, and
 TestimonialsSection components to the agent dashboard, and update styling for
 ExperienceSection.

---
 .../dashboard/component/ExperienceSection.tsx |   4 +-
 .../agent/dashboard/component/ProfileCard.tsx | 127 +++++++++++
 .../component/SpecializationSection.tsx       |  91 ++++++++
 .../component/TestimonialsSection.tsx         |  37 ++++
 .../agent/dashboard/component/index.ts        |   3 +
 src/app/(agent)/agent/dashboard/page.tsx      | 199 ++----------------
 6 files changed, 275 insertions(+), 186 deletions(-)
 create mode 100644 src/app/(agent)/agent/dashboard/component/ProfileCard.tsx
 create mode 100644 src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
 create mode 100644 src/app/(agent)/agent/dashboard/component/TestimonialsSection.tsx

diff --git a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
index f8b8f57..c3f6ae3 100644
--- a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
+++ b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
@@ -16,8 +16,8 @@ interface ExperienceSectionProps {
 
 export function ExperienceSection({ experience }: ExperienceSectionProps) {
   return (
-    <div className="bg-white rounded-[20px] border border-gray-200 p-6">
-      <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6 text-center lg:text-left">Experience</h2>
+    <div className="bg-white rounded-[20px] p-6">
+      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-6 text-center lg:text-left">Experience</h2>
       <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
         {/* Left Column */}
         <div className="flex-1 space-y-6">
diff --git a/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx b/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx
new file mode 100644
index 0000000..9d01505
--- /dev/null
+++ b/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import Image from 'next/image';
+import { Tag } from './Tag';
+
+interface ProfileCardProps {
+  firstName: string;
+  lastName: string;
+  isVerified: boolean;
+  title: string;
+  location: string;
+  memberSince: string;
+  bio: string;
+  expertise: string[];
+}
+
+export function ProfileCard({
+  firstName,
+  lastName,
+  isVerified,
+  title,
+  location,
+  memberSince,
+  bio,
+  expertise,
+}: ProfileCardProps) {
+  return (
+    <div className="bg-white rounded-[20px] 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 className="text-center lg:text-left">
+          <div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
+            <h1 className="text-[18px] text-[#00293d] font-serif">
+              <span className="font-semibold">{firstName}</span>{' '}
+              <span className="font-normal">{lastName}</span>
+            </h1>
+            {isVerified && (
+              <>
+                <Image
+                  src="/assets/icons/verified-icon.svg"
+                  alt="Verified"
+                  width={15}
+                  height={14}
+                />
+                <span className="text-[14px] text-[#638559] font-medium font-serif">
+                  (Verified Expert)
+                </span>
+              </>
+            )}
+            <button className="p-1 hover:bg-gray-100 rounded transition-colors">
+              <Image
+                src="/assets/icons/edit-pencil-orange-icon.svg"
+                alt="Edit name"
+                width={16}
+                height={16}
+              />
+            </button>
+          </div>
+          <p className="text-[#00293d] text-sm mb-2 font-fractul">{title}</p>
+          <div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
+            <span className="flex items-center gap-1">
+              <Image
+                src="/assets/icons/location-pin-icon.svg"
+                alt="Location"
+                width={21}
+                height={19}
+              />
+              <span className="text-[14px] font-bold text-[#00293D] font-serif leading-[19px]">
+                {location}
+              </span>
+            </span>
+            <span className="flex items-center gap-1">
+              <Image
+                src="/assets/icons/calendar-icon.svg"
+                alt="Calendar"
+                width={23}
+                height={21}
+              />
+              <span className="text-[13px] font-medium text-[#00293D] font-serif leading-[18px]">
+                Member Since {memberSince}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center justify-center lg:justify-start gap-3">
+          <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
+            <Image
+              src="/assets/icons/message-dark-icon.svg"
+              alt="Message"
+              width={14}
+              height={13}
+            />
+            Message
+          </button>
+          <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
+            <Image
+              src="/assets/icons/requests-dark-icon.svg"
+              alt="Requests"
+              width={14}
+              height={13}
+            />
+            Requests
+          </button>
+        </div>
+      </div>
+
+      {/* Bio */}
+      <p className="text-[14px] font-normal text-[#00293D] font-serif leading-[20px] mb-4 text-center lg:text-left">
+        {bio}
+      </p>
+
+      {/* Expertise Tags */}
+      <div>
+        <p className="text-[14px] font-bold text-[#00293D] font-fractul leading-[17px] mb-2 text-center lg:text-left">
+          Expertise:
+        </p>
+        <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
+          {expertise.map((tag, idx) => (
+            <Tag key={idx}>{tag}</Tag>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx b/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
new file mode 100644
index 0000000..73253a3
--- /dev/null
+++ b/src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import Image from 'next/image';
+import { SpecializationCard } from './SpecializationCard';
+
+interface SpecializationData {
+  types: string[];
+  loanTypes: string[];
+  propertyTypes: string[];
+  hobbies: string[];
+  pricePoints: string[];
+}
+
+interface SpecializationSectionProps {
+  specialization: SpecializationData;
+}
+
+export function SpecializationSection({ specialization }: SpecializationSectionProps) {
+  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>
+        <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">
+        <SpecializationCard
+          title="Specialization"
+          items={specialization.types}
+          icon={
+            <Image
+              src="/assets/icons/home-icon.svg"
+              alt="Specialization"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Loan Type"
+          items={specialization.loanTypes}
+          icon={
+            <Image
+              src="/assets/icons/wallet-icon.svg"
+              alt="Loan Type"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Property Type"
+          items={specialization.propertyTypes}
+          icon={
+            <Image
+              src="/assets/icons/chart-icon.svg"
+              alt="Property Type"
+              width={24}
+              height={24}
+            />
+          }
+        />
+      </div>
+      <div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
+        <SpecializationCard
+          title="Hobbies & Interests"
+          items={specialization.hobbies}
+          icon={
+            <Image
+              src="/assets/icons/heart-icon.svg"
+              alt="Hobbies"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Price Point"
+          items={specialization.pricePoints}
+          icon={
+            <Image
+              src="/assets/icons/dollar-icon.svg"
+              alt="Price Point"
+              width={24}
+              height={24}
+            />
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(agent)/agent/dashboard/component/TestimonialsSection.tsx b/src/app/(agent)/agent/dashboard/component/TestimonialsSection.tsx
new file mode 100644
index 0000000..15d69c5
--- /dev/null
+++ b/src/app/(agent)/agent/dashboard/component/TestimonialsSection.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { TestimonialCard } from './TestimonialCard';
+
+interface Testimonial {
+  id: number;
+  text: string;
+  author: string;
+  role: string;
+  rating: number;
+}
+
+interface TestimonialsSectionProps {
+  testimonials: Testimonial[];
+}
+
+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">
+        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">
+        {testimonials.map((testimonial) => (
+          <TestimonialCard
+            key={testimonial.id}
+            text={testimonial.text}
+            author={testimonial.author}
+            role={testimonial.role}
+            rating={testimonial.rating}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(agent)/agent/dashboard/component/index.ts b/src/app/(agent)/agent/dashboard/component/index.ts
index 94c0076..7336ff9 100644
--- a/src/app/(agent)/agent/dashboard/component/index.ts
+++ b/src/app/(agent)/agent/dashboard/component/index.ts
@@ -5,5 +5,8 @@ export { InfoCard } from './InfoCard';
 export { SpecializationCard } from './SpecializationCard';
 export { ProfileSidebar } from './ProfileSidebar';
 export { ProfileHeader } from './ProfileHeader';
+export { ProfileCard } from './ProfileCard';
 export { ExperienceSection } from './ExperienceSection';
+export { SpecializationSection } from './SpecializationSection';
 export { TestimonialCard } from './TestimonialCard';
+export { TestimonialsSection } from './TestimonialsSection';
diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx
index 1d6838b..2ab6093 100644
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -5,11 +5,11 @@ import Image from 'next/image';
 
 // Import components from component folder
 import {
-  Tag,
   InfoCard,
-  SpecializationCard,
-  TestimonialCard,
   ExperienceSection,
+  ProfileCard,
+  SpecializationSection,
+  TestimonialsSection,
 } from './component';
 
 // Mock agent data - in production, this would come from API
@@ -158,100 +158,16 @@ export default function AgentDashboard() {
         {/* Right Content - Profile Info + Experience + All Sections */}
         <div className="flex-1 space-y-6">
           {/* Profile 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 className="text-center lg:text-left">
-                <div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
-                  <h1 className="text-[18px] text-[#00293d] font-serif">
-                    <span className="font-semibold">{firstName}</span>{' '}
-                    <span className="font-normal">{lastName}</span>
-                  </h1>
-                  {agentData.isVerified && (
-                    <>
-                      <Image
-                        src="/assets/icons/verified-icon.svg"
-                        alt="Verified"
-                        width={15}
-                        height={14}
-                      />
-                      <span className="text-[14px] text-[#638559] font-medium font-serif">
-                        (Verified Expert)
-                      </span>
-                    </>
-                  )}
-                  <button className="p-1 hover:bg-gray-100 rounded transition-colors">
-                    <Image
-                      src="/assets/icons/edit-pencil-orange-icon.svg"
-                      alt="Edit name"
-                      width={16}
-                      height={16}
-                    />
-                  </button>
-                </div>
-                <p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
-                <div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
-                  <span className="flex items-center gap-1">
-                    <Image
-                      src="/assets/icons/location-pin-icon.svg"
-                      alt="Location"
-                      width={21}
-                      height={19}
-                    />
-                    <span className="text-[14px] font-bold text-[#00293D] font-serif leading-[19px]">
-                      {agentData.location}
-                    </span>
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Image
-                      src="/assets/icons/calendar-icon.svg"
-                      alt="Calendar"
-                      width={23}
-                      height={21}
-                    />
-                    <span className="text-[13px] font-medium text-[#00293D] font-serif leading-[18px]">
-                      Member Since {agentData.memberSince}
-                    </span>
-                  </span>
-                </div>
-              </div>
-
-              {/* Action Buttons */}
-              <div className="flex items-center justify-center lg:justify-start gap-3">
-                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
-                  <Image
-                    src="/assets/icons/message-dark-icon.svg"
-                    alt="Message"
-                    width={14}
-                    height={13}
-                  />
-                  Message
-                </button>
-                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
-                  <Image
-                    src="/assets/icons/requests-dark-icon.svg"
-                    alt="Requests"
-                    width={14}
-                    height={13}
-                  />
-                  Requests
-                </button>
-              </div>
-            </div>
-
-            {/* Bio */}
-            <p className="text-[14px] font-normal text-[#00293D] font-serif leading-[20px] mb-4 text-center lg:text-left">{agentData.bio}</p>
-
-            {/* Expertise Tags */}
-            <div>
-              <p className="text-[14px] font-bold text-[#00293D] font-fractul leading-[17px] mb-2 text-center lg:text-left">Expertise:</p>
-              <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
-                {agentData.expertise.map((tag, idx) => (
-                  <Tag key={idx}>{tag}</Tag>
-                ))}
-              </div>
-            </div>
-          </div>
+          <ProfileCard
+            firstName={firstName}
+            lastName={lastName}
+            isVerified={agentData.isVerified}
+            title={agentData.title}
+            location={agentData.location}
+            memberSince={agentData.memberSince}
+            bio={agentData.bio}
+            expertise={agentData.expertise}
+          />
 
           {/* Experience Section */}
           <ExperienceSection experience={agentData.experience} />
@@ -306,95 +222,10 @@ export default function AgentDashboard() {
           </div>
 
           {/* Specialization Section */}
-          <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>
-              <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">
-              <SpecializationCard
-                title="Specialization"
-                items={agentData.specialization.types}
-                icon={
-                  <Image
-                    src="/assets/icons/home-icon.svg"
-                    alt="Specialization"
-                    width={24}
-                    height={24}
-                  />
-                }
-              />
-              <SpecializationCard
-                title="Loan Type"
-                items={agentData.specialization.loanTypes}
-                icon={
-                  <Image
-                    src="/assets/icons/wallet-icon.svg"
-                    alt="Loan Type"
-                    width={24}
-                    height={24}
-                  />
-                }
-              />
-              <SpecializationCard
-                title="Property Type"
-                items={agentData.specialization.propertyTypes}
-                icon={
-                  <Image
-                    src="/assets/icons/chart-icon.svg"
-                    alt="Property Type"
-                    width={24}
-                    height={24}
-                  />
-                }
-              />
-            </div>
-            <div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
-              <SpecializationCard
-                title="Hobbies & Interests"
-                items={agentData.specialization.hobbies}
-                icon={
-                  <Image
-                    src="/assets/icons/heart-icon.svg"
-                    alt="Hobbies"
-                    width={24}
-                    height={24}
-                  />
-                }
-              />
-              <SpecializationCard
-                title="Price Point"
-                items={agentData.specialization.pricePoints}
-                icon={
-                  <Image
-                    src="/assets/icons/dollar-icon.svg"
-                    alt="Price Point"
-                    width={24}
-                    height={24}
-                  />
-                }
-              />
-            </div>
-          </div>
+          <SpecializationSection specialization={agentData.specialization} />
 
           {/* Testimonials Section */}
-          <div className="bg-white rounded-[20px] border border-gray-200 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">
-              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">
-              {agentData.testimonials.map((testimonial) => (
-                <TestimonialCard
-                  key={testimonial.id}
-                  text={testimonial.text}
-                  author={testimonial.author}
-                  role={testimonial.role}
-                  rating={testimonial.rating}
-                />
-              ))}
-            </div>
-          </div>
+          <TestimonialsSection testimonials={agentData.testimonials} />
         </div>
       </div>
     </div>