@extends('template.'.config('settings.template').'.content.master')
@section('meta_title', 'Title HomePage')
@section('meta_description', 'Description HomePage')
@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>

<hr>
<section class="mt-2">
    <div class="row">
            <h2 id="news" class="mt-5 mb-4">Aktuelle <strong>Neuigkeiten</strong></h2>
            @foreach(filterByContentType($mdContents, "News")->take(3) as $content)
            <div class="col-12 col-md-4 mb-4" >
                <div class="card h-100" style="background-color: #f8f8f8;">
                    @if ($content->image)
                        <img class="rounded-top img-fluid" src="{{ asset('uploads/' . $content->image) }}" loading="lazy">
                    @else
                        <img class="rounded-top img-fluid" src="{{ asset('template/images/konradenhof-placeholder.jpg') }}" loading="lazy">
                    @endif
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title" style="margin-top: 20px;">
                                    <a href="{{ route_content($content) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$content->title}}'});">
                                        {{$content->title}}
                                    </a>
                                </h5>
                            </div>
                            <div class="col-12">
                                <small class="card-subtitle mb-2 text-muted" title="{{date('d.m.Y', strtotime($content->created_at))}}">  {{ $content->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="col-12 mt-2">
                                {!! strIsset(Str::limit(strip_tags(html_entity_decode($content->data_fields['neuigkeit'])), 600,'...'), 'keine Angaben') !!}
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-end">
                        <a class="btn btn-sm btn-ci" href="{{ route_content($content) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$content->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>
            @endforeach
            <a href="{{url('/neuigkeiten')}}" class="small text-center">Ältere Nachrichten</a>
    </div>
</section>

<hr>

<section>
    <div class="row">
        <div class="col">
            <h2 id="alpakas" class="mb-4">Ü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>

<hr>

<section>
    <div class="row">
        <div class="col">
            <h2 id="produkte" class="mb-4">Unsere <strong>Alpaka Produkte</strong></h2>
        </div>
    </div>
    <div class="row">
        @foreach(filterByContentType($mdContents, "Produkte")->take(6) as $content)
            <div class="col-4 col-md-2 mb-4">
                <a href="{{ route_content($content) }}" title="{{$content->title}}">
                    @if ($content->image)
                        <img class="rounded border img-fluid" src="{{ asset('uploads/' . $content->image) }}" loading="lazy">
                    @else
                        <img class="rounded border img-fluid" src="{{ asset('template/images/konradenhof-placeholder.jpg') }}" loading="lazy">
                    @endif
                </a>
            </div>
        @endforeach
        <div class="col-12 text-center">
            <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