From 570b134f7c8b4dde1039b873155f0768deff3815 Mon Sep 17 00:00:00 2001
From: Lutfi Hakim <lutfihakim1606@gmail.com>
Date: Sat, 2 May 2026 11:29:19 +0700
Subject: [PATCH] fix: hero responsive

---
 resources/views/welcome/hero.blade.php | 128 +++++++++++++++++++------
 1 file changed, 99 insertions(+), 29 deletions(-)

diff --git a/resources/views/welcome/hero.blade.php b/resources/views/welcome/hero.blade.php
index 5cf00bb..d925d46 100644
--- a/resources/views/welcome/hero.blade.php
+++ b/resources/views/welcome/hero.blade.php
@@ -5,58 +5,128 @@
     <div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-200/20 blob blur-3xl"></div>
     <div class="absolute top-40 right-1/3 w-48 h-48 bg-blue-200/20 rounded-full blur-2xl"></div>
 
-    <div class="max-w-7xl mx-auto px-6 py-24 md:py-32 grid md:grid-cols-2 gap-16 items-center relative z-10">
+    <div
+        class="max-w-7xl mx-auto px-4 sm:px-6 py-14 sm:py-20 md:py-26
+                grid md:grid-cols-2 gap-10 md:gap-16 items-center relative z-10">
 
         <div class="fade-up">
             {{-- Badge --}}
-            <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 rounded-full shadow-sm border border-primary-100 mb-8">
+            <div
+                class="inline-flex items-center gap-2 px-3 py-2 bg-white/80
+                        rounded-full shadow-sm border border-primary-100 mb-6">
                 <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
-                <span class="text-xs font-semibold text-primary-700 tracking-wide">Sistem Informasi Perpustakaan</span>
+
+                <span class="text-[11px] sm:text-xs font-semibold text-primary-700 tracking-wide">
+                    Sistem Informasi Perpustakaan
+                </span>
             </div>
 
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.1] text-gray-900 tracking-tight">
+            <h1
+                class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl
+                       font-black leading-tight text-gray-900 tracking-tight">
                 Sistem Informasi Perpustakaan
-                <span class="gradient-text block mt-2">Daerah Jember</span>
+
+                <span class="gradient-text block mt-1 sm:mt-2">
+                    Daerah Jember
+                </span>
             </h1>
 
-            <p class="mt-6 text-lg text-gray-500 max-w-lg leading-relaxed">
-                Akses ribuan koleksi buku, jurnal, dan referensi akademik dalam satu platform terintegrasi — kapan saja, di mana saja.
+            <p
+                class="mt-5 text-sm sm:text-base md:text-lg text-gray-500
+                      max-w-lg leading-relaxed">
+                Akses ribuan koleksi buku, jurnal, dan referensi akademik
+                dalam satu platform terintegrasi — kapan saja, di mana saja.
             </p>
 
-            <div class="mt-10 flex flex-col sm:flex-row gap-4 flex-wrap">
-                <a href="{{ route('katalog.index') }}" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-2xl font-bold text-sm shadow-xl shadow-blue-200 hover:shadow-blue-300 hover:from-blue-700 hover:to-blue-800 transition-all inline-flex items-center gap-2 justify-center">
-                    <i class="fas fa-search"></i> Cari Katalog Buku
+            {{-- BUTTONS --}}
+            <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+
+                <a href="{{ route('katalog.index') }}"
+                    class="w-full sm:w-auto px-6 py-3.5
+                          bg-gradient-to-r from-blue-600 to-blue-700
+                          text-white rounded-xl sm:rounded-2xl
+                          font-bold text-sm shadow-xl shadow-blue-200
+                          hover:from-blue-700 hover:to-blue-800
+                          transition-all inline-flex items-center
+                          gap-2 justify-center">
+
+                    <i class="fas fa-search"></i>
+                    Cari Katalog Buku
                 </a>
