Files
SkinbaseNova/resources/views/web/home.blade.php
2026-03-28 19:15:39 +01:00

80 lines
3.2 KiB
PHP

@extends('layouts.nova')
@section('meta-description', $meta['description'])
@section('meta-keywords', $meta['keywords'])
@push('head')
<title>{{ $meta['title'] }}</title>
<link rel="canonical" href="{{ $meta['canonical'] }}">
{{-- Open Graph --}}
<meta property="og:type" content="website">
<meta property="og:site_name" content="Skinbase">
<meta property="og:title" content="{{ $meta['title'] }}">
<meta property="og:description" content="{{ $meta['description'] }}">
<meta property="og:url" content="{{ $meta['canonical'] }}">
@if(!empty($meta['og_image']))
<meta property="og:image" content="{{ $meta['og_image'] }}">
<meta property="og:image:type" content="image/webp">
@endif
{{-- Twitter --}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ $meta['title'] }}">
<meta name="twitter:description" content="{{ $meta['description'] }}">
@if(!empty($meta['og_image']))
<meta name="twitter:image" content="{{ $meta['og_image'] }}">
@endif
{{-- JSON-LD WebSite schema --}}
@php
$websiteSchema = [
'@context' => 'https://schema.org',
'@type' => 'WebSite',
'name' => 'Skinbase',
'url' => url('/'),
'description' => $meta['description'],
'potentialAction' => [
'@type' => 'SearchAction',
'target' => url('/search') . '?q={search_term_string}',
'query-input' => 'required name=search_term_string',
],
];
@endphp
<script type="application/ld+json">{!! json_encode($websiteSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
{{-- Preload hero image for faster LCP --}}
@if(!empty($props['hero']['thumb_lg']))
<link rel="preload" as="image" href="{{ $props['hero']['thumb_lg'] }}">
@elseif(!empty($props['hero']['thumb']))
<link rel="preload" as="image" href="{{ $props['hero']['thumb'] }}">
@endif
@endpush
@section('main-class', '')
@section('content')
@include('web.home.hero', ['artwork' => $props['hero'] ?? null])
{{-- Inline props for the React component (avoids data-attribute length limits) --}}
<script id="homepage-props" type="application/json">
{!! json_encode($props, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
</script>
<div id="homepage-root" class="min-h-[40vh]">
{{-- Loading skeleton (replaced by React on hydration) --}}
<div class="space-y-10 px-4 pt-10 sm:px-6 lg:px-8">
<div class="h-14 rounded-2xl bg-nova-800/70"></div>
<div class="grid gap-4 lg:grid-cols-4">
<div class="aspect-video rounded-2xl bg-nova-800/70"></div>
<div class="aspect-video rounded-2xl bg-nova-800/70"></div>
<div class="aspect-video rounded-2xl bg-nova-800/70"></div>
<div class="aspect-video rounded-2xl bg-nova-800/70"></div>
</div>
</div>
</div>
@vite(['resources/js/Pages/Home/HomePage.jsx'])
@endsection