@extends('layouts.master-landing')

@section('title', 'Contact Us')

@section('css2')
    <link rel="stylesheet" href="/build/css/landing.css" />
@endsection

@section('bodyClass', 'landing-page')

@section('content')
    <!-- [ Main Content ] start -->
    @include('layouts/loader')
    <!-- [ Main Content ] start -->
    <section class="contact-hero" style="background-image: url(/build/images/landing/img-headerbg.jpg)">
      <!-- [ Nav ] start -->
      @include('layouts/component-header')
      <!-- [ Nav ] start -->
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-md-5">
            <h2>Talk to our Expert</h2>
            <p class="text-muted"
              >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua.</p
            >
          </div>
        </div>
      </div>
    </section>
    <section class="contact-form bg-white">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12"><h2 class="sr-only">contact form</h2></div>
          <div class="col-xxl-6 col-md-8 col-sm-10">
            <div class="row my-4">
              <div class="col-sm-6">
                <div class="mb-3">
                  <label class="form-label">First name</label>
                  <input type="text" class="form-control" placeholder="First name" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="mb-3">
                  <label class="form-label">Last name</label>
                  <input type="text" class="form-control" placeholder="Last name" />
                </div>
              </div>
              <div class="col-12">
                <div class="mb-3">
                  <label class="form-label">Email id</label>
                  <input type="email" class="form-control" placeholder="Email id" />
                </div>
              </div>
              <div class="col-12">
                <div class="mb-3">
                  <label class="form-label">Phone Number</label>
                  <input type="text" class="form-control" placeholder="Phone Number" />
                </div>
              </div>
              <div class="col-12">
                <div class="mb-3">
                  <label class="form-label">Company size</label>
                  <select class="form-select mb-3">
                    <option selected>1 - 5</option>
                    <option value="1">5 - 10</option>
                    <option value="2">10+</option>
                  </select>
                </div>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked />
                  <label class="form-check-label" for="flexCheckChecked">I agree to all the Terms & Condition</label>
                </div>
                <div class="mt-4 d-grid">
                  <button type="button" class="btn btn-primary">Submit</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="container title mb-0">
        <div class="row align-items-center wow fadeInUp" data-wow-delay="0.2s">
          <div class="col-md-8">
            <h2 class="mb-3">Be the first to know</h2>
            <p class="mb-4 mb-md-0"
              >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
              text ever since the 1500s</p
            >
          </div>
          <div class="col-md-4">
            <div class="row">
              <div class="col"><input type="email" class="form-control" placeholder="Enter your email" /></div>
              <div class="col-auto"><button class="btn btn-primary">Submit</button></div>
            </div>
          </div>
        </div>
      </div>
      <div class="border-top border-bottom footer-center">
        <div class="container">
          <div class="row">
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
              <img src="/build/images/logo-dark.svg" alt="image" class="img-fluid mb-3" />
              <p class="mb-4"
                >Phoenixcoded has gained the trust of over 5.5K customers since 2015, thanks to our commitment to delivering high-quality
                products. Our experienced team players are responsible for managing Able Pro.</p
              >
            </div>
            <div class="col-md-8">
              <div class="row">
                <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.6s">
                  <h5 class="mb-sm-4 mb-2">Company</h5>
                  <ul class="list-unstyled footer-link">
                    <li><a href="https://themeforest.net/user/phoenixcoded" target="_blank">Profile</a></li>
                    <li><a href="https://themeforest.net/user/phoenixcoded/portfolio" target="_blank">Portfolio</a></li>
                    <li><a href="https://themeforest.net/user/phoenixcoded/followers" target="_blank">Follow Us</a></li>
                    <li><a href="https://phoenixcoded.net" target="_blank">Website</a></li>
                  </ul>
                </div>
                <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.8s">
                  <h5 class="mb-sm-4 mb-2 mt-sm-0 mt-2">Help & Support</h5>
                  <ul class="list-unstyled footer-link">
                    <li><a href="https://phoenixcoded.gitbook.io/able-pro/" target="_blank">Documentation</a></li>
                    <li><a href="https://phoenixcoded.gitbook.io/able-pro/" target="_blank">Feature Request</a></li>
                    <li><a href="https://phoenixcoded.gitbook.io/able-pro/" target="_blank">RoadMap</a></li>
                    <li><a href="https://phoenixcoded.authordesk.app/" target="_blank">Support</a></li>
                    <li><a href="https://themeforest.net/user/phoenixcoded#contact" target="_blank">Email Us</a></li>
                  </ul>
                </div>
                <div class="col-sm-4 wow fadeInUp" data-wow-delay="1s">
                  <h5 class="mb-sm-4 mb-2 mt-sm-0 mt-2">Useful Resources</h5>
                  <ul class="list-unstyled footer-link">
                    <li><a href="https://themeforest.net/page/item_support_policy" target="_blank">Support Policy</a></li>
                    <li><a href="https://themeforest.net/licenses/standard" target="_blank">Licenses Term</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col my-1 wow fadeInUp" data-wow-delay="0.4s">
            <p class="mb-0">© Handcrafted by Team <a href="https://themeforest.net/user/phoenixcoded" target="_blank">Phoenixcoded</a></p>
          </div>
          <div class="col-auto my-1">
            <ul class="list-inline footer-sos-link mb-0">
              <li class="list-inline-item wow fadeInUp" data-wow-delay="0.4s"
                ><a href="https://fb.com/phoenixcoded">
                  <svg class="pc-icon">
                    <use xlink:href="#custom-facebook"></use>
                  </svg> </a
              ></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
@endsection
@section('scripts')
    <script>
      // Start [ Menu hide/show on scroll ]
      let ost = 0;
      document.addEventListener('scroll', function () {
        let cOst = document.documentElement.scrollTop;
        if (cOst == 0) {
          document.querySelector('.navbar').classList.add('top-nav-collapse');
        } else if (cOst > ost) {
          document.querySelector('.navbar').classList.add('top-nav-collapse');
          document.querySelector('.navbar').classList.remove('default');
        } else {
          document.querySelector('.navbar').classList.add('default');
          document.querySelector('.navbar').classList.remove('top-nav-collapse');
        }
        ost = cOst;
      });
      // End [ Menu hide/show on scroll ]
    </script>
@endsection