feat: dynamically adjust About page content and calls-to-action based on the user's agent status.

src/app/about/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useSession } from 'next-auth/react';
 import { CommonHeader } from '@/components/layout/CommonHeader';
 import { Footer } from '@/components/layout/Footer';
 import { cmsService } from '@/services/cms.service';
@@ -82,6 +83,9 @@ const defaultCta: AboutCtaContent = {
 // ---------------------------------------------------------------------------
 
 export default function AboutPage() {
+  const { data: session } = useSession();
+  const isAgent = (session?.user as any)?.role === 'AGENT';
+
   const [hero, setHero] = useState<AboutHeroContent>(defaultHero);
   const [stats, setStats] = useState<AboutStatsContent>(defaultStats);
   const [features, setFeatures] = useState<AboutFeaturesContent>(defaultFeatures);
@@ -151,10 +155,10 @@ export default function AboutPage() {
 
             {/* CTA Button */}
             <Link
-              href="/agents"
+              href={isAgent ? '/agent/dashboard' : '/user/profiles'}
               className="inline-flex items-center justify-center w-[160px] h-[46px] border border-[#00293d] rounded-full font-fractul font-medium text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors"
             >
-              {hero.ctaButtonText}
+              {isAgent ? 'Go to Dashboard' : hero.ctaButtonText}
             </Link>
           </div>
         </section>
@@ -281,16 +285,16 @@ export default function AboutPage() {
             <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
               <div className="lg:max-w-[400px] text-center lg:text-left">
                 <h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
-                  {cta.title}
+                  {isAgent ? 'Manage your profile' : cta.title}
                 </h2>
                 <p className="font-serif text-[13px] text-[#00293d] mb-5">
-                  {cta.description}
+                  {isAgent ? 'Keep your profile updated and connect with potential clients.' : cta.description}
                 </p>
                 <Link
-                  href="/agents"
+                  href={isAgent ? '/agent/dashboard' : '/user/profiles'}
                   className="inline-flex items-center gap-2 bg-[#e58625] text-white px-5 py-2.5 rounded-full font-fractul font-medium text-[13px] hover:bg-[#d47720] transition-colors"
                 >
-                  {cta.buttonText}
+                  {isAgent ? 'Go to Dashboard' : cta.buttonText}
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                   </svg>