From 7ee26e12d2027f7fd92f8776c5a45ebcf6f52055 Mon Sep 17 00:00:00 2001
From: Adamalfantino <158027358+Adamalfantino@users.noreply.github.com>
Date: Sat, 23 May 2026 00:29:19 +0700
Subject: [PATCH] fix: bug tombol

---
 resources/views/home.blade.php | 194 ++++++++++++++++++++++++---------
 1 file changed, 144 insertions(+), 50 deletions(-)

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 3459c72..eeb696b 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -29,22 +29,35 @@
     <h1 class="text-xl font-display font-bold text-gray-800">Smart Rack Security</h1>
   </div>
 
+  {{-- Desktop menu --}}
   <div class="hidden md:flex items-center gap-8">
     <a href="/home" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Home</a>
     <a href="#fitur" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Sensor</a>
     <a href="#tentang" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Tentang</a>
-    <a href="/login" class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2.5 rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-300 font-medium">
-      Login
-    </a>
+
+    @auth
+      {{-- Sudah login: tampilkan Dashboard & Logout --}}
+      <a href="{{ route('dashboard') }}" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium flex items-center gap-1">
+        <i data-feather="home" class="w-4 h-4"></i> Dashboard
+      </a>
+      <a href="{{ route('logout') }}" class="bg-gradient-to-r from-red-500 to-rose-600 text-white px-6 py-2.5 rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-300 font-medium flex items-center gap-2">
+        <i data-feather="log-out" class="w-4 h-4"></i> Logout
+      </a>
+    @else
+      {{-- Belum login: tampilkan Login --}}
+      <a href="/login" class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2.5 rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-300 font-medium">
+        Login
+      </a>
+    @endauth
   </div>
 
-  <!-- Hamburger button -->
+  {{-- Hamburger button --}}
   <button id="hamburger-btn" onclick="toggleMobileMenu(event)" class="md:hidden p-2 rounded-lg hover:bg-white/20 transition-colors focus:outline-none" aria-label="Toggle menu">
     <i id="hamburger-icon" data-feather="menu" class="w-6 h-6 text-gray-800"></i>
   </button>
 </div>
 
-<!-- Mobile Menu -->
+{{-- Mobile Menu --}}
 <div id="mobile-menu" class="hidden md:hidden border-t border-white/20 bg-white/95 backdrop-blur-md">
   <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-1">
     <a href="/home" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-all font-medium">
@@ -56,9 +69,19 @@
     <a href="#tentang" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-all font-medium">
       <i data-feather="info" class="w-5 h-5"></i> Tentang
     </a>
-    <a href="/login" class="flex items-center justify-center gap-3 mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold hover:shadow-lg transition-all">
-      <i data-feather="log-in" class="w-5 h-5"></i> Login
-    </a>
+
+    @auth
+      <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-all font-medium">
+        <i data-feather="layout" class="w-5 h-5"></i> Dashboard
+      </a>
+      <a href="{{ route('logout') }}" class="flex items-center justify-center gap-3 mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-red-500 to-rose-600 text-white font-semibold hover:shadow-lg transition-all">
+        <i data-feather="log-out" class="w-5 h-5"></i> Logout
+      </a>
+    @else
+      <a href="/login" class="flex items-center justify-center gap-3 mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold hover:shadow-lg transition-all">
+        <i data-feather="log-in" class="w-5 h-5"></i> Login
+      </a>
+    @endauth
   </div>
 </div>
 </nav>
@@ -87,14 +110,21 @@
 </p>
 
 <div class="flex flex-col sm:flex-row justify-center gap-6 mb-16">
-<a href="/dashboard" class="group bg-white text-indigo-600 px-8 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
-<span>Masuk Dashboard</span>
-<i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
-</a>
+@auth
+  <a href="{{ route('dashboard') }}" class="group bg-white text-indigo-600 px-8 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Buka Dashboard</span>
+    <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+  </a>
+@else
+  <a href="/login" class="group bg-white text-indigo-600 px-8 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Masuk Dashboard</span>
+    <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+  </a>
+@endauth
 
 <a href="#fitur" class="glass text-white px-8 py-4 rounded-2xl font-semibold hover:bg-white/20 transition-all duration-300 flex items-center justify-center gap-3">
-<span>Pelajari Sistem</span>
-<i data-feather="chevron-down" class="w-5 h-5"></i>
+  <span>Pelajari Sistem</span>
+  <i data-feather="chevron-down" class="w-5 h-5"></i>
 </a>
 </div>
 
@@ -115,39 +145,93 @@
 <p class="text-xl text-gray-600">Teknologi monitoring keamanan yang dapat diandalkan</p>
 </div>
 
