@extends('template.'.config('settings.template').'.content.master')
@section('content')
<style>
    @media only screen and (max-width: 676px) {
        #home-hero {
            background-color: #9699AA;
            background-image: url('{{ asset('template/images/alpaka-hero.jpg') }}');
            background-position: center;
            background-size: cover;
            min-height: 250px;
        }
    }
    @media only screen and (min-width: 676px) {
        #home-hero {
            background-color: #9699AA;
            background-image: url('{{ asset('template/images/alpaka-hero.jpg') }}');
            background-position: center;
            background-size: cover;
            min-height: 500px;
        }
    }
</style>
<link rel="stylesheet" href="{{ asset('template/css/pages/main.css') }}">
<div class="row">
    <div id="home-hero" class="shadow-lg">
        <div class="d-none d-md-block">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>

            <br>
            <br>
            <br>
        </div>

        <div id="city_headline">
            <h1><strong>Alpakas</strong> vom <strong>Konradenhof</strong></h1>
            <h2 class="shadow">Gaisheim, Moosbach</h2>
        </div>

        <div class="d-none d-md-block">
            <br>
        </div>
        <div class="d-none d-lg-block">
            <br>
            <br>
            <br>
        </div>
    </div>

    </div> <!-- header_static -->

<section class="mt-2 mb-5">
    <div class="row">
        <div class="col-12">
            <h2 id="konradenhof" class="mt-5 mb-4">Willkommen auf dem  <strong>Konradenhof</strong>!</h2>

        </div>
        <div class="col-12 col-md-7">
            <p style="font-size: 19px;">
                Gutmütig, intelligent und neugierig – Alpakas sind einfach zauberhaft.
                <br>
                <br>
                Eine Wanderung mit Alpakas ist Balsam für die Seele!
                <br>
                <br>
                Nach einer kurzen Einführung in die Welt der Paarhufer dürfen Sie die Tiere kennenlernen.
                <br>
                <br>
                Fernab von Autolärm und der Hektik des Alltags erfahren Sie die positive, beruhigende Wirkung der friedvollen, ausgeglichenen und dennoch aufgeweckten Tiere auf uns Menschen.
                <br>
        </div>
        <div class="col-12 col-md-4 offset-md-1 text-center">
            <img class="img-fluid mx-auto d-block rounded" src="{{asset('template/images/petra.jpg')}}">
            <small class="fst-italic mt-1">Petra Bäumler mit Alpaka</small>
        </div>
        
    </div>


    <div class="row text-center" style="font-size: 20px; margin-top:100px;">
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-1.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-4.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-2.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-3.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>



</section>

<section class="mt-2">
    <div class="row">
            <h2 id="news" class="mt-5 mb-4">Aktuelle <strong>Neuigkeiten</strong></h2>
            @foreach($nachrichten as $nach)
            <div class="col-12 col-md-4" style="padding-bottom: 1rem;">
                <div class="card" style="background-color: #f8f8f8;">
                    @if ($nach->image)
                        <img class="rounded-top img-fluid" src="{{ asset('uploads/' . $nach->image) }}">
                    @else
                        <img class="rounded-top img-fluid" src="{{ asset('template/images/konradenhof-placeholder.jpg') }}">

                    @endif
                    <div class="card-body">
                        <div class="row">



                            <div class="col-12">
                                <h5 class="card-title" style="margin-top: 20px;">
                                    <a href="{{ route_content($nach) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$nach->title}}'});">
                                        {{$nach->title}}
                                    </a>
                                </h5>
                            </div>
                            <div class="col-12">
                                <small class="card-subtitle mb-2 text-muted" title="{{date('d.m.Y', strtotime($nach->created_at))}}">  {{ $nach->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="col-12 mt-2">
                                {!! isset($nach->additional_fields['1']) ? $nach->additional_fields['1']  : 'keine Angaben' !!}
                            </div>

                            <div class="col-12 col-lg-12 text-end ">
                                <br>
                                <a class="btn btn-sm btn-ci" href="{{ route_content($nach) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$nach->title}}'});">
                                    Mehr lesen
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <a href="{{url('/news')}}" class="small text-center">Ältere Nachrichten</a>
    </div>
</section>

<section>
    <div class="row">
        <div class="col">
            <h2 id="alpakas" class="mb-5">Über <strong>Alpakas</strong></h2>

            <p style="font-size: 19px;">

                Gutmütig, intelligent und neugierig – Alpakas sind einfach zauberhaft.
                <br>
                <br>

                Eine Wanderung mit Alpakas ist Balsam für die Seele! Nach einer kurzen Einführung in die Welt der Paarhufer dürfen Sie die Tiere kennenlernen.
                <br>
                <br>
                Fernab von Autolärm und der Hektik des Alltags erfahren Sie die positive, beruhigende Wirkung der friedvollen, ausgeglichenen und dennoch aufgeweckten Tiere auf uns Menschen.

                <br>
                <br>
                Ein Wollknäuel mit großen Teddyaugen zu streicheln begeistert nicht nur Kinder.
            </p>

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


<section>
    <div class="row">
        <div class="col">
            <h2 id="produkte" class="mb-5">Unsere <strong>Alpaka Produkte</strong></h2>



        </div>
    </div>
    <div class="row">
        <div class="col-4 col-md-2 mb-4">
            <a href="{{url('/neumarkt')}}" title="Produkt 1">
                <img src="https://www.alpakafarm.com/sites/default/files/styles/display_04_400xstandard_16_9_crop/public/2019-03/AFS_Bild_Farm.jpg?itok=jAJ1z74g" class="img-fluid rounded border" loading="lazy">
            </a>
        </div>
        <div class="col-4 col-md-2 mb-4">
            <a href="{{url('/neumarkt')}}" title="Produkt 1">
                <picture>
                    <img src="https://www.alpakafarm.com/sites/default/files/styles/display_04_400xstandard_16_9_crop/public/weissjung.jpg?h=1cf7100d?h=1cf7100d&amp;itok=BYKVbS4F" class="img-fluid rounded border" loading="lazy">
                </picture>
            </a>
        </div>
        <div class="col-4 col-md-2 mb-4">
            <a href="{{url('/neumarkt')}}" title="Produkt 1">
                <img src="https://www.alpakafarm.com/sites/default/files/styles/display_04_400xstandard_16_9_crop/public/AFS_Head_Alpakas_2.jpg?h=a8426572?h=a8426572&amp;itok=FCQtYpaZ" class="img-fluid rounded border" loading="lazy">
            </a>
        </div>
        <div class="col-4 col-md-2 mb-4">
            <a href="{{url('/neumarkt')}}" title="Produkt 1">
                <img src="https://www.alpakafarm.com/sites/default/files/styles/display_04_400xstandard_16_9_crop/public/AFS_Head_Alpakas_2_0.jpg?h=0dbd260c&itok=XZI1whIH" class="img-fluid rounded border" loading="lazy">
            </a>
        </div>

        <div class="col-12 text-center">
            <br>
            <a href="{{url('/produkte')}}" class="text-center small" >Mehr Produkte</a>
            <br>
            <br>
            <br>
            <br>
            <br>

        </div>



</section>


<script src="{{asset('template/js/pages/main/script.js')}}"></script>
@stop