OwlCyberSecurity - MANAGER

Edit File: page.tsx

import React from "react";
import ContactUsForm from "./ContactUsForm";
import LeafletContactUsMap from "./LeafletContactUsMap";
import Image from "next/image";
import { ReduxProvider } from "@/redux/provider";

function ContactUsPage() {
  return (
    <main className="contact-us-page">
      <Image
        className="absolute top-16 right-0 z-0"
        src="/assets/images/home/faq-bg3.png"
        alt="مقالات چارسوق"
        width={542}
        height={658}
        priority
      />
      <Image
        className="absolute top-16 left-0 z-0"
        src="/assets/images/home/faq-bg2.png"
        alt="مقالات چارسوق"
        width={532}
        height={443}
        priority
      />
      <div className="contact-us-form-container">
        <h1 className="flex items-center text-[36px] font-IRANSansBold gap-2">
          تماس با{" "}
          <span className="text-[var(--base-yellow)] font-IRANSansBold">
            {" "}
            چارسوق{" "}
          </span>
        </h1>
        <p className="text-[var(--text-gray)]">
          شما می‌توانید به صورت شبانه روزی با تیم چارسوق در تماس باشید و سوالات
          خود را از ما بپرسید.
        </p>
        <ContactUsForm />
      </div>
      <div className="flex flex-col md:flex-row items-center gap-4 relative z-10 w-[95vw] sm:w-[92vw] md:w-[92vw] lg:w-[88vw] xl:w-[80vw]">
        <div className="contact-us-detail">
          <div className="contact-us-detail-single">
            <h4>تماس با کارشناسان چارسوق</h4>
            <p>شنبه تا چهارشنبه: ساعت 8 الی 16 پنجشنبه‌ها: ساعت 9 الی 13</p>
            <div className="flex items-center gap-5">
              <a
                className="text-[var(--base-blue)] font-IRANSansBold underline"
                href="tel:02192007801"
              >
                02192007801
              </a>
              <a
                className="text-[var(--base-blue)] font-IRANSansBold underline"
                href="tel:02192007802"
              >
                02192007802
              </a>
              <a
                className="text-[var(--base-blue)] font-IRANSansBold underline"
                href="tel:02192007803"
              >
                02192007803
              </a>
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-2">
                <p>تلگرام پشتیبانی</p>
                <a
                  className="text-[var(--base-blue)] font-IRANSansBold underline"
                  href="tel:09323194545"
                >
                  09323194545
                </a>
              </div>
              <div className="flex items-center gap-2">
                <p>تلگرام پیش فاکتور</p>
                <a
                  className="text-[var(--base-blue)] font-IRANSansBold underline"
                  href="tel:09323194646"
                >
                  09323194646
                </a>
              </div>
              <div className="flex items-center gap-2">
                <p>تلگرام خرید</p>
                <a
                  className="text-[var(--base-blue)] font-IRANSansBold underline"
                  href="tel:09323194747"
                >
                  09323194747
                </a>
              </div>
            </div>
          </div>
          <div className="contact-us-detail-single">
            <h4>ارتباط با چارسوق</h4>
            <p>جهت استعلام کالای مورد نظر با کارشناسان ما تماس بگیرید.</p>
            <div className="flex items-center gap-4">
              <a
                target="_blank"
                href="https://www.instagram.com/charsooqofficial/"
              >
                <svg
                  width="24"
                  height="25"
                  viewBox="0 0 24 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0 12.1406C0 5.51321 5.37258 0.140625 12 0.140625C18.6274 0.140625 24 5.51321 24 12.1406C24 18.768 18.6274 24.1406 12 24.1406C5.37258 24.1406 0 18.768 0 12.1406Z"
                    fill="url(#paint0_radial_1786_8836)"
                  />
                  <path
                    d="M0 12.1406C0 5.51321 5.37258 0.140625 12 0.140625C18.6274 0.140625 24 5.51321 24 12.1406C24 18.768 18.6274 24.1406 12 24.1406C5.37258 24.1406 0 18.768 0 12.1406Z"
                    fill="url(#paint1_radial_1786_8836)"
                  />
                  <path
                    d="M0 12.1406C0 5.51321 5.37258 0.140625 12 0.140625C18.6274 0.140625 24 5.51321 24 12.1406C24 18.768 18.6274 24.1406 12 24.1406C5.37258 24.1406 0 18.768 0 12.1406Z"
                    fill="url(#paint2_radial_1786_8836)"
                  />
                  <path
                    d="M16.2 8.84063C16.2 9.33768 15.7971 9.74063 15.3 9.74063C14.8029 9.74063 14.4 9.33768 14.4 8.84063C14.4 8.34357 14.8029 7.94063 15.3 7.94063C15.7971 7.94063 16.2 8.34357 16.2 8.84063Z"
                    fill="white"
                  />
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M12 15.1406C13.6569 15.1406 15 13.7975 15 12.1406C15 10.4838 13.6569 9.14062 12 9.14062C10.3431 9.14062 9 10.4838 9 12.1406C9 13.7975 10.3431 15.1406 12 15.1406ZM12 13.9406C12.9941 13.9406 13.8 13.1347 13.8 12.1406C13.8 11.1465 12.9941 10.3406 12 10.3406C11.0059 10.3406 10.2 11.1465 10.2 12.1406C10.2 13.1347 11.0059 13.9406 12 13.9406Z"
                    fill="white"
                  />
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M6 11.9006C6 9.88444 6 8.87634 6.39238 8.10626C6.73752 7.42888 7.28825 6.87815 7.96563 6.533C8.73572 6.14062 9.74381 6.14062 11.76 6.14062H12.24C14.2562 6.14062 15.2643 6.14062 16.0344 6.533C16.7117 6.87815 17.2625 7.42888 17.6076 8.10626C18 8.87634 18 9.88444 18 11.9006V12.3806C18 14.3968 18 15.4049 17.6076 16.175C17.2625 16.8524 16.7117 17.4031 16.0344 17.7482C15.2643 18.1406 14.2562 18.1406 12.24 18.1406H11.76C9.74381 18.1406 8.73572 18.1406 7.96563 17.7482C7.28825 17.4031 6.73752 16.8524 6.39238 16.175C6 15.4049 6 14.3968 6 12.3806V11.9006ZM11.76 7.34063H12.24C13.2679 7.34063 13.9666 7.34156 14.5068 7.38569C15.0329 7.42867 15.3019 7.50658 15.4896 7.60221C15.9412 7.83231 16.3083 8.19946 16.5384 8.65105C16.634 8.83873 16.712 9.10777 16.7549 9.63387C16.7991 10.174 16.8 10.8727 16.8 11.9006V12.3806C16.8 13.4085 16.7991 14.1073 16.7549 14.6474C16.712 15.1735 16.634 15.4425 16.5384 15.6302C16.3083 16.0818 15.9412 16.4489 15.4896 16.679C15.3019 16.7747 15.0329 16.8526 14.5068 16.8956C13.9666 16.9397 13.2679 16.9406 12.24 16.9406H11.76C10.7321 16.9406 10.0334 16.9397 9.49325 16.8956C8.96715 16.8526 8.6981 16.7747 8.51042 16.679C8.05883 16.4489 7.69168 16.0818 7.46158 15.6302C7.36596 15.4425 7.28805 15.1735 7.24506 14.6474C7.20093 14.1073 7.2 13.4085 7.2 12.3806V11.9006C7.2 10.8727 7.20093 10.174 7.24506 9.63387C7.28805 9.10777 7.36596 8.83873 7.46158 8.65105C7.69168 8.19946 8.05883 7.83231 8.51042 7.60221C8.6981 7.50658 8.96715 7.42867 9.49325 7.38569C10.0334 7.34156 10.7321 7.34063 11.76 7.34063Z"
                    fill="white"
                  />
                  <defs>
                    <radialGradient
                      id="paint0_radial_1786_8836"
                      cx="0"
                      cy="0"
                      r="1"
                      gradientUnits="userSpaceOnUse"
                      gradientTransform="translate(8.57143 18.1406) rotate(-55.3758) scale(21.8739)"
                    >
                      <stop stopColor="#B13589" />
                      <stop offset="0.79309" stopColor="#C62F94" />
                      <stop offset="1" stopColor="#8A3AC8" />
                    </radialGradient>
                    <radialGradient
                      id="paint1_radial_1786_8836"
                      cx="0"
                      cy="0"
                      r="1"
                      gradientUnits="userSpaceOnUse"
                      gradientTransform="translate(7.71429 24.9978) rotate(-65.1363) scale(19.3665)"
                    >
                      <stop stopColor="#E0E8B7" />
                      <stop offset="0.444662" stopColor="#FB8A2E" />
                      <stop offset="0.71474" stopColor="#E2425C" />
                      <stop offset="1" stopColor="#E2425C" stopOpacity="0" />
                    </radialGradient>
                    <radialGradient
                      id="paint2_radial_1786_8836"
                      cx="0"
                      cy="0"
                      r="1"
                      gradientUnits="userSpaceOnUse"
                      gradientTransform="translate(-1.28571 0.997768) rotate(-8.1301) scale(33.335 7.13002)"
                    >
                      <stop offset="0.156701" stopColor="#406ADC" />
                      <stop offset="0.467799" stopColor="#6A45BE" />
                      <stop offset="1" stopColor="#6A45BE" stopOpacity="0" />
                    </radialGradient>
                  </defs>
                </svg>
              </a>
              <a target="_blank" href="https://wa.me/989919964091">
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle cx="12" cy="12" r="12" fill="#4CC85A" />
                  <path
                    d="M9.42898 7.63545C9.19122 7.1579 8.82648 7.20018 8.45802 7.20018C7.7995 7.20018 6.77271 7.98895 6.77271 9.45694C6.77271 10.66 7.30285 11.977 9.08926 13.9471C10.8133 15.8483 13.0785 16.8319 14.9591 16.7984C16.8397 16.7649 17.2266 15.1466 17.2266 14.6001C17.2266 14.3579 17.0763 14.237 16.9728 14.2042C16.3319 13.8966 15.15 13.3235 14.881 13.2158C14.6121 13.1082 14.4716 13.2538 14.3844 13.333C14.1405 13.5655 13.657 14.2504 13.4915 14.4045C13.326 14.5585 13.0792 14.4806 12.9765 14.4223C12.5986 14.2707 11.5739 13.8149 10.7572 13.0231C9.74706 12.044 9.68778 11.7071 9.49747 11.4072C9.34522 11.1673 9.45694 11.0201 9.51269 10.9558C9.73032 10.7047 10.0308 10.317 10.1656 10.1243C10.3004 9.93164 10.1934 9.63913 10.1292 9.45694C9.85309 8.67341 9.61919 8.0175 9.42898 7.63545Z"
                    fill="white"
                  />
                </svg>
              </a>
              <a target="_blank" href="https://telegram.me/charsooq">
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="12"
                    fill="url(#paint0_linear_1786_8842)"
                  />
                  <path
                    d="M17.1576 7.68829C17.2428 7.1379 16.7195 6.70347 16.2301 6.91833L6.48293 11.1979C6.13198 11.3519 6.15765 11.8835 6.52164 11.9994L8.53175 12.6396C8.91539 12.7617 9.33081 12.6986 9.66581 12.4671L14.1977 9.33611C14.3344 9.24169 14.4833 9.436 14.3666 9.55638L11.1044 12.9197C10.788 13.246 10.8508 13.7988 11.2314 14.0375L14.8838 16.3279C15.2934 16.5847 15.8204 16.3267 15.897 15.8317L17.1576 7.68829Z"
                    fill="white"
                  />
                  <defs>
                    <linearGradient
                      id="paint0_linear_1786_8842"
                      x1="12"
                      y1="0"
                      x2="12"
                      y2="24"
                      gradientUnits="userSpaceOnUse"
                    >
                      <stop stopColor="#37BBFE" />
                      <stop offset="1" stopColor="#007DBB" />
                    </linearGradient>
                  </defs>
                </svg>
              </a>
            </div>
          </div>
          <div className="contact-us-detail-single">
            <h4>آدرس چارسوق</h4>
            <p>
              تهران – خیابان بهشتی - خیابان احمد قصیر-روبه روی دادسرا نبش سوم-
              پلاک ۸ - طبقه دوم
            </p>
          </div>
        </div>
        <div className="contact-us-detail-map">
          {/* <ContactUsMap /> */}
          <ReduxProvider>
            <LeafletContactUsMap />
          </ReduxProvider>
        </div>
      </div>
    </main>
  );
}

export default ContactUsPage;