fix
This commit is contained in:
pradeepkumar
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user