import React from 'react';

function ContactPage() {
  return (
    <div>
      <section className="contact-page">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-5 col-md-12 col-sm-12">
              <div
                className="contact-page-left wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="section-main-title">
                  <h2>Don’t Heisted to Contact Us</h2>
                </div>
                <div className="section-detail">
                  <p>
                    Digital marketing &amp; advertising approach focuses on
                    capturing the essential
                  </p>
                </div>
                <div className="contact-info">
                  <ul>
                    <li
                      className="contact-inner wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      <div className="icon">
                        <i className="icon-location-dot" />
                      </div>
                      <div className="text-box">
                        <span>Location</span>
                        <h3>55 Main Street, Melbourne, Australia</h3>
                      </div>
                    </li>
                    <li
                      className="contact-inner wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <div className="icon">
                        <i className="icon-envelope-open-text" />
                      </div>
                      <div className="text-box">
                        <span>Email Address</span>
                        <h3>support@gmail.com</h3>
                      </div>
                    </li>
                    <li
                      className="contact-inner wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="500ms"
                    >
                      <div className="icon">
                        <i className="icon-phone-volume" />
                      </div>
                      <div className="text-box">
                        <span>Make A Call</span>
                        <h3>+000 (123) 456 889</h3>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div
              className="col-lg-7 col-md-12 col-sm-12 wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="200ms"
            >
              <div className="contact-page-right">
                <div className="contact-page-form">
                  <div className="contact-page-form-shape-one" />
                  <div className="contact-page-form-shape-two" />
                  <h3 className="contact-page-form-title">
                    Send Us Message
                  </h3>
                  <p className="contact-page-form-text">
                    Questions or you would just like to say hello, contact
                    us.
                  </p>
                  <form
                    action="#"
                    className="contact-page__form-box contact-form-validated "
                  >
                    <div className="row">
                      <div className="col-xl-6 col-lg-6">
                        <div className="contact-page-input-box">
                          <label htmlFor="full-Name-123">Full Name</label>
                          <input
                            type="text"
                            id="full-Name-123"
                            placeholder="Somaia D. Silva"
                            className="input-contact-text"
                            name="name"
                            required=""
                          />
                        </div>
                      </div>
                      <div className="col-xl-6 col-lg-6">
                        <div className="contact-page-input-box">
                          <label htmlFor="email-123">Email</label>
                          <input
                            type="email"
                            className="input-contact-text"
                            id="email-123"
                            placeholder="suppot@gmail.com"
                            name="subject"
                            required=""
                          />
                        </div>
                      </div>
                      <div className="col-xl-12 col-lg-12">
                        <div className="contact-page-input-box">
                          <label htmlFor="textbox">Subject</label>
                          <input
                            type="text"
                            id="textbox"
                            className="input-contact-text"
                            placeholder="I would like to discussed"
                            required=""
                          />
                        </div>
                      </div>
                      <div className="col-xl-12 col-lg-12">
                        <div className="contact-page-input-box">
                          <label htmlFor="message-123">Message</label>
                          <textarea
                            name="message"
                            className="input-contact-text"
                            id="message-123"
                            placeholder="write message"
                            required=""
                            defaultValue={""}
                          />
                        </div>
                      </div>
                      <div className="col-xl-12 col-lg-12">
                        <div className="contact-page-input-box">
                          <div className="theme-btn">
                            <button className="main-btn thm-btn">
                              Send Us Message
                              <i className="icon-right-arrow" />
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

export default ContactPage
