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

Polish home, register, and login pages
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m49s
Details

Browse Source 
- Add pixel font to headings across all pages
- Improve stats icons (online-friends.png, friends.png)
- Fix features icons (star.gif → navigation/me.png)
- Replace top bar logo with lighthouse.png
- Add read-more arrow overlay on news cards
- Add Nitro client CTA section
- Add Discord link in top bar
- Add view-all link to online users section
- Add Reveal scroll animations to register/login
- Add Habbo gradient headers to register/login sidebars
- Add gradient headers to register/login form boxes
- Switch start script to standalone server
- Add postbuild script to copy static files
This commit is contained in:
openhands committed 2026-07-23 18:17:16 +02:00
1 parent a82cf7d2a1
commit 83356b9a9c
4 files changed
+235 -155
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/page.tsx
+69 -16
View File
@@ -57,7 +57,9 @@ async function getHotelData() {
.catch(() => []),
]);
return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers };
const discordUrl = await siteSettings.get("radio_social_discord", "");
return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl };
}
export default async function Home() {
@@ -66,7 +68,7 @@ export default async function Home() {
const tp = await getTranslations("pages.home");
const th = await getTranslations("header");
const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers } = await getHotelData();
const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl } = await getHotelData();
const captcha = await captchaConfig();
const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -84,7 +86,7 @@ export default async function Home() {
}}>
<div className="flex items-center gap-3">
<Image
src="/assets/images/icons/navigation/home.png"
src="/assets/images/icons/lighthouse.png"
alt={hotelName}
width={28}
height={28}
@@ -96,6 +98,11 @@ export default async function Home() {
</span>
</div>
<div className="flex items-center gap-1">
{discordUrl && (
<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
</Link>
)}
<LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher />
@@ -137,7 +144,7 @@ export default async function Home() {
</div>
<h1
className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
style={{ color: "var(--color-text-readable)" }}
style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
>
{tp("welcome", { hotelName })}
</h1>
@@ -196,8 +203,8 @@ export default async function Home() {
<Reveal>
<div className="grid grid-cols-3 gap-4">
{[
{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
].map((s) => (
<div
@@ -264,7 +271,7 @@ export default async function Home() {
<div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
</div>
<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white text-shadow" style={{ marginLeft: "18px" }}>
<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-pixel)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
{tp("register")}
</span>
</Link>
@@ -331,7 +338,7 @@ export default async function Home() {
<Link
key={a.slug}
href={`/news/${a.slug}`}
className="group relative w-full overflow-hidden rounded-lg transition-all duration-200"
className="group relative w-full overflow-hidden rounded-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
style={{
height: "200px",
backgroundColor: "var(--color-background)",
@@ -346,6 +353,11 @@ export default async function Home() {
className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
unoptimized
/>
<div
className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0"
>
<span className="text-white text-sm font-bold">→</span>
</div>
<div
className="absolute left-0 w-full p-2.5"
style={{
@@ -390,14 +402,14 @@ export default async function Home() {
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px p-4" style={{ background: "color-mix(in srgb, var(--color-text-muted) 6%, transparent)" }}>
{[
{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
{ img: "/assets/images/icons/navigation/me.png", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
].map((f) => (
<div
key={f.title}
className="rounded-lg p-4 transition-all duration-200 hover:-translate-y-0.5"
className="rounded-lg p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
style={{ background: "var(--color-surface)" }}
>
<div
@@ -418,20 +430,61 @@ export default async function Home() {
</div>
</Reveal>
{/* ── Client / Play ── */}
<Reveal>
<div className="relative overflow-hidden rounded-xl border" style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 1%, var(--color-surface)))",
}}>
<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
<div className="shrink-0">
<div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}>
<Image src="/assets/images/icons/navigation/shop.png" alt="" width={28} height={28} unoptimized />
</div>
</div>
<div className="flex-1 text-center md:text-left">
<h3 className="text-lg font-extrabold mb-0.5" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
{th("nitroClient")}
</h3>
<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
{tp("welcomeBody")}
</p>
</div>
<Link
href="/client"
className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
}}
>
<Image src="/assets/images/EnterHubbly.png" alt="" width={18} height={18} unoptimized />
{th("nitroClient")}
</Link>
</div>
</div>
</Reveal>
{/* ── Online users ── */}
{recentUsers.length > 0 && (
<Reveal>
<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
<div
className="flex items-center gap-2.5 px-4 py-3"
className="flex items-center justify-between px-4 py-3"
style={{
background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
}}
>
<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{tp("recentUsers")}
</h3>
<div className="flex items-center gap-2.5">
<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{tp("recentUsers")}
</h3>
</div>
<Link href="/community" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
{tp("allNews")}
</Link>
</div>
<div className="p-4">
<div className="flex flex-wrap justify-center gap-2">
@@ -469,7 +522,7 @@ export default async function Home() {
borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
}}
>
<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
{tp("joinNow", { hotelName })}
</h2>
<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>