fix
parent
a46f5796d7
commit
cb96f5583a
|
|
@ -0,0 +1,281 @@
|
|||
"use client"
|
||||
|
||||
import { Mailbox } from 'lucide-react'
|
||||
import { Clock, Facebook, Globe, Instagram, Linkedin, Mail, MapPin, Phone, Send, Twitter } from 'lucide-react'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
import { toast } from 'react-toastify'
|
||||
import graphql from 'src/utils/graphql'
|
||||
|
||||
|
||||
const gql = `
|
||||
mutation CreateMessage($data: MessageInput!) {
|
||||
createMessage(data: $data) {
|
||||
documentId
|
||||
}
|
||||
}
|
||||
`
|
||||
export default function ContactPage() {
|
||||
const t = useTranslations('ContactUs')
|
||||
const locale = useLocale()
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
phone: ""
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
if (!formData.email || !formData.subject || !formData.message) {
|
||||
toast.success("Compelete All Required fields")
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
// Simulate form submission
|
||||
const res = await graphql(gql, {
|
||||
data: {
|
||||
...formData
|
||||
}
|
||||
})
|
||||
|
||||
toast.success("Message sent successfully")
|
||||
|
||||
setIsSubmitting(false)
|
||||
|
||||
setFormData({ name: "", email: "", subject: "", message: "", phone: "" })
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-50 min-h-screen `}>
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-primary-600 to-indigo-700 text-white py-20">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">{t('pageTitle')}</h1>
|
||||
<p className="text-lg md:text-xl opacity-90">
|
||||
{t('pageSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 md:px-6 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">{t('contactInfo.title')}</h2>
|
||||
<p className="text-gray-600 mb-8">
|
||||
{t('contactInfo.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Details */}
|
||||
<div className="space-y-6">
|
||||
<div className={`flex items-start space-x-4`}>
|
||||
<div className="bg-primary-100 p-3 rounded-full">
|
||||
<MapPin className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">{t('contactInfo.office.title')}</h3>
|
||||
<p className="text-gray-600 mt-1">{t('contactInfo.office.address1')}</p>
|
||||
<p className="text-gray-600">{t('contactInfo.office.address2')}</p>
|
||||
<p className="text-gray-600">{t('contactInfo.office.address3')}</p>
|
||||
<p className="text-gray-600">{t('contactInfo.office.postalCode')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={`flex items-start space-x-4`}>
|
||||
<div className="bg-primary-100 p-3 rounded-full">
|
||||
<Phone className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">{t('contactInfo.phone.title')}</h3>
|
||||
<p className="text-gray-600 mt-1">{t('contactInfo.phone.number')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-start space-x-4`}>
|
||||
<div className="bg-primary-100 p-3 rounded-full">
|
||||
<Mail className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">{t('contactInfo.email.title')}</h3>
|
||||
<p className="text-gray-600 mt-1">{t('contactInfo.email.address')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-start space-x-4`}>
|
||||
<div className="bg-primary-100 p-3 rounded-full">
|
||||
<Clock className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">{t('contactInfo.hours.title')}</h3>
|
||||
<p className="text-gray-600 mt-1">{t('contactInfo.hours.weekdays')}</p>
|
||||
<p className="text-gray-600">{t('contactInfo.hours.weekend')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Media */}
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">{t('social.title')}</h3>
|
||||
<div className={`flex space-x-4`}>
|
||||
{/* <Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.facebook')}>
|
||||
<Facebook className="h-6 w-6 text-primary-600" />
|
||||
</Link>
|
||||
<Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.twitter')}>
|
||||
<Twitter className="h-6 w-6 text-primary-600" />
|
||||
</Link> */}
|
||||
<Link href="https://instagram.com/adhorizonsupply" target='_blank' className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.instagram')}>
|
||||
<Instagram className="h-6 w-6 text-primary-600" />
|
||||
</Link>
|
||||
{/* <Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.linkedin')}>
|
||||
<Linkedin className="h-6 w-6 text-primary-600" />
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold mb-6">{t('form.title')}</h2>
|
||||
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('form.name.label')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
placeholder={t('form.name.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('form.email.label')} <span className='text-red-600'>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
placeholder={t('form.email.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('form.phone.label')}
|
||||
</label>
|
||||
<input
|
||||
type="phone"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
placeholder={t('form.phone.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('form.subject.label')} <span className='text-red-600'>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
placeholder={t('form.subject.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('form.message.label')} <span className='text-red-600'>*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
placeholder={t('form.message.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={`w-full flex items-center justify-center space-x-2 bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-colors ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<svg className={`animate-spin h-5 w-5 text-white`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>{t('form.sending')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>{t('form.submit')}</span>
|
||||
<Send className={`h-5 w-5 `} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map Section */}
|
||||
<div className="mt-16">
|
||||
<h2 className="text-2xl font-bold mb-6">{t('map.title')}</h2>
|
||||
<div className="h-[400px] w-full rounded-xl overflow-hidden shadow-lg">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14584.90996109082!2d58.252388472339625!3d23.623068386452697!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e8dfdb3865ce30b%3A0x3bccc2e6948fb258!2sAl%20Mawalih%20North%2C%20Seeb%2C%20Oman!5e1!3m2!1sen!2s!4v1741649854951!5m2!1sen!2s"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -15,6 +15,25 @@ mutation CreateInbox($data: InboxInput!,$locale:I18NLocaleCode) {
|
|||
|
||||
export default function ContactModal({ close, open }) {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
{/* Modal Overlay */}
|
||||
{open && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
{/* Modal Content */}
|
||||
<ContactBody />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export const ContactBody = () => {
|
||||
const t = useTranslations("ContactModal");
|
||||
const locale = useLocale()
|
||||
|
||||
|
|
@ -46,15 +65,7 @@ export default function ContactModal({ close, open }) {
|
|||
close();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
{/* Modal Overlay */}
|
||||
{open && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
{/* Modal Content */}
|
||||
<div className="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-semibold">{t("title")}</h2>
|
||||
|
|
@ -131,8 +142,5 @@ export default function ContactModal({ close, open }) {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
@ -21,6 +21,8 @@ const Navbar = ({ items }) => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
const [closeNavbar, setClosNavbar] = useState(false);
|
||||
const [activeStepNavbar, setActiveStepNavbar] = useState(null);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,14 +26,11 @@
|
|||
}
|
||||
},
|
||||
"products": {
|
||||
"title": [
|
||||
"منتجات Active",
|
||||
"الإنشاءات"
|
||||
]
|
||||
"title": ["منتجات Active", "الإنشاءات"]
|
||||
}
|
||||
},
|
||||
"Footer": {
|
||||
"address": "مسقط، السيب، موالح الشمالية، شارع الموج، رقم المجمع ٣٥٨، رقم المبنى ١/٢٠٣، مكتب رقم ٥٣، صندوق البريد: ٥٧ء"
|
||||
"address": "مكتب رقم 53، مبنى رقم 203، مجمع رقم 308 - الموالح الشمالية، شارع الموج، طریق رقم 108، السیب - محافظة مسقط، سلطنة عمان - ص.ب: 65، الرمز البريدي: 104"
|
||||
},
|
||||
"PLP": {
|
||||
"title": "المنتجات",
|
||||
|
|
@ -72,5 +69,74 @@
|
|||
"Utils": {
|
||||
"showMoreLink": "عرض المزيد",
|
||||
"moreDetail": "المزيد من التفاصيل"
|
||||
},
|
||||
"ContactUs": {
|
||||
"pageTitle": "تواصل معنا",
|
||||
"pageSubtitle": "نحن هنا لدعم عملك. فريقنا جاهز لمساعدتك في جميع احتياجاتك من المنتجات الاستهلاكية سريعة التداول ومنتجات البناء بالجملة",
|
||||
"contactInfo": {
|
||||
"title": "معلومات الاتصال",
|
||||
"description": "املأ النموذج وسيعاود فريقنا الاتصال بك خلال 24 ساعة.",
|
||||
"office": {
|
||||
"title": "مكتبنا",
|
||||
"address1": "مكتب رقم 53، مبنى رقم 203، مجمع رقم 308",
|
||||
"address2": "الموالح الشمالية، شارع الموج، طریق رقم 108، السیب",
|
||||
"address3": "محافظة مسقط ، سلطنة عمان",
|
||||
"postalCode": "ص.ب: 65، الرمز البريدي: 104"
|
||||
},
|
||||
"phone": {
|
||||
"title": "الهاتف",
|
||||
"number": "+968 24 28 98 88"
|
||||
},
|
||||
"email": {
|
||||
"title": "البريد الإلكتروني",
|
||||
"address": "info@adhorizonintl.com"
|
||||
},
|
||||
"hours": {
|
||||
"title": "ساعات العمل",
|
||||
"weekdays": "الإثنين - الجمعة: 9:00 صباحاً - 5:00 مساءً",
|
||||
"weekend": "عطلة نهاية الأسبوع: مغلق"
|
||||
}
|
||||
},
|
||||
"social": {
|
||||
"title": "تواصل معنا",
|
||||
"facebook": "فيسبوك",
|
||||
"twitter": "تويتر",
|
||||
"instagram": "انستغرام",
|
||||
"linkedin": "لينكد إن"
|
||||
},
|
||||
"form": {
|
||||
"title": "أرسل لنا رسالة",
|
||||
"name": {
|
||||
"label": "الاسم",
|
||||
"placeholder": "أدخل اسمك"
|
||||
},
|
||||
"email": {
|
||||
"label": "البريد الإلكتروني",
|
||||
"placeholder": "أدخل بريدك الإلكتروني"
|
||||
},
|
||||
"phone": {
|
||||
"label": "الهاتف",
|
||||
"placeholder": "+968 ..."
|
||||
},
|
||||
"subject": {
|
||||
"label": "الموضوع",
|
||||
"placeholder": "كيف يمكننا مساعدتك؟"
|
||||
},
|
||||
"message": {
|
||||
"label": "الرسالة",
|
||||
"placeholder": "اكتب رسالتك هنا..."
|
||||
},
|
||||
"submit": "إرسال الرسالة",
|
||||
"sending": "جاري الإرسال...",
|
||||
"success": "شكراً لك! تم إرسال رسالتك بنجاح. سنعاود الاتصال بك قريباً."
|
||||
},
|
||||
"map": {
|
||||
"title": "ابحث عنا على الخريطة"
|
||||
},
|
||||
"languageSwitcher": {
|
||||
"label": "اللغة",
|
||||
"english": "English",
|
||||
"arabic": "العربية"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
" At AHS, we understand the complexities of the supply chain and strive to simplify the process for our partners. Our extensive network of suppliers and manufacturers allows us to source top-notch products at competitive prices, ensuring that you receive the best value for your investment"
|
||||
]
|
||||
},
|
||||
|
||||
"Sides": {
|
||||
"title": "Discover Our Expertise",
|
||||
"fmcg": {
|
||||
|
|
@ -27,14 +26,11 @@
|
|||
}
|
||||
},
|
||||
"products": {
|
||||
"title":[
|
||||
"Active Products",
|
||||
"Constructions"
|
||||
]
|
||||
"title": ["Active Products", "Constructions"]
|
||||
}
|
||||
},
|
||||
"Footer": {
|
||||
"address": "Unit No. 53, Building No 203, Complex No.308 , Mawaleh North ,Road No. 108 Al Mouj Street , Muscat Oman , P.o.box.607 , P.c.111 Muscat Airport"
|
||||
"address": "Office No. 53, Building No. 203, Complex No. 308, Mawaleh North, Road No. 108, Al Mouj Street, Al Seeb, Muscat Governorate, Sultanate of Oman - P.O. Box: 65, P.C: 104"
|
||||
},
|
||||
"PLP": {
|
||||
"title": "Products",
|
||||
|
|
@ -73,5 +69,69 @@
|
|||
"Utils": {
|
||||
"showMoreLink": "Show more",
|
||||
"moreDetail": "More detail"
|
||||
},
|
||||
"ContactUs": {
|
||||
"pageTitle": "Get in Touch",
|
||||
"pageSubtitle": "We're here to support your business. Our team is ready to assist with all your wholesale FMCG and construction product needs",
|
||||
"contactInfo": {
|
||||
"title": "Contact Information",
|
||||
"description": "Fill up the form and our team will get back to you within 24 hours.",
|
||||
"office": {
|
||||
"title": "Our Office",
|
||||
"address1": "Office No. 53, Building No. 203, Complex No. 308 ",
|
||||
"address2": "Mawaleh North, Road No. 108, Al Mouj Street, Al Seeb",
|
||||
"address3": "Muscat Governorate, Sultanate of Oman",
|
||||
"postalCode": "P.O. Box: 65, P.C: 104"
|
||||
},
|
||||
"phone": {
|
||||
"title": "Phone",
|
||||
"number": "+968 24 28 98 88"
|
||||
},
|
||||
"email": {
|
||||
"title": "Email",
|
||||
"address": "info@adhorizonintl.com"
|
||||
},
|
||||
"hours": {
|
||||
"title": "Working Hours",
|
||||
"weekdays": "Monday - Friday: 9:00 AM - 5:00 PM",
|
||||
"weekend": "Weekend: Closed"
|
||||
}
|
||||
},
|
||||
"social": {
|
||||
"title": "Connect With Us",
|
||||
"facebook": "Facebook",
|
||||
"twitter": "Twitter",
|
||||
"instagram": "Instagram",
|
||||
"linkedin": "LinkedIn"
|
||||
},
|
||||
"form": {
|
||||
"title": "Send us a message",
|
||||
"name": {
|
||||
"label": "Your Name",
|
||||
"placeholder": "John Doe"
|
||||
},
|
||||
"email": {
|
||||
"label": "Email Address",
|
||||
"placeholder": "john@example.com"
|
||||
},
|
||||
"phone": {
|
||||
"label": "Phone",
|
||||
"placeholder": "+968 ..."
|
||||
},
|
||||
"subject": {
|
||||
"label": "Subject",
|
||||
"placeholder": "How can we help you?"
|
||||
},
|
||||
"message": {
|
||||
"label": "Message",
|
||||
"placeholder": "Your message here..."
|
||||
},
|
||||
"submit": "Send Message",
|
||||
"sending": "Sending...",
|
||||
"success": "Thank you! Your message has been sent successfully. We'll get back to you soon."
|
||||
},
|
||||
"map": {
|
||||
"title": "Find Us on the Map"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ const Landing = async () => {
|
|||
|
||||
<Products />
|
||||
{/* <WhyHorizon/> */}
|
||||
<ContactUs/>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue