@extends('frontend::config.master')
@section('title')

@section('style')

@endsection

@section('content')
    <main>
        @include('frontend::layouts.home.HomeCarouselBanner')
        <section id="about" class="py-12">
            <div class="container">
                <x-frontend::texteditor.TextEditor>
                    @slot('content')
                    <div class=" flex flex-wrap justify-between items-center">
                        <div class="w-full xl:w-1/2 p-2">
                            <p class="home-subtitle text-secondary"> ABOUT</p>
                            <h2 class="home-title mb-2">Air Purifier</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                            <br>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                            
                        </div>
                        <div class="w-full xl:w-1/2 p-2">
                            <img class="w-full max-h-full " src="{{ Module::asset('frontend:img/imgabout.jpg') }}" alt="about image">
                
                        </div>
                   
                    </div>
                    @endslot
                </x-frontend>


            </div>
        </section>
        <section id="products" class="py-12  bg-sky-100">
            <div class="container">
                <div class=" text-center">
                    <h2 class="home-title" style="margin-bottom: 10px;">Our Products</h2>
                    <p >WE OFFER THE BEST SOLUTIONS FOR AIR CONDITIONING AND TEMPERATURE CONTROL IN YOUR HOME, APARTMENT OR OFFICE.</p>
                </div>
                @include('frontend::layouts.home.HomeProductList')
            </div>
        </section>
        <section id="services" class="pt-12">
            <div class="container">
                <x-frontend::texteditor.TextEditor>
                    @slot('content')
                    <div class=" text-center">
                        <h2 class="home-title" style="margin-bottom: 10px;">Our Services</h2>
                    </div>
                    <div class="flex flex-wrap items-center -mx-2">
                        <div class="w-full md:w-1/2 p-2">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum commodi odio in optio! Id officia sed vitae dignissimos blanditiis recusandae, quibusdam consectetur provident voluptas quas neque voluptates deserunt unde quos!</p>
                            <br>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos libero sed nesciunt similique sapiente, aut tempora excepturi assumenda blanditiis iusto quod enim nostrum vero atque minus nulla eius et. Accusantium.</p>
                        </div>
                        <div class="w-full md:w-1/2 p-2">
                                 <img src="{{ Module::asset('frontend:img/services.jpg') }}" alt="product" class=" rounded-lg">
                        </div>

                    </div>
                 
                    @endslot
                </x-frontend>
            </div>
        </section>
        <section id="contacts" class="py-12">
            <div class="container">
                <div class=" text-center">
                    <h2 class="home-title" style="margin-bottom: 10px;">GET IN TOUCH</h2>
                </div>
               <div class="flex flex-wrap -mx-4 "> 
                <div class="w-full md:w-1/2 px-4 py-8">
                    <h2 class="home-subtitle">
                        Netdesign Host Co.,Ltd
                    </h2>
                    <p class=" font-normal">Lorem, ipsum dolor sit amet consectetur adipisicing elit. A accusamus accusantium inventore error quo quam quaerat libero ad molestias at voluptas, voluptate repellendus, eaque numquam asperiores necessitatibus veniam. Labore, ducimus?</p>
                    <div class="flex items-center mt-4">
                        <a href="{{url('tel:+668 888 888')}}" >
                            <img src="{{ Module::asset('frontend:img/icon/Phone.svg') }}" alt="Contact" class="w-5">
                        </a>

                        <a href="{{url('tel:+668 888 888')}}">
                            <p class="pl-2">068 888 888</p>
                        </a>

                    </div>
                    <div class="flex items-center mt-2">
                        <a href="{{url('mailto:contact@nd.co.th')}}" >
                            <img src="{{ Module::asset('frontend:img/icon/Envelope.svg') }}" alt="Contact" class="w-5">
                        </a>

                        <a href="{{url('mailto:contact@nd.co.th')}}">
                            <p class="pl-2">contact@nd.co.th</p>
                        </a>

                    </div>
                    <div class="flex items-center -mx-2 mt-4">
                        <img src="{{ Module::asset('frontend:img/icon/Facebook_blue.svg') }}" alt="Contact" class=" w-12 px-1">
                        <img src="{{ Module::asset('frontend:img/icon/Twitter_blue.svg') }}" alt="Contact" class=" w-12 px-1">
                        <img src="{{ Module::asset('frontend:img/icon/Youtube_blue.svg') }}" alt="Contact" class=" w-12 px-1">
                        <img src="{{ Module::asset('frontend:img/icon/Line_blue.svg') }}" alt="Contact" class=" w-12 px-1">
                        <img src="{{ Module::asset('frontend:img/icon/Instagram_blue.svg') }}" alt="Contact" class=" w-12 px-1">
                        <img src="{{ Module::asset('frontend:img/icon/Spotify_blue.svg') }}" alt="Contact" class=" w-12 px-1">

                    </div>
                    <div class="map-wrapper mt-4">
                        <iframe
                          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.345304164091!2d100.56256667592457!3d13.758038197147457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29d4918d39f69%3A0x7c82b5cfabbf1f4a!2sFortune%20Town!5e0!3m2!1sen!2sth!4v1689153723520!5m2!1sen!2sth"
                          width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                          referrerpolicy="no-referrer-when-downgrade"></iframe>
                      </div>
                   

                </div>
                <div class="w-full md:w-1/2 p-8 border border-gray-200">
                    <h2 class="home-subtitle">
                        CONTACT US
                    </h2>
                    <p class=" font-normal">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia voluptatem corporis, libero consequuntur </p>
                   <div class="mt-6">

                       @include('frontend::layouts.home.HomeFrom')
                   </div>
               </div>

            </div>
        </section>
        
{{-- modal From --}}
        <x-frontend::modal.ModalBasic name="formcontact" class="w-11/12 max-w-lg ">
        @slot('content')
        <div class="p-8">
  
            <img src="{{ Module::asset('frontend:img/icon/iconcheck.png') }}" alt="modal" class="w-10 mx-auto mb-4" >
            <h2 class=" text-center mb-4"><span class=" font-semibold mr-2">ขอบคุณ</span>ข้อความของคุณถูกส่งไปเรียบร้อย</h2>
            
        </div>
        @endslot
        </x-frontend>
{{--  end modal From --}}
    </main>
    
@endsection
@section('script')
<script src="{{ Module::asset('frontend:js/index.min.js') }}"></script>

@endsection