From 7e28bd22fe5b5215e7cb0c5a73d9495d982775b6 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Tue, 20 Jan 2026 09:51:40 +0530
Subject: [PATCH] feat: Add new location, star, and verified badge SVG icons
 and update professional card styling and icon references.

---
 public/assets/icons/location-pin-orange.svg |  3 ++
 public/assets/icons/star-yellow.svg         |  3 ++
 public/assets/icons/verified-badge-blue.svg |  3 ++
 src/components/home/TopProfessionals.tsx    | 32 ++++++++++-----------
 4 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 public/assets/icons/location-pin-orange.svg
 create mode 100644 public/assets/icons/star-yellow.svg
 create mode 100644 public/assets/icons/verified-badge-blue.svg

diff --git a/public/assets/icons/location-pin-orange.svg b/public/assets/icons/location-pin-orange.svg
new file mode 100644
index 0000000..8e13aec
--- /dev/null
+++ b/public/assets/icons/location-pin-orange.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0C2.68629 0 0 2.68629 0 6C0 10.5 6 15 6 15C6 15 12 10.5 12 6C12 2.68629 9.31371 0 6 0ZM6 8.5C4.61929 8.5 3.5 7.38071 3.5 6C3.5 4.61929 4.61929 3.5 6 3.5C7.38071 3.5 8.5 4.61929 8.5 6C8.5 7.38071 7.38071 8.5 6 8.5Z" fill="#E58625"/>
+</svg>
diff --git a/public/assets/icons/star-yellow.svg b/public/assets/icons/star-yellow.svg
new file mode 100644
index 0000000..f7a2c1b
--- /dev/null
+++ b/public/assets/icons/star-yellow.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L11.0206 6.21885H17.5595L12.2694 10.0623L14.2901 16.2812L9 12.4377L3.70993 16.2812L5.73056 10.0623L0.440492 6.21885H6.97937L9 0Z" fill="#FFD700"/>
+</svg>
diff --git a/public/assets/icons/verified-badge-blue.svg b/public/assets/icons/verified-badge-blue.svg
new file mode 100644
index 0000000..fdcf186
--- /dev/null
+++ b/public/assets/icons/verified-badge-blue.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0ZM10.2071 5.70711L6.70711 9.20711C6.51957 9.39464 6.26522 9.5 6 9.5C5.73478 9.5 5.48043 9.39464 5.29289 9.20711L3.79289 7.70711C3.40237 7.31658 3.40237 6.68342 3.79289 6.29289C4.18342 5.90237 4.81658 5.90237 5.20711 6.29289L6 7.08579L9.29289 3.79289C9.68342 3.40237 10.3166 3.40237 10.7071 3.79289C11.0976 4.18342 11.0976 4.81658 10.2071 5.70711Z" fill="#2196F3"/>
+</svg>
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index df62139..a197fc9 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -83,9 +83,9 @@ function ProfessionalCard({
   imageUrl,
 }: ProfessionalCardProps) {
   return (
-    <div className="bg-white border border-[#00293d]/10 rounded-[15px] overflow-hidden shadow-lg">
+    <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
       {/* Image */}
-      <div className="relative h-[226px] w-full overflow-hidden rounded-t-[15px]">
+      <div className="relative h-[226px] w-full overflow-hidden">
         <Image
           src={imageUrl}
           alt={name}
@@ -97,41 +97,41 @@ function ProfessionalCard({
       {/* Content */}
       <div className="p-4">
         {/* Name */}
-        <h3 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293d]">
+        <h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
           {name}
         </h3>
 
         {/* Subtitle */}
-        <p className="font-serif font-normal text-[10px] leading-[13px] text-[#00293d] mt-1">
+        <p className="font-serif font-normal text-[10px] leading-normal text-[#00293d] mt-1">
           {subtitle}
         </p>
 
         {/* Verified Badge */}
         <div className="flex items-center gap-1.5 mt-2">
           <Image
-            src="/assets/icons/verified-badge-green.svg"
+            src="/assets/icons/verified-badge-blue.svg"
             alt="Verified"
             width={14}
             height={14}
           />
-          <span className="font-serif font-medium text-[14px] leading-[17px] text-[#638559]">
+          <span className="font-serif font-medium text-[14px] leading-normal text-[#638559]">
             &ldquo;Verified local agent&rdquo;
           </span>
         </div>
 
         {/* Location */}
         <div className="mt-3">
-          <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293d]">
+          <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
             Location:
           </p>
-          <div className="flex items-center gap-1 mt-1">
+          <div className="flex items-center gap-1.5 mt-1">
             <Image
-              src="/assets/icons/location-filled-icon.svg"
+              src="/assets/icons/location-pin-orange.svg"
               alt="Location"
               width={12}
-              height={12}
+              height={15}
             />
-            <span className="font-serif font-normal text-[10px] leading-[13px] text-[#00293d]">
+            <span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
               {location}
             </span>
           </div>
@@ -139,14 +139,14 @@ function ProfessionalCard({
 
         {/* Expertise */}
         <div className="mt-3">
-          <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293d]">
+          <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
             Expertise:
           </p>
           <div className="flex flex-wrap gap-1.5 mt-2">
             {expertise.slice(0, 6).map((tag, index) => (
               <span
                 key={index}
-                className="border border-[#00293d] rounded-[15px] px-2 py-0.5 font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
+                className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
               >
                 {tag}
               </span>
@@ -155,7 +155,7 @@ function ProfessionalCard({
         </div>
 
         {/* Experience */}
-        <p className="mt-3 text-[14px] leading-[17px] text-[#00293d]">
+        <p className="mt-3 text-[14px] leading-normal text-[#00293d]">
           <span className="font-fractul font-bold">Experience:</span>
           <span className="font-serif font-normal"> {experience}</span>
         </p>
@@ -165,10 +165,10 @@ function ProfessionalCard({
           {[...Array(5)].map((_, i) => (
             <Image
               key={i}
-              src="/assets/icons/star-rating-filled.svg"
+              src="/assets/icons/star-yellow.svg"
               alt="Star"
               width={18}
-              height={18}
+              height={17}
             />
           ))}
         </div>