93 lines
4.1 KiB
PHP
93 lines
4.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'LoreKeepers — Track Every Game You Play')
|
|
|
|
@section('content')
|
|
|
|
{{-- Hero --}}
|
|
<section class="bg-gradient-to-b from-[#1a1025] to-[#0f0f13] py-20 px-4">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h1 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-4">
|
|
Track Every Game<br>
|
|
<span class="text-purple-400">You Play</span>
|
|
</h1>
|
|
<p class="text-lg text-slate-400 mb-8">
|
|
Rate games, build your library, discover what to play next.
|
|
</p>
|
|
|
|
<form action="{{ route('games.search') }}" method="GET" class="max-w-xl mx-auto">
|
|
<div class="relative">
|
|
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
|
|
</svg>
|
|
<input type="text" name="q" placeholder="Search for a game…"
|
|
class="w-full bg-[#16161d] border border-white/10 rounded-xl pl-12 pr-4 py-4 text-base text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 transition">
|
|
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
@guest
|
|
<div class="mt-8 flex items-center justify-center gap-4">
|
|
<a href="{{ route('register') }}" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
|
|
Create Free Account
|
|
</a>
|
|
<a href="{{ route('games.index') }}" class="px-6 py-3 border border-white/10 hover:border-white/20 text-slate-300 font-semibold rounded-lg transition-colors">
|
|
Browse Games
|
|
</a>
|
|
</div>
|
|
@endguest
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Top Rated --}}
|
|
@if($topRated->isNotEmpty())
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-white">Top Rated</h2>
|
|
<a href="{{ route('games.top-rated') }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
|
See all →
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
@foreach($topRated as $game)
|
|
<x-game-card :game="$game" />
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- New Releases --}}
|
|
@if($newReleases->isNotEmpty())
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 border-t border-white/5">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-white">New Releases</h2>
|
|
<a href="{{ route('games.new-releases') }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
|
See all →
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
@foreach($newReleases as $game)
|
|
<x-game-card :game="$game" />
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- Empty state --}}
|
|
@if($topRated->isEmpty() && $newReleases->isEmpty())
|
|
<section class="max-w-3xl mx-auto px-4 py-24 text-center">
|
|
<div class="text-slate-500 mb-4">
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
<p class="text-lg text-slate-400">No games in the database yet.</p>
|
|
<p class="text-sm mt-2">Run <code class="bg-[#16161d] px-2 py-1 rounded text-purple-400">php artisan games:import</code> to import games from IGDB.</p>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
@endsection
|