feat: Add location pin icon and update edit pencil icons to orange in the agent dashboard.

public/assets/icons/location-pin-icon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8539 0.00561027L19.9634 0L20.0978 0.00748022L20.1908 0.0224409L20.3179 0.0551673L20.4285 0.0981791L20.5318 0.151476L20.6249 0.214124L20.7096 0.284252L20.7633 0.339419L20.8481 0.447884L20.9018 0.537648C20.95 0.631151 20.9811 0.729642 20.9948 0.83312L21 0.932234C21 1.00267 20.9917 1.07124 20.9752 1.13794L20.939 1.25295L14.1884 18.1557C14.0605 18.4077 13.8552 18.6212 13.5971 18.7709C13.339 18.9206 13.0389 19.0001 12.7323 19C12.4562 19.0005 12.1847 18.9365 11.9441 18.8141C11.7034 18.6917 11.5018 18.5152 11.3588 18.3015L11.2916 18.1828L7.82746 11.9161L0.934252 8.79685C0.679194 8.69131 0.459233 8.52703 0.296369 8.32044C0.133505 8.11385 0.0334469 7.87219 0.00620083 7.61963L0 7.48031C0 6.95669 0.311073 6.47795 0.869144 6.19931L1.01383 6.13386L19.6338 0.050492L19.7433 0.0224409L19.8539 0.00561027Z" fill="#00293D"/>
+</svg>

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