+@auth
+{{-- Sudah login: tampilkan statistik --}}
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
-<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
-<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
-<i data-feather="layers" class="w-8 h-8 text-white"></i>
-</div>
-<h3 class="text-3xl font-display font-bold text-indigo-600 mb-2">4</h3>
-<p class="text-gray-600 font-medium">Sensor Sistem</p>
+  <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
+    <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+      <i data-feather="layers" class="w-8 h-8 text-white"></i>
+    </div>
+    <h3 class="text-3xl font-display font-bold text-indigo-600 mb-2">4</h3>
+    <p class="text-gray-600 font-medium">Sensor Sistem</p>
+  </div>
+
+  <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
+    <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+      <i data-feather="zap" class="w-8 h-8 text-white"></i>
+    </div>
+    <h3 class="text-3xl font-display font-bold text-green-600 mb-2">Realtime</h3>
+    <p class="text-gray-600 font-medium">Monitoring</p>
+  </div>
+
+  <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
+    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+      <i data-feather="radio" class="w-8 h-8 text-white"></i>
+    </div>
+    <h3 class="text-3xl font-display font-bold text-blue-600 mb-2">LoRa</h3>
+    <p class="text-gray-600 font-medium">Komunikasi</p>
+  </div>
+
+  <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
+    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+      <i data-feather="clock" class="w-8 h-8 text-white"></i>
+    </div>
+    <h3 class="text-3xl font-display font-bold text-purple-600 mb-2">6 Jam</h3>
+    <p class="text-gray-600 font-medium">Keamanan</p>
+  </div>
 </div>
 
-<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
-<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
-<i data-feather="zap" class="w-8 h-8 text-white"></i>
-</div>
-<h3 class="text-3xl font-display font-bold text-green-600 mb-2">Realtime</h3>
-<p class="text-gray-600 font-medium">Monitoring</p>
-</div>
+@else
+{{-- Belum login: tampilkan teaser dengan blur/lock --}}
+<div class="relative">
+  {{-- Card blur di belakang --}}
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 select-none pointer-events-none" style="filter: blur(6px); opacity: 0.4;">
+    <div class="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+      <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-feather="layers" class="w-8 h-8 text-white"></i>
+      </div>
+      <h3 class="text-3xl font-display font-bold text-indigo-600 mb-2">—</h3>
+      <p class="text-gray-600 font-medium">Sensor Sistem</p>
+    </div>
+    <div class="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+      <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-feather="zap" class="w-8 h-8 text-white"></i>
+      </div>
+      <h3 class="text-3xl font-display font-bold text-green-600 mb-2">—</h3>
+      <p class="text-gray-600 font-medium">Monitoring</p>
+    </div>
+    <div class="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+      <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-feather="radio" class="w-8 h-8 text-white"></i>
+      </div>
+      <h3 class="text-3xl font-display font-bold text-blue-600 mb-2">—</h3>
+      <p class="text-gray-600 font-medium">Komunikasi</p>
+    </div>
+    <div class="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+      <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-feather="clock" class="w-8 h-8 text-white"></i>
+      </div>
+      <h3 class="text-3xl font-display font-bold text-purple-600 mb-2">—</h3>
+      <p class="text-gray-600 font-medium">Keamanan</p>
+    </div>
+  </div>
 
-<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
-<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
-<i data-feather="radio" class="w-8 h-8 text-white"></i>
-</div>
-<h3 class="text-3xl font-display font-bold text-blue-600 mb-2">LoRa</h3>
-<p class="text-gray-600 font-medium">Komunikasi</p>
+  {{-- Overlay lock --}}
+  <div class="absolute inset-0 flex items-center justify-center">
+    <div class="bg-white/90 backdrop-blur-sm rounded-2xl px-8 py-6 shadow-xl border border-indigo-100 text-center max-w-sm mx-4">
+      <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-feather="lock" class="w-7 h-7 text-white"></i>
+      </div>
+      <h3 class="font-display font-bold text-gray-800 text-lg mb-2">Data Terkunci</h3>
+      <p class="text-gray-500 text-sm mb-4">Login untuk melihat statistik dan data monitoring sistem secara realtime.</p>
+      <a href="/login" class="inline-flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2.5 rounded-xl font-semibold hover:shadow-lg hover:scale-105 transition-all duration-300 text-sm">
+        <i data-feather="log-in" class="w-4 h-4"></i> Login Sekarang
+      </a>
+    </div>
+  </div>
 </div>
+@endauth
 
-<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
-<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
-<i data-feather="clock" class="w-8 h-8 text-white"></i>
-</div>
-<h3 class="text-3xl font-display font-bold text-purple-600 mb-2">6 Jam</h3>
-<p class="text-gray-600 font-medium">Keamanan</p>
-</div>
-</div>
 </div>
 </section>
 
@@ -282,15 +366,25 @@
 </div>
 
 <div class="flex flex-col sm:flex-row justify-center gap-6">
-<a href="/dashboard" class="group bg-white text-indigo-600 px-10 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
-<span>Buka Dashboard</span>
-<i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
-</a>
-
-<a href="/login" class="glass text-white px-10 py-4 rounded-2xl font-semibold hover:bg-white/20 transition-all duration-300 flex items-center justify-center gap-3">
-<span>Login Admin</span>
-<i data-feather="user" class="w-5 h-5"></i>
-</a>
+@auth
+  <a href="{{ route('dashboard') }}" class="group bg-white text-indigo-600 px-10 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Buka Dashboard</span>
+    <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+  </a>
+  <a href="{{ route('logout') }}" class="glass text-white px-10 py-4 rounded-2xl font-semibold hover:bg-white/20 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Logout</span>
+    <i data-feather="log-out" class="w-5 h-5"></i>
+  </a>
+@else
+  <a href="/login" class="group bg-white text-indigo-600 px-10 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Buka Dashboard</span>
+    <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+  </a>
+  <a href="/login" class="glass text-white px-10 py-4 rounded-2xl font-semibold hover:bg-white/20 transition-all duration-300 flex items-center justify-center gap-3">
+    <span>Login Admin</span>
+    <i data-feather="user" class="w-5 h-5"></i>
+  </a>
+@endauth
 </div>
 </div>
 </section>