@extends('web.layouts.master')

@section('title', 'Home page')

@section('content')
<div class="hero-wrapper">
    <div class='home-bg' style="background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({{ asset('images/web/bg/home_page.jpg') }});"></div>
    <div class="overlay">
        <div class="container">
            <div class="overlay-txt">
                <img src="{{ asset('images/web/logo/logo.svg') }}" alt="Hero logo" class='home-logo'>
                <!-- <h1 class="animated fadeInDown delay-1s">Dobrodošli u Astoriu Bor</h1> -->
                <p class="animated fadeInDown delay-1s">{{ __('translation.signature') }}</p>
                <a href="{{ route('menu.index') }}" class='home-order-now'>Poručite odmah!</a>
            </div>
        </div>
    </div>
</div>
<div class="main-page">
    <section class="icons-wrapper">
        <div class="container">
            <p class="section-title text-center">{{ __('translation.distinguish') }}</p>
            <div class="row justify-content-center">
                <div class="col-lg-4">
                    <div class="card icon-card">
                        <div class="icon-wrapper">
                            <img src="{{ asset('images/web/icons/food.png') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <p class="card-text main-card-text">{{ __('translation.top-quality') }}</p>
                            <p class="card-text">{{ __('translation.top-quality-explanation') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card icon-card">
                        <div class="icon-wrapper">
                            <img src="{{ asset('images/web/icons/delivery.png') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <p class="card-text main-card-text">{{ __('translation.delivery') }}</p>
                            <p class="card-text">{{ __('translation.delivery-explanation') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card icon-card">
                        <div class="icon-wrapper">
                            <img src="{{ asset('images/web/icons/original.png') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <p class="card-text main-card-text">{{ __('translation.recipes') }}</p>
                            <p class="card-text">{{ __('translation.recipes-explanation') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slider-wrapper">
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide home-swiper-slide">
                    <a class='go-to-menu'>
                        <div  style='background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.pexels.com/photos/2662875/pexels-photo-2662875.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");'></div>
                        <h2>Doručak</h2>
                    </a>
                </div>
                <div class="swiper-slide home-swiper-slide">
                    <a class='go-to-menu'>
                        <div style='background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://cdn.pixabay.com/photo/2016/11/18/18/21/food-1836230_960_720.jpg");'></div>
                        <h2>Glavni meni</h2>
                    </a>
                </div>
                <div class="swiper-slide home-swiper-slide">
                    <a class='go-to-menu'>
                        <div style='background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://cdn.pixabay.com/photo/2018/07/10/21/02/cake-3529597_960_720.jpg");'></div>
                        <h2>Desert</h2>
                    </a>
                </div>
                <div class="swiper-slide home-swiper-slide">
                    <a class='go-to-menu' href='{{ route('menu.index') . '#bar-menu' }}'>
                        <div style='background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://cdn.pixabay.com/photo/2014/11/22/18/38/wine-541922_960_720.jpg");'></div>
                        <h2>Bar meni</h2>
                    </a>
                </div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev home-swiper-prev"></div>
            <div class="swiper-button-next home-swiper-next"></div>
        </div>
    </section>
    <section class="featured-wrapper">
        <div class="container">
            <p class="section-title text-center">{{ __('translation.offer-highlights') }}</p>
            <div class="row justify-content-center">
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="home-order">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-4 home-order-info">
                    <i class="fas fa-shopping-cart"></i>
                    <div>
                        <h2>{{ __('translation.choose-dish') }}</h2>
{{--                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, voluptatem.</p>--}}
                    </div>
                </div>
                <div class="col-12 col-lg-4 home-order-info">
                    <i class="fas fa-wallet"></i>
                    <div>
                        <h2>{{ __('translation.delivery-pay') }}</h2>
{{--                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, obcaecati!</p>--}}
                    </div>
                </div>
                <div class="col-12 col-lg-4 home-order-info">
                    <i class="fas fa-utensils"></i>
                    <div>
                        <h2>{{ __('translation.eat-home') }}</h2>
{{--                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, exercitationem.</p>--}}
                    </div>
                </div>
                <a class='home-order-button' href="#" type='button'>Poruči</a>
            </div>
        </div>
    </section>
    <section class="new-dishes">
        <div class="container">
            <p class="section-title text-center">
                {{ __('translation.new-offer') }}
            </p>
            <div class="row justify-content-center">
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="featured-food">
                        <img src="{{ asset('images/web/food-example.png') }}" alt="...">
                        <p class='featured-product-name'>Cezar salata</p>
                        <p class='featured-product-desc'>Salata prekrivena dresingom sa coleslav sosom, piletinom i kurcinom od zirafe</p>
                        <p class='featured-product-price'>rsd 350</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection