@extends('layouts.master')

@section('title', 'Home')

@section('content')

<div class="home">
    <section class="swiper myHeroSwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide hero-slider">
                <div class="hero-slider-image" style="background-image: url({{ asset('img/pages/home/slider1.jpg') }})"></div>
                <div class="container-custom">
                    <div class="row">
                        <div class="offset-xxl-2 col-xxl-8 offset-xl-1 col-xl-10 hero-slider-wrapper">
                            <h2 class="title-narziss-xl mb-2" data-splitting>{{ __('pages/home.hero_title') }}</h2>
                            <h4 class="title-md text-thin">{{ __('pages/home.hero_subtitle') }}</h4>
                            <p class="hero-text-link caption-text text-thin">
								{{ __('pages/home.hero_text') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="swiper-slide hero-slider">
                <div class="hero-slider-image" style="background-image: url({{ asset('img/pages/home/slider2.jpg') }})"></div>
                <div class="container-custom">
                    <div class="row">
                        <div class="offset-xxl-2 col-xxl-8 offset-xl-1 col-xl-10 hero-slider-wrapper">
                            <h2 class="title-narziss-xl mb-2" data-splitting>{{ __('pages/home.hero_title') }}</h2>
                            <h4 class="title-md text-thin">{{ __('pages/home.hero_subtitle') }}</h4>
                            <p class="hero-text-link caption-text text-thin">
								{{ __('pages/home.hero_text') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="swiper-slide hero-slider">
                <div class="hero-slider-image" style="background-image: url({{ asset('img/pages/home/slider3.jpg') }})"></div>
                <div class="container-custom">
                    <div class="row">
                        <div class="offset-xxl-2 col-xxl-8 offset-xl-1 col-xl-10 hero-slider-wrapper">
                            <h2 class="title-narziss-xl mb-2" data-splitting>{{ __('pages/home.hero_title') }}</h2>
                            <h4 class="title-md text-thin">{{ __('pages/home.hero_subtitle') }}</h4>
                            <p class="hero-text-link caption-text text-thin">
								{{ __('pages/home.hero_text') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        <div class="pagination-wrapper">
            <div class="myHeroSwiper-pagination swiper-pagination progress-white"></div>
            <div class="myFractionSwiper-pagination fraction-white"></div>
        </div>
    </section>

    <section class="collectionFiguresCombo">
        <div class="container-custom">
            <div class="row">
                <div class="col-6 offset-md-1 col-md-4">
                    <img src="{{ asset('img/pages/home/Sixty-four-1.jpg') }}" alt="Figure" class="image-sm">
                </div>
                <div class="offset-md-1 col-6">
                    <div class="image-md imageReveal">
                        <img src="{{ asset('img/pages/home/Sixty-four-2.jpg') }}" alt="Figure" class="transform-right">
                    </div>
                    {{-- <img src="{{ asset('img/pages/home/Sixty-four-2.jpg') }}" alt="Figure" class="image-md"> --}}
                </div>
            </div>
            <div class="row">
                <div class="offset-md-8 col-md-4">
                    <div class="image-lg imageReveal">
                        <img src="{{ asset('img/pages/home/sixt-night.jpg') }}" alt="Figure" class="transform-left">
                    </div>
                    <div class="caption-wrapper">
                        <h1 class="title-narziss-xxl revealByLetter" data-splitting>six<br>ty</h1>
                        <p class="caption-text text-thin revealOnly">
						<br><br>
                            {!! __('pages/home.main_text') !!}

                            <br><br>
                            <!--
								<a href="#">
    							<span class="text-bold link link-black">Comprar</span>
    							<span class="arrow arrow-black"></span>
							</a>
							-->
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Configurator --}}
	@include('configurator.configurator')

</div>

@endsection