mobiel view

public/assets/icons/edit-pencil-orange-icon.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 5H3C2.46957 5 1.96086 5.21071 1.58579 5.58579C1.21071 5.96086 1 6.46957 1 7V16C1 16.5304 1.21071 17.0391 1.58579 17.4142C1.96086 17.7893 2.46957 18 3 18H12C12.5304 18 13.0391 17.7893 13.4142 17.4142C13.7893 17.0391 14 16.5304 14 16V15" stroke="#E58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 3L16 6M17.385 4.585C17.7788 4.19115 18.0001 3.65698 18.0001 3.1C18.0001 2.54302 17.7788 2.00885 17.385 1.615C16.9912 1.22115 16.457 0.999893 15.9 0.999893C15.343 0.999893 14.8088 1.22115 14.415 1.615L6 10V13H9L17.385 4.585Z" stroke="#E58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx

@@ -51,10 +51,10 @@ export function ProfileHeader({
             )}
             <button className="p-1 hover:bg-gray-100 rounded transition-colors">
               <Image
-                src="/assets/icons/edit-pencil-icon.svg"
+                src="/assets/icons/edit-pencil-orange-icon.svg"
                 alt="Edit name"
-                width={16}
-                height={16}
+                width={19}
+                height={19}
               />
             </button>
           </div>

src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx

