ORIENT/themes/modern2/pages/new/contact.htm

title = "new/contact"
url = "/new/contact"
layout = "new/master-inside"
meta_title = "Обратная связь"
is_hidden = 1
robot_index = "index"
robot_follow = "follow"

[contactForm]
==
<style>
/* General Styles */
.contant {
  font-family: Roboto, sans-serif;
  color: #181D17;
}

.container {
  max-width: 1660px;
  margin: 0 auto;
  padding: 20px;
}

.contact-inner {
  display: flex;
  flex-direction: column;
  gap: 48px
}

.section-title-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.section-title {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.13px;
}

.section-title-separator {
    width: 100%;
    height: 1px;
    background: #039F37;
}

.contact-content-wrapper {
     display: flex;
     gap: 48px;
     padding: 0 67px;
}

.contact-left,
.contact-right {
  flex: 1;
  background: #EBEFE6;
  border: 1px solid #E4E9DD;
  padding: 24px;
  border-radius: 4px;
}

.contact-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-header h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 23.44px;
}

.contact-header p {
    font-size: 17px;
    font-weight: 400;
    line-height: 22.1px;
    color: #424940;
}



.contact-block {
    display: flex;
    flex-direction: column;
    gap: 16px;

    max-width: none;
}

.contact-head h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.contact-form .contact-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-content-form-top {
    display: flex;
    gap: 16px;
    width: 100%;
}

.contact-form label {
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 18.75px;

  border: 1px solid #7A7A7A;
  border-radius: 2px;
  background: none;
}

.contact-form textarea {
  resize: none;
}

.contact-antispam img {
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 23.44px;

  background-color: #00822C;
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
  max-width: none;
}

.contact-form button:hover {
  background-color: #218838;
}

/* Contact Details Section */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 63px;
}

.contact-right-block-wrapper {
    display: flex;
    gap: 24px;
}

.contact-right-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.contact-right-block-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.contact-right-block-item {
     display: flex;
     gap: 10px;
}

.contact-right-block-item-content {
     display: flex;
     flex-direction: column;
}

.contact-right-block-item h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #181D17;
}

.contact-right-block-item p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #424940;
}

.contact-right ul {
  list-style: none;
  padding: 0;
}

.contact-right ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

.contact-right ul li strong {
  color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .contact-inner {
    flex-direction: column;
    gap: 48px;
  }
  
  .contact-content-form-top {
    flex-direction: column;   
  }
  
  .contact-right-block-wrapper {
    flex-direction: column;   
  }

  .contact-left,
  .contact-right {
    flex: unset;
  }
  
  .contact-content-wrapper {
      padding: 0;
      flex-direction: column;
  }
  
    .contact-left,
    .contact-right {
      padding: 16px;
    }
}
</style>

