From d588ae5f0f8bb5270c73f14e7ffb3d614506fef7 Mon Sep 17 00:00:00 2001
From: remco <remcojandijkstra@ziggo.nl>
Date: Wed, 1 Jul 2026 18:03:52 +0200
Subject: [PATCH] style: polish enter button with gradient, inner highlight,
 arrow icon, and premium hover effects

---
 src/app/page.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 85a2d43d..5a5ecb81 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -237,15 +237,16 @@ export default async function HomePage() {
               <Link href="/client">
                 <button
                   type="button"
-                  className="rounded-full px-6 py-2.5 text-sm font-bold tracking-wide transition-all duration-200 hover:scale-105"
+                  className="group rounded-full px-7 py-3 text-sm font-bold tracking-wider transition-all duration-300 hover:scale-105 active:scale-95"
                   style={{
-                    background: "var(--button-color)",
+                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 92%, white), color-mix(in srgb, var(--color-primary) 92%, black))",
                     color: "var(--button-text-color)",
-                    border: "none",
-                    boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+                    border: "1px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.2))",
+                    boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2)",
                   }}
                 >
                   Enter {hotelName}
+                  <svg className="inline-block ml-2 w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" /></svg>
                 </button>
               </Link>
             </div>