From 05514be64a7f5db54c47c86997c1640bbabeb5d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20V=C3=B6lkl?= <benjamin.voelkl@areya.de>
Date: Wed, 10 Jan 2024 12:57:18 +0100
Subject: [PATCH] .

---
 content/index.blade.php            | 110 ++++++++++++++++-----
 content/lists/aktuelles.blade.php  | 154 ++++++++++++++++++++++++-----
 content/lists/jobs.blade.php       |  89 ++++++++++-------
 content/lists/leistungen.blade.php |  42 ++++----
 4 files changed, 286 insertions(+), 109 deletions(-)

diff --git a/content/index.blade.php b/content/index.blade.php
index 091a1e8..441e5f1 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -2,7 +2,88 @@
 @extends('template.'.config('settings.template').'.content.master')
 @section('content')
 
-    <div class="card text-bg-dark border-0" style="border-radius:0; box-shadow:none;">
+
+    <style>
+
+        .block {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 16px;
+        }
+
+
+
+        .img-parallax {
+            width: 100vmax;
+            z-index: -1;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, 0);
+            pointer-events: none;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+    <div class="block" style="height: 500px;">
+        <img src="{{$cover}}" data-speed="-1"   class="img-parallax" alt="{{config('settings.name')}} Cover" />
+
+        <!--<x-img src="{{$cover}}" data-speed="-1"   class="img-parallax" alt="{{config('settings.name')}} Cover" />-->
+
+
+        <div class="card-img-overlay d-none d-lg-flex align-items-center" styles="border-radius:0; background: radial-gradient(rgba(0,0,0,.5) 20%,rgba(0,0,0,.1)); box-shadow:inset 0 0 3px 1px rgba(0,0,0,.1), inset 0 0 25px 2px rgba(0,0,0,.2);">
+            <div class="container p-3 rounded" style="width: 55vw; border-radius:0; background: radial-gradient({{$_primary_ci_color}}50,{{$_primary_ci_color}}30); box-shadow:inset 0 0 3px 1px {{$_primary_ci_color}}10, inset 0 0 25px 2px rgba(0,0,0,.2);">
+                <h1 class="card-title text-white mb-5 text-center text-uppercase">{{config('settings.name')}}</h1>
+                <p class="card-text my-2 text-white fs-5">{{config('settings.description')}}</p>
+            </div>
+        </div>
+
+    </div>
+
+
+
+
+    <script>
+                    $('.img-parallax').each(function() {
+  var $image = $(this);
+  var $imageParent = $(this).parent();
+
+  function parallaxImg () {
+    var speed = $image.data('speed');
+    var imageY = $imageParent.offset().top;
+    var winY = $(this).scrollTop();
+    var winH = $(this).height();
+    var parentH = $imageParent.innerHeight();
+    // The next pixel to show on screen
+    var winBottom = winY + winH;
+
+    // If block is shown on screen
+    if (winBottom > imageY && winY < imageY + parentH) {
+      // Number of pixels shown after block appear
+      var imgBottom = ((winBottom - imageY) * speed);
+      // Max number of pixels until block disappear
+      var imgTop = winH + parentH;
+      // Percentage between start showing until disappearing
+      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
+    }
+
+    $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
+  }
+
+  $(document).on({
+    scroll: function () {
+      parallaxImg();
+    }, ready: function () {
+      parallaxImg();
+    }
+  });
+});
+                </script>
+
+    <div class="card text-bg-dark border-0 d-none" style="border-radius:0; box-shadow:none;">
         <x-img src="{{$cover}}" style="object-fit:cover; aspect-ratio:3/1;" class="img-fluid shadow-lg" alt="{{config('settings.name')}} Cover" />
         <div class="card-img-overlay d-none d-lg-flex align-items-center" styles="border-radius:0; background: radial-gradient(rgba(0,0,0,.5) 20%,rgba(0,0,0,.1)); box-shadow:inset 0 0 3px 1px rgba(0,0,0,.1), inset 0 0 25px 2px rgba(0,0,0,.2);">
             <div class="container p-3 rounded" style="width: 55vw; border-radius:0; background: radial-gradient({{$_primary_ci_color}}50,{{$_primary_ci_color}}30); box-shadow:inset 0 0 3px 1px {{$_primary_ci_color}}10, inset 0 0 25px 2px rgba(0,0,0,.2);">
