From 121459db228681b5ff49d1bc97e4c0911fbe2262 Mon Sep 17 00:00:00 2001
From: remco <remcojandijkstra@ziggo.nl>
Date: Wed, 1 Jul 2026 17:31:28 +0200
Subject: [PATCH] fix: redesign avatar backdrop on home page for professional
 look

- Improve login card backdrop with cover background, multi-point gradient overlay, and decorative primary glow
- Redesign authenticated user hero section with layered background, dual decorative glows, glass-morphism enter button, and avatar positioned naturally at bottom
- Replace plain bg-black/30 overlay with rich gradient depth
---
 src/app/page.tsx | 60 ++++++++++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 04b2574c..8cd8d56b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -39,19 +39,20 @@ export default async function HomePage() {
         {/* LEFT COLUMN — 1/3 */}
         <div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
           {/* Login Card */}
-          <div className="overflow-hidden rounded-lg border bg-white dark:bg-gray-800" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
-            <div
-              className="relative h-[120px] overflow-hidden bg-center md:h-[150px]"
-              style={{
+          <div className="overflow-hidden rounded-lg border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
+            <div className="relative h-[120px] overflow-hidden md:h-[150px]">
+              <div className="absolute inset-0" style={{
                 backgroundImage: "url(/assets/images/kasja_mepage_header.png)",
-                backgroundSize: "auto",
+                backgroundSize: "cover",
+                backgroundPosition: "center 30%",
                 backgroundRepeat: "no-repeat",
-                backgroundPosition: "calc(30% - 10px) calc(50% - 35px)",
-              }}
-            >
-              <div className="absolute inset-0 z-10 bg-black/30" />
+              }} />
+              <div className="absolute inset-0" style={{
+                background: "linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 100%)",
+              }} />
+              <div className="absolute -bottom-8 right-4 w-32 h-32 rounded-full opacity-[0.12] blur-[60px]" style={{ background: "var(--color-primary)" }} />
             </div>
-            <div className="bg-gray-100 p-3 dark:bg-gray-800">
+            <div className="p-3" style={{ backgroundColor: "var(--color-surface)" }}>
               <HomeLoginForm />
             </div>
           </div>
@@ -211,32 +212,41 @@ export default async function HomePage() {
       {/* Left column — 9/12 */}
       <div className="flex w-full flex-col gap-6 md:w-3/4">
         {/* User Hero */}
-        <div
-          className="relative flex h-[180px] items-center overflow-hidden rounded-lg"
-          style={{
+        <div className="relative flex h-[200px] items-end overflow-hidden rounded-lg">
+          <div className="absolute inset-0" style={{
             backgroundImage: "url(/assets/images/kasja_mepage_header.png)",
-            backgroundSize: "auto",
+            backgroundSize: "cover",
+            backgroundPosition: "center 30%",
             backgroundRepeat: "no-repeat",
-            backgroundPosition: "calc(30% - 10px) calc(50% - 35px)",
-          }}
-        >
-          <div className="absolute inset-0 z-10 bg-black/30" />
-          <div className="relative z-20 flex w-full items-center justify-between px-4">
-            <Link href={`/u/${dbUser.username}`}>
+          }} />
+          <div className="absolute inset-0" style={{
+            background: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.6) 100%)",
+          }} />
+          <div className="absolute -bottom-10 -right-10 w-64 h-64 rounded-full opacity-[0.15] blur-[80px]" style={{ background: "var(--color-primary)" }} />
+          <div className="absolute -top-10 -left-10 w-48 h-48 rounded-full opacity-[0.08] blur-[60px]" style={{ background: "var(--color-primary)" }} />
+          <div className="relative z-10 flex w-full items-end justify-between px-6 pb-2">
+            <Link href={`/u/${dbUser.username}`} className="transition-transform duration-300 hover:scale-105 -mb-8">
               <img
                 src={avatarImageUrl(imager, dbUser.look, { size: "l", direction: 2 })}
                 alt={dbUser.username}
-                className="relative transition-all duration-300 hover:scale-105 drop-shadow"
-                style={{ imageRendering: "pixelated", marginTop: "30px" }}
+                className="drop-shadow-2xl"
+                style={{ imageRendering: "pixelated" }}
               />
             </Link>
-            <div className="flex items-center">
+            <div className="flex items-center mb-4">
               <Link href="/client">
                 <button
                   type="button"
-                  className="rounded-full bg-white/90 px-6 py-2 text-lg font-semibold text-black transition duration-300 ease-in-out hover:bg-white dark:bg-gray-900 dark:text-white"
+                  className="rounded-full px-6 py-2.5 text-sm font-bold tracking-wide transition-all duration-200 hover:scale-105"
+                  style={{
+                    background: "rgba(255,255,255,0.12)",
+                    backdropFilter: "blur(12px)",
+                    border: "1px solid rgba(255,255,255,0.15)",
+                    color: "#fff",
+                    boxShadow: "0 4px 20px rgba(0,0,0,0.15)",
+                  }}
                 >
-                  Go to {hotelName}
+                  Enter {hotelName}
                 </button>
               </Link>
             </div>