@@ -16,11 +16,9 @@ interface ExperienceSectionProps {
 
 export function ExperienceSection({ experience }: ExperienceSectionProps) {
   return (
-    <>
+    <div className="bg-white rounded-[20px] border border-gray-200 p-6">
-      {/* Desktop Layout */}
+      <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6 text-center lg:text-left">Experience</h2>
-      <div className="hidden lg:block bg-white rounded-[20px] border border-gray-200 p-6">
+      <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
-        <h2 className="text-xl font-bold text-[#00293d] font-serif mb-6">Experience</h2>
-        <div className="flex flex-row gap-8">
         {/* Left Column */}
         <div className="flex-1 space-y-6">
           <div>
@@ -48,8 +46,9 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
           </div>
         </div>
 
-          {/* Divider */}
+        {/* Divider - Hidden on mobile, visible on desktop */}
-          <div className="w-px bg-gray-200" />
+        <div className="hidden lg:block w-px bg-gray-200" />
+        <div className="lg:hidden border-t border-gray-200" />
 
         {/* Right Column */}
         <div className="flex-1 space-y-6">
@@ -78,62 +77,5 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
         </div>
       </div>
     </div>
-
-      {/* Mobile Layout */}
-      <div className="lg:hidden">
-        <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>
-            <ul className="list-disc list-inside text-[#00293d] text-sm font-serif">
-              <li>{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>{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">
-              {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">
-              {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">
-              {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>
-    </>
   );
 }

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

@@ -76,139 +76,13 @@ export default function AgentDashboard() {
 
   return (
     <div className="space-y-6">
-      {/* Mobile: Profile Image at Top */}
+      {/* Main Layout - Responsive: Column on mobile, Row on desktop */}
-      <div className="lg:hidden flex flex-col items-center">
+      <div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
-        {/* 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"
-            />
-            {/* Gradient Overlay */}
-            <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
-          </div>
-          {/* Edit Icon - Top Right Outside */}
-          <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] font-fractul">Available.</span>
-            </div>
-            <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] font-fractul">Unavailable.</span>
-            </div>
-            <button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px] font-fractul">
-              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-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-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 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"
-                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 - Sidebar + Right Content (Profile + Experience) */}
-      <div className="hidden lg:flex flex-row gap-6 items-stretch">
         {/* Left Sidebar - Status & Contact */}
-        <div className="w-[280px] flex-shrink-0 space-y-4">
+        <div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
           {/* Profile Image */}
-          <div className="relative w-[260px]">
+          <div className="relative w-[200px] lg:w-[260px]">
-            <div className="w-[260px] h-[260px] rounded-[15px] overflow-hidden">
+            <div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden">
               <Image
                 src={agentData.profileImage}
                 alt="Profile"
@@ -231,8 +105,8 @@ export default function AgentDashboard() {
           </div>
 
           {/* Status Buttons */}
-          <div className="w-full space-y-2">
+          <div className="w-full max-w-[354px] lg:max-w-none space-y-2">
-            <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] lg: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] font-fractul">Available.</span>
@@ -241,7 +115,7 @@ export default function AgentDashboard() {
                 Connect
               </button>
             </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] lg: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] font-fractul">Unavailable.</span>
@@ -253,7 +127,7 @@ export default function AgentDashboard() {
           </div>
 
           {/* Contact Info */}
-          <div className="w-full border border-[#00293d]/10 rounded-[15px] p-4 mt-2">
+          <div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
             <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">********brain@gmail.com</span>
@@ -281,14 +155,14 @@ export default function AgentDashboard() {
           </div>
         </div>
 
-        {/* Right Content - Profile Info + Experience */}
+        {/* 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>
+              <div className="text-center lg:text-left">
-                <div className="flex items-center gap-2 mb-1">
+                <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>
@@ -308,7 +182,7 @@ export default function AgentDashboard() {
                   )}
                   <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}
@@ -316,13 +190,13 @@ export default function AgentDashboard() {
                   </button>
                 </div>
                 <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">
+                <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 text-[#e58625] font-medium">
                     <Image
-                      src="/assets/icons/location-icon.svg"
+                      src="/assets/icons/location-pin-icon.svg"
                       alt="Location"
-                      width={16}
+                      width={21}
-                      height={16}
+                      height={19}
                     />
                     {agentData.location}
                   </span>
@@ -339,7 +213,7 @@ export default function AgentDashboard() {
               </div>
 
               {/* Action Buttons */}
-              <div className="flex items-center gap-3">
+              <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"
@@ -362,12 +236,12 @@ export default function AgentDashboard() {
             </div>
 
             {/* Bio */}
-            <p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif">{agentData.bio}</p>
+            <p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif text-center lg:text-left">{agentData.bio}</p>
 
             {/* Expertise Tags */}
             <div>
-              <p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
+              <p className="font-bold text-[#00293d] text-sm mb-2 text-center lg:text-left">Expertise:</p>
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
                 {agentData.expertise.map((tag, idx) => (
                   <Tag key={idx}>{tag}</Tag>
                 ))}
@@ -375,11 +249,11 @@ export default function AgentDashboard() {
             </div>
           </div>
 
-          {/* Experience Section - Inside the same row */}
+          {/* Experience Section */}
           <ExperienceSection experience={agentData.experience} />
 
-          {/* Info Cards Section - Desktop */}
+          {/* Info Cards Section */}
-          <div className="grid grid-cols-3 gap-6">
+          <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
             <InfoCard
               title="Availability"
               icon={
@@ -427,13 +301,13 @@ export default function AgentDashboard() {
             />
           </div>
 
-          {/* Specialization Section - Desktop */}
+          {/* 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="grid 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}
@@ -471,7 +345,7 @@ export default function AgentDashboard() {
                 }
               />
             </div>
-            <div className="grid 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}
@@ -499,13 +373,13 @@ export default function AgentDashboard() {
             </div>
           </div>
 
-          {/* Testimonials Section - Desktop */}
+          {/* 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="grid 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}
@@ -519,151 +393,6 @@ export default function AgentDashboard() {
           </div>
         </div>
       </div>
-
-      {/* Mobile Experience Section */}
-      <div className="lg:hidden">
-        <ExperienceSection experience={agentData.experience} />
-      </div>
-
-      {/* Info Cards Section - Mobile */}
-      <div className="flex flex-col gap-6 lg:hidden">
-        <InfoCard
-          title="Availability"
-          icon={
-            <Image
-              src="/assets/icons/clock-icon.svg"
-              alt="Availability"
-              width={32}
-              height={32}
-            />
-          }
-          content={
-            <div>
-              <p className="font-semibold mb-2">{agentData.availability.type}</p>
-              <div className="space-y-1">
-                {agentData.availability.days.map((day) => (
-                  <p key={day}>{day}</p>
-                ))}
-              </div>
-            </div>
-          }
-        />
-        <InfoCard
-          title="Preferred work environment"
-          icon={
-            <Image
-              src="/assets/icons/location-large-icon.svg"
-              alt="Work environment"
-              width={32}
-              height={32}
-            />
-          }
-          content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
-        />
-        <InfoCard
-          title=""
-          icon={
-            <Image
-              src="/assets/icons/star-icon.svg"
-              alt="Testimonial"
-              width={32}
-              height={32}
-            />
-          }
-          content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
-        />
-      </div>
-
-      {/* Specialization Section - Mobile */}
-      <div className="bg-[#e8e8e8] rounded-[20px] p-8 lg:hidden">
-        <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 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 gap-6">
-          <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>
-
-      {/* Testimonials Section - Mobile */}
-      <div className="bg-white rounded-[20px] border border-gray-200 p-8 lg:hidden">
-        <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 gap-6">
-          {agentData.testimonials.map((testimonial) => (
-            <TestimonialCard
-              key={testimonial.id}
-              text={testimonial.text}
-              author={testimonial.author}
-              role={testimonial.role}
-              rating={testimonial.rating}
-            />
-          ))}
-        </div>
-      </div>
     </div>
   );
 }