feat: Redesign "Top Professionals" section with new ProfessionalCard component and dedicated assets, replacing FeaturedAgents.

2026-01-20 01:41:09 +05:30
parent 8bdc8c6120
commit 2dfe33cca3
12 changed files with 235 additions and 173 deletions
--- a/src/app/(user)/user/dashboard/page.tsx
+++ b/src/app/(user)/user/dashboard/page.tsx
@@ -2,7 +2,6 @@

 import { HeroSection } from '@/components/home/HeroSection';
 import { FeaturesSection } from '@/components/home/FeaturesSection';
-import { FeaturedAgents } from '@/components/home/FeaturedAgents';
 import { TopProfessionals } from '@/components/home/TopProfessionals';
 import { TestimonialsSection } from '@/components/home/TestimonialsSection';

@@ -11,7 +10,6 @@ export default function UserDashboard() {
    <div>
      <HeroSection />
      <FeaturesSection />
-      <FeaturedAgents />
      <TopProfessionals />
      <TestimonialsSection />
    </div>
--- a/src/components/home/FeaturedAgents.tsx
+++ b/src/components/home/FeaturedAgents.tsx
@@ -1,68 +0,0 @@
-'use client';
-
-import { AgentCard } from '../ui/AgentCard';
-
-// Sample featured agents data
-const featuredAgents = [
-  {
-    id: '1',
-    name: 'Andrew Collins',
-    title: 'Rental & Investment Consultant',
-    location: 'New York',
-    rating: 4.8,
-    reviewCount: 124,
-    experience: '8+ years in the real estate industry',
-    expertise: ['Residential', 'Commercial', 'Investment'],
-    imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
-    isVerified: true,
-  },
-  {
-    id: '2',
-    name: 'Dempsi',
-    title: 'Real Estate & Investment Consultant',
-    location: 'Atlanta',
-    rating: 4.9,
-    reviewCount: 98,
-    experience: '5+ years in the real estate industry',
-    expertise: ['Luxury Homes', 'First-time Buyers'],
-    imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
-    isVerified: true,
-  },
-  {
-    id: '3',
-    name: 'Daniel',
-    title: 'Rental & Investment Consultant',
-    location: 'San Diego',
-    rating: 4.7,
-    reviewCount: 156,
-    experience: '7 years in the real estate industry',
-    expertise: ['Property Management', 'Rentals'],
-    imageUrl: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
-    isVerified: true,
-  },
-];
-
-export function FeaturedAgents() {
-  return (
-    <section className="py-16 md:py-24 bg-[#f5f9f8]">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {featuredAgents.map((agent) => (
-            <AgentCard
-              key={agent.id}
-              name={agent.name}
-              title={agent.title}
-              location={agent.location}
-              rating={agent.rating}
-              reviewCount={agent.reviewCount}
-              experience={agent.experience}
-              expertise={agent.expertise}
-              imageUrl={agent.imageUrl}
-              isVerified={agent.isVerified}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -2,46 +2,36 @@

 import { useState } from 'react';
 import Link from 'next/link';
-import { AgentCard } from '../ui/AgentCard';
-import { Button } from '../ui/Button';
+import Image from 'next/image';

 // Sample agents data for tabs
 const agentsData = [
  {
    id: '1',
    name: 'Arjun Mehta',
-    title: 'Professional/General Agent',
+    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
-    rating: 4.9,
-    reviewCount: 87,
-    experience: '6+ years in the real estate industry',
-    expertise: ['Residential', 'Luxury', 'Commercial'],
-    imageUrl: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '10+ years in the real estate industry.',
+    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
+    imageUrl: '/assets/images/professional-1.jpg',
  },
  {
    id: '2',
    name: 'Arjun Mehta',
-    title: 'Top-tier Real Agent',
+    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
-    rating: 4.8,
-    reviewCount: 65,
-    experience: '8+ years in the real estate industry',
-    expertise: ['Investment', 'Commercial', 'Property Management'],
-    imageUrl: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '10+ years in the real estate industry.',
+    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
+    imageUrl: '/assets/images/professional-2.jpg',
  },
  {
    id: '3',
    name: 'Arjun Mehta',
-    title: 'Verified Real Agent',
+    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
-    rating: 4.7,
-    reviewCount: 42,
-    experience: '6+ years in the real estate industry',
-    expertise: ['Residential', 'First-time Buyers', 'Rentals'],
-    imageUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '10+ years in the real estate industry.',
+    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
+    imageUrl: '/assets/images/professional-3.jpg',
  },
 ];

@@ -49,119 +39,243 @@ const lendersData = [
  {
    id: '4',
    name: 'Sarah Johnson',
-    title: 'Mortgage Specialist',
+    subtitle: '(Mortgage Specialist)',
    location: 'Los Angeles, CA',
-    rating: 4.9,
-    reviewCount: 112,
-    experience: '10+ years in mortgage lending',
-    expertise: ['FHA Loans', 'Conventional', 'VA Loans'],
-    imageUrl: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '10+ years in mortgage lending.',
+    expertise: ['FHA Loans', 'Conventional', 'VA Loans', 'Refinancing', 'Jumbo'],
+    imageUrl: '/assets/images/professional-1.jpg',
  },
  {
    id: '5',
    name: 'Michael Chen',
-    title: 'Senior Loan Officer',
+    subtitle: '(Senior Loan Officer)',
    location: 'Seattle, WA',
-    rating: 4.8,
-    reviewCount: 89,
-    experience: '7+ years in lending',
-    expertise: ['Jumbo Loans', 'Refinancing', 'Investment'],
-    imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '7+ years in lending.',
+    expertise: ['Jumbo Loans', 'Refinancing', 'Investment', 'First-time', 'USDA'],
+    imageUrl: '/assets/images/professional-2.jpg',
  },
  {
    id: '6',
    name: 'Emily Davis',
-    title: 'Home Loan Advisor',
+    subtitle: '(Home Loan Advisor)',
    location: 'Austin, TX',
-    rating: 4.7,
-    reviewCount: 76,
-    experience: '5+ years in mortgage industry',
-    expertise: ['First-time Buyers', 'FHA', 'USDA Loans'],
-    imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
-    isVerified: true,
+    experience: '5+ years in mortgage industry.',
+    expertise: ['First-time Buyers', 'FHA', 'USDA Loans', 'VA Loans', 'Conventional'],
+    imageUrl: '/assets/images/professional-3.jpg',
  },
 ];

+interface ProfessionalCardProps {
+  name: string;
+  subtitle: string;
+  location: string;
+  experience: string;
+  expertise: string[];
+  imageUrl: string;
+}
+
+function ProfessionalCard({
+  name,
+  subtitle,
+  location,
+  experience,
+  expertise,
+  imageUrl,
+}: ProfessionalCardProps) {
+  return (
+    <div className="bg-white border border-[#00293d]/10 rounded-[15px] overflow-hidden shadow-lg">
+      {/* Image */}
+      <div className="relative h-[226px] w-full overflow-hidden rounded-t-[15px]">
+        <Image
+          src={imageUrl}
+          alt={name}
+          fill
+          className="object-cover"
+        />
+      </div>
+
+      {/* Content */}
+      <div className="p-4">
+        {/* Name */}
+        <h3 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293d]">
+          {name}
+        </h3>
+
+        {/* Subtitle */}
+        <p className="font-serif font-normal text-[10px] leading-[13px] 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"
+            alt="Verified"
+            width={14}
+            height={14}
+          />
+          <span className="font-serif font-medium text-[14px] leading-[17px] 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]">
+            Location:
+          </p>
+          <div className="flex items-center gap-1 mt-1">
+            <Image
+              src="/assets/icons/location-filled-icon.svg"
+              alt="Location"
+              width={12}
+              height={12}
+            />
+            <span className="font-serif font-normal text-[10px] leading-[13px] text-[#00293d]">
+              {location}
+            </span>
+          </div>
+        </div>
+
+        {/* Expertise */}
+        <div className="mt-3">
+          <p className="font-fractul font-bold text-[14px] leading-[17px] 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]"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Experience */}
+        <p className="mt-3 text-[14px] leading-[17px] text-[#00293d]">
+          <span className="font-fractul font-bold">Experience:</span>
+          <span className="font-serif font-normal"> {experience}</span>
+        </p>
+
+        {/* Star Rating */}
+        <div className="flex gap-1 mt-3">
+          {[...Array(5)].map((_, i) => (
+            <Image
+              key={i}
+              src="/assets/icons/star-rating-filled.svg"
+              alt="Star"
+              width={18}
+              height={18}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function TopProfessionals() {
  const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
  const displayData = activeTab === 'agents' ? agentsData : lendersData;

  return (
-    <section className="py-16 md:py-24 bg-white">
+    <section className="py-10 md:py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-10">
-          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
+          <h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
            &ldquo;Meet top real estate professionals&rdquo;
          </h2>
        </div>

-        {/* Tabs */}
-        <div className="flex justify-center gap-4 mb-10">
-          <button
-            onClick={() => setActiveTab('agents')}
-            className={`px-8 py-3 rounded-full font-medium transition-all ${
-              activeTab === 'agents'
-                ? 'bg-[#00293d] text-white'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
-          >
-            Agents
-          </button>
-          <button
-            onClick={() => setActiveTab('lenders')}
-            className={`px-8 py-3 rounded-full font-medium transition-all ${
-              activeTab === 'lenders'
-                ? 'bg-[#00293d] text-white'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
-          >
-            Lenders
-          </button>
-        </div>
+        {/* Tabs Container */}
+        <div className="flex justify-center mb-10">
+          <div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex gap-1">
+            {/* 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 ${
+                activeTab === 'agents'
+                  ? 'bg-[#00293d] text-[#f0f5fc]'
+                  : 'bg-transparent text-[#00293d] hover:bg-gray-100'
+              }`}
+            >
+              <Image
+                src="/assets/icons/agents-tab-icon.svg"
+                alt=""
+                width={20}
+                height={20}
+                className={activeTab === 'agents' ? 'brightness-0 invert' : ''}
+              />
+              Agents
+            </button>

-        {/* Cards Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
-          {displayData.map((professional) => (
-            <AgentCard
-              key={professional.id}
-              name={professional.name}
-              title={professional.title}
-              location={professional.location}
-              rating={professional.rating}
-              reviewCount={professional.reviewCount}
-              experience={professional.experience}
-              expertise={professional.expertise}
-              imageUrl={professional.imageUrl}
-              isVerified={professional.isVerified}
-            />
-          ))}
+            {/* Divider */}
+            <div className="w-px bg-[#00293d]/20 mx-2" />

-          {/* Browse Experts CTA Card */}
-          <div className="bg-[#f5a623]/10 rounded-2xl p-8 flex flex-col items-center justify-center text-center">
-            <p className="text-[#00293d] font-medium mb-2">
-              Discover 6,000+ Top Real Estate Agents in Our Network
-            </p>
-            <Link href="/agents">
-              <Button variant="primary" size="md">
-                Browse Experts
-              </Button>
-            </Link>
+            {/* 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 ${
+                activeTab === 'lenders'
+                  ? 'bg-[#00293d] text-[#f0f5fc]'
+                  : 'bg-transparent text-[#00293d] hover:bg-gray-100'
+              }`}
+            >
+              <Image
+                src="/assets/icons/lenders-tab-icon.svg"
+                alt=""
+                width={20}
+                height={20}
+                className={activeTab === 'lenders' ? 'brightness-0 invert' : ''}
+              />
+              Lenders
+            </button>
          </div>
        </div>

-        {/* Pagination Dots */}
-        <div className="flex justify-center gap-2">
-          {[0, 1, 2, 3].map((dot) => (
-            <button
-              key={dot}
-              className={`w-2 h-2 rounded-full transition-all ${
-                dot === 0 ? 'bg-[#f5a623] w-8' : 'bg-gray-300 hover:bg-gray-400'
-              }`}
+        {/* Cards Grid - 3 cards + CTA sidebar */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {/* Professional Cards */}
+          {displayData.map((professional) => (
+            <ProfessionalCard
+              key={professional.id}
+              name={professional.name}
+              subtitle={professional.subtitle}
+              location={professional.location}
+              experience={professional.experience}
+              expertise={professional.expertise}
+              imageUrl={professional.imageUrl}
            />
          ))}
+
+          {/* 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]">
+            {/* Building Icon */}
+            <div className="mb-4">
+              <Image
+                src="/assets/icons/building-icon.svg"
+                alt="Building"
+                width={50}
+                height={38}
+              />
+            </div>
+
+            {/* Text */}
+            <p className="font-fractul font-normal text-[14px] leading-[1.4] text-[#00293d] mb-6">
+              Discover 5,000+ Top Real Estate Agents in Our Network.
+            </p>
+
+            {/* Browse Experts Button */}
+            <Link href="/agents">
+              <button className="bg-[#e58625] hover:bg-[#d47820] text-white font-fractul font-bold text-[16px] leading-[19px] px-8 py-3 rounded-[15px] transition-colors">
+                Browse Experts
+              </button>
+            </Link>
+          </div>
        </div>
      </div>
    </section>