@@ -10,9 +10,9 @@ interface ProfileSidebarProps {
 
 export function ProfileSidebar({ profileImage, email, phone }: ProfileSidebarProps) {
   return (
-    <div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
+    <div className="w-full lg:w-[220px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
       {/* Profile Image */}
-      <div className="relative mx-auto lg:mx-0">
+      <div className="relative w-[200px]">
         <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
           <Image
             src={profileImage}

src/app/(agent)/agent/dashboard/page.tsx

@@ -5,13 +5,9 @@ import Image from 'next/image';
 
 // Import components from component folder
 import {
-  StarRating,
   Tag,
   InfoCard,
   SpecializationCard,
-  ProfileSidebar,
-  ProfileHeader,
-  ExperienceSection,
   TestimonialCard,
 } from './component';
 
@@ -58,22 +54,15 @@ const agentData = {
   testimonials: [
     {
       id: 1,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
-      author: 'Kennedy Kenney',
+      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',
       role: 'Chief Operations Officer',
       rating: 5,
     },
     {
       id: 2,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
-      author: 'Kennedy 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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
-      author: 'Kennedy Kenney',
+      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',
       role: 'Chief Operations Officer',
       rating: 5,
     },
@@ -82,37 +71,411 @@ const agentData = {
 
 export default function AgentDashboard() {
   const { data: session } = useSession();
+  const [firstName, lastName] = agentData.name.split(' ');
 
   return (
     <div className="space-y-6">
-      {/* Main Profile Section with Left Sidebar */}
-      <div className="flex flex-col lg:flex-row gap-6">
+      {/* Mobile: Profile Image at Top */}
+      <div className="lg:hidden flex flex-col items-center">
+        {/* Profile Image */}
+        <div className="relative w-[200px] mb-4">
+          <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
+            <Image
+              src={agentData.profileImage}
+              alt="Profile"
+              width={200}
+              height={200}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
+            <Image
+              src="/assets/icons/edit-icon.svg"
+              alt="Edit profile"
+              width={20}
+              height={20}
+            />
+          </button>
+        </div>
+
+        {/* Available/Unavailable Buttons */}
+        <div className="w-full max-w-[354px] space-y-2 mb-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">
+              <span className="w-3 h-3 bg-green-500 rounded-full" />
+              <span className="text-sm font-bold text-[#00293d]">Available.</span>
+            </div>
+            <button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px]">
+              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>
+            </div>
+            <button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px]">
+              Connect
+            </button>
+          </div>
+        </div>
+
+        {/* Contact Info Card */}
+        <div className="w-full max-w-[354px] border border-[#00293d]/10 rounded-[15px] p-4 mb-6">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="font-bold text-[#00293d] text-sm">Email:</span>
+            <span className="text-[#00293d] text-sm font-serif">********brian@gmail.com</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
+            <span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
+            <button className="p-1 hover:bg-gray-100 rounded ml-auto">
+              <Image
+                src="/assets/icons/edit-pencil-icon.svg"
+                alt="Edit phone"
+                width={16}
+                height={16}
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* 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>{' '}
+              <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-icon.svg"
+                alt="Edit name"
+                width={16}
+                height={16}
+              />
+            </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]">
+            <span className="flex items-center gap-1 text-[#e58625] font-medium">
+              <Image
+                src="/assets/icons/location-icon.svg"
+                alt="Location"
+                width={16}
+                height={16}
+              />
+              {agentData.location}
+            </span>
+            <span className="flex items-center gap-1">
+              <Image
+                src="/assets/icons/calendar-icon.svg"
+                alt="Calendar"
+                width={16}
+                height={16}
+              />
+              Member Since {agentData.memberSince}
+            </span>
+          </div>
+        </div>
+
+        {/* Bio - Centered for Mobile */}
+        <p className="text-[#00293d] text-sm leading-relaxed text-center max-w-[338px] mb-4 font-serif">
+          {agentData.bio}
+        </p>
+      </div>
+
+      {/* Desktop: Original Layout */}
+      <div className="hidden lg:flex flex-row gap-6 items-start">
         {/* Left Sidebar - Status & Contact */}
-        <ProfileSidebar
-          profileImage={agentData.profileImage}
-          email="*****brian@gmail.com"
-          phone={agentData.phone}
-        />
+        <div className="w-[220px] flex-shrink-0 space-y-4">
+          {/* Profile Image */}
+          <div className="relative w-[200px]">
+            <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
+              <Image
+                src={agentData.profileImage}
+                alt="Profile"
+                width={200}
+                height={200}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
+              <Image
+                src="/assets/icons/edit-icon.svg"
+                alt="Edit profile"
+                width={20}
+                height={20}
+              />
+            </button>
+          </div>
+
+          {/* Status Buttons */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
+                <span className="w-2 h-2 bg-green-500 rounded-full" />
+                <span className="text-sm text-[#00293d]">Available.</span>
+              </div>
+              <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
+                Connect
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
+                <span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
+                <span className="text-sm text-[#00293d]">Unavailable.</span>
+              </div>
+              <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
+                Connect
+              </button>
+            </div>
+          </div>
+
+          {/* Contact Info */}
+          <div className="space-y-2 pt-2">
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-bold text-[#00293d]">Email:</span>
+              <span className="text-[#00293d]">*****brian@gmail.com</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-bold text-[#00293d]">Ph.No:</span>
+              <span className="text-[#00293d]">{agentData.phone}</span>
+              <button className="p-1 hover:bg-gray-100 rounded">
+                <Image
+                  src="/assets/icons/edit-pencil-icon.svg"
+                  alt="Edit phone"
+                  width={16}
+                  height={16}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
 
         {/* Right Content - Profile Info */}
         <div className="flex-1">
-          <ProfileHeader
-            name={agentData.name}
-            isVerified={agentData.isVerified}
-            title={agentData.title}
-            location={agentData.location}
-            memberSince={agentData.memberSince}
-            bio={agentData.bio}
-            expertise={agentData.expertise}
-          />
+          <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>
+                <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>{' '}
+                    <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-icon.svg"
+                      alt="Edit name"
+                      width={16}
+                      height={16}
+                    />
+                  </button>
+                </div>
+                <p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
+                <div className="flex items-center gap-4 text-sm text-[#00293d]">
+                  <span className="flex items-center gap-1 text-[#e58625] font-medium">
+                    <Image
+                      src="/assets/icons/location-icon.svg"
+                      alt="Location"
+                      width={16}
+                      height={16}
+                    />
+                    {agentData.location}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Image
+                      src="/assets/icons/calendar-icon.svg"
+                      alt="Calendar"
+                      width={16}
+                      height={16}
+                    />
+                    Member Since {agentData.memberSince}
+                  </span>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex items-center gap-3">
+                <button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
+                  <Image
+                    src="/assets/icons/message-icon.svg"
+                    alt="Message"
+                    width={16}
+                    height={16}
+                  />
+                  Message
+                </button>
+                <button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
+                  <Image
+                    src="/assets/icons/clipboard-icon.svg"
+                    alt="Requests"
+                    width={16}
+                    height={16}
+                  />
+                  Requests
+                </button>
+              </div>
+            </div>
+
+            {/* Bio */}
+            <p className="text-[#00293d] text-sm leading-relaxed mb-4">{agentData.bio}</p>
+
+            {/* Expertise Tags */}
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
+              <div className="flex flex-wrap gap-2">
+                {agentData.expertise.map((tag, idx) => (
+                  <Tag key={idx}>{tag}</Tag>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
       {/* Experience Section */}
-      <ExperienceSection experience={agentData.experience} />
+      <div className="lg:hidden">
+        <h2 className="text-xl font-bold text-[#00293d] 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>
+            <ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
+              <li>{agentData.experience.years}</li>
+            </ul>
+          </div>
+          <div className="border-b border-gray-200 pb-4">
+            <p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
+            <ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
+              <li>{agentData.experience.contracts}</li>
+            </ul>
+          </div>
+          <div className="pb-4">
+            <p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
+            <div className="flex flex-wrap gap-2">
+              {agentData.experience.licensingAreas.map((area, idx) => (
+                <Tag key={idx} variant="light">{area}</Tag>
+              ))}
+              <span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
+                +3 More
+              </span>
+            </div>
+          </div>
+          <div className="pb-4">
+            <p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
+            <div className="flex flex-wrap gap-2">
+              {agentData.experience.expertiseYears.map((item, idx) => (
+                <Tag key={idx} variant="light">
+                  {item.area} – {item.years}
+                </Tag>
+              ))}
+              <span className="inline-flex items-center px-3 py-1 rounded-full text-sm border border-[#00293d]/10 text-[#00293d]">
+                +3More
+              </span>
+            </div>
+          </div>
+          <div>
+            <p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
+            <ul className="space-y-3">
+              {agentData.experience.certifications.map((cert, idx) => (
+                <li key={idx} className="text-[#00293d] text-sm">
+                  <span className="font-serif">• {cert.name}</span>
+                  <p className="text-[#00293d]/50 text-sm ml-3 font-serif">{cert.org}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
 
-      {/* Info Cards Section */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {/* 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>
+        <div className="flex flex-col lg:flex-row gap-8">
+          <div className="flex-1 space-y-6">
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
+              <ul className="list-disc list-inside text-[#00293d] text-sm">
+                <li>{agentData.experience.years}</li>
+              </ul>
+            </div>
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
+              <ul className="list-disc list-inside text-[#00293d] text-sm">
+                <li>{agentData.experience.contracts}</li>
+              </ul>
+            </div>
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
+              <div className="flex flex-wrap gap-2">
+                {agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => (
+                  <Tag key={idx} variant="light">{area}</Tag>
+                ))}
+                {agentData.experience.licensingAreas.length > 5 && (
+                  <span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.licensingAreas.length - 5} More</span>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="hidden lg:block w-px bg-gray-200" />
+          <div className="flex-1 space-y-6">
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
+              <div className="flex flex-wrap gap-2">
+                {agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => (
+                  <Tag key={idx} variant="orange">
+                    {item.area} – {item.years}
+                  </Tag>
+                ))}
+                {agentData.experience.expertiseYears.length > 3 && (
+                  <span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.expertiseYears.length - 3}More</span>
+                )}
+              </div>
+            </div>
+            <div>
+              <p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
+              <ul className="space-y-3">
+                {agentData.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>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Info Cards Section - Stack on Mobile */}
+      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
         <InfoCard
           title="Availability"
           icon={
@@ -160,13 +523,13 @@ export default function AgentDashboard() {
         />
       </div>
 
-      {/* Specialization Section - Light Gray Background */}
+      {/* 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>
           <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+        <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
           <SpecializationCard
             title="Specialization"
             items={agentData.specialization.types}
@@ -204,7 +567,7 @@ export default function AgentDashboard() {
             }
           />
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
+        <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}
@@ -232,13 +595,13 @@ export default function AgentDashboard() {
         </div>
       </div>
 
-      {/* Testimonials Section */}
+      {/* 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>
         <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="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
           {agentData.testimonials.map((testimonial) => (
             <TestimonialCard
               key={testimonial.id}