update svg

2026-01-12 12:17:16 +05:30
parent 0c7239d7a8
commit 36eb93c264
27 changed files with 238 additions and 97 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+CLAUDE.md
--- a/public/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg
+++ b/public/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg
--- a/public/assets/demo_images/Rectangle
+++ b/public/assets/demo_images/Rectangle
--- a/public/assets/icons/calendar-icon.svg
+++ b/public/assets/icons/calendar-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#00293d">
+  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
+</svg>
--- a/public/assets/icons/chart-icon.svg
+++ b/public/assets/icons/chart-icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
+  <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
+</svg>
--- a/public/assets/icons/chevron-down-icon.svg
+++ b/public/assets/icons/chevron-down-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19 9l-7 7-7-7"/>
+</svg>
--- a/public/assets/icons/clipboard-icon.svg
+++ b/public/assets/icons/clipboard-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+</svg>
--- a/public/assets/icons/clock-icon.svg
+++ b/public/assets/icons/clock-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+</svg>
--- a/public/assets/icons/dollar-icon.svg
+++ b/public/assets/icons/dollar-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
+</svg>
--- a/public/assets/icons/edit-icon.svg
+++ b/public/assets/icons/edit-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+</svg>
--- a/public/assets/icons/edit-pencil-icon.svg
+++ b/public/assets/icons/edit-pencil-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5ba4a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
+</svg>
--- a/public/assets/icons/heart-icon.svg
+++ b/public/assets/icons/heart-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+</svg>
--- a/public/assets/icons/home-icon.svg
+++ b/public/assets/icons/home-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+</svg>
--- a/public/assets/icons/location-icon.svg
+++ b/public/assets/icons/location-icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+  <path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+</svg>
--- a/public/assets/icons/location-large-icon.svg
+++ b/public/assets/icons/location-large-icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+  <path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+</svg>
--- a/public/assets/icons/message-icon.svg
+++ b/public/assets/icons/message-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+</svg>
--- a/public/assets/icons/quote-icon.svg
+++ b/public/assets/icons/quote-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+</svg>
--- a/public/assets/icons/star-empty-icon.svg
+++ b/public/assets/icons/star-empty-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#d1d5db">
+  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+</svg>
--- a/public/assets/icons/star-filled-icon.svg
+++ b/public/assets/icons/star-filled-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#e58625">
+  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+</svg>
--- a/public/assets/icons/star-icon.svg
+++ b/public/assets/icons/star-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
+</svg>
--- a/public/assets/icons/user-placeholder-icon.svg
+++ b/public/assets/icons/user-placeholder-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#9ca3af">
+  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+</svg>
--- a/public/assets/icons/verified-icon.svg
+++ b/public/assets/icons/verified-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.191 0.59161C11.042 0.369463 10.8226 0.196189 10.5632 0.0959077C10.3038 -0.00437349 10.0173 -0.0266726 9.74371 0.0321152L7.8018 0.44846C7.60279 0.491154 7.396 0.491154 7.19698 0.44846L5.25508 0.0321152C4.98147 -0.0266726 4.69503 -0.00437349 4.43563 0.0959077C4.17623 0.196189 3.95678 0.369463 3.80783 0.59161L2.7494 2.16827C2.6414 2.32957 2.49559 2.46566 2.32278 2.56748L0.63361 3.55542C0.396021 3.69432 0.210655 3.89882 0.103241 4.14053C-0.0041733 4.38224 -0.0283068 4.64916 0.0341899 4.90425L0.480245 6.71883C0.52582 6.90426 0.52582 7.09692 0.480245 7.28235L0.0341899 9.09592C-0.0285497 9.35116 -0.00453765 9.61831 0.102888 9.86022C0.210314 10.1021 0.395816 10.3068 0.63361 10.4458L2.32278 11.4337C2.49559 11.5345 2.64139 11.6706 2.75048 11.8319L3.80891 13.4086C4.11348 13.8632 4.69454 14.088 5.25508 13.9681L7.19698 13.5517C7.396 13.509 7.60279 13.509 7.8018 13.5517L9.74479 13.9681C10.0182 14.0266 10.3044 14.0042 10.5636 13.9039C10.8228 13.8037 11.0421 13.6305 11.191 13.4086L12.2494 11.8319C12.3574 11.6706 12.5032 11.5345 12.676 11.4337L14.3663 10.4458C14.6041 10.3066 14.7895 10.1017 14.8967 9.8596C15.004 9.61749 15.0277 9.3502 14.9646 9.09492L14.5196 7.28235C14.4739 7.0966 14.4739 6.90358 14.5196 6.71782L14.9657 4.90425C15.0285 4.64912 15.0047 4.38205 14.8974 4.14015C14.7902 3.89824 14.6049 3.69352 14.3673 3.55441L12.6771 2.56647C12.5045 2.46548 12.3587 2.32935 12.2505 2.16827L11.191 0.59161ZM10.6477 4.75203C10.7145 4.63737 10.731 4.503 10.6939 4.37719C10.6567 4.25138 10.5687 4.14393 10.4483 4.07745C10.328 4.01098 10.1847 3.99066 10.0487 4.02077C9.91264 4.05089 9.79441 4.12908 9.71887 4.23891L6.89457 8.70075L5.1892 7.17651C5.1386 7.12802 5.07807 7.08954 5.0112 7.06336C4.94433 7.03718 4.87249 7.02384 4.79998 7.02414C4.72747 7.02443 4.65576 7.03835 4.58914 7.06508C4.52251 7.0918 4.46234 7.13077 4.4122 7.17967C4.36206 7.22856 4.32299 7.28639 4.29731 7.34969C4.27163 7.41298 4.25987 7.48046 4.26274 7.54809C4.2656 7.61572 4.28303 7.68212 4.31398 7.74333C4.34493 7.80454 4.38878 7.8593 4.44289 7.90435L6.63969 9.86913C6.69848 9.92161 6.76922 9.96101 6.84661 9.98439C6.92401 10.0078 7.00607 10.0145 7.08665 10.0041C7.16724 9.99378 7.24427 9.96655 7.312 9.92449C7.37973 9.88243 7.4364 9.82664 7.47779 9.76127L10.6477 4.75203Z" fill="#1DA1F2"/>
+</svg>
--- a/public/assets/icons/wallet-icon.svg
+++ b/public/assets/icons/wallet-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
+  <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+</svg>
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -3,6 +3,7 @@
 import { useSession } from 'next-auth/react';
 import Image from 'next/image';
 import { useState } from 'react';
