feat: Integrate CMS to dynamically populate home page sections with dedicated content types and a new service.

src/components/home/TopProfessionals.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import type { TopProfessionalsContent } from '@/types/cms';
 
 // Sample agents data for tabs
 const agentsData = [
@@ -177,9 +178,18 @@ function ProfessionalCard({
   );
 }
 
-export function TopProfessionals() {
+const defaultContent: TopProfessionalsContent = {
+  title: '\u201cMeet top real estate professionals\u201d',
+  ctaText: 'Discover 5,000+ Top Real Estate Agents in Our Network.',
+  ctaButtonText: 'Browse Experts',
+  agents: agentsData,
+  lenders: lendersData,
+};
+
+export function TopProfessionals({ content }: { content?: TopProfessionalsContent }) {
+  const data = content ?? defaultContent;
   const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
-  const displayData = activeTab === 'agents' ? agentsData : lendersData;
+  const displayData = activeTab === 'agents' ? data.agents : data.lenders;
 
   return (
     <section className="py-10 md:py-12 bg-white">
@@ -187,7 +197,7 @@ export function TopProfessionals() {
         {/* Section Header */}
         <div className="text-center mb-10">
           <h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
-            &ldquo;Meet top real estate professionals&rdquo;
+            {data.title}
           </h2>
         </div>
 
@@ -238,9 +248,9 @@ export function TopProfessionals() {
         {/* 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) => (
+          {displayData.map((professional, index) => (
             <ProfessionalCard
-              key={professional.id}
+              key={index}
               name={professional.name}
               subtitle={professional.subtitle}
               location={professional.location}
@@ -269,13 +279,13 @@ export function TopProfessionals() {
 
             {/* 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.
+              {data.ctaText}
             </p>
 
             {/* Browse Experts Button */}
             <Link href="/user/profiles">
               <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
+                {data.ctaButtonText}
               </button>
             </Link>
           </div>