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

src/components/home/HeroSection.tsx

@@ -4,9 +4,17 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { agentsService, AgentType } from '@/services/agents.service';
+import type { HeroContent } from '@/types/cms';
 
+const defaultHeroContent: HeroContent = {
+  headline: '\u201cDiscover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.\u201d',
+  description: 'Discover verified, top-rated real estate professionals',
+  ctaButtonText: 'See All Agents',
+  helperText: 'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.',
+};
 
-export function HeroSection() {
+export function HeroSection({ content }: { content?: HeroContent }) {
+  const data = content ?? defaultHeroContent;
   const router = useRouter();
   const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
   const [searchParams, setSearchParams] = useState({
@@ -106,10 +114,10 @@ export function HeroSection() {
         {/* Headline */}
         <div className="text-center mb-5">
           <h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto">
-            &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
+            {data.headline}
           </h1>
           <p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2">
-            Discover verified, top-rated real estate professionals
+            {data.description}
           </p>
         </div>
 
@@ -245,13 +253,13 @@ export function HeroSection() {
               onClick={handleSeeAllAgents}
               className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-base transition-colors shadow-md hover:shadow-lg"
             >
-              See All Agents
+              {data.ctaButtonText}
             </button>
           </div>
 
           {/* Helper Text */}
           <p className="text-center font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mt-3 max-w-[419px] mx-auto">
-            Connect with trusted local agents to explore homes, compare options, and make smarter decisions.
+            {data.helperText}
           </p>
         </div>
       </div>