@@ -13,8 +94,6 @@
     </div>
 
 
-
-
     <div class="container d-lg-none">
         <div class="row">
             <div class="col-12">
@@ -25,11 +104,6 @@
     </div>
 
 
-
-
-
-
-
     @if($type->get("Ankündigung")->status)
         @php($leistungen = filterByContentType("Ankündigung"))
         @if($leistungen->isNotEmpty())
@@ -66,23 +140,12 @@
                                         </h5>
                                         {{ $content->ankundigung }}
                                     </div>
-
                                 @endisset
 
                             </div>
-
-
-
-
-
-
                         @endforeach
 
-
-
-
-
-                    </diw>
+                    </div>
                 </div>
 
         @endif
@@ -122,9 +185,6 @@
 
                 @endforeach
 
-
-
-
                 @if($leistungen->count() > 3)
 
                 <div class="col-12 text-center mt-3">
@@ -148,10 +208,6 @@
     @endif
 
 
-
-
-
-
     @if($type->get("News")->status)
         @php($news = filterByContentType("News"))
         @if($news->isNotEmpty())
diff --git a/content/lists/aktuelles.blade.php b/content/lists/aktuelles.blade.php
index 0842e7a..2491d41 100644
--- a/content/lists/aktuelles.blade.php
+++ b/content/lists/aktuelles.blade.php
@@ -1,6 +1,5 @@
 @extends('template.'.config('settings.template').'.content.master')
 @section('content')
-    <x-img src="{{ $list->image }}" class="img-fluid" alt=""/>
 
 
 
@@ -15,48 +14,151 @@
                 </p>
             </div>
 
-            @foreach($contents as $index => $content)
+            <div class="col-12">
 
-                <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
-                    <div class="card shadow-sm h-100">
-                        <a href="{{ $content->path }}" class="text-decoration-none">
-                            <x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px,(max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 992px) 993px, 500" class="img-fluid card-img-top"/>
-                        </a>
 
-                        <div class="card-body">
-                            <h3 class="h5 mb-2">
-                                <a href="{{ $content->path }}" class="text-decoration-none">
-                                    {{$content->title}}
 
-                                </a>
-                            </h3>
+                <style>
 
-                            <div class="text-muted small my-3">
+                    .block {
+                        width: 100%;
+                        height: 100%;
+                        position: relative;
+                        overflow: hidden;
+                        font-size: 16px;
+                    }
+
+                    .block h2 {
+                        position: relative;
+                        display: block;
+                        text-align: center;
+                        margin: 0;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        font-size: 10vw;
+                        color: white;
+                        font-weight: 400;
+                    }
+
+                    .img-parallax {
+                        width: 100vmax;
+                        z-index: -1;
+                        position: absolute;
+                        top: 0;
+                        left: 50%;
+                        transform: translate(-50%, 0);
+                        pointer-events: none;
+                    }
+                </style>
+
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+                <div class="block">
+                    <img src="https://unsplash.it/1920/1920/?image=1003" data-speed="-1" class="img-parallax">
+                    <h2>Parallax 1</h2>
+                </div>
+
+
+
+
+                <script>
+                    $('.img-parallax').each(function() {
+  var $image = $(this);
+  var $imageParent = $(this).parent();
+
+  function parallaxImg () {
+    var speed = $image.data('speed');
+    var imageY = $imageParent.offset().top;
+    var winY = $(this).scrollTop();
+    var winH = $(this).height();
+    var parentH = $imageParent.innerHeight();
+    // The next pixel to show on screen
+    var winBottom = winY + winH;
+
+    // If block is shown on screen
+    if (winBottom > imageY && winY < imageY + parentH) {
+      // Number of pixels shown after block appear
+      var imgBottom = ((winBottom - imageY) * speed);
+      // Max number of pixels until block disappear
+      var imgTop = winH + parentH;
+      // Percentage between start showing until disappearing
+      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
+    }
+
+    $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
+  }
+
+  $(document).on({
+    scroll: function () {
+      parallaxImg();
+    }, ready: function () {
+      parallaxImg();
+    }
+  });
+});
+                </script>
+                <x-img src="{{ $list->image }}" class="img-fluid rounded" alt=""/>
+
+            </div>
+
+
+            @if(count($contents) > 0)
+
+                @foreach($contents as $index => $content)
+
+                    <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
+                        <div class="card shadow-sm h-100">
+                            <a href="{{ $content->path }}" class="text-decoration-none">
+                                <x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px,(max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 992px) 993px, 500" class="img-fluid card-img-top"/>
+                            </a>
+
+                            <div class="card-body">
+                                <h3 class="h5 mb-2">
+                                    <a href="{{ $content->path }}" class="text-decoration-none">
+                                        {{$content->title}}
+
+                                    </a>
+                                </h3>
+
+                                <div class="text-muted small my-3">
                                 <span title="{{$content->created_at}}">
                                      <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                 {{ $content->updated_at->diffForHumans() }}
                                 </span>
 
+                                </div>
+
+                                {!! Str::limit($content->vorschau, 280) !!}
+
                             </div>
 
-                            {!! Str::limit($content->vorschau, 280) !!}
+                            <div class="card-footer text-end">
+                                <a class="btn btn-sm btn-ci" href="{{ $content->path }}" 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 class="card-footer text-end">
-                            <a class="btn btn-sm btn-ci" href="{{ $content->path }}" 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>
+
+
+                @endforeach
+            @else
+
+                <script src="http://lumino.xps/admin-assets/libs/lottie-player.js"></script>
+                <div class="col-12 text-center" style="margin-bottom: 30vh; margin-top: 5vh;">
+                    <lottie-player src="http://lumino.xps/admin-assets/animations/no-results.json" background="transparent" speed="1" style="width: 200px; height: 200px; margin: 0 auto;" loop="" autoplay=""></lottie-player>
+
+                    <i>
+                        Derzeit keine Inhalte in {{ $list->name }} veröffentlicht.
+                    </i>
                 </div>
 
+            @endif
 
-            @endforeach
 
         </div>
 
diff --git a/content/lists/jobs.blade.php b/content/lists/jobs.blade.php
index 0cbd7aa..94fbe43 100644
--- a/content/lists/jobs.blade.php
+++ b/content/lists/jobs.blade.php
@@ -33,58 +33,75 @@
                     Werden Sie Teil unseres Teams und gestalten Sie Ihre Karriere bei {{$_legal_name}}!
                 </p>
             </div>
-            @foreach($contents as $content)
 
-                <div class="col-12 my-3">
-                    <div class="card" style="background-color: {{$_secondary_background_color}};">
-                        <div class="card-body">
-                            <div class="row">
-                                <div class="col-3 col-lg-1">
-                                    <img src="{{$favicon['180']}}" title="{{$_legal_name}}" class="border rounded img-fluid shadow-sm" alt="{{$_legal_name}}">
-                                </div>
-                                <div class="col-9 col-lg-3 mt-4">
-                                    <svg xmlns="http://www.w3.org/2000/svg" style="height:25px; fill: black;" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16">
-                                        <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"></path>
-                                        <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"></path>
-                                    </svg>
-                                    {{$_legal_name}}
-                                </div>
-                                <div class="col-12 col-lg-6">
-                                    <h5 class="card-title mt-4">
-                                        <a class="text-decoration-none" href="{{$content->path}}">
-                                            {{$content->title}}
-                                        </a>
-                                    </h5>
 
-                                    <h6 class="my-2 text-muted">
-                                        <svg style="width: 10px; margin-bottom: 6px; fill: #db4739" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"></path></svg>
-                                        {{$_legal_zip_code}} {{$_legal_city}}
-                                    </h6>
-                                </div>
-                                <div class="col-5 d-lg-none mt-2">
+            @if(count($contents) > 0)
+
+                @foreach($contents as $content)
+
+                    <div class="col-12 my-3">
+                        <div class="card" style="background-color: {{$_secondary_background_color}};">
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-3 col-lg-1">
+                                        <img src="{{$favicon['180']}}" title="{{$_legal_name}}" class="border rounded img-fluid shadow-sm" alt="{{$_legal_name}}">
+                                    </div>
+                                    <div class="col-9 col-lg-3 mt-4">
+                                        <svg xmlns="http://www.w3.org/2000/svg" style="height:25px; fill: black;" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"></path>
+                                            <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"></path>
+                                        </svg>
+                                        {{$_legal_name}}
+                                    </div>
+                                    <div class="col-12 col-lg-6">
+                                        <h5 class="card-title mt-4">
+                                            <a class="text-decoration-none" href="{{$content->path}}">
+                                                {{$content->title}}
+                                            </a>
+                                        </h5>
+
+                                        <h6 class="my-2 text-muted">
+                                            <svg style="width: 10px; margin-bottom: 6px; fill: #db4739" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"></path></svg>
+                                            {{$_legal_zip_code}} {{$_legal_city}}
+                                        </h6>
+                                    </div>
+                                    <div class="col-5 d-lg-none mt-2">
                                     <span title="{{$content->created_at}}" >
                                             <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                         {{ $content->updated_at->diffForHumans() }}
                                         </span>
