Update categories design

resources/views/home/partials/categories.blade.php

@@ -1,61 +1,83 @@
-<p class="leading-normal font-bold text-lg text-neutral-800 dark:text-white">
+<p class="text-lg font-bold leading-normal text-neutral-800 dark:text-white">
     {{ __('home.categories') }}
 </p>
 
 @php
-    $categories = [
+    $categories = collect([
-        'Uncensored' => 'uncensored',
+        ['name' => 'Uncensored', 'slug' => 'uncensored'],
-        'Milf' => 'milf',
+        ['name' => 'Milf', 'slug' => 'milf'],
-        'Maid' => 'maid',
+        ['name' => 'Maid', 'slug' => 'maid'],
-        'School Girl' => 'school-girl',
+        ['name' => 'School Girl', 'slug' => 'school-girl'],
-        'Succubus' => 'succubus',
+        ['name' => 'Succubus', 'slug' => 'succubus'],
-        'Tentacle' => 'tentacle',
+        ['name' => 'Tentacle', 'slug' => 'tentacle'],
-        'Big Boobs' => 'big-boobs',
+        ['name' => 'Big Boobs', 'slug' => 'big-boobs'],
-        'BDSM' => 'bdsm',
+        ['name' => 'BDSM', 'slug' => 'bdsm'],
-        'Elf' => 'elf',
+        ['name' => 'Elf', 'slug' => 'elf'],
-        '4k 48fps' => '4k-48fps',
+        ['name' => '4K 48FPS', 'slug' => '4k-48fps'],
-    ];
+    ]);
 @endphp
 
-<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5 gap-2">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
-    @foreach ($categories as $name => $slug)
+    @foreach ($categories as $category)
         @php
-            $cacheKey = 'category_' . $slug;
+            $episodes = cache()->remember(
-
+                "category_{$category['slug']}",
-            $collection = \cache()->remember(
+                now()->addMinutes(15),
-                $cacheKey,
+                fn () => \App\Models\Episode::query()
-                900,
+                    ->withAllTags([$category['slug']])
-                fn() => \App\Models\Episode::withAllTags([$slug])
                     ->inRandomOrder()
                     ->limit(3)
-                    ->get(),
+                    ->get()
             );
 
-            $count = $collection->count();
+            [$left, $center, $right] = [
-
+                $episodes->get(0),
+                $episodes->get(1),
+                $episodes->get(2),
+            ];
         @endphp
-        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $slug]) }}"
+
-            class="relative mx-auto w-96 sm:w-full h-56 bg-white dark:bg-neutral-800 text-black dark:text-white rounded-lg overflow-hidden shadow-lg mt-4 transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
+        <a
-            <h2 class="text-lg font-semibold text-center pt-2">{{ $name }}</h2>
+            href="{{ route('hentai.search', [
-            <div class="relative w-full h-full flex justify-center">
+                'order' => 'recently-uploaded',
-                <!-- Left Image -->
+                'tags[0]' => $category['slug'],
-                @if ($count > 0)
+            ]) }}"
-                    <img src="{{ $collection->first()->cover_url }}"
+            class="group relative overflow-hidden rounded-2xl bg-white dark:bg-black shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-md left-4 top-4 rotate-[-15deg] z-0">
+        >
+            <div class="p-4">
+                <h2 class="text-center text-lg font-semibold text-neutral-900 dark:text-white">
+                    {{ $category['name'] }}
+                </h2>
+
+                <div class="relative mt-4 flex h-52 items-center justify-center">
+                    @if ($left)
+                        <img
+                            src="{{ $left->cover_url }}"
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute left-2 top-4 h-44 w-32 rotate-[-12deg] rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:rotate-[-16deg]"
+                        >
                     @endif
 
-                <!-- Center Image -->
+                    @if ($center)
-                @if ($count > 1)
+                        <img
-                    <img src="{{ $collection->skip(1)->first()->cover_url }}"
+                            src="{{ $center->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg top-4 z-10">
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute top-2 z-10 h-44 w-32 rounded-xl object-cover shadow-2xl transition-transform duration-300 group-hover:scale-105"
+                        >
                     @endif
 
-                <!-- Right Image -->
+                    @if ($right)
-                @if ($count > 2)
+                        <img
-                    <img src="{{ $collection->skip(2)->first()->cover_url }}"
+                            src="{{ $right->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg right-4 top-14 z-20 rotate-[15deg]">
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute right-2 top-8 z-20 h-44 w-32 rotate-[12deg] rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:rotate-[16deg]"
+                        >
                     @endif
                 </div>
+            </div>
         </a>
     @endforeach
 </div>