@extends('layouts.app')

@section('content')

<section id="slider" class="slider slide-overlay-black">
	<div class="rev_slider_wrapper">
		<div id="slider1" class="rev_slider"  data-version="5.0">
			<ul>
				<li data-transition="zoomin"
					data-slotamount="default" 
					data-easein="Power4.easeInOut" 
					data-easeout="Power4.easeInOut" 
					data-masterspeed="2000">
					<!-- MAIN IMAGE -->
					<img src="{{ url('assets/images/slider-01.jpg') }}" alt="Slide Background Image"  width="1920" height="1280">				
				
					<!-- LAYER NR. 2 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="-65" 
						data-whitespace="nowrap"
						data-width="none"
						data-height="none"
                        data-frames='[{"delay":1750,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on">
						<div class="slide--headline">Rub & Roll Barbecue</div>
					</div>
					
					<!-- LAYER NR. 3 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="40" 
						data-width="1140"
						data-height="none"
                        data-frames='[{"delay":2000,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' 
						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on">
						<div class="slide--bio text-center">A Rub & Roll Barbecue étterem és egyben életérzés is.<br> Itt minden a barbecue, vagyis a lassú tűzön, hosszú órákon keresztül, füstön sütött húsok körül forog.<br>A Szent István körúton elhelyezkedő étteremben és kerthelyiségében a hét minden napján készülnek a füstös húsok,<br> így bármikor elmerülhetsz a barbecue szaftos, ízekkel teli, magával ragadó világában. </div>
					</div>
					
					<!-- LAYER NR. 4 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="140" 
						data-width="none"
						data-height="none"
						data-whitespace="nowrap"
                        data-frames='[{"delay":2250,"speed":1000,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-164","delay":""}]'
						data-basealign="slide" 
						data-responsive_offset="on" 
						data-responsive="off">
						<div class="slide-action">
							<a class="btn btn--white btn--bordered btn--lg" href="{{ url('etlap') }}">{{ __('Étlap') }}</a>
						</div>
					</div>
				</li>
				
				<li data-transition="slideoverdown"
					data-slotamount="default" 
					data-easein="Power4.easeInOut" 
					data-easeout="Power4.easeInOut" 
					data-masterspeed="2000">
					<!-- MAIN IMAGE -->
					<img src="{{ url('assets/images/slider-02.jpg') }}" alt="Slide Background Image"  width="1920" height="1280">
					
					<!-- LAYER NR. 2 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="-65" 
						data-whitespace="nowrap"
						data-width="none"
						data-height="none"
                        data-frames='[{"delay":1750,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on">
						<div class="slide--headline">Rub & Roll Shop</div>
					</div>
					
					<!-- LAYER NR. 3 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="40" 
						data-width="1140"
						data-height="none"
						data-transform_idle="o:1;"
                        data-frames='[{"delay":2000,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' 
						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on">
						<div class="slide--bio text-center">A műfaj rajongóiként a hagyományos amerikai BBQ éttermekben,<br>a legnépszerűbb pitmasterektől megszerzett tudást és a több éves tapasztalatot szeretnénk közkinccsé tenni.<br>Ezért is született meg a Rub & Roll Shop kifejezetten alapanyagokra (rub, szósz, injektáló) és azok használatára fókuszálva,<br> hogy ezzel is támogassuk a hazai barbecue mozgalmat. </div>
					</div>
					
					<!-- LAYER NR. 4 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="140" 
						data-width="none"
						data-height="none"
						data-whitespace="nowrap"
                        data-frames='[{"delay":2250,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"x:50px;opacity:0;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-164","delay":""}]'
						data-basealign="slide" 
						data-responsive_offset="on" 
						data-responsive="off">
						<div class="slide-action">
							<a class="btn btn--primary" href="{{ url('https://rubandrollshop.hu') }}" target="_blank">Shop</a>
						</div>
					</div>
				</li>
				
				<li data-transition="incube-horizontal"
					data-slotamount="default" 
					data-easein="Power4.easeInOut" 
					data-easeout="Power4.easeInOut" 
					data-masterspeed="2000">
					<!-- MAIN IMAGE -->
					<img src="{{ url('assets/images/slider-03.jpg') }}" alt="Slide Background Image"  width="1920" height="1280">
					
					<!-- LAYER NR. 2 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="0" 
						data-whitespace="nowrap"
						data-width="none"
						data-height="none"
                        data-frames='[{"delay":1750,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on"
						>
						<div class="slide--headline">Rub & Roll Villa</div>
					</div>
					
					<!-- LAYER NR. 3 -->
					<div class="tp-caption" 
						data-x="center" data-hoffset="0" 
						data-y="center" data-voffset="100" 
						data-width="1140"
						data-height="none"
                        data-frames='[{"delay":2000,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'						data-splitin="none" 
						data-splitout="none" 
						data-responsive_offset="on">
						<div class="slide--bio text-center">Legújabb szerelemprojektünkben pedig hangulatos, vidéki miliőben szeretnénk feltöltődésre és nyugodt időtöltésre invitálni vendégeinket.<br>A Rub & Roll Villában 2020. nyarától várjuk a várostól elszakadni vágyókat, akik gyönyörű környezetben,<br>a festői Gödöllőn szeretnék élvezni a rub'n'rollt. </div>
					</div>
				</li>

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

<section id="blog" class="blog blog-grid pb-80">
    <div class="container">
        <div class="row">
        	@foreach($articles as $article)
	            <div class="col-xs-12 col-sm-6 col-md-4">
	                <div class="blog-entry">

	                    <div class="entry--content">
	                        <div class="entry--meta">
	                            <span class="entry--date">2020.06.21</span> / <span><a href="#">BBQ</a></span>
	                        </div>
	                        <div class="entry--title">
	                            <h4><a href="{{ action('ArticleController@show', $article->slug) }}">{!! $article->name !!}</a></h4>
	                        </div>
	                        <div class="entry--img">
	                            <a href="{{ action('ArticleController@show', $article->slug) }}">
									@if($article->image)
						            <img src="{{ url($article->getFirstMediaUrl('image', 'thumbnail')) }}" alt="" />
						            @else
						            <img src="{{ url('assets/images/blog/grid/1.jpg') }}" alt="" />
						            @endif
								</a>
	                        </div>
	                        <div class="entry--bio">
	                            {!! $article->summary !!}
	                        </div>
	                    </div>
	                </div>
	            </div>
	        @endforeach
        </div>
    </div>
</section>

@endsection