@extends('rubandroll.layouts.app')

@section('meta-title')Barbecue - Rub & Roll Barbecue @endsection

@section('meta-keywords') @endsection

@section('meta-description') @endsection

@section('content')

    <style>

        .banner-section {
            min-height: calc(100vh - 100px);
            max-height: 980px;
        }

        .bg-overlay-custom:before {
            background: rgba(0, 0, 0, 0.75);
        }

        .banner-description-box {
            text-align: left;
        }

        .banner-description-box .banner-address {
            font-size: 32px;
            line-height: 48px;
            color: #BEA045;
            margin: 10px 0 19px 0;
            font-family: Poppins;
            font-style: normal;
            font-weight: normal;
        }

        .banner-title-text, .banner-description-text {
            display: inline-block;
            vertical-align: middle;
            margin: 0;
            color: #ffffff;
            font-family: Poppins;
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 24px;
        }

        .banner-title-text {
            font-size: 5rem !important;
            font-family: 'Bebas Neue', cursive !important;
            line-height: 0.9 !important;
            margin-top: 10vh;
        }

        .banner-title-subtext {
            font-size: 3rem !important;
        }

        .banner-description-text {
            font-size: 16px;
            margin-bottom: 20px;
        }

        @media (max-width: 991px) {
            .banner-section:before {
                background: rgba(0, 0, 0, 0.75);
                content: "";
                display: inline-block;
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: -1;
            }

            .xs-w-100 {
                width: 100%;
            }
        }

        .section-1 {
            padding: 0;
        }

        @media (min-width: 992px) {
            .bg-overlay-custom:before {
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(255, 255, 255, 0) 70%);
            }

            .banner-title-text {
                font-size: 80px !important;
                line-height: 80px !important;
                margin-top: 20vh;
            }

            .d-flex {
                display: flex;
            }

            .section-1 {
                padding: 50px 0;
            }

            .md-text-center {
                text-align: center !important;
            }

            .md-text-right {
                text-align: right !important;
            }

        }

        .barbecue-landing-section h2 {
            font-family: Bebas Neue !important;
            font-style: normal;
            font-weight: normal;
            font-size: 48px;
            line-height: 58px;
            margin-bottom: 10px;
        }

        .barbecue-landing-section h3 {
            font-family: Poppins;
            font-style: normal;
            font-weight: bold;
            font-size: 20px;
            line-height: 30px;
            margin-bottom: 20px;
        }

        .barbecue-landing-section p.description {
            font-family: Poppins;
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 24px;
            color: #000000;
        }

        .barbecue-landing-section p.description a {
            font-family: Poppins;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 30px;
            color: #BEA045;
        }

        .m-auto {
            margin: auto;
        }

        .barbecue-landing-section .row.images {
            margin-bottom: 30px;
        }

        .barbecue-landing-section .row.images .col-xs-12 {
            padding-right: 30px;
            padding-left: 30px;
        }

        .barbecue-landing-section .row.images .image-title {
            font-family: Poppins;
            font-style: normal;
            font-weight: bold;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            color: #BEA045;
        }
    </style>

    <section class="page-title banner-section">
        {{--        <section class="page-title bg-overlay bg-overlay-custom banner-section">--}}
        <div class="bg-section">
            <img src="{{ asset('images/barbecue_landing/barbecue_hero_bg.jpg') }}" alt="Barbecue"/>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <div class="title title-8 text-left" style="padding: 0">
                        <div class="title--content">
                            <div class="title--heading banner-title-box">
                                <h1 class="banner-title-text">
                                    RUB&ROLL<br/>{{ __('Barbecue étterem') }}
                                </h1>
                            </div>
                        </div>
                    </div>

                    <div class="banner-description-box">
                        <p class="banner-address">
                            Budapest, Szent István körút 13.
                        </p>
                        <p class="banner-description-text">
                            {{ __('rubandroll.barbecue.index.1') }}
                        </p>
                        <a class="btn btn--primary mt-10 mb-30" href="{{ route('barbecue.asztalfoglalas') }}">{{ __('Asztalfoglalás') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="barbecue-landing-section section-1">
        <div class="container" style="width: 100%; padding: 0; max-width: 1980px;">
            <div class="row d-flex">
                <div class="col-xs-12 col-md-6">
                    <img src="{{ asset('images/barbecue_landing/barbecue_1.jpg') }}" alt="Barbecue"
                         class="img-responsive"/>
                </div>
                <div class="col-xs-12 col-md-6 d-flex" style="padding: 30px 20px">
                    <div class="m-auto col-xs-12">
                        <h2>{{ __('rubandroll.barbecue.index.2') }}</h2>
                        <p class="description">
                            {!! __('rubandroll.barbecue.index.3') !!}
                        </p>
                        <a class="btn btn--primary btn--bordered"
                           href="{{ route('barbecue.etlap', ['type' => 'Étlap']) }}">{{ __('Étlap') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="barbecue-landing-section section-1 pt-0">
        <div class="container" style="width: 100%; padding: 0; max-width: 1980px;">
            <div class="row d-flex">
                <div class="col-xs-12 visible-xs visible-sm">
                    <img src="{{ asset('images/barbecue_landing/crazy_cheesy.jpg') }}?20220510" alt="Barbecue"
                         class="img-responsive"/>
                </div>
                <div class="col-xs-12 col-md-6 d-flex" style="padding: 30px 20px">
                    <div class="m-auto col-xs-12 md-text-right">
                        <h2>{{ __('rubandroll.barbecue.index.4') }}</h2>
                        <p class="description">
                            {!! __('rubandroll.barbecue.index.5') !!}
                        </p>
                        <a class="btn btn--primary btn--bordered"
                           href="{{ route('barbecue.asztalfoglalas') }}">{{ __('Asztalfoglalás') }}</a>
                    </div>
                </div>
                <div class="col-md-6 hidden-xs hidden-sm">
                    <img src="{{ asset('images/barbecue_landing/crazy_cheesy.jpg') }}" alt="Barbecue"
                         class="img-responsive"/>
                </div>
            </div>
        </div>
    </section>

    <section style="padding: 0 0 50px 0" class="barbecue-landing-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 md-text-center">
                    <h2>{!! __('rubandroll.barbecue.index.6') !!}</h2>
                    <p class="description">
                        <a href="https://goo.gl/maps/g8KNFZpL3bjrg4ZB7" target="_blank">{!! __('Megtekintés Google Mapsen') !!}</a>
                    </p>
                </div>
            </div>
            <div class="row images">
                <div class="col-xs-12 col-sm-6 col-md-3 text-center mb-20">
                    <img src="{{ asset('images/barbecue_landing/barbecue_2.jpg') }}" alt="Barbecue"
                         class="img-responsive m-auto"/>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 text-center mb-20">
                    <img src="{{ asset('images/barbecue_landing/barbecue_3.jpg') }}" alt="Barbecue"
                         class="img-responsive m-auto"/>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 text-center mb-20">
                    <img src="{{ asset('images/barbecue_landing/barbecue_4.jpg') }}" alt="Barbecue"
                         class="img-responsive m-auto"/>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 text-center mb-20">
                    <img src="{{ asset('images/barbecue_landing/barbecue_5.jpg') }}" alt="Barbecue"
                         class="img-responsive m-auto"/>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 text-center">
                    <a class="btn btn--primary btn--bordered" href="{{ route('barbecue.galeria') }}">{!! __('Galéria') !!}</a>
                </div>
            </div>
        </div>
    </section>

    <section style="padding: 80px 0; background-image: url('{{ asset('images/barbecue_landing/barbecue_2_bg.jpg') }}')"
             class="barbecue-landing-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h2 class="text-white" style="margin-bottom: 25px">{!! __('rubandroll.barbecue.index.7') !!}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <p class="description text-white">
                        {!! __('rubandroll.barbecue.index.8') !!}
                    </p>
                </div>
                <div class="col-xs-12 col-md-6">
                    <p class="description text-white">
                        {!! __('rubandroll.barbecue.index.9') !!}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section style="padding: 80px 0 80px 0; background-color: #EFEFEF" class="barbecue-landing-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 md-text-center">
                    <h2>{!! __('rubandroll.barbecue.index.10') !!}</h2>
                </div>
            </div>
            <div class="row images mb-0">
                <a href="{{ route('barbecue.etlap', ['type' => 'Heti menü']) }}" class="image-title">
                    <div class="col-md-offset-1 col-xs-12 col-sm-6 col-md-2 text-center text--uppercase">
                        <img src="{{ asset('images/barbecue_landing/barbecue_icon_1.png') }}" alt="Ikon"
                             class="img-responsive m-auto"/>
                        {!! __('Heti menü') !!}
                    </div>
                </a>
                <a href="{{ route('barbecue.etlap', ['type' => 'Étlap']) }}" class="image-title">
                    <div class="col-xs-12 col-sm-6 col-md-2 text-center text--uppercase">
                        <img src="{{ asset('images/barbecue_landing/barbecue_icon_2.png') }}" alt="Ikon"
                             class="img-responsive m-auto"/>
                        {!! __('Étlap') !!}
                    </div>
                </a>
                <a href="{{ route('barbecue.etlap', ['type' => 'Itallap']) }}" class="image-title">
                    <div class="col-xs-12 col-sm-6 col-md-2 text-center text--uppercase">
                        <img src="{{ asset('images/barbecue_landing/barbecue_icon_3.png') }}" alt="Ikon"
                             class="img-responsive m-auto"/>
                        {!! __('Itallap') !!}
                    </div>
                </a>
                <a href="{{ route('barbecue.etlap', ['type' => 'Borlap']) }}" class="image-title">
                    <div class="col-xs-12 col-sm-6 col-md-2 text-center text--uppercase">
                        <img src="{{ asset('images/barbecue_landing/barbecue_icon_4.png') }}" alt="Ikon"
                             class="img-responsive m-auto"/>
                        {!! __('Borlap') !!}
                    </div>
                </a>
                <a href="{{ route('barbecue.etlap', ['type' => 'Koktéllap']) }}" class="image-title">
                    <div class="col-xs-12 col-sm-6 col-md-2 text-center text--uppercase">
                        <img src="{{ asset('images/barbecue_landing/barbecue_icon_5.png') }}" alt="Ikon"
                             class="img-responsive m-auto"/>
                        {!! __('Koktéllap') !!}
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section style="padding: 80px 0 80px 0; background-color: #222222" class="barbecue-landing-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 md-text-center">
                    <!-- Begin Mailchimp Signup Form -->
                    <link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
                    <style type="text/css">
                        #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:100%;}
                        /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
                           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
                    </style>
                    <div id="mc_embed_signup">
                        <form action="https://rubandroll.us16.list-manage.com/subscribe/post?u=85f1660207ed15ddcfbba55c3&amp;id=38558f714a&amp;f_id=009d6ce0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                            <div id="mc_embed_signup_scroll">
                                <h2>Iratkozz fel hírlevelünkre!</h2>
                                <div>
                                    Heti hírlevelünkben az aktuális ebédmenüt, eseményeinket és különleges ajánlatainkat osztjuk meg veled.
                                </div>
                                <div class="indicates-required"><span class="asterisk">*</span> kötelező mező</div>
                                <div class="mc-field-group">
                                    <label for="mce-EMAIL2">E-mail cím <span class="asterisk">*</span>
                                    </label>
                                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL2" required style="border: 1px solid #ABB0B2;">
                                    <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
                                </div>
                                <div class="mc-field-group">
                                    <label for="mce-LNAME">Vezetéknév </label>
                                    <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
                                    <span id="mce-LNAME-HELPERTEXT" class="helper_text"></span>
                                </div>
                                <div class="mc-field-group">
                                    <label for="mce-FNAME">Keresztnév </label>
                                    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
                                    <span id="mce-FNAME-HELPERTEXT" class="helper_text"></span>
                                </div>
                                <div id="mce-responses" class="clear foot">
                                    <div class="response" id="mce-error-response" style="display:none"></div>
                                    <div class="response" id="mce-success-response" style="display:none"></div>
                                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85f1660207ed15ddcfbba55c3_38558f714a" tabindex="-1" value=""></div>
                                <div class="optionalParent">
                                    <div class="clear foot">
                                        <input type="submit" value="Feliratkozom" name="subscribe" id="mc-embedded-subscribe" class="button">
                                        <p class="brandingLogo"><a href="http://eepurl.com/imnK5k" title="Mailchimp - email marketing made easy and fun"><img src="https://eep.io/mc-cdn-images/template_images/branding_logo_text_dark_dtp.svg"></a></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='radio'; /*
 * Translated default messages for the $ validation plugin.
 * Locale: HU
 */
                            $.extend($.validator.messages, {
                                required: "Kötelező megadni.",
                                maxlength: $.validator.format("Legfeljebb {0} karakter hosszú legyen."),
                                minlength: $.validator.format("Legalább {0} karakter hosszú legyen."),
                                rangelength: $.validator.format("Legalább {0} és legfeljebb {1} karakter hosszú legyen."),
                                email: "Érvényes e-mail címnek kell lennie.",
                                url: "Érvényes URL-nek kell lennie.",
                                date: "Dátumnak kell lennie.",
                                number: "Számnak kell lennie.",
                                digits: "Csak számjegyek lehetnek.",
                                equalTo: "Meg kell egyeznie a két értéknek.",
                                range: $.validator.format("{0} és {1} közé kell esnie."),
                                max: $.validator.format("Nem lehet nagyobb, mint {0}."),
                                min: $.validator.format("Nem lehet kisebb, mint {0}."),
                                creditcard: "Érvényes hitelkártyaszámnak kell lennie."
                            });}(jQuery));var $mcj = jQuery.noConflict(true);</script>
                    <!--End mc_embed_signup-->
                </div>
            </div>
        </div>
    </section>

    <section style="padding: 50px 0" class="barbecue-landing-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h2>{!! __('rubandroll.barbecue.index.11') !!}</h2>
                </div>
            </div>
            <div class="row d-flex">
                <div class="col-xs-12 col-md-6">
                    <h3>{!! __('rubandroll.barbecue.index.12') !!}</h3>
                    <p class="description">
                        {!! __('rubandroll.barbecue.index.13') !!}
                    </p>

                    <h3>{!! __('rubandroll.barbecue.index.14') !!}</h3>
                    <p class="description">
                        {!! __('rubandroll.barbecue.index.15') !!}
                    </p>

                    <h3>{!! __('rubandroll.barbecue.index.16') !!}</h3>
                    <p class="description">
                        {!! __('rubandroll.barbecue.index.17') !!}
                    </p>

                    <a class="btn btn--primary" href="{{ route('barbecue.asztalfoglalas') }}">{{ __('Asztalfoglalás') }}</a>
                </div>
                <div class="col-xs-12 col-md-6 d-flex">
                    <div class="m-auto">
                        <div class="row">
                            <div class="col-xs-12 mb-30 mt-30">
                                <img src="{{ asset('images/barbecue_landing/barbecue_6.jpg') }}" alt="Barbecue"
                                     class="img-responsive"/>
                            </div>
                            <div class="col-xs-12 col-md-6 mb-30">
                                <img src="{{ asset('images/barbecue_landing/barbecue_7.jpg') }}" alt="Barbecue"
                                     class="img-responsive xs-w-100"/>
                            </div>
                            <div class="col-xs-12 col-md-6 mb-30">
                                <img src="{{ asset('images/barbecue_landing/barbecue_8.jpg') }}" alt="Barbecue"
                                     class="img-responsive xs-w-100"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection