feat: major visual polish - warmer habbo colors, glass-morphism elements, smoother animations, improved site header with gradient overlay, refined card/button/input styles
This commit is contained in:
remco committed
1 parent
f2d13cf644
commit
25d455f0b6
2 files changed
+127
-110
No files matched your search
@@ -20,66 +20,68 @@ export async function SiteHeader() {
|
||||
online = 0;
|
||||
}
|
||||
|
||||
if (session?.user) {
|
||||
return (
|
||||
<div
|
||||
className="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
|
||||
style={{ background: `url(${header})`, backgroundSize: "cover", backgroundPosition: "center" }}
|
||||
>
|
||||
<div className="absolute h-full w-full bg-black/50" />
|
||||
<div className="relative flex items-center justify-center w-full px-4">
|
||||
<div className="flex flex-col items-center justify-center max-w-[600px]">
|
||||
<Link href="/" className="transition-all duration-300 hover:scale-110 mb-2.5">
|
||||
{logo ? (
|
||||
<img className="drop-shadow block" src={logo} alt={hotelName ?? "Hotel"} />
|
||||
) : (
|
||||
<span className="text-5xl font-extrabold text-white text-shadow tracking-tight" style={{ fontFamily: "var(--font-family)", textShadow: "0 2px 10px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3)", letterSpacing: "0.02em" }}>
|
||||
{hotelName}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<div className="relative flex items-center bg-white dark:bg-gray-800 rounded-md h-[50px] px-4 mt-2">
|
||||
<div className="absolute w-6 h-6 bg-white dark:bg-gray-800 rotate-45 -translate-x-1/2 left-1/2 -top-3 z-0" aria-hidden="true" />
|
||||
<div className="flex items-center gap-x-2 relative z-10">
|
||||
<img src="/assets/images/user-online.png" alt="Online Icon" className="p-1" style={{ marginTop: "-2px" }} />
|
||||
<span className="whitespace-nowrap text-gray-800 dark:text-white">
|
||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const bannerUrl = header && header !== "/assets/images/background.png" ? header : "/assets/images/mybobba_banner.png";
|
||||
const isLoggedIn = Boolean(session?.user);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex items-center justify-center w-full h-52"
|
||||
style={{
|
||||
backgroundImage: `url(/assets/images/mybobba_banner.png)`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
className="relative flex items-center justify-center w-full overflow-hidden"
|
||||
style={{ minHeight: isLoggedIn ? "14rem" : "14rem", height: isLoggedIn ? "auto" : "14rem" }}
|
||||
>
|
||||
<div className="absolute w-full h-full bg-black/50" />
|
||||
<div className="relative flex flex-col items-center justify-center px-4">
|
||||
<Link href="/" className="transition-all duration-300 hover:scale-110 mb-2.5">
|
||||
{/* Background with overlay gradient */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: `url(${bannerUrl}) center/cover no-repeat`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex flex-col items-center justify-center px-4 py-8" style={{ zIndex: 1 }}>
|
||||
<Link href="/" className="transition-all duration-300 hover:scale-110 mb-3 block">
|
||||
{logo ? (
|
||||
<img className="drop-shadow block" src={logo} alt="Hotel logo" />
|
||||
<img className="drop-shadow-lg block" src={logo} alt={hotelName ?? "Hotel"} style={{ maxHeight: 120 }} />
|
||||
) : (
|
||||
<span className="text-4xl font-extrabold text-white text-shadow">{hotelName}</span>
|
||||
<span
|
||||
className="block text-center font-extrabold tracking-tight leading-none"
|
||||
style={{
|
||||
fontSize: isLoggedIn ? "3rem" : "3.5rem",
|
||||
color: "#fff",
|
||||
textShadow: "0 4px 20px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.3)",
|
||||
letterSpacing: "0.01em",
|
||||
}}
|
||||
>
|
||||
{hotelName}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<div className="relative flex items-center bg-white dark:bg-gray-800 rounded-md h-[50px] px-4 mt-2">
|
||||
<div className="absolute w-6 h-6 bg-white dark:bg-gray-800 rotate-45 -translate-x-1/2 left-1/2 -top-3 z-0" aria-hidden="true" />
|
||||
<div className="flex items-center gap-x-2 relative z-10">
|
||||
<img src="/assets/images/user-online.png" alt="Online Icon" className="p-1" style={{ marginTop: "-2px" }} />
|
||||
<span className="whitespace-nowrap text-gray-800 dark:text-white">
|
||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Online counter badge */}
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-5 py-2.5 rounded-full"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.12)",
|
||||
backdropFilter: "blur(12px)",
|
||||
border: "1px solid rgba(255,255,255,0.15)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: 10, height: 10, borderRadius: "50%",
|
||||
background: "#22c55e",
|
||||
boxShadow: "0 0 0 3px rgba(34,197,94,0.25)",
|
||||
display: "inline-block",
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm font-semibold" style={{ color: "rgba(255,255,255,0.95)" }}>
|
||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user