-                                </div>
-                                <div class="col-7 col-lg-2 text-end ">
+                                    </div>
+                                    <div class="col-7 col-lg-2 text-end ">
 
                                         <span title="{{$content->created_at}}" class="d-none d-lg-block">
                                             <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                         {{ $content->updated_at->diffForHumans() }}
                                         </span>
-                                    <a class="btn btn-primary btn-sm mt-2" href="{{$content->path}}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : ''});">
-                                        Job ansehen
-                                        <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"></path>
-                                        </svg>
-                                    </a>
+                                        <a class="btn btn-primary btn-sm mt-2" href="{{$content->path}}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : ''});">
+                                            Job ansehen
+                                            <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"></path>
+                                            </svg>
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
+                @endforeach
+            @else
+
+                <script src="http://lumino.xps/admin-assets/libs/lottie-player.js"></script>
+                <div class="col-12 text-center" style="margin-bottom: 30vh; margin-top: 5vh;">
+                    <lottie-player src="http://lumino.xps/admin-assets/animations/no-results.json" background="transparent" speed="1" style="width: 200px; height: 200px; margin: 0 auto;" loop="" autoplay=""></lottie-player>
+
+                    <i>
+                        Derzeit keine Inhalte in {{ $list->name }} veröffentlicht.
+                    </i>
                 </div>
-            @endforeach
+
+            @endif
+
         </div>
     </div>
 
diff --git a/content/lists/leistungen.blade.php b/content/lists/leistungen.blade.php
index 794f788..6577bfc 100644
--- a/content/lists/leistungen.blade.php
+++ b/content/lists/leistungen.blade.php
@@ -16,34 +16,36 @@
                 </p>
             </div>
 
-            @foreach($contents as $content)
-                <div class="col-12 col-md-6 col-lg-4 mb-4">
-
-
-
-
-                    <a href="{{ $content->path }}" class="text-decoration-none">
-                        <div class="card h-100 shadow-lg mb-4" id="news-{{$content->id}}">
-
-                            <img src="{{ $content->image() }}" class="card-img-top">
-
-                            <div class="card-body">
-                                <h3 class="h5 mb-3">{{$content->title}} </h3>
-
-
-                                {!! Str::limit($content->kurzbeschreibung, 180) !!}
-
 
+            @if(count($contents) > 0)
 
+                @foreach($contents as $content)
+                    <div class="col-12 col-md-6 col-lg-4 mb-4">
+                        <a href="{{ $content->path }}" class="text-decoration-none">
+                            <div class="card h-100 shadow-lg mb-4" id="news-{{$content->id}}">
+                                <img src="{{ $content->image() }}" class="card-img-top">
+                                <div class="card-body">
+                                    <h3 class="h5 mb-3">{{$content->title}} </h3>
+                                    {!! Str::limit($content->kurzbeschreibung, 180) !!}
+                                </div>
                             </div>
-                        </div>
-                    </a>
+                        </a>
+                    </div>
 
+                @endforeach
+            @else
 
+                <script src="http://lumino.xps/admin-assets/libs/lottie-player.js"></script>
+                <div class="col-12 text-center" style="margin-bottom: 30vh; margin-top: 5vh;">
+                    <lottie-player src="http://lumino.xps/admin-assets/animations/no-results.json" background="transparent" speed="1" style="width: 200px; height: 200px; margin: 0 auto;" loop="" autoplay=""></lottie-player>
 
+                    <i>
+                        Derzeit keine {{ $list->name }} veröffentlicht.
+                    </i>
                 </div>
 
-            @endforeach
+            @endif
+
 
         </div>