@extends('frontend.layouts.app')

@section('content')
<main>

    <section class="banner">
        <div class="main-slide">
            <div class="slide">
                <div class="">
                    <div class="h-100 position-relative">
                        <img src="{{asset($page->home_banner_image1)}}"  class="img-fluid banner-img" alt="">
                        <div class="container">
                            <div class="row">
                                <div class="banner-slider">
                                    <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                        <h3>{!! $page->home_banner1_title !!}</h3>
                                        <div class="btn-div">
                                            <a class="btn banner_btn" href="{{ route('memberShip') }}">Get Started</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="h-100 position-relative">
                        <img src="{{asset($page->home_banner_image2)}}"  class="img-fluid banner-img" alt="">
                        <div class="container">
                            <div class="row">
                                <div class="banner-slider">
                                    <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                        <h3>{!! $page->home_banner2_title !!}</h3>
                                        <div class="btn-div">
                                            <a class="btn banner_btn" href="{{ route('memberShip') }}">Get Started</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="h-100 position-relative">
                        <img src="{{asset($page->home_banner_image3)}}"  class="img-fluid banner-img" alt="">
                        <div class="container">
                            <div class="row">
                                <div class="banner-slider">
                                    <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                        <h3>{!! $page->home_banner3_title !!}</h3>
                                        <div class="btn-div">
                                            <a class="btn banner_btn" href="{{ route('memberShip') }}">Get Started</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <div class="row justify-content-end gy-5">
                <div class="col-12 col-lg-6">
                    <img src="{{asset('assets/front/images/about1.png')}}"  class="img-fluid imp" alt="">
                </div>
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div" data-aos="fade-left" data-aos-duration="1500">
                        <h3 class="h3">{!! $page->home_section_one_heading !!}</h3>
                        <p>{!! $page->home_section_one_content !!}</p>
                        <div class="btn-div">
                            <a class="btn banner_btn bckclr" href="{{ route('memberShip') }}">Get Started</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services">
        <div class="container">
            <div class="hbot">
                <h3 class="h3">Services</h3>
                <a href="javascript:;">View All <i class="fa-solid fa-arrow-right"></i></a>
            </div>
            <div class="row gy-5 justify-content-center" data-aos="fade-up" data-aos-anchor-placement="center-bottom" data-aos-duration="1500">
                <div class="col-12 col-md-6 col-lg-6">
                    <div class="ser">
                        <div class="d-flex justify-content-center">
                            <div class="cir">
                                <img src="{{asset('assets/front/images/ser_1.png')}}"  class="img-fluid" alt="">
                            </div>
                        </div>
                        <h4>Sauna</h4>
                        <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 the 1500s, when an unknown printer took a
                            galley of type and scrambled it to make a type specimen book.</p>
                        <a href="{{ url('services/sauna') }}">Learn More</a>
                    </div>
                </div>
                <div class="col-12  col-md-6 col-lg-6">
                    <div class="ser">
                        <div class="d-flex justify-content-center">
                            <div class="cir">
                                <img src="{{asset('assets/front/images/ser_2.png')}}"  class="img-fluid" alt="">
                            </div>
                        </div>
                        <h4>Cold Plunge</h4>
                        <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 the 1500s, when an unknown printer took a
                            galley of type and scrambled it to make a type specimen book.</p>
                        <a href="{{ url('services/cold-plunge-7344') }}">Learn More</a>
                    </div>
                </div>
                <!--<div class="col-12  col-md-6 col-lg-6">-->
                <!--    <div class="ser">-->
                <!--        <div class="d-flex justify-content-center">-->
                <!--            <div class="cir">-->
                <!--                <img src="{{asset('assets/front/images/ser_3.png')}}"  class="img-fluid" alt="">-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <h4>Fitness</h4>-->
                <!--        <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 the 1500s, when an unknown printer took a-->
                <!--            galley of type and scrambled it to make a type specimen book.</p>-->
                <!--        <a href="javascript:;">Learn More</a>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
    </section>

    <section class="get-dis">
        <div class="bck" data-aos="fade-right" data-aos-offset="300" data-aos-duration="1500"
            data-aos-easing="ease-in-sine">
            <h3>{!! $page->home_section_two_heading !!}</h3>
        </div>
        <div class="container">
            <div class="row justify-content-start">
                <div class="col-12  col-md-6 col-lg-6">
                    <div class="ab-con-div" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
                        <div class="content contentmrn">
                            <h4>{!! $page->home_section_two_title !!}</h4>
                            <p>{!! $page->home_section_two_content !!}</p>
                        </div>
                        <div class="btn-div">
                            <a class="btn banner_btn drkclr" href="{{ route('memberShip') }}">Become a Member</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="{{asset('assets/front/images/getdis.png')}}"  class="img-fluid imp" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="services services2 servicesmrc">
        <div class="container">
            <div class="hbot">
                <h3 class="h3">Gallery</h3>
                <a href="{{ route('gallery') }}">View All <i class="fa-solid fa-arrow-right"></i></a>
            </div>
            <div class="row gy-4" data-aos="zoom-out" data-aos-duration="1500">
            @if(isset($galleryImages))
                @foreach($galleryImages as $index => $image)
                    <div class="col-12 col-md-6 col-lg-{{ $index % 3 == 0 ? '7' : '5' }} panel">
                        <div class="ser2 h-100">
                            <a class="d-block" data-fancybox="" data-type="image" href="{{asset($image->image)}}" >
                                <img src="{{asset($image->image)}}"  class="img-fluid" alt="">
                            </a>
                        </div>
                    </div>
                @endforeach
            @endif
            </div>
        </div>
    </section>

    <section class="about contact cnx">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div">
                        <h3 class="h3 mn">Contact Us</h3>
                        <form data-aos="flip-up" data-aos-duration="1500">
                            <div class="mb-3">
                                <input type="email" class="form-control" placeholder="Name" id="exampleInputEmail1"
                                    aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <input type="password" class="form-control" placeholder="Email"
                                    id="exampleInputPassword1">
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" placeholder="Phone" id="exampleInputEmail1"
                                    aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <textarea name="" placeholder="Message" id="" cols="30" rows="8"></textarea>
                            </div>
                            <div class="btn-div">
                                <button class="btn banner_btn drkclr" type="submit">Send</button>
                            </div>

                        </form>

                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div ab-con-div2" data-aos="fade-left" data-aos-duration="1500">
                        <h3 class="h3 h33">Have Questions? <br>
                            Get in touch!</h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown
                            printer took a galley.
                        </p>
                        <div class="btn-div">
                            <button class="btn banner_btn bckclr text-start">Book Now <br> 000-123-4567</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</main>

@endsection