From cb96f5583a3602336a18f763d1b27396bb58b8b0 Mon Sep 17 00:00:00 2001
From: amirmoghi3 <siramirmoghi3@gmail.com>
Date: Tue, 11 Mar 2025 03:09:56 +0330
Subject: [PATCH] fix

---
 src/app/[locale]/contact-us/page.jsx   | 281 +++++++++++++++++++++++++
 src/components/ContactUs/index.jsx     | 184 ++++++++--------
 src/components/NavBar/index.jsx        |   2 +
 src/messages/ar-OM.json                |  76 ++++++-
 src/messages/en.json                   | 126 ++++++++---
 src/view/Landing/components/Footer.jsx |   2 +-
 src/view/Landing/index.jsx             |   1 +
 7 files changed, 545 insertions(+), 127 deletions(-)
 create mode 100644 src/app/[locale]/contact-us/page.jsx

diff --git a/src/app/[locale]/contact-us/page.jsx b/src/app/[locale]/contact-us/page.jsx
new file mode 100644
index 0000000..b3f8809
--- /dev/null
+++ b/src/app/[locale]/contact-us/page.jsx
@@ -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>
+  )
+}
diff --git a/src/components/ContactUs/index.jsx b/src/components/ContactUs/index.jsx
index e3e95aa..5e4def9 100644
--- a/src/components/ContactUs/index.jsx
+++ b/src/components/ContactUs/index.jsx
@@ -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()
 
@@ -32,12 +51,12 @@ export default function ContactModal({ close, open }) {
             return;
         }
 
-        const {createInbox} = await graphql(gql, {
+        const { createInbox } = await graphql(gql, {
             data: {
                 email,
                 companyName,
                 message,
-                
+
             },
             locale
         })
@@ -46,93 +65,82 @@ export default function ContactModal({ close, open }) {
             close();
         }
     }
-
     return (
-        <>
+        <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>
+                <button
+                    onClick={close}
+                    className="text-gray-500 hover:text-gray-700"
+                >
+                    <X className="h-6 w-6" />
+                </button>
+            </div>
 
-
-            {/* 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>
-                            <button
-                                onClick={close}
-                                className="text-gray-500 hover:text-gray-700"
-                            >
-                                <X className="h-6 w-6" />
-                            </button>
-                        </div>
-
-                        {/* Form */}
-                        <form onSubmit={submitForm} className="space-y-4">
-                            {/* Email Field */}
-                            <div>
-                                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                                    {t("email")}
-                                </label>
-                                <input
-                                    type="email"
-                                    id="email"
-                                    name="email"
-                                    placeholder={t("emailPlaceholder")}
-                                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
-                                    required
-                                />
-                            </div>
-
-                            {/* Company Field */}
-                            <div>
-                                <label htmlFor="company" className="block text-sm font-medium text-gray-700">
-                                    {t("company")}
-                                </label>
-                                <input
-                                    type="text"
-                                    id="company"
-                                    name="company"
-                                    placeholder={t("companyPlaceholder")}
-                                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
-                                    required
-                                />
-                            </div>
-
-                            {/* Message Field */}
-                            <div>
-                                <label htmlFor="message" className="block text-sm font-medium text-gray-700">
-                                    {t("message")}
-                                </label>
-                                <textarea
-                                    id="message"
-                                    name="message"
-                                    rows={4}
-                                    placeholder={t("messagePlaceholder")}
-                                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
-                                    required
-                                />
-                            </div>
-
-                            {/* Submit Button */}
-                            <div className="flex gap-2">
-                                <button
-                                    type="submit"
-                                    className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
-                                >
-                                    {t("sendButton")}
-                                </button>
-                                <button
-                                onClick={close}
-                                    type="button"
-                                    className="w-fit border px-4 py-2 bg-white text-gray-500 rounded-md hover:bg-primary-dark transition-colors"
-                                >
-                                    {t("closeButton")}
-                                </button>
-                            </div>
-                        </form>
-                    </div>
+            {/* Form */}
+            <form onSubmit={submitForm} className="space-y-4">
+                {/* Email Field */}
+                <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                        {t("email")}
+                    </label>
+                    <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        placeholder={t("emailPlaceholder")}
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
+                        required
+                    />
                 </div>
-            )}
-        </>
-    );
+
+                {/* Company Field */}
+                <div>
+                    <label htmlFor="company" className="block text-sm font-medium text-gray-700">
+                        {t("company")}
+                    </label>
+                    <input
+                        type="text"
+                        id="company"
+                        name="company"
+                        placeholder={t("companyPlaceholder")}
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
+                        required
+                    />
+                </div>
+
+                {/* Message Field */}
+                <div>
+                    <label htmlFor="message" className="block text-sm font-medium text-gray-700">
+                        {t("message")}
+                    </label>
+                    <textarea
+                        id="message"
+                        name="message"
+                        rows={4}
+                        placeholder={t("messagePlaceholder")}
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
+                        required
+                    />
+                </div>
+
+                {/* Submit Button */}
+                <div className="flex gap-2">
+                    <button
+                        type="submit"
+                        className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
+                    >
+                        {t("sendButton")}
+                    </button>
+                    <button
+                        onClick={close}
+                        type="button"
+                        className="w-fit border px-4 py-2 bg-white text-gray-500 rounded-md hover:bg-primary-dark transition-colors"
+                    >
+                        {t("closeButton")}
+                    </button>
+                </div>
+            </form>
+        </div>
+    )
 }
