49 lines
3.9 KiB
PHP
49 lines
3.9 KiB
PHP
<section class="max-w-[1400px] mx-auto px-6 pt-8">
|
|
<div class="rounded-3xl bg-gradient-to-br from-blue-50 via-white to-purple-50 ring-1 ring-gray-100 p-6 sm:p-8 grid lg:grid-cols-3 gap-8 items-center">
|
|
<div class="lg:col-span-2 grid sm:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h1 class="text-4xl font-extrabold text-gray-900">My Critters</h1>
|
|
<p class="mt-2 text-lg text-gray-700">
|
|
<?php echo (int) $totalCrittersCount; ?> unique critter<?php echo $totalCrittersCount === 1 ? '' : 's'; ?> and counting!
|
|
</p>
|
|
<p class="mt-2 text-gray-500">Create, explore and manage your collection of AI-generated critters.</p>
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="assets/recently3.webp" alt="One of your critters" class="w-full aspect-square object-cover rounded-2xl shadow-lg ring-1 ring-gray-100 transition-transform duration-300 group-hover:scale-[1.02]">
|
|
<div class="absolute -bottom-4 -left-4 hidden sm:flex items-center gap-2 rounded-xl bg-white px-3 py-2 shadow-md ring-1 ring-gray-100 text-sm max-w-[85%]">
|
|
<i data-lucide="heart" class="h-4 w-4 shrink-0 text-pink-500"></i>
|
|
<span class="text-gray-700 font-medium">Same critters. Bigger adventures!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="rounded-xl bg-white ring-1 ring-gray-100 shadow-sm p-4 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
|
<div class="mx-auto flex h-9 w-9 items-center justify-center rounded-full bg-blue-100 text-blue-600 mb-2">
|
|
<i data-lucide="paw-print" class="h-4 w-4"></i>
|
|
</div>
|
|
<p class="text-xl font-bold text-gray-900"><?php echo (int) $totalCrittersCount; ?></p>
|
|
<p class="text-xs text-gray-500">Total Critters</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white ring-1 ring-gray-100 shadow-sm p-4 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
|
<div class="mx-auto flex h-9 w-9 items-center justify-center rounded-full bg-pink-100 text-pink-600 mb-2">
|
|
<i data-lucide="heart" class="h-4 w-4"></i>
|
|
</div>
|
|
<p class="text-xl font-bold text-gray-900"><?php echo (int) $favoritesCount; ?></p>
|
|
<p class="text-xs text-gray-500">Favourites</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white ring-1 ring-gray-100 shadow-sm p-4 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
|
<div class="mx-auto flex h-9 w-9 items-center justify-center rounded-full bg-green-100 text-green-600 mb-2">
|
|
<i data-lucide="archive" class="h-4 w-4"></i>
|
|
</div>
|
|
<p class="text-xl font-bold text-gray-900"><?php echo (int) $archivedCount; ?></p>
|
|
<p class="text-xs text-gray-500">Archived</p>
|
|
</div>
|
|
</div>
|
|
<a href="create-critter.php" class="mt-4 flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold py-3 shadow-sm transition-all duration-200 hover:from-purple-700 hover:to-pink-600 hover:shadow-md active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-2">
|
|
<i data-lucide="plus" class="h-4 w-4"></i> Create a Critter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|