<main class="contant">
  <div class="container">
    <div class="contact-inner">
      <!-- Left Section: Contact Form -->
      <div class="section-title-wrapper">
        <h2 class="section-title">Контакты</h2>
        <div class="section-title-separator"></div>
      </div>
      <div class="contact-content-wrapper">
        <div class="contact-left">
          <form class="contact-form">
            <div class="contact-content">
              <div class="contact-header">
                  <h3>Свяжитесь с нами</h3>
                  <p>Есть идея или сообщение для нашего агентства? Заполните форму ниже, и мы обязательно с вами свяжемся. Ваши предложения и вопросы помогают нам становиться лучше!</p>
              </div>
              <div class="contact-content-form-top">
                  <div class="contact-block">
                    <label for="name" name="name">Ваше имя <span>*</span> </label>
                    <input
                      type="text"
                      required
                      placeholder="Аманов Аман"
                      id="name"
                    />
                  </div>
                  <div class="contact-block">
                    <label for="email" name="email"
                      >Ваше Email <span>*</span>
                    </label>
                    <input
                      required
                      type="email"
                      placeholder="amanamanov@gmail.com"
                      id="email"
                    />
                  </div>
              </div>
              <div class="contact-block">
                <label for="message" name="message">Ваше сообщение</label>
                <textarea
                  name="message"
                  id="message"
                  rows="4"
                  placeholder="Задайте нам вопрос или напишите нам сообщение"
                ></textarea>
              </div>
              <button type="submit">Отправить</button>
            </div>
          </form>
        </div>

        <div class="contact-right">
          <div class="contact-header">
              <h3>Контактные данные Orient</h2>
              <p>
                Наши контактные данные, адрес офиса и режим работы. Мы всегда на
                связи, чтобы ответить на ваши вопросы и предложения. Ждем вас!
              </p>
          </div>
          
          <div class="contact-right-block-wrapper">
          
              <div class="contact-right-block">
                  <h4 class="contact-right-block-title">Офис расположен по адресу:</h4>
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 19C9.65 17.2667 7.896 15.5833 6.738 13.95C5.58 12.3167 5.00067 10.7167 5 9.15C5 7.06667 5.65 5.35433 6.95 4.013C8.25 2.67167 9.93333 2.00067 12 2C14.0667 1.99933 15.75 2.67033 17.05 4.013C18.35 5.35567 19 7.068 19 9.15C19 10.7167 18.421 12.3167 17.263 13.95C16.105 15.5833 14.3507 17.2667 12 19ZM12 11C12.55 11 13.021 10.8043 13.413 10.413C13.805 10.0217 14.0007 9.55067 14 9C13.9993 8.44933 13.8037 7.97867 13.413 7.588C13.0223 7.19733 12.5513 7.00133 12 7C11.4487 6.99867 10.978 7.19467 10.588 7.588C10.198 7.98133 10.002 8.452 10 9C9.998 9.548 10.194 10.019 10.588 10.413C10.982 10.807 11.4527 11.0027 12 11ZM5 22V20H19V22H5Z" fill="#39693B"/>
                      </svg>
                      <div class="contact-right-block-item-content">
                          <p>{{ this.theme.officeIsLocated }}</p>
                      </div>
                  </div>
              </div>
              
              <div class="contact-right-block">
                  <h4 class="contact-right-block-title">Режим работы:</h4>
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.55 16.55L15.95 15.125L13 12.175V8H11V13L14.55 16.55ZM11 6H13V4H11V6ZM18 13H20V11H18V13ZM11 20H13V18H11V20ZM4 13H6V11H4V13ZM12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88334 20.6867 5.825 19.9743 4.925 19.075C4.025 18.1757 3.31267 17.1173 2.788 15.9C2.26333 14.6827 2.00067 13.3827 2 12C1.99933 10.6173 2.262 9.31733 2.788 8.1C3.314 6.88267 4.02633 5.82433 4.925 4.925C5.82367 4.02567 6.882 3.31333 8.1 2.788C9.318 2.26267 10.618 2 12 2C13.382 2 14.682 2.26267 15.9 2.788C17.118 3.31333 18.1763 4.02567 19.075 4.925C19.9737 5.82433 20.6863 6.88267 21.213 8.1C21.7397 9.31733 22.002 10.6173 22 12C21.998 13.3827 21.7353 14.6827 21.212 15.9C20.6887 17.1173 19.9763 18.1757 19.075 19.075C18.1737 19.9743 17.1153 20.687 15.9 21.213C14.6847 21.739 13.3847 22.0013 12 22Z" fill="#39693B"/>
                      </svg>

                      <div class="contact-right-block-item-content">
                          <p>{{ this.theme.workingHours }}</p>
                      </div>
                  </div>
              </div>
              
          </div>
          
           <div class="contact-right-block-wrapper">
          
              <div class="contact-right-block">
                  <h4 class="contact-right-block-title">Контакты редакции:</h4>
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 20V4H22V20H2ZM12 13L20 8V6L12 11L4 6V8L12 13Z" fill="#39693B"/>
                      </svg>

                      <div class="contact-right-block-item-content">
                          <h4>Email редакции:</h4>

                          <p>{{ this.theme.editorialEmail }}</p>
                      </div>
                  </div>
                  
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 20H14V19H10V20ZM5 23V1H19V23H5ZM7 16H17V6H7V16Z" fill="#39693B"/>
                      </svg>


                      <div class="contact-right-block-item-content">
                          <h4>Телефон редакции:</h4>

                          <p>{{ this.theme.editorialPhone }}</p>
                      </div>
                  </div>
              </div>
              
              <div class="contact-right-block">
                  <h4 class="contact-right-block-title">Контакты администрации:</h4>
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 20V4H22V20H2ZM12 13L20 8V6L12 11L4 6V8L12 13Z" fill="#39693B"/>
                      </svg>

                      <div class="contact-right-block-item-content">
                          <h4>Email администрации:</h4>

                          <p>{{ this.theme.emailTheAdministration }}</p>
                      </div>
                  </div>
                  
                  <div class="contact-right-block-item">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 20H14V19H10V20ZM5 23V1H19V23H5ZM7 16H17V6H7V16Z" fill="#39693B"/>
                      </svg>


                      <div class="contact-right-block-item-content">
                          <h4>Телефон администрации:</h4>

                          <p>{{ this.theme.administrationPhone }}</p>
                      </div>
                  </div>
              </div>
              
          </div>
          
        </div>
      </div>
    </div>
  </div>
</main>

{% put scripts %}
<script src="{{ 'assets/new/scripts/marquee/marquee3k.js'|theme }}"></script>
<script src="{{ 'assets/new/scripts/core/main.js'|theme }}"></script>
{% endput %}