\ No newline at end of file
diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx
index 89a0283..34f26ec 100644
--- a/src/components/NavBar/index.jsx
+++ b/src/components/NavBar/index.jsx
@@ -19,6 +19,8 @@ const theme = 1;
 const Navbar = ({ items }) => {
   const router = useRouter();
 
+  
+
 
 
   const [closeNavbar, setClosNavbar] = useState(false);
diff --git a/src/messages/ar-OM.json b/src/messages/ar-OM.json
index 69e76e4..5eadb98 100644
--- a/src/messages/ar-OM.json
+++ b/src/messages/ar-OM.json
@@ -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": "العربية"
+    }
   }
 }
diff --git a/src/messages/en.json b/src/messages/en.json
index 0434ae7..4b3124e 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -1,9 +1,9 @@
 {
   "HomePage": {
-    "SEO":{
-      "title":"Advanced Horizon Services LLC",
-      "description":"Advanced Horizon Services LLC offers reliable wholesale supply chain solutions for high-quality detergents and food products with a focus on excellence"
-  },
+    "SEO": {
+      "title": "Advanced Horizon Services LLC",
+      "description": "Advanced Horizon Services LLC offers reliable wholesale supply chain solutions for high-quality detergents and food products with a focus on excellence"
+    },
     "AboutUs": {
       "brandName": "ADVANCED HORIZON SERVICES LLC",
       "description": [
@@ -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": {
@@ -26,32 +25,29 @@
         "description": "Our Construction arm is dedicated to creating lasting infrastructure and innovative building solutions. From residential projects to commercial complexes, we bring expertise, quality, and sustainability to every construction endeavor"
       }
     },
-    "products":{
-      "title":[
-"Active Products",
-"Constructions"
-      ] 
+    "products": {
+      "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",
-    "subtitle":"Explore Our Range of Products",
-    "filter":{
-      "title":"Filters",
-      "categories":"Categories",
-      "brands":"Brands"
+  "PLP": {
+    "title": "Products",
+    "subtitle": "Explore Our Range of Products",
+    "filter": {
+      "title": "Filters",
+      "categories": "Categories",
+      "brands": "Brands"
     }
   },
-  "PDP":{
-    "contactUs":"Contact Us",
-    "home":"Home",
-    "productDetails":"Product Details",
-    "productDescription":"Product Description",
-    "productSpecification":"Product Specification",
-    "productRelated":"Frequently Bought Together"
+  "PDP": {
+    "contactUs": "Contact Us",
+    "home": "Home",
+    "productDetails": "Product Details",
+    "productDescription": "Product Description",
+    "productSpecification": "Product Specification",
+    "productRelated": "Frequently Bought Together"
   },
   "ContactModal": {
     "title": "Contact Us",
@@ -63,15 +59,79 @@
     "messagePlaceholder": "Enter your message",
     "sendButton": "Send Message",
     "closeButton": "Close",
-    "error":{
-      "fillAllFields":"Please fill all fields",
-      "invalidEmail":"Please enter a valid email address"
+    "error": {
+      "fillAllFields": "Please fill all fields",
+      "invalidEmail": "Please enter a valid email address"
     },
-    "success":"Message sent successfully",
-    "cta":"Contact Us"
+    "success": "Message sent successfully",
+    "cta": "Contact Us"
   },
-  "Utils":{
-    "showMoreLink":"Show more",
-    "moreDetail":"More detail"
+  "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"
+    }
   }
 }
diff --git a/src/view/Landing/components/Footer.jsx b/src/view/Landing/components/Footer.jsx
index df320c4..2d5944d 100644
--- a/src/view/Landing/components/Footer.jsx
+++ b/src/view/Landing/components/Footer.jsx
@@ -84,7 +84,7 @@ const Footer = () => {
 
     <footer className="bg-background border-t">
       <div className="container px-4 py-8 md:py-12 mx-auto">
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 ">
           <div className="space-y-4">
             <div className="flex items-center">
               <div className="flex flex-col">
diff --git a/src/view/Landing/index.jsx b/src/view/Landing/index.jsx
index e7280cd..8d8bdbe 100644
--- a/src/view/Landing/index.jsx
+++ b/src/view/Landing/index.jsx
@@ -67,6 +67,7 @@ const Landing = async () => {
 
       <Products />
       {/* <WhyHorizon/> */}
+      <ContactUs/>
 
     </div>
   );