feat: Implement agent-specific contact page CTA, enhance avatar loading and message previews, and refine messaging read receipts with auto-mark functionality.

src/app/(agent)/agent/network/component/ConnectionCard.tsx

@@ -35,10 +35,14 @@ export function ConnectionCard({
     <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 py-4">
       {/* Avatar */}
       <div className="flex-shrink-0">
-        <div className="w-[80px] h-[80px] rounded-full overflow-hidden relative">
-          {(!avatar || !avatarLoaded || isPlaceholder) && (
+        <div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
+          {isPlaceholder ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-[#c4d9d4]">
+              <Image src={placeholder} alt={name} width={40} height={40} className="opacity-50" />
+            </div>
+          ) : !avatarLoaded ? (
             <div className="absolute inset-0 rounded-full shimmer-loading" />
-          )}
+          ) : null}
           {avatar && !isPlaceholder && (
             <img
               ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}

src/app/(agent)/agent/network/component/InvitationCard.tsx

@@ -49,10 +49,14 @@ export function InvitationCard({
     <div className={`flex flex-col sm:flex-row items-start sm:items-center gap-4 py-4 ${isProcessing ? 'opacity-50 pointer-events-none' : ''}`}>
       {/* Avatar */}
       <div className="flex-shrink-0">
-        <div className="w-[80px] h-[80px] rounded-full overflow-hidden relative">
-          {(!avatar || !avatarLoaded || isPlaceholder) && (
+        <div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
+          {isPlaceholder ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-[#c4d9d4]">
+              <Image src={placeholder} alt={name} width={40} height={40} className="opacity-50" />
+            </div>
+          ) : !avatarLoaded ? (
             <div className="absolute inset-0 rounded-full shimmer-loading" />
-          )}
+          ) : null}
           {avatar && !isPlaceholder && (
             <img
               ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}

src/app/contact/page.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
+import { useSession } from 'next-auth/react';
 import { CommonHeader } from '@/components/layout/CommonHeader';
 import { Footer } from '@/components/layout/Footer';
 import { cmsService } from '@/services/cms.service';
@@ -47,6 +48,9 @@ const defaultCta: ContactCta = {
 };
 
 export default function ContactPage() {
+  const { data: session } = useSession();
+  const isAgent = (session?.user as any)?.role === 'AGENT';
+
   const [formData, setFormData] = useState({
     name: '',
     phone: '',
@@ -345,21 +349,21 @@ export default function ContactPage() {
           </div>
         </div>
 
-        {/* CTA Section - Ready to find an agent */}
+        {/* CTA Section */}
         <div className="max-w-4xl mx-auto border border-[#00293d]/20 rounded-[15px] p-8 lg:p-10 mb-10">
           <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
             <div className="lg:max-w-[400px]">
               <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={cta.buttonLink}
+                href={isAgent ? '/agent/dashboard' : cta.buttonLink}
                 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>