+import { Button } from '@/components/ui/Button';

 // Mock agent data - in production, this would come from API
 const agentData = {
@@ -74,14 +75,13 @@ function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
-        <svg
+        <Image
          key={star}
-          className={`w-4 h-4 ${star <= rating ? 'text-[#e58625]' : 'text-gray-300'}`}
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-        </svg>
+          src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
+          alt={star <= rating ? 'Filled star' : 'Empty star'}
+          width={16}
+          height={16}
+        />
      ))}
    </div>
  );
@@ -91,13 +91,12 @@ function StarRating({ rating }: { rating: number }) {
 function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
  return (
    <span
-      className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${
-        variant === 'light'
+      className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${variant === 'light'
          ? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
          : variant === 'orange'
-          ? 'border-[#e58625] text-[#e58625] bg-transparent'
-          : 'border-[#00293d] text-[#00293d] bg-transparent'
-      }`}
+            ? 'border-[#e58625] text-[#e58625] bg-transparent'
+            : 'border-[#00293d] text-[#00293d] bg-transparent'
+        }`}
    >
      {children}
    </span>
@@ -116,7 +115,7 @@ function SpecializationCard({
 }) {
  return (
    <div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
-      <div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
+      <div className="flex justify-center mb-3">{icon}</div>
      <h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
      <div className="space-y-1">
        {items.map((item, idx) => (
@@ -127,9 +126,12 @@ function SpecializationCard({
      </div>
      <button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
        Show More
-        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
+        <Image
+          src="/assets/icons/chevron-down-icon.svg"
+          alt="Show more"
+          width={12}
+          height={12}
+        />
      </button>
    </div>
  );
@@ -146,9 +148,9 @@ function InfoCard({
  icon: React.ReactNode;
 }) {
  return (
-    <div className="bg-white rounded-[20px] border border-gray-200 p-6 text-center">
-      <div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
-      {title && <h4 className="font-semibold text-[#00293d] text-sm mb-3">{title}</h4>}
+    <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>
    </div>
  );
@@ -164,18 +166,25 @@ export default function AgentDashboard() {
        {/* Left Sidebar - Status & Contact */}
        <div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
          {/* Profile Image */}
-          <div className="relative">
-            <div className="w-[140px] h-[140px] rounded-[20px] bg-[#8fa9a8] overflow-hidden mx-auto lg:mx-0">
-              <div className="w-full h-full bg-gradient-to-br from-[#8fa9a8] to-[#6b8a89] flex items-center justify-center">
-                <svg className="w-20 h-20 text-white/50" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-                </svg>
-              </div>
+          <div className="relative mx-auto lg:mx-0">
+            {/* Profile Image */}
+            <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
+              <Image
+                src="/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg"
+                alt="Profile"
+                width={200}
+                height={200}
+                className="w-full h-full object-cover"
+              />
            </div>
-            <button className="absolute bottom-2 right-2 lg:right-auto lg:left-[110px] bg-white rounded-lg p-1.5 shadow-md hover:bg-gray-50 transition-colors">
-              <svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-              </svg>
+            {/* 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>

@@ -211,9 +220,12 @@ export default function AgentDashboard() {
              <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">
-                <svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                </svg>
+                <Image
+                  src="/assets/icons/edit-pencil-icon.svg"
+                  alt="Edit phone"
+                  width={16}
+                  height={16}
+                />
              </button>
            </div>
          </div>
@@ -228,22 +240,30 @@ export default function AgentDashboard() {
              <div>
                {/* Name and Verification */}
                <div className="flex items-center gap-2 mb-1">
-                  <h1 className="text-xl font-bold text-[#00293d]">
+                  <h1 className="text-[18px] text-[#00293d]">
                    <span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
                    <span className="font-normal">{agentData.name.split(' ')[1]}</span>
                  </h1>
                  {agentData.isVerified && (
-                    <span className="text-[#e58625] text-sm font-medium flex items-center gap-1">
-                      (Verified Expert)
-                      <svg className="w-4 h-4 text-[#5ba4a4]" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                      </svg>
-                    </span>
+                    <>
+                      <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">
-                    <svg className="w-4 h-4 text-[#5ba4a4]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                    </svg>
+                    <Image
+                      src="/assets/icons/edit-pencil-icon.svg"
+                      alt="Edit name"
+                      width={16}
+                      height={16}
+                    />
                  </button>
                </div>

@@ -253,35 +273,56 @@ export default function AgentDashboard() {
                {/* Location and Member Since */}
                <div className="flex items-center gap-4 text-sm text-[#00293d]">
                  <span className="flex items-center gap-1 text-[#e58625] font-medium">
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
+                    <Image
+                      src="/assets/icons/location-icon.svg"
+                      alt="Location"
+                      width={16}
+                      height={16}
+                    />
                    {agentData.location}
                  </span>
                  <span className="flex items-center gap-1">
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
-                    </svg>
+                    <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-2">
-                <button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                  </svg>
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="action"
+                  size="sm"
+                  leftIcon={
+                    <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-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                  </svg>
+                </Button>
+                <Button
+                  variant="action"
+                  size="sm"
+                  leftIcon={
+                    <Image
+                      src="/assets/icons/clipboard-icon.svg"
+                      alt="Requests"
+                      width={16}
+                      height={16}
+                    />
+                  }
+                >
                  Requests
-                </button>
+                </Button>
              </div>
            </div>

@@ -372,9 +413,12 @@ export default function AgentDashboard() {
        <InfoCard
          title="Availability"
          icon={
-            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
+            <Image
+              src="/assets/icons/clock-icon.svg"
+              alt="Availability"
+              width={32}
+              height={32}
+            />
          }
          content={
            <div>
@@ -390,19 +434,24 @@ export default function AgentDashboard() {
        <InfoCard
          title="Preferred work environment"
          icon={
-            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
+            <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={
-            <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-            </svg>
+            <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>}
        />
@@ -419,28 +468,36 @@ export default function AgentDashboard() {
            title="Specialization"
            items={agentData.specialization.types}
            icon={
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-              </svg>
+              <Image
+                src="/assets/icons/home-icon.svg"
+                alt="Specialization"
+                width={24}
+                height={24}
+              />
            }
          />
          <SpecializationCard
            title="Loan Type"
            items={agentData.specialization.loanTypes}
            icon={
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
-              </svg>
+              <Image
+                src="/assets/icons/wallet-icon.svg"
+                alt="Loan Type"
+                width={24}
+                height={24}
+              />
            }
          />
          <SpecializationCard
            title="Property Type"
            items={agentData.specialization.propertyTypes}
            icon={
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
-                <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
-              </svg>
+              <Image
+                src="/assets/icons/chart-icon.svg"
+                alt="Property Type"
+                width={24}
+                height={24}
+              />
            }
          />
        </div>
@@ -449,18 +506,24 @@ export default function AgentDashboard() {
            title="Hobbies & Interests"
            items={agentData.specialization.hobbies}
            icon={
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-              </svg>
+              <Image
+                src="/assets/icons/heart-icon.svg"
+                alt="Hobbies"
+                width={24}
+                height={24}
+              />
            }
          />
          <SpecializationCard
            title="Price Point"
            items={agentData.specialization.pricePoints}
            icon={
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" />
-              </svg>
+              <Image
+                src="/assets/icons/dollar-icon.svg"
+                alt="Price Point"
+                width={24}
+                height={24}
+              />
            }
          />
        </div>
@@ -484,9 +547,12 @@ export default function AgentDashboard() {
              <p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.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">
-                  <svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-                  </svg>
+                  <Image
+                    src="/assets/icons/user-placeholder-icon.svg"
+                    alt="User"
+                    width={24}
+                    height={24}
+                  />
                </div>
                <div className="flex-1">
                  <StarRating rating={testimonial.rating} />
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,6 +37,7 @@
  --color-foreground: var(--color-foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --font-serif: var(--font-source-serif-4);
 }

 /* Disable dark mode for consistent branding */
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Source_Serif_4 } from "next/font/google";
 import { SessionProvider } from "@/components/providers/session-provider";
 import "./globals.css";

@@ -13,6 +13,12 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

+const sourceSerif4 = Source_Serif_4({
+  variable: "--font-source-serif-4",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
 export const metadata: Metadata = {
  title: "Real Estate Platform",
  description: "Find your dream property with trusted agents",
@@ -26,7 +32,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sourceSerif4.variable} antialiased`}
      >
        <SessionProvider>{children}</SessionProvider>
      </body>
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -3,24 +3,27 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';

 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline';
+  variant?: 'primary' | 'secondary' | 'outline' | 'action';
  size?: 'sm' | 'md' | 'lg';
+  leftIcon?: ReactNode;
  children: ReactNode;
 }

 export function Button({
  variant = 'primary',
  size = 'md',
+  leftIcon,
  children,
  className = '',
  ...props
 }: ButtonProps) {
-  const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center';
+  const baseStyles = 'font-medium transition-all duration-200 inline-flex items-center justify-center';

  const variants = {
-    primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c]',
-    secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e]',
-    outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white',
+    primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c] rounded-lg',
+    secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e] rounded-lg',
+    outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white rounded-lg',
+    action: 'bg-[#e58625] text-white border-[0.1px] border-[#00293d] rounded-[15px] hover:bg-[#d47920] active:bg-[#c26e1b]',
  };

  const sizes = {
@@ -34,6 +37,7 @@ export function Button({
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
      {...props}
    >
+      {leftIcon && <span className="mr-2">{leftIcon}</span>}
      {children}
    </button>
  );