@extends('web.layouts.layout')
@section('content')


    <main>

        <!-- ---------- about ----------- -->
        <section class="about mt-5">
            <div class="container">
                <div class="section_title mb-5 pb-4">
                    <h3 class="title"> {{__('web.aboutus')}}  <span class="line wow"></span> </h3>
                </div>
                <div class="about_card">
                    <div class="row gx-lg-0">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="{{asset($pages[2]->image)}}" alt="" class="img_cover">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="info">
                                <p class="title"> {!! $pages[2]->title !!} </p>
                                <div class="text"> {!! $pages[2]->description !!} </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="text_card">-->
                <!--    <h2 class="col-lg-7 mx-auto"> {!! $pages[1]->title !!} </h2>-->
                <!--    <div class="text"> {!! $pages[1]->description !!} </div>-->
                <!--</div>-->
                <div class="about_card mt-5">
                    <div class="row gx-lg-0 flex-row-reverse">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="{{asset($pages[0]->image)}}" alt="" class="img_cover">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="info">
                                <p class="title"> {!! $pages[0]->title !!} </p>
                                <div class="text"> {!! $pages[0]->description !!} </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <!-- ---------- rooms ----------- -->
        <section class="rooms py-0 bg-dark">
            <div class="content">
                <div class="rooms_cards pb-0">
                    <div class="room_card">
                        <div class="row gx-0 justify-content-between">
                            <div class="col-lg-6">
                                <div class="img wow" style="border-radius: 0;">
                                    <img src="{{ asset($card1->image) }}" alt="" class="img_cover">
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="info position-static pe-lg-5 me-lg-5" style="padding: 100px 0; background: transparent;box-shadow: none;">
                                    <h2 class="mb-3"> {!! $card1->title !!} </h2>
                                    <p class="fs-5"> {!! $card1->description !!} </p>
                                    <a href="{{$card1->link}}" class="butn mt-5 d-inline-block"> <span> {{__('web.view_menu')}} </span> </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="room_card">
                        <div class="row gx-0 justify-content-between">
                            <div class="col-lg-5">
                                <div class="info position-static ps-lg-5 ms-lg-5" style="padding: 100px 0; background: transparent;box-shadow: none;">
                                    <h2 class="mb-3"> {!! $card2->title !!} </h2>
                                    <p class="fs-5"> {!! $card2->description !!} </p>
                                    <a href="{{$card2->link}}" class="butn mt-5 d-inline-block"> <span> {{__('web.book_room')}} </span> </a>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="img wow" style="border-radius: 0;">
                                    <img src="{{ asset($card2->image) }}" alt="" class="img_cover">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <!-- ---------- why_us ----------- -->
        <section class="why_us mt-5 pt-5">
            <div class="container">
                <div class="section_head text-center mb-5">
                    <h2> {{__('web.why_choose_us')}} </h2>
                </div>
                <div class="row">
                    @foreach($cards as $key=>$row)
                    @if($key < 2)
                        <div class="col-lg-6">
                            <div class="why_card">
                                <div class="row gx-3">
                                    <div class="col-lg-6 order-last order-lg-first">
                                        <div class="info wow zoomIn slow">
                                            <div class="cont">
                                                <h5> {!! $row->title !!}  </h5>
                                                <div class="text"> {!! $row->description !!}  </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="img wow zoomIn slow">
                                            <img src="{{asset($row->image)}}" alt="" class="img_cover">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="col-lg-6">
                            <div class="why_card">
                                <div class="row gx-3">
                                    <div class="col-lg-6">
                                        <div class="img wow zoomIn slow">
                                            <img src="{{asset($row->image)}}" alt="" class="img_cover">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="info wow zoomIn slow">
                                            <div class="cont">
                                                <h5> {!! $row->title !!} </h5>
                                                <div class="text"> {!! $row->description !!} </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- instagram ----------- -->
        @include('web.pages.components.instagram') 

        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@stop
