@extends('layouts.frontendTemplate')

@section('main')

<!-- start page title section -->
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-6 text-md-start text-center">
                <!-- start page title -->
                <h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">ติดต่อเรา</h1>
                <!-- end page title -->
            </div>
            <div class="col-lg-4 col-md-6 breadcrumb text-small alt-font justify-content-center justify-content-md-end sm-margin-15px-top">
                <!-- breadcrumb -->
                <ul>
                    <li><a href="{{url('')}}" class="text-dark-gray">หน้าแรก</a></li>
                    <!-- <li><a href="#" class="text-dark-gray">Contact</a></li> -->
                    <li class="text-dark-gray">ติดต่อเรา</li>
                </ul>
                <!-- end breadcrumb -->
            </div>
        </div>
    </div>
</section>
<!-- end page title section -->

<!-- end help section -->
<!-- start help section -->
<section class="wow animate__fadeIn big-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 text-center">
            <img src="images/logo_thegreaterchiangmai_2.png" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
                <p class="alt-font text-small text-uppercase">ยินดีที่คุณติดต่อเรามา</p>
                <h2 class="alt-font font-weight-700 letter-spacing-minus-1 text-extra-dark-gray">ให้เราเป็นส่วนหนึ่งของคุณ</h2>
                <p class="w-75 mx-auto sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text of the printing and industry.</p>
                <a href="#start-your-project" class="btn btn-large btn-transparent-dark-gray margin-10px-top inner-link">Start your Project</a>
            </div>
        </div>
    </div>
</section>
<!-- end help section -->
<!-- start contact section -->
<section class="no-padding bg-extra-dark-gray">
    <div class="container-fluid">
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col p-0 cover-background md-h-450px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"></div>
            <div class="col p-0 wow animate__fadeInRight">
                <div class="row row-cols-1 row-cols-sm-2 m-0">
                    <!-- start contact item -->
                    <div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-map text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">ที่ติดต่อ</div>
                        <p class="w-60 lg-w-80 mx-auto text-medium">Greater Chiang Mai , เชียงใหม่ , ไทยแลนด์.</p>
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-chat text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">คุยกับเราผ่านช่องทาง</div>
                        <p class="mx-auto text-medium mb-0">Line : @thegreaterchiangmai</p>
                         <!-- <p class="mx-auto text-medium">Fax: 1-800-222-002</p> -->
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-envelope text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">อีเมล</div>
                        <p class="mx-auto text-medium mb-0"><a href="mailto:greaterchiangmai@gmail.com">greaterchiangmai@gmail.com</a></p>
                       <!-- <p class="mx-auto text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p> -->
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-clock text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">เวลาทำการ</div>
                        <p class="mx-auto text-medium mb-0">จันทร์ to เสาร์ - 9.00 - 16.00 น.</p>
                        <p class="mx-auto text-medium">อาทิตย์ - 10.00 - 11.00 น</p>
                    </div>
                    <!-- end contact item -->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end contact section -->
<!-- start form section -->
<section class="wow animate__fadeIn" id="start-your-project">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-6 col-lg-7 col-md-9 col-sm-10 margin-eight-bottom md-margin-40px-bottom sm-margin-30px-bottom text-center last-paragraph-no-margin">
                <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase">tell us about your project</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text.</p>
            </div>
        </div>
        <form id="project-contact-form" action="email-templates/contact-form-budget.php" method="post">
            <div class="row">
                <div class="col-12">
                    <div class="form-results d-none"></div>
                </div>
                <div class="col-12 col-md-6">
                    <input type="text" name="name" id="name" placeholder="ชื่อ *" class="big-input required">
                </div>
                <div class="col-12 col-md-6">
                    <input type="tel" name="phone" id="phone" placeholder="เบอร์โทรศัพท์"  class="big-input">
                </div>
                <div class="col-12 col-md-6">
                    <input type="email" name="email" id="email" placeholder="อีเมล *" class="big-input required">
                </div>
               <!-- <div class="col-12 col-md-6">
                    <div class="select-style big-select">
                        <select name="budget" id="budget" class="bg-transparent mb-0">
                            <option value="">Select your budget</option>
                            <option value="$500 - $1000">$500 - $1000</option>
                            <option value="$1000 - $2000">$1000 - $2000</option>
                            <option value="$2000 - $5000">$2000 - $5000</option>
                        </select>
                    </div>
                </div> -->
                <div class="col-12">
                    <textarea name="comment" id="comment" placeholder="ข้อความ" rows="6" class="big-textarea"></textarea>
                </div>
                <div class="col-12 text-center">
                    <button id="project-contact-us-button" type="submit" class="btn btn-transparent-dark-gray btn-large margin-20px-top submit">ส่งข้อความ</button>
                </div>
            </div>
        </form>
    </div>
</section>
<!-- end form section -->
<!-- <section class="wow animate__fadeIn bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center social-style-4">
                <span class="text-medium font-weight-600 text-uppercase d-block alt-font text-extra-dark-gray margin-30px-bottom">On social networks</span>
                <div class="social-icon-style-4">
                    <ul class="margin-30px-top large-icon">
                        <li><a class="facebook" href="http://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i><span></span></a></li>
                        <li><a class="twitter" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i><span></span></a></li>
                        <li><a class="google" href="http://google.com" target="_blank"><i class="fab fa-google-plus-g"></i><span></span></a></li>
                        <li><a class="dribbble" href="http://dribbble.com" target="_blank"><i class="fab fa-dribbble"></i><span></span></a></li>
                        <li><a class="linkedin" href="http://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i><span></span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section> -->

@stop

@section('js')

@endsection