55 lines
3.2 KiB
PHP
55 lines
3.2 KiB
PHP
@extends('layouts.nova.content-layout')
|
|
|
|
@php
|
|
$hero_title = 'Skinbase Web Stories';
|
|
$hero_description = 'Explore visual stories from Skinbase Worlds, creator features, seasonal collections, and digital art highlights.';
|
|
@endphp
|
|
|
|
@section('page-content')
|
|
@if($stories->count() > 0)
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
|
|
@foreach($stories as $story)
|
|
<a href="{{ route('web-stories.show', ['slug' => $story->slug]) }}" class="group overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.03] transition hover:bg-white/[0.06]">
|
|
<div class="aspect-[3/4] overflow-hidden bg-black/30">
|
|
@if($story->posterPortraitUrl())
|
|
<img src="{{ $story->posterPortraitUrl() }}" alt="{{ $story->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy">
|
|
@else
|
|
<div class="flex h-full items-center justify-center text-white/20">
|
|
<i class="fa-solid fa-book-open-reader text-5xl"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-300/80">Web Story</div>
|
|
<h2 class="mt-3 line-clamp-2 text-xl font-semibold tracking-[-0.03em] text-white">{{ $story->title }}</h2>
|
|
@if($story->excerpt)
|
|
<p class="mt-3 line-clamp-3 text-sm leading-6 text-slate-300">{{ $story->excerpt }}</p>
|
|
@endif
|
|
<div class="mt-4 flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-slate-400">
|
|
@if($story->world)
|
|
<span class="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1">{{ $story->world->title }}</span>
|
|
@endif
|
|
@if($story->published_at)
|
|
<time datetime="{{ $story->published_at->toIso8601String() }}">{{ $story->published_at->format('M j, Y') }}</time>
|
|
@endif
|
|
</div>
|
|
<div class="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-sky-300 transition group-hover:text-sky-200">
|
|
View Story
|
|
<i class="fa-solid fa-arrow-right text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-10 flex justify-center">
|
|
{{ $stories->links() }}
|
|
</div>
|
|
@else
|
|
<div class="rounded-[28px] border border-white/10 bg-white/[0.03] px-8 py-14 text-center">
|
|
<div class="text-white/20"><i class="fa-solid fa-book-open-reader text-5xl"></i></div>
|
|
<h2 class="mt-4 text-xl font-semibold text-white">No Web Stories published yet</h2>
|
|
<p class="mt-3 text-sm leading-6 text-slate-300">Published Skinbase Web Stories will appear here once they are ready.</p>
|
|
</div>
|
|
@endif
|
|
@endsection |