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

feat: Add orange active state icons for agent and lender tabs, and update tab button and CTA card styling.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-20 09:44:56 +05:30
parent 2dfe33cca3
commit bc15ae4825
5 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -193,44 +193,42 @@ export function TopProfessionals() {
{/* Tabs Container */}
<div className="flex justify-center mb-10">
<div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex gap-1">
<div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex items-center">
{/* Agents Tab */}
<button
onClick={() => setActiveTab('agents')}
className={`flex items-center gap-2 px-8 py-3 rounded-[15px] font-serif font-semibold text-[17px] transition-all ${
className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
activeTab === 'agents'
? 'bg-[#00293d] text-[#f0f5fc]'
: 'bg-transparent text-[#00293d] hover:bg-gray-100'
: 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
}`}
>
<Image
src="/assets/icons/agents-tab-icon.svg"
src={activeTab === 'agents' ? '/assets/icons/agents-tab-icon-orange.svg' : '/assets/icons/agents-tab-icon.svg'}
alt=""
width={20}
height={20}
className={activeTab === 'agents' ? 'brightness-0 invert' : ''}
/>
Agents
</button>
{/* Divider */}
<div className="w-px bg-[#00293d]/20 mx-2" />
<div className="h-[44px] w-px bg-[#00293d]/20 mx-4" />
{/* Lenders Tab */}
<button
onClick={() => setActiveTab('lenders')}
className={`flex items-center gap-2 px-8 py-3 rounded-[15px] font-serif font-semibold text-[17px] transition-all ${
className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
activeTab === 'lenders'
? 'bg-[#00293d] text-[#f0f5fc]'
: 'bg-transparent text-[#00293d] hover:bg-gray-100'
: 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
}`}
>
<Image
src="/assets/icons/lenders-tab-icon.svg"
src={activeTab === 'lenders' ? '/assets/icons/lenders-tab-icon-orange.svg' : '/assets/icons/lenders-tab-icon.svg'}
alt=""
width={20}
height={20}
className={activeTab === 'lenders' ? 'brightness-0 invert' : ''}
/>
Lenders
</button>
@@ -253,7 +251,12 @@ export function TopProfessionals() {
))}
{/* CTA Sidebar Card */}
<div className="bg-white border border-[#00293d]/10 rounded-[15px] p-6 flex flex-col items-center justify-center text-center shadow-lg min-h-[400px]">
<div
className="rounded-[15px] p-6 flex flex-col items-center justify-center text-center min-h-[400px]"
style={{
background: 'linear-gradient(180deg, #C5D6D6 0%, #FFFFFF 100%)',
}}
>
{/* Building Icon */}
<div className="mb-4">
<Image