updated gallery
This commit is contained in:
@@ -1,69 +1,105 @@
|
||||
@extends('news.layout', [
|
||||
'metaTitle' => config('news.rss_title', 'News'),
|
||||
'metaDescription' => config('news.rss_description', ''),
|
||||
'metaCanonical' => route('news.index'),
|
||||
])
|
||||
|
||||
@section('news_content')
|
||||
<div class="news-index">
|
||||
<div class="container py-5">
|
||||
@php
|
||||
$headerBreadcrumbs = collect([
|
||||
(object) ['name' => 'Community', 'url' => route('community.activity')],
|
||||
(object) ['name' => 'Announcements', 'url' => route('news.index')],
|
||||
]);
|
||||
@endphp
|
||||
|
||||
{{-- Featured article --}}
|
||||
@if($featured)
|
||||
<section class="mb-5">
|
||||
<a href="{{ route('news.show', $featured->slug) }}" class="text-decoration-none">
|
||||
<div class="card border-0 shadow-sm overflow-hidden news-featured">
|
||||
@if($featured->cover_url)
|
||||
<img src="{{ $featured->cover_url }}" class="card-img" alt="{{ $featured->title }}"
|
||||
style="height:400px;object-fit:cover;">
|
||||
@endif
|
||||
<div class="card-img-overlay d-flex align-items-end p-4"
|
||||
style="background:linear-gradient(transparent,rgba(0,0,0,0.75))">
|
||||
<div class="text-white">
|
||||
@if($featured->category)
|
||||
<span class="badge badge-primary mb-2">{{ $featured->category->name }}</span>
|
||||
<x-nova-page-header
|
||||
section="Community"
|
||||
title="News"
|
||||
icon="fa-newspaper"
|
||||
:breadcrumbs="$headerBreadcrumbs"
|
||||
:description="config('news.rss_description', 'Latest news, feature rollouts, and team updates from Skinbase.')"
|
||||
headerClass="pb-6"
|
||||
>
|
||||
<x-slot name="actions">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm">
|
||||
@if(($articles->total() ?? 0) > 0)
|
||||
<span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/65">
|
||||
<i class="fa-solid fa-file-lines text-xs text-sky-300"></i>
|
||||
{{ number_format($articles->total()) }} articles
|
||||
</span>
|
||||
@endif
|
||||
<a href="{{ route('news.rss') }}" class="inline-flex items-center gap-2 rounded-lg border border-amber-400/20 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-200 transition hover:bg-amber-500/15">
|
||||
<i class="fa-solid fa-rss text-xs"></i>
|
||||
RSS feed
|
||||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-nova-page-header>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
|
||||
@if($featured)
|
||||
<section class="mb-8">
|
||||
<a href="{{ route('news.show', $featured->slug) }}" class="group block overflow-hidden rounded-[32px] border border-white/[0.08] bg-white/[0.03] shadow-[0_24px_60px_rgba(0,0,0,0.24)] transition hover:border-white/[0.12]">
|
||||
<div class="grid lg:grid-cols-[1.25fr_0.95fr]">
|
||||
<div class="relative min-h-[280px] overflow-hidden bg-black/20">
|
||||
@if($featured->cover_url)
|
||||
<img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
|
||||
@else
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98))]"></div>
|
||||
@endif
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-[#020611] via-[#02061166] to-transparent"></div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between gap-5 p-6 lg:p-8">
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/45">
|
||||
<span class="text-sky-300">Featured story</span>
|
||||
@if($featured->category)
|
||||
<span class="rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] tracking-[0.12em] text-sky-200">{{ $featured->category->name }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<h2 class="mt-4 text-3xl font-bold leading-tight text-white/95">{{ $featured->title }}</h2>
|
||||
@if($featured->excerpt)
|
||||
<p class="mt-4 text-sm leading-7 text-white/60">{{ Str::limit(strip_tags((string) $featured->excerpt), 220) }}</p>
|
||||
@endif
|
||||
<h2 class="font-weight-bold">{{ $featured->title }}</h2>
|
||||
<p class="mb-1">{{ Str::limit(strip_tags((string)$featured->excerpt), 180) }}</p>
|
||||
<small>
|
||||
{{ $featured->author?->name }} ·
|
||||
{{ $featured->published_at?->format('d M Y') }} ·
|
||||
{{ $featured->reading_time }} min read
|
||||
</small>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
|
||||
<span>{{ $featured->author?->name ?? 'Skinbase' }}</span>
|
||||
<span>{{ $featured->published_at?->format('d M Y') }}</span>
|
||||
<span>{{ $featured->reading_time }} min read</span>
|
||||
<span>{{ number_format((int) $featured->views) }} views</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<div class="row">
|
||||
{{-- Articles grid --}}
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
@forelse($articles as $article)
|
||||
<div class="col-sm-6 mb-4">
|
||||
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<section>
|
||||
@if($articles->isEmpty())
|
||||
<div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">
|
||||
No announcements have been published yet.
|
||||
</div>
|
||||
@else
|
||||
<div class="grid gap-5 md:grid-cols-2">
|
||||
@foreach($articles as $article)
|
||||
@include('news._article_card', ['article' => $article])
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center text-muted py-5">No news articles published yet.</div>
|
||||
@endforelse
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="mt-8 flex justify-center">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Sidebar --}}
|
||||
<div class="col-lg-4">
|
||||
@include('news._sidebar', [
|
||||
'categories' => $categories,
|
||||
'trending' => $trending,
|
||||
'tags' => $tags,
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<aside class="space-y-4">
|
||||
@include('news._sidebar', [
|
||||
'categories' => $categories,
|
||||
'trending' => $trending,
|
||||
'tags' => $tags,
|
||||
])
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user