55 lines
2.3 KiB
PHP
55 lines
2.3 KiB
PHP
{{--
|
|
Blog index — uses ContentLayout.
|
|
--}}
|
|
@extends('layouts.nova.content-layout')
|
|
|
|
@php
|
|
$hero_title = 'Blog';
|
|
$hero_description = 'News, tutorials and community stories from the Skinbase team.';
|
|
@endphp
|
|
|
|
@section('page-content')
|
|
|
|
@if($posts->isNotEmpty())
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($posts as $post)
|
|
<a href="{{ $post->url }}"
|
|
class="group block rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.05] transition-colors">
|
|
@if($post->featured_image)
|
|
<div class="aspect-video bg-nova-800 overflow-hidden">
|
|
<img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
|
|
</div>
|
|
@else
|
|
<div class="aspect-video bg-gradient-to-br from-sky-900/30 to-purple-900/30 flex items-center justify-center">
|
|
<i class="fa-solid fa-newspaper text-3xl text-white/20"></i>
|
|
</div>
|
|
@endif
|
|
<div class="p-5">
|
|
<h2 class="text-lg font-semibold text-white group-hover:text-sky-300 transition-colors line-clamp-2">
|
|
{{ $post->title }}
|
|
</h2>
|
|
@if($post->excerpt)
|
|
<p class="mt-2 text-sm text-white/50 line-clamp-3">{{ $post->excerpt }}</p>
|
|
@endif
|
|
@if($post->published_at)
|
|
<time class="mt-3 block text-xs text-white/30" datetime="{{ $post->published_at->toIso8601String() }}">
|
|
{{ $post->published_at->format('M j, Y') }}
|
|
</time>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-10 flex justify-center">
|
|
{{ $posts->withQueryString()->links() }}
|
|
</div>
|
|
@else
|
|
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
|
|
<i class="fa-solid fa-newspaper text-4xl text-white/20 mb-4"></i>
|
|
<p class="text-white/40 text-sm">No blog posts published yet. Check back soon!</p>
|
|
</div>
|
|
@endif
|
|
|
|
@endsection
|