60 lines
3.5 KiB
PHP
60 lines
3.5 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@section('meta-description', $meta['description'] ?? '')
|
|
|
|
@push('head')
|
|
<title>{{ $meta['title'] ?? 'Nova Card Lineage - Skinbase Nova' }}</title>
|
|
<link rel="canonical" href="{{ $meta['canonical'] ?? route('cards.lineage', ['slug' => $card['slug'], 'id' => $card['id']]) }}" />
|
|
@if(!empty($meta['robots']))
|
|
<meta name="robots" content="{{ $meta['robots'] }}" />
|
|
@endif
|
|
@endpush
|
|
|
|
@section('content')
|
|
<section class="px-6 pt-8 md:px-10">
|
|
<div class="rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)] md:p-8">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/75">Remix lineage</p>
|
|
<h1 class="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white md:text-5xl">{{ $card['title'] }}</h1>
|
|
<p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300 md:text-base">Trace this card back to its root, then browse the rest of the family that grew from the same original.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6 pt-8 md:px-10">
|
|
<div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Trail</p>
|
|
<div class="mt-4 flex flex-wrap items-center gap-3">
|
|
@foreach($trail as $index => $item)
|
|
<a href="{{ $item['public_url'] }}" class="rounded-2xl border {{ $item['id'] === $card['id'] ? 'border-sky-300/35 bg-sky-400/10 text-sky-100' : 'border-white/10 bg-white/[0.03] text-white' }} px-4 py-3 text-sm font-semibold transition hover:bg-white/[0.05]">{{ $item['title'] }}</a>
|
|
@if($index < count($trail) - 1)
|
|
<span class="text-slate-500"><i class="fa-solid fa-arrow-right"></i></span>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6 pt-8 md:px-10">
|
|
<div class="grid gap-6 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
|
|
<div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Root card</p>
|
|
<div class="mt-4">
|
|
@include('cards.partials.tile', ['card' => $rootCard])
|
|
</div>
|
|
</div>
|
|
<div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Family variants</p>
|
|
<h2 class="mt-1 text-2xl font-semibold text-white">Cards in this remix branch</h2>
|
|
</div>
|
|
<a href="{{ $card['public_url'] }}" class="rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Back to card</a>
|
|
</div>
|
|
<div class="mt-4 grid gap-4 sm:grid-cols-2">
|
|
@foreach($familyCards as $familyCard)
|
|
@include('cards.partials.tile', ['card' => $familyCard])
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection |