63 lines
2.8 KiB
PHP
63 lines
2.8 KiB
PHP
@extends('layouts.nova.content-layout')
|
|
|
|
@php
|
|
$hero_title = 'Creator Stories';
|
|
$hero_description = 'Articles, tutorials, interviews, and project breakdowns from the Skinbase creator community.';
|
|
@endphp
|
|
|
|
@section('page-content')
|
|
<div class="space-y-10">
|
|
@if($featured)
|
|
<section class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
|
|
<a href="{{ route('stories.show', $featured->slug) }}" class="grid gap-0 lg:grid-cols-2">
|
|
<div class="aspect-video overflow-hidden bg-gray-900">
|
|
@if($featured->cover_url)
|
|
<img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" />
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-col justify-center space-y-4 p-6">
|
|
<span class="inline-flex w-fit rounded-full border border-sky-400/30 bg-sky-500/10 px-3 py-1 text-xs font-semibold text-sky-300">Featured Story</span>
|
|
<h2 class="text-2xl font-bold text-white">{{ $featured->title }}</h2>
|
|
<p class="text-gray-300">{{ $featured->excerpt }}</p>
|
|
<p class="text-sm text-gray-400">by @{{ $featured->creator?->username ?? 'unknown' }} • {{ $featured->reading_time }} min read • {{ number_format((int) $featured->views) }} views</p>
|
|
</div>
|
|
</a>
|
|
</section>
|
|
@endif
|
|
|
|
<section>
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<h3 class="text-2xl font-semibold tracking-tight text-white">Trending Stories</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
@foreach($trendingStories as $story)
|
|
<x-story-card :story="$story" />
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="mb-5 text-2xl font-semibold tracking-tight text-white">Categories</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach($categories as $category)
|
|
<a href="{{ route('stories.category', $category['slug']) }}" class="rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 transition-colors hover:border-sky-500/40 hover:text-white">
|
|
{{ $category['name'] }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="mb-5 text-2xl font-semibold tracking-tight text-white">Latest Stories</h3>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
@foreach($latestStories as $story)
|
|
<x-story-card :story="$story" />
|
|
@endforeach
|
|
</div>
|
|
<div class="mt-8">
|
|
{{ $latestStories->links() }}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|