167 lines
9.2 KiB
PHP
167 lines
9.2 KiB
PHP
{{--
|
|
ExploreLayout — hero header + mode tabs + filters + paginated grid.
|
|
Used by /explore/*, /tag/:slug, and gallery pages.
|
|
|
|
Expected variables:
|
|
$hero_title, $hero_description, $breadcrumbs (collection),
|
|
$current_sort, $sort_options, $artworks,
|
|
$contentTypes (collection, optional), $activeType (string, optional)
|
|
$page_title, $page_meta_description, $page_canonical, $page_robots
|
|
--}}
|
|
@extends('layouts.nova')
|
|
|
|
@php
|
|
use App\Banner;
|
|
|
|
$seoPage = max(1, (int) request()->query('page', 1));
|
|
$seoBase = url()->current();
|
|
$seoQ = request()->query(); unset($seoQ['page']);
|
|
$seoUrl = fn(int $p) => $seoBase . ($p > 1
|
|
? '?' . http_build_query(array_merge($seoQ, ['page' => $p]))
|
|
: (count($seoQ) ? '?' . http_build_query($seoQ) : ''));
|
|
$seoPrev = $seoPage > 1 ? $seoUrl($seoPage - 1) : null;
|
|
$seoNext = (isset($artworks) && method_exists($artworks, 'nextPageUrl'))
|
|
? $artworks->nextPageUrl() : null;
|
|
@endphp
|
|
|
|
@push('head')
|
|
<link rel="canonical" href="{{ $page_canonical ?? $seoUrl($seoPage) }}">
|
|
@if($seoPrev)<link rel="prev" href="{{ $seoPrev }}">@endif
|
|
@if($seoNext)<link rel="next" href="{{ $seoNext }}">@endif
|
|
<meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="{{ $page_canonical ?? $seoUrl(1) }}" />
|
|
<meta property="og:title" content="{{ $page_title ?? ($hero_title ?? 'Skinbase') }}" />
|
|
<meta property="og:description" content="{{ $page_meta_description ?? '' }}" />
|
|
<meta property="og:site_name" content="Skinbase" />
|
|
|
|
{{-- Breadcrumb structured data --}}
|
|
@if(isset($breadcrumbs) && $breadcrumbs->isNotEmpty())
|
|
<script type="application/ld+json">
|
|
{!! json_encode([
|
|
'@context' => 'https://schema.org',
|
|
'@type' => 'BreadcrumbList',
|
|
'itemListElement' => $breadcrumbs->values()->map(fn ($crumb, $i) => [
|
|
'@type' => 'ListItem',
|
|
'position' => $i + 1,
|
|
'name' => $crumb->name,
|
|
'item' => url($crumb->url),
|
|
])->all(),
|
|
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
|
|
</script>
|
|
@endif
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-fluid legacy-page">
|
|
@php Banner::ShowResponsiveAd(); @endphp
|
|
|
|
<div class="pt-0">
|
|
<div class="mx-auto w-full">
|
|
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
|
<main class="w-full">
|
|
|
|
{{-- ══ HERO HEADER ══ --}}
|
|
<div class="relative overflow-hidden nb-hero-radial">
|
|
<div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
|
|
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>
|
|
|
|
<div class="relative px-6 py-10 md:px-10 md:py-14">
|
|
|
|
{{-- Breadcrumbs --}}
|
|
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
|
|
|
|
{{-- Title panel --}}
|
|
<div class="mt-4 py-5">
|
|
<h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white/95 leading-tight">
|
|
{{ $hero_title ?? 'Explore' }}
|
|
</h1>
|
|
@if(!empty($hero_description))
|
|
<p class="mt-2 text-sm leading-6 text-neutral-400 max-w-xl">{!! $hero_description !!}</p>
|
|
@endif
|
|
|
|
@if(is_object($artworks) && method_exists($artworks, 'total') && $artworks->total() > 0)
|
|
<div class="mt-3 flex items-center gap-1.5 text-xs text-neutral-500">
|
|
<svg class="h-3.5 w-3.5 text-accent/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span>{{ number_format($artworks->total()) }} artworks</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Content type chips (Explore only) --}}
|
|
@if(isset($contentTypes) && $contentTypes->isNotEmpty())
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
@foreach($contentTypes as $ct)
|
|
<a href="{{ $ct->url }}"
|
|
class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
|
|
{{ ($activeType ?? '') === $ct->slug
|
|
? 'bg-sky-600 text-white'
|
|
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}">
|
|
{{ $ct->name }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
<div class="absolute left-0 right-0 bottom-0 h-16 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
{{-- ══ RANKING TABS ══ --}}
|
|
@php
|
|
$rankingTabs = $sort_options ?? [
|
|
['value' => 'trending', 'label' => '🔥 Trending'],
|
|
['value' => 'new-hot', 'label' => '🚀 New & Hot'],
|
|
['value' => 'best', 'label' => '⭐ Best'],
|
|
['value' => 'latest', 'label' => '🕐 Latest'],
|
|
];
|
|
$activeTab = $current_sort ?? 'trending';
|
|
@endphp
|
|
|
|
<div class="sticky top-0 z-30 border-b border-white/10 bg-nova-900/90 backdrop-blur-md" id="gallery-ranking-tabs">
|
|
<div class="px-6 md:px-10">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<nav class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist">
|
|
@foreach($rankingTabs as $tab)
|
|
@php $isActive = $activeTab === $tab['value']; @endphp
|
|
<button
|
|
role="tab"
|
|
aria-selected="{{ $isActive ? 'true' : 'false' }}"
|
|
data-rank-tab="{{ $tab['value'] }}"
|
|
class="gallery-rank-tab relative flex items-center gap-1.5 whitespace-nowrap px-5 py-4 text-sm font-medium transition-colors focus-visible:outline-none {{ $isActive ? 'text-white' : 'text-neutral-400 hover:text-white' }}"
|
|
>
|
|
{{ $tab['label'] }}
|
|
<span class="nb-tab-indicator absolute bottom-0 left-0 right-0 h-0.5 {{ $isActive ? 'bg-accent scale-x-100' : 'bg-transparent scale-x-0' }} transition-transform duration-300 origin-left rounded-full"></span>
|
|
</button>
|
|
@endforeach
|
|
</nav>
|
|
|
|
<button id="gallery-filter-panel-toggle" type="button"
|
|
class="hidden md:flex items-center gap-2 shrink-0 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white transition-colors"
|
|
aria-haspopup="dialog" aria-expanded="false">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" /></svg>
|
|
Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══ ARTWORK GRID ══ --}}
|
|
@yield('explore-grid')
|
|
|
|
{{-- ══ PAGINATION ══ --}}
|
|
@if(is_object($artworks) && method_exists($artworks, 'links'))
|
|
<div class="px-6 md:px-10 py-8 flex justify-center">
|
|
{{ $artworks->withQueryString()->links() }}
|
|
</div>
|
|
@endif
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|