remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: redesign avatar backdrop on home page for professional look

Browse Source 
- 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
This commit is contained in:
remco committed 2026-07-01 17:31:28 +02:00
1 parent 1e787c6c62
commit 121459db22
1 file changed
+35 -25
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+35 -25
View File
@@ -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>