From b7b34b503cb2f3853d11f5ee276dd92eed472675 Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Fri, 22 May 2026 22:43:57 +0200
Subject: [PATCH] Update categories design

---
 .../views/home/partials/categories.blade.php  | 110 +++++++++++-------
 1 file changed, 66 insertions(+), 44 deletions(-)

diff --git a/resources/views/home/partials/categories.blade.php b/resources/views/home/partials/categories.blade.php
index 229e38b..80cf3c1 100644
--- a/resources/views/home/partials/categories.blade.php
+++ b/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 = [
-        'Uncensored' => 'uncensored',
-        'Milf' => 'milf',
-        'Maid' => 'maid',
-        'School Girl' => 'school-girl',
-        'Succubus' => 'succubus',
-        'Tentacle' => 'tentacle',
-        'Big Boobs' => 'big-boobs',
-        'BDSM' => 'bdsm',
-        'Elf' => 'elf',
-        '4k 48fps' => '4k-48fps',
-    ];
+    $categories = collect([
+        ['name' => 'Uncensored', 'slug' => 'uncensored'],
+        ['name' => 'Milf', 'slug' => 'milf'],
+        ['name' => 'Maid', 'slug' => 'maid'],
+        ['name' => 'School Girl', 'slug' => 'school-girl'],
+        ['name' => 'Succubus', 'slug' => 'succubus'],
+        ['name' => 'Tentacle', 'slug' => 'tentacle'],
+        ['name' => 'Big Boobs', 'slug' => 'big-boobs'],
+        ['name' => 'BDSM', 'slug' => 'bdsm'],
+        ['name' => 'Elf', 'slug' => 'elf'],
+        ['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">
-    @foreach ($categories as $name => $slug)
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
+    @foreach ($categories as $category)
         @php
-            $cacheKey = 'category_' . $slug;
-
-            $collection = \cache()->remember(
-                $cacheKey,
-                900,
-                fn() => \App\Models\Episode::withAllTags([$slug])
+            $episodes = cache()->remember(
+                "category_{$category['slug']}",
+                now()->addMinutes(15),
+                fn () => \App\Models\Episode::query()
+                    ->withAllTags([$category['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">
-            <h2 class="text-lg font-semibold text-center pt-2">{{ $name }}</h2>
-            <div class="relative w-full h-full flex justify-center">
-                <!-- Left Image -->
-                @if ($count > 0)
-                    <img src="{{ $collection->first()->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-md left-4 top-4 rotate-[-15deg] z-0">
-                @endif
 
-                <!-- Center Image -->
-                @if ($count > 1)
-                    <img src="{{ $collection->skip(1)->first()->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg top-4 z-10">
-                @endif
+        <a
+            href="{{ route('hentai.search', [
+                'order' => 'recently-uploaded',
+                'tags[0]' => $category['slug'],
+            ]) }}"
+            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"
+        >
+            <div class="p-4">
+                <h2 class="text-center text-lg font-semibold text-neutral-900 dark:text-white">
+                    {{ $category['name'] }}
+                </h2>
 
-                <!-- Right Image -->
-                @if ($count > 2)
-                    <img src="{{ $collection->skip(2)->first()->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg right-4 top-14 z-20 rotate-[15deg]">
-                @endif
+                <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
+
+                    @if ($center)
+                        <img
+                            src="{{ $center->cover_url }}"
+                            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
+
+                    @if ($right)
+                        <img
+                            src="{{ $right->cover_url }}"
+                            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>
+</div>
\ No newline at end of file