74 lines
4.2 KiB
PHP
74 lines
4.2 KiB
PHP
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-hero mb-6">
|
|
{!! $content['title'] !!}
|
|
</h2>
|
|
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
|
{{ $content['subtitle'] }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
@foreach($this->posts as $post)
|
|
<article class="group">
|
|
<div class="card-elevated rounded-3xl overflow-hidden h-full transition-all duration-300">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="relative md:w-3/4 aspect-[2/1] md:aspect-[2/1]">
|
|
<img
|
|
src="{{ asset('img/assets/' . $post['image']) }}"
|
|
alt="{{ $post['title'] }}"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
|
|
<div class="lg:w-2/3 p-6 lg:p-8 flex flex-col justify-between">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<time>{{ $post['date'] }}</time>
|
|
<span class="w-1 h-1 bg-muted-foreground rounded-full"></span>
|
|
<span>{{ $post['readTime'] }}</span>
|
|
</div>
|
|
|
|
<h3 class="text-xl lg:text-2xl font-semibold text-foreground leading-tight group-hover:text-secondary transition-colors duration-200">
|
|
<a href="/magazin/{{ $post['id'] }}" class="stretched-link">
|
|
{!! $post['title'] !!}
|
|
</a>
|
|
</h3>
|
|
|
|
<p class="text-muted-foreground leading-relaxed text-base lg:text-lg">
|
|
{{ $post['excerpt'] }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mt-6">
|
|
<div class="flex items-center text-secondary font-medium group-hover:text-secondary-dark transition-colors duration-200">
|
|
<a href="/magazin/{{ $post['id'] }}" class="text-sm">{{ $content['read_more'] }}</a>
|
|
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center group-hover:bg-secondary transition-colors duration-200">
|
|
<a href="/magazin/{{ $post['id'] }}">
|
|
<svg class="w-4 h-4 text-white transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="text-center mt-16">
|
|
<a href="/magazin?page=2" class="btn-primary-accent">
|
|
{{ $content['load_more'] }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|