@extends('template.'.\Setting::get('template', 'default').'.content.master')

@section('content')
               <!-- Home section -->
        <div class="section-md bg-image parallax" data-bg-src="{{ asset('uploads/' . \Setting::get('image')) }}">
            <div class="bg-black-05">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-8 col-xl-6">
                            <h1 class="font-weight-light">{{ \Setting::get('tagline')}}</h1>
                            <a class="button button-lg button-radius button-white-3 margin-top-30" href="{{url('/kontakt')}}}">Kontakt</a>
                        </div>
                    </div><!-- end row -->
                </div><!-- end container -->
            </div>
        </div>
        <!-- end Home section -->

        <!-- About section -->
        <div class="section">
            <div class="container">
                <div class="row align-items-center col-spacing-50">
                    <!-- About Image -->
                    <div class="col-12 col-lg-6">
                        <img class="border-radius" src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt="">
                    </div>
                    <!-- About Content -->
                    <div class="col-12 col-lg-6">
                        <h3 class="font-weight-light margin-bottom-20">We believe that teamwork divides the tasks and multiplies the success</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        <a class="button-text-3 margin-top-40" href="#">Read More</a>
                    </div>
                </div><!-- end row -->
            </div><!-- end container -->
        </div>
        <!-- end About section -->

        <!-- Features section -->
        <div class="section padding-top-0">
            <div class="container icon-5xl">
                <div class="row">
                    <!-- Feature box 1 -->
                    <div class="col-12 col-lg-4">
                        <div class="text-dark margin-bottom-20 margin-lg-bottom-30">
                            <i class="ti-world"></i>
                        </div>
                        <h6 class="font-weight-medium font-small uppercase">Feature Title</h6>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                    </div>
                    <!-- Feature box 2 -->
                    <div class="col-12 col-lg-4">
                        <div class="text-dark margin-bottom-20 margin-lg-bottom-30">
                            <i class="ti-world"></i>
                        </div>
                        <h6 class="font-weight-medium font-small uppercase">Feature Title</h6>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                    </div>
                    <!-- Feature box 3 -->
                    <div class="col-12 col-lg-4">
                        <div class="text-dark margin-bottom-20 margin-lg-bottom-30">
                            <i class="ti-world"></i>
                        </div>
                        <h6 class="font-weight-medium font-small uppercase">Feature Title</h6>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                    </div>
                </div><!-- end row -->
            </div><!-- end container -->
        </div>
        <!-- end Features section -->

        <!-- Clients section -->
        <div class="section-sm bg-grey-lighter">
            <div class="container text-center">
                <div class="owl-carousel" data-owl-dots="false" data-owl-nav="true" data-owl-margin="50" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
                    <!-- Client box 1 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 2 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 3 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 4 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 5 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 6 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                    <!-- Client box 7 -->
                    <div class="client-box">
                        <a href="#"><img src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}" alt=""></a>
                    </div>
                </div><!-- end owl-carousel -->
            </div><!-- end container -->
        </div>
        <!-- end Clients section -->

               <div class="section padding-bottom-0">
                   <div class="container">
                       <div class="row col-spacing-20">

                           @foreach ($categories as $category)

                               <div class="col-12 col-md-4">
                                   <div class="hoverbox-8">
                                       <a href="{{ url('/' . $category->slug)  }}">
                                           <img src="{{ $category->image ? url('uploads/categories/' . $category->image) : 'https://placehold.it/500x300' }}" alt="">
                                           <div class="content">
                                               <h6 class="font-family-tertiary font-small font-weight-normal uppercase margin-0">{{ $category->name }}</h6>
                                           </div>
                                       </a>
                                   </div>
                               </div>




                       @endforeach

                       </div><!-- end row -->
                   </div><!-- end container -->
               </div>
               <!-- end Category section -->

        <!-- Services section -->
        <div class="section">
            <div class="container">
                <div class="margin-bottom-70">
                    <div class="row">
                        <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                            <h3 class="font-weight-light">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</h3>
                        </div>
                    </div><!-- end row -->
                </div>
                <div class="row">
                    <!-- Service box 1 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                    <!-- Service box 2 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                    <!-- Service box 3 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                    <!-- Service box 4 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                    <!-- Service box 5 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                    <!-- Service box 6 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="feature-box dark">
                            <div class="feature-box-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h5 class="font-weight-normal">Service title</h5>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        </div>
                    </div>
                </div><!-- end row -->
            </div><!-- end container -->
        </div>
        <!-- end Services section -->

        <!-- Parallax section -->
        <div class="section-xl bg-image parallax" data-bg-src="{{asset('template/images/sander-weeteling-KABfjuSOx74-unsplash.jpg')}}">
            <div class="bg-black-05">
                <div class="container text-right">
                    <h1 class="font-weight-light">Create your perfect website <br> today with Mono</h1>
                    <a class="button button-lg button-radius button-white-3 margin-top-20" href="#">Start Now</a>
                </div><!-- end container -->
            </div>
        </div>
        <!-- end Parallax section -->



@stop