@extends('front.layouts.demo')
@section('local_styles')
    <!--<link rel="stylesheet" href="/css/subarticle.css">-->
@endsection
@section('content')
<div class="bd-example">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/img/v2/slides/tierra-tropical.jpg" class="d-block w-100" alt="Tierra Tropical">
            </div>    
        </div>
        
    </div>
</div>

<div class="py-4">
    <div class="container">
        <div class="row">
            <div class="text-center py-5 bg-line-beach">
                <h5 class="awesome mb-0 gray">{{ trans('site.beach_title_1') }}</h5>
                <h1 class="bodoni m-0 green pb-3">{{ trans('site.beach_title_2') }}</h1>
                <p class="w-75 mx-auto text-left gray mt-2">{{ trans('site.beach_text_1') }}</p>

                <p class="w-75 mx-auto text-left gray mt-2">{{ trans('site.beach_text_2') }}</p>

                <p class="w-75 mx-auto text-left gray mt-2">{{ trans('site.beach_text_3') }}</p>

                <p class="w-75 mx-auto text-left gray mt-2">{{ trans('site.beach_text_4') }} </p>    
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-10">
            <div id="carouselGalery" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselGalery" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselGalery" data-slide-to="1"></li>
                    <li data-target="#carouselGalery" data-slide-to="2"></li>
                    <li data-target="#carouselGalery" data-slide-to="3"></li>
                    <li data-target="#carouselGalery" data-slide-to="4"></li>
                    <li data-target="#carouselGalery" data-slide-to="5"></li>
                    <li data-target="#carouselGalery" data-slide-to="6"></li>
                    <li data-target="#carouselGalery" data-slide-to="7"></li>
                    <li data-target="#carouselGalery" data-slide-to="8"></li>
                    <li data-target="#carouselGalery" data-slide-to="9"></li>
                    <li data-target="#carouselGalery" data-slide-to="10"></li>
                    <li data-target="#carouselGalery" data-slide-to="11"></li>
                    <li data-target="#carouselGalery" data-slide-to="12"></li>
                    <li data-target="#carouselGalery" data-slide-to="13"></li>
                    <li data-target="#carouselGalery" data-slide-to="14"></li>
                    <li data-target="#carouselGalery" data-slide-to="15"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/img/v2/galery/beach-club/beach-club-01.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-02.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-03.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-04.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-05.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-06.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-07.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-08.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-09.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-10.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-11.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-12.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-13.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-14.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-15.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/v2/galery/beach-club/beach-club-16.jpg" class="d-block w-100" alt="Beach Club">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselGalery" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselGalery" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

            <div class="text-center pt-5">
                <p class="m-0">{!! trans('site.beach_phone') !!}</p>
                <p class="m-0">{!! trans('site.beach_hour') !!}</p>
                <p>{!! trans('site.beach_advise') !!}</p>
            </div>
            
        </div>
    </div>
</div>

<div class="container pt-5">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-5 col-lg-5">
            <div class="my-4">
                <figure class="position-relative text-inside">
                    <img src="/img/v2/catering.jpg" alt="" class="w-100">
                    <figcaption class="position-absolute text-center w-100">
                        <h3 class="awesome m-0">&nbsp;</h3>
                        <h1 class="bodoni m-0">Catering</h1>
                        <a href="catering" class="btn mt-3">{{ trans('site.btn_reserv') }}&nbsp;&nbsp;<i class="fas fa-caret-right"></i></a>
                    </figcaption>
                </figure>
            </div>
            <div class="my-4">
                <figure class="position-relative text-inside">
                    <img src="/img/v2/cenas.jpg" alt="" class="w-100">
                    <figcaption class="position-absolute text-center w-100">
                        <h3 class="awesome m-0">&nbsp;</h3>
                        <h1 class="bodoni m-0">{{ trans('site.link_dinner') }}</h1>
                        <a href="dinner" class="btn mt-3">{{ trans('site.btn_more') }}&nbsp;&nbsp;<i class="fas fa-caret-right"></i></a>
                    </figcaption>
                </figure>
            </div>
        </div>
        <div class="col-12 col-sm-5 col-lg-5">
            <div class="my-4">
                <figure class="position-relative text-inside">
                    <img src="/img/v2/tierra-tropical-brunch.jpg" alt="" class="w-100">
                    <figcaption class="position-absolute text-center w-100 mt-5">
                        <img src="/img/v2/logos/sunday-brunch.png" alt="Sunday brunch" class="d-block align-middle">
                        <a href="sunday-brunch" class="btn mt-5">{{ trans('site.btn_more') }}&nbsp;&nbsp;<i class="fas fa-caret-right"></i></a>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-8">
            <div class="p-5 text-center bg-line-polo">
                <h1 class="bodoni m-0 wine pb-3 text-uppercase">{!! trans('site.buy_tickets') !!}</h1>
                <a href="tienda" class="btn btn-wine">{{ trans('site.btn_buy') }} &nbsp;&nbsp;<i class="fas fa-caret-right"></i></a>
            </div>
        </div>
    </div>
</div>

<div class="bg-image-green py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-sm-5 col-lg-5 py-5">
                <h5 class="text-center awesome m-0 white">{{ trans('site.contact_title_link') }}</h5>
                <h3 class="text-center bodoni pb-4 white">{{ trans('site.contact_title_reserv') }}</h3>
                <form action="#" method="post" class="white">
                    <div class="form-group">
                        <label class="sr-only">{{ trans('site.contact_date') }}</label>
                        <input type="text" name="date" placeholder="{{ trans('site.contact_date') }}" class="form-control datepicker">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">{{ trans('site.contact_name') }}</label>
                        <input type="text" name="name" placeholder="{{ trans('site.contact_name') }}" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">{{ trans('site.contact_email') }}</label>
                        <input type="email" name="email" placeholder="{{ trans('site.contact_email') }}" class="form-control">
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn">{{ trans('site.btn_reserv') }}&nbsp;&nbsp;<i class="fas fa-caret-right"></i></button>
                    </div>
                </form>

                <div class="text-center pt-5 px-5">
                    <p class="m-0 white">
                        Prolongación África Sin Número<br>
                        San Francisco, Nayarit, México<br>
                        Tel. (322) 297 2334 ext 106
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('local_scripts')
    <!--<script src="/js/subarticle.js" charset="utf-8"></script>-->
@endsection