@extends('front.layouts.master')

@section('title', 'Home')

@section('content')
    <a href="#prizes-popup" class="win-link-lg win-lightbox">
        <img src="{{asset('assets/front/images/img04.svg')}}" alt="image description">
    </a>
    <a href="#prizes-popup" class="win-link-mobile win-lightbox">
        <div class="image">
            <img src="{{asset('assets/front/images/img03.svg')}}" height="71" width="355" alt="image description">
            <span class="bags-ico"><img src="{{asset('assets/front/images/img45.png')}}" height="140" width="118"
                                        alt="image description"></span>
        </div>
    </a>

    <div class="cycle-gallery home-carousel carousel">
        <div class="mask">
            <div class="slideset">
                <div class="slide">
                    <div class="image-center parallax-layer01" data-delay="0" data-start='{"scale":"0.9"}' data-stop='{"scale":"1"}'>
                        <img src="{{asset('assets/front/images/frame01.png')}}" height="684" width="525"
                             alt="image description">
                        <div class="image">
                            <img src="{{asset('assets/front/images/home-gallery/artwork2.jpg')}}" alt="hot air ballon" width="384"
                                 height="533">
                        </div>
                    </div>
                    <div class="image-left parallax-layer02" data-delay="0" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img07.png')}}" alt="image description" width="379"
                             height="238">
                    </div>
                    <div class="image-right parallax-layer02" data-delay="0" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img09.png')}}" alt="image description" width="420"
                             height="440">
                    </div>
                    <div class="character-left parallax-layer03" data-delay="500" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img08.png')}}" height="203" width="108"
                             alt="image description">
                    </div>
                    <div class="character-right parallax-layer03" data-delay="500" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0"}'>
                        <img src="{{asset('assets/front/images/img10.png')}}" height="195" width="116"
                             alt="image description">
                    </div>
                </div>
                <div class="slide">
                    <div class="image-center parallax-layer01" data-delay="0" data-start='{"scale":"0.9"}' data-stop='{"scale":"1"}'>
                        <img src="{{asset('assets/front/images/frame01.png')}}" height="684" width="525"
                             alt="image description">
                        <div class="image">
                            <img src="{{asset('assets/front/images/home-gallery/starry-night.jpg')}}" alt="starry night" width="384"
                                 height="533">
                        </div>
                    </div>
                    <div class="image-left parallax-layer02" data-delay="0" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img07.png')}}" alt="image description" width="379"
                             height="238">
                    </div>
                    <div class="image-right parallax-layer02" data-delay="0" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img09.png')}}" alt="image description" width="420"
                             height="440">
                    </div>
                    <div class="character-left parallax-layer03" data-delay="500" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img08.png')}}" height="203" width="108"
                             alt="image description">
                    </div>
                    <div class="character-right parallax-layer03" data-delay="500" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0"}'>
                        <img src="{{asset('assets/front/images/img10.png')}}" height="195" width="116"
                             alt="image description">
                    </div>
                </div>
                <div class="slide">
                    <div class="image-center parallax-layer01" data-delay="0" data-start='{"scale":"0.9"}' data-stop='{"scale":"1"}'>
                        <img src="{{asset('assets/front/images/frame01.png')}}" height="684" width="525"
                             alt="image description">
                        <div class="image">
                            <img src="{{asset('assets/front/images/home-gallery/apple.jpg')}}" alt="apple" width="384"
                                 height="533">
                        </div>
                    </div>
                    <div class="image-left parallax-layer02" data-delay="0" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img07.png')}}" alt="image description" width="379"
                             height="238">
                    </div>
                    <div class="image-right parallax-layer02" data-delay="0" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img09.png')}}" alt="image description" width="420"
                             height="440">
                    </div>
                    <div class="character-left parallax-layer03" data-delay="500" data-start='{"translateX":"-1000px"}' data-stop='{"translateX":"0px"}'>
                        <img src="{{asset('assets/front/images/img08.png')}}" height="203" width="108"
                             alt="image description">
                    </div>
                    <div class="character-right parallax-layer03" data-delay="500" data-start='{"translateX":"1000px"}' data-stop='{"translateX":"0"}'>
                        <img src="{{asset('assets/front/images/img10.png')}}" height="195" width="116"
                             alt="image description">
                    </div>
                </div>
            </div>
        </div>
        <a class="btn-prev" href="#">
            <span class="nudge nudge-1" data-morph-active="M293,150c0,71.797-45.5,101-143,101C56.5,251,7,221.797,7,150S56.5,49,150,49C248.5,49,293,78.203,293,150z">
                <svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
                    <path d="M281,150C281,221.797,221.797,281,150,281C78.203,281,19,221.797,19,150C19,78.203,78.203,19,150,19C221.797,19,281,78.203,281,150C281,150,281,150,281,150"></path>
                </svg>
                <span class="icon icon-chevron-thin-left"></span>
            </span>
        </a>
        <a class="btn-next" href="#">
            <span class="nudge nudge-1" data-morph-active="M293,150c0,71.797-45.5,101-143,101C56.5,251,7,221.797,7,150S56.5,49,150,49C248.5,49,293,78.203,293,150z">
                <svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
                    <path d="M281,150C281,221.797,221.797,281,150,281C78.203,281,19,221.797,19,150C19,78.203,78.203,19,150,19C221.797,19,281,78.203,281,150C281,150,281,150,281,150"></path>
                </svg>
                <span class="icon icon-chevron-thin-right"></span>
            </span>
        </a>
    </div>
    <div class="info-wrapper">
        <span class="slogan">Create with <span class="text-logo">
                <img src="{{asset('assets/front/images/logo02.png')}}" height="34" width="92" alt="Glucojel">
            </span> <strong>for your chance to WIN!</strong></span>
        <div class="btn-holder">
            <a href="{{url('artwork')}}" class="btn"><span>create</span></a>
            <a href="{{url('gallery')}}" class="btn"><span>gallery</span></a>
        </div>
        <div class="social-block">
            <ul class="social-list">
            </ul>
        </div>
    </div>
@stop