fix

src/app/contact/page.tsx

@@ -2,9 +2,48 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { CommonHeader } from '@/components/layout/CommonHeader';
 import { Footer } from '@/components/layout/Footer';
+import { cmsService } from '@/services/cms.service';
+
+interface ContactDetails {
+  title: string;
+  description: string;
+  email: string;
+  phone: string;
+  phoneHours: string;
+  officeAddress: string;
+  officeCity: string;
+  mapUrl: string;
+  directionsUrl: string;
+}
+
+interface ContactCta {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+}
+
+const defaultContactDetails: ContactDetails = {
+  title: 'Get In Touch',
+  description: 'Have a question about a property or need assistance? Fill out the form below and our team will get back to you shortly.',
+  email: '123support@gmail.com',
+  phone: '1234567890',
+  phoneHours: 'Mon-Fri 9am-6pm',
+  officeAddress: '123 Market Street',
+  officeCity: 'New York CA 234737',
+  mapUrl: '',
+  directionsUrl: '',
+};
+
+const defaultCta: ContactCta = {
+  title: 'Ready to find an agent?',
+  description: 'Discover trusted agents and start your property journey with confidence.',
+  buttonText: 'Start Your Search',
+  buttonLink: '/user/profiles',
+};
 
 export default function ContactPage() {
   const [formData, setFormData] = useState({
@@ -14,6 +53,21 @@ export default function ContactPage() {
     message: '',
   });
 
+  const [contactDetails, setContactDetails] = useState<ContactDetails>(defaultContactDetails);
+  const [cta, setCta] = useState<ContactCta>(defaultCta);
+
+  useEffect(() => {
+    const loadCms = async () => {
+      const [details, ctaData] = await Promise.all([
+        cmsService.getSectionContent<ContactDetails>('contact', 'contactDetails'),
+        cmsService.getSectionContent<ContactCta>('contact', 'cta'),
+      ]);
+      if (details) setContactDetails({ ...defaultContactDetails, ...details });
+      if (ctaData) setCta({ ...defaultCta, ...ctaData });
+    };
+    loadCms();
+  }, []);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -43,10 +97,10 @@ export default function ContactPage() {
           {/* Title */}
           <div className="text-center mb-8">
             <h1 className="font-fractul font-bold text-[25px] text-[#00293d] mb-4">
-              Get In Touch
+              {contactDetails.title}
             </h1>
             <p className="font-serif text-[14px] text-[#00293d] max-w-[633px] mx-auto">
-              Have a question about a property or need assistance? Fill out the form below and our team will get back to you shortly.
+              {contactDetails.description}
             </p>
           </div>
 
@@ -177,7 +231,7 @@ export default function ContactPage() {
                         Email Support
                       </p>
                       <p className="font-serif text-[14px] text-[#00293d]">
-                        123support@gmail.com
+                        {contactDetails.email}
                       </p>
                     </div>
                   </div>
@@ -198,10 +252,10 @@ export default function ContactPage() {
                         Phone
                       </p>
                       <p className="font-serif text-[14px] text-[#00293d]">
-                        1234567890
+                        {contactDetails.phone}
                       </p>
                       <p className="font-serif text-[10px] text-[#00293d]">
-                        Mon-Fri 9am-6pm
+                        {contactDetails.phoneHours}
                       </p>
                     </div>
                   </div>
@@ -222,10 +276,10 @@ export default function ContactPage() {
                         Office
                       </p>
                       <p className="font-serif text-[14px] text-[#00293d]">
-                        123 Market Street
+                        {contactDetails.officeAddress}
                       </p>
                       <p className="font-serif text-[14px] text-[#00293d]">
-                        New York CA 234737
+                        {contactDetails.officeCity}
                       </p>
                     </div>
                   </div>
@@ -246,9 +300,13 @@ export default function ContactPage() {
 
                 {/* Get Directions Button */}
                 <div className="px-4 pb-4">
-                  <button className="w-[117px] h-[35px] border border-[#e58625] rounded-[15px] font-serif text-[14px] text-[#e58625] hover:bg-[#e58625]/10 transition-colors mx-auto block">
+                  <Link
+                    href={contactDetails.directionsUrl || '#'}
+                    target={contactDetails.directionsUrl ? '_blank' : undefined}
+                    className="w-[117px] h-[35px] border border-[#e58625] rounded-[15px] font-serif text-[14px] text-[#e58625] hover:bg-[#e58625]/10 transition-colors mx-auto flex items-center justify-center"
+                  >
                     Get Directions
-                  </button>
+                  </Link>
                 </div>
               </div>
             </div>
@@ -260,16 +318,16 @@ export default function ContactPage() {
           <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">
-                Ready to find an agent?
+                {cta.title}
               </h2>
               <p className="font-serif text-[13px] text-[#00293d] mb-5">
-                Discover trusted agents and start your property journey with confidence.
+                {cta.description}
               </p>
               <Link
-                href="/agents"
+                href={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"
               >
-                Start Your Search
+                {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>