From 9f959efa141cccc1eb33daa04df292b0add33c91 Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Fri, 22 May 2026 20:31:38 +0200
Subject: [PATCH] Update footer design

---
 resources/views/layouts/footer.blade.php | 161 +++++++++++++----------
 1 file changed, 90 insertions(+), 71 deletions(-)

diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index 90db06f..6cef293 100644
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -1,77 +1,96 @@
-<footer class="bg-white z-10 rounded-lg shadow dark:bg-neutral-950 m-4 mb-0 mt-auto">
-    <div class="w-full xl:max-w-[95%] 2xl:max-w-[84%] mx-auto p-4">
-        <div class="sm:flex sm:items-center sm:justify-between">
-            <a href="https://hstream.moe/" class="flex items-center mb-4 sm:mb-0">
-                <img src="/images/cropped-HS-1-192x192.webp" class="h-8 mr-3" alt="hstream.moe Logo" />
-                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">hstream.moe</span>
-            </a>
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                <li>
-                    <a href="{{ route('contact.index') }}" class="mr-4 hover:underline md:mr-6 "><i
-                            class="fa-solid fa-message"></i> Contact</a>
-                </li>
-                <li>
-                    <a href="{{ config('discord.invite_link') }}" class="mr-4 hover:underline md:mr-6 "><i
-                            class="fa-brands fa-discord"></i> Discord</a>
-                </li>
-                <li>
-                    <a href="{{ route('home.stats') }}" class="mr-4 hover:underline md:mr-6 "><i
-                            class="fa-solid fa-chart-simple"></i> Stats</a>
-                </li>
-            </ul>
-            <!-- Links to friendly sites -->
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                <li>
-                    <a target="_blank" href="https://everythingmoe.com/"
-                        class="mr-4 hover:underline md:mr-6">everythingmoe.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://theindex.moe/"
-                        class="mr-4 hover:underline md:mr-6">theindex.moe</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://www.squid-board.org/"
-                        class="mr-4 hover:underline md:mr-6">squidboard.org</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaizilla.com/"
-                        class="hover:underline md:mr-6">hentaizilla.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaipulse.com/"
-                        class="hover:underline md:mr-6">hentaipulse.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaisites.com/"
-                        class="hover:underline md:mr-6">hentaisites.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://zhentube.com/"
-                        class="hover:underline md:mr-6">zhentube.com</a>
-                </li>
-            </ul>
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                <li>
-                    <a class="hover:underline md:mr-6 cursor-pointer" data-te-toggle="modal"
-                        data-te-target="#modalLanguage">Language</a>
-                </li>
-            </ul>
+<footer class="bg-white z-10 rounded-xl shadow-lg dark:bg-neutral-950 m-4 mb-0 mt-auto">
+    <div class="w-full max-w-7xl mx-auto px-4 py-6">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
+            <!-- Logo -->
+            <div class="flex items-center justify-center md:justify-start">
+                <a href="https://hstream.moe/" class="flex items-center">
+                    <img src="/images/cropped-HS-1-192x192.webp" 
+                         class="h-10 w-10 mr-3 rounded-lg object-cover" 
+                         alt="hstream.moe Logo" />
+                    <span class="text-xl font-bold whitespace-nowrap text-gray-600 dark:text-white">hstream.moe</span>
+                </a>
+            </div>
 
-            @if (!Session::has('alert.config'))
-                <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
-            @endif
-            @if (config('sweetalert.theme') != 'default')
-                <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-{{ config('sweetalert.theme') }}"
-                    rel="stylesheet">
-            @endif
-            @include('sweetalert::alert')
+            <!-- Main Navigation -->
+            <div class="flex justify-center">
+                <ul class="flex flex-wrap items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-300">
+                    <li>
+                        <a href="{{ route('contact.index') }}" 
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
+                            <i class="fa-solid fa-message"></i> Contact
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ config('discord.invite_link') }}" 
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
+                            <i class="fa-brands fa-discord"></i> Discord
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ route('home.stats') }}" 
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
+                            <i class="fa-solid fa-chart-simple"></i> Stats
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Language Selector -->
+            <div class="flex justify-center md:justify-end">
+                <button data-te-toggle="modal" 
+                        data-te-target="#modalLanguage"
+                        class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
+                    <i class="fa-solid fa-globe"></i> Language
+                </button>
+            </div>
+        </div>
+
+        <!-- Friendly Sites -->
+        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3 text-center">Friendly Sites</h3>
+            <div class="flex flex-wrap justify-center gap-3">
+                @foreach([
+                    'everythingmoe.com' => 'https://everythingmoe.com/',
+                    'theindex.moe' => 'https://theindex.moe/',
+                    'squidboard.org' => 'https://www.squid-board.org/',
+                    'hentaizilla.com' => 'https://hentaizilla.com/',
+                    'hentaipulse.com' => 'https://hentaipulse.com/',
+                    'hentaisites.com' => 'https://hentaisites.com/',
+                    'zhentube.com' => 'https://zhentube.com/'
+                ] as $name => $url)
+                    <a href="{{ $url }}" 
+                       target="_blank" 
+                       class="text-sm text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
+                        {{ $name }}
+                    </a>
+                @endforeach
+            </div>
         </div>
     </div>
 </footer>
-@include('modals.language-selector')
 
-<div class="m-2 w-full mx-auto">
-    <div class="text-sm text-gray-500 text-center">
-        <p>Render time: {{ number_format(microtime(true) - (defined('LARAVEL_START') ? LARAVEL_START : request()->server('REQUEST_TIME_FLOAT')), 3) }} seconds | Memory usage: {{ number_format(memory_get_peak_usage(true) / 1048576, 2) }} MB | Git: <a href="https://gitea.hstream.moe/w33b/hstream/commits/branch/main" target="_blank">{{ \App\Helpers\GitHelper::shortCommit() }}</a></p>
+<!-- Footer Info -->
+<div class="m-4 w-full max-w-7xl mx-auto">
+    <div class="text-xs text-gray-500 text-center dark:text-gray-400">
+        <p>Render time: {{ number_format(microtime(true) - (defined('LARAVEL_START') ? LARAVEL_START : request()->server('REQUEST_TIME_FLOAT')), 3) }} seconds | 
+           Memory usage: {{ number_format(memory_get_peak_usage(true) / 1048576, 2) }} MB | 
+           Git: <a href="https://gitea.hstream.moe/w33b/hstream/commits/branch/main" 
+                   target="_blank" 
+                   class="hover:text-blue-600 transition-colors">
+                   {{ \App\Helpers\GitHelper::shortCommit() }}
+               </a>
+        </p>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<!-- SweetAlert Scripts -->
+@if (!Session::has('alert.config'))
+    <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
+@endif
+@if (config('sweetalert.theme') != 'default')
+    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-{{ config('sweetalert.theme') }}" rel="stylesheet">
+@endif
+@include('sweetalert::alert')
+
+<!-- Modals -->
+@include('modals.language-selector')