-                <a href="{{ route('buku_tamu.index') }}" class="px-8 py-4 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-2xl font-bold text-sm shadow-xl shadow-primary-200 hover:shadow-primary-300 hover:from-primary-700 hover:to-primary-800 transition-all inline-flex items-center gap-2 justify-center">
-                    <i class="fas fa-book-reader"></i> Mulai Kunjungan
+
+                <a href="{{ route('buku_tamu.index') }}"
+                    class="w-full sm:w-auto px-6 py-3.5
+                          bg-gradient-to-r from-primary-600 to-primary-700
+                          text-white rounded-xl sm:rounded-2xl
+                          font-bold text-sm shadow-xl shadow-primary-200
+                          hover:from-primary-700 hover:to-primary-800
+                          transition-all inline-flex items-center
+                          gap-2 justify-center">
+
+                    <i class="fas fa-book-reader"></i>
+                    Mulai Kunjungan
                 </a>
-                <a href="#fitur" class="px-8 py-4 bg-white text-gray-700 rounded-2xl font-bold text-sm shadow-sm border border-gray-200 hover:border-primary-200 hover:text-primary-600 transition-all inline-flex items-center gap-2 justify-center">
-                    <i class="fas fa-info-circle"></i> Pelajari Lebih Lanjut
+
+                <a href="#fitur"
+                    class="w-full sm:w-auto px-6 py-3.5
+                          bg-white text-gray-700 rounded-xl sm:rounded-2xl
+                          font-bold text-sm shadow-sm border border-gray-200
+                          hover:border-primary-200 hover:text-primary-600
+                          transition-all inline-flex items-center
+                          gap-2 justify-center">
+
+                    <i class="fas fa-info-circle"></i>
+                    Pelajari Lebih Lanjut
                 </a>
             </div>
 
-            {{-- Stats --}}
-            <div class="mt-14 flex gap-10">
-                <div>
-                    <div class="text-3xl font-black text-gray-900">1000+</div>
-                    <div class="text-xs text-gray-400 font-medium mt-1">Koleksi Buku</div>
+            {{-- STATS --}}
+            <div class="mt-10 grid grid-cols-3 gap-3 sm:gap-6">
+
+                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
+                    <div class="text-xl sm:text-3xl font-black text-gray-900">
+                        1000+
+                    </div>
+
+                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
+                        Koleksi Buku
+                    </div>
                 </div>
-                <div class="border-l border-gray-200 pl-10">
-                    <div class="text-3xl font-black text-gray-900">500+</div>
-                    <div class="text-xs text-gray-400 font-medium mt-1">Anggota Aktif</div>
+
+                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
+                    <div class="text-xl sm:text-3xl font-black text-gray-900">
+                        500+
+                    </div>
+
+                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
+                        Anggota Aktif
+                    </div>
                 </div>
-                <div class="border-l border-gray-200 pl-10">
-                    <div class="text-3xl font-black text-gray-900">24/7</div>
-                    <div class="text-xs text-gray-400 font-medium mt-1">Akses Digital</div>
+
+                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
+                    <div class="text-xl sm:text-3xl font-black text-gray-900">
+                        24/7
+                    </div>
+
+                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
+                        Akses Digital
+                    </div>
                 </div>
+
             </div>
         </div>
-
+        {{-- IMAGE --}}
         <div class="hidden md:flex justify-center relative items-center">
-            <div class="absolute inset-0 bg-gradient-to-tr from-primary-400/10 to-purple-400/10 rounded-[3rem] blur-2xl"></div>
+            <div
+                class="absolute inset-0 bg-gradient-to-tr
+                        from-primary-400/10 to-purple-400/10
+                        rounded-[3rem] blur-2xl">
+            </div>
+
             <img src="{{ asset('img/buku sampul awal.png') }}"
-                 class="w-[600px] object-contain drop-shadow-2xl relative z-10 rounded-3xl"
-                 alt="Animasi Perpustakaan Digital">
+                class="w-[500px] lg:w-[600px] object-contain
+                        drop-shadow-2xl relative z-10 rounded-3xl"
+                alt="Animasi Perpustakaan Digital">
         </div>
 
     </div>