feat: add profile links to featured agents and professionals by updating CMS types and card components

src/components/home/FeaturesSection.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import type { FeaturesContent, FeaturedAgentItem } from '@/types/cms';
 import { resolveImageUrl } from '@/services/cms.service';
 
@@ -21,8 +22,8 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
     }
   }, [agent.imageUrl]);
 
-  return (
-    <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${className}`}>
+  const cardInner = (
+    <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${agent.id ? 'hover:shadow-xl transition-shadow cursor-pointer' : ''} ${className}`}>
       <div className="h-[161px] w-full overflow-hidden rounded-t-[15px] bg-gray-100 relative">
         {imgSrc && (
           <img
@@ -66,6 +67,11 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
       </div>
     </div>
   );
+
+  if (agent.id) {
+    return <Link href={`/user/profile/${agent.id}`}>{cardInner}</Link>;
+  }
+  return cardInner;
 }
 
 export function FeaturesSection({ content }: { content?: FeaturesContent }) {

src/components/home/TopProfessionals.tsx

@@ -211,6 +211,7 @@ async function resolveAvatarUrl(avatar: string | null): Promise<string> {
 
 interface DisplayProfessional {
   id: string;
+  profileId?: string;
   name: string;
   subtitle: string;
   location: string;
@@ -249,6 +250,7 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
               const imageUrl = await resolveAvatarUrl(entry.imageUrl || null);
               return {
                 id: `cms-${index}`,
+                profileId: entry.id,
                 name: entry.name,
                 subtitle: entry.subtitle || '',
                 location: entry.location || '',
@@ -358,9 +360,9 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
               ))}
             </>
           ) : displayData.length > 0 ? (
-            displayData.map((professional) => (
+            displayData.map((professional) => {
+              const card = (
                 <ProfessionalCard
-                key={professional.id}
                   name={professional.name}
                   subtitle={professional.subtitle}
                   location={professional.location}
@@ -370,7 +372,19 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
                   isVerified={professional.isVerified}
                   rating={professional.rating}
                 />
-            ))
+              );
+              return professional.profileId ? (
+                <Link
+                  key={professional.id}
+                  href={`/user/profile/${professional.profileId}`}
+                  className="hover:shadow-xl transition-shadow rounded-[15px]"
+                >
+                  {card}
+                </Link>
+              ) : (
+                <div key={professional.id}>{card}</div>
+              );
+            })
           ) : (
             // No data message
             <div className="col-span-3 flex items-center justify-center py-12">

src/types/cms.ts

@@ -12,6 +12,7 @@ export interface FeatureItem {
 }
 
 export interface FeaturedAgentItem {
+  id?: string;
   name: string;
   role: string;
   rating: string;
@@ -28,6 +29,7 @@ export interface FeaturesContent {
 }
 
 export interface ProfessionalItem {
+  id?: string;
   name: string;
   subtitle: string;
   location: string;