Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new location, star, and verified badge SVG icons and update professional card styling and icon references.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-20 09:51:40 +05:30
parent bc15ae4825
commit 7e28bd22fe
4 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/icons/location-pin-orange.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 347 B

3
public/assets/icons/star-yellow.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

3
public/assets/icons/verified-badge-blue.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 579 B

32
src/components/home/TopProfessionals.tsx
View File

@@ -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>