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

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>