From fb0687ec718426dd3e2693cd18b79486cb624234 Mon Sep 17 00:00:00 2001 From: openhands Date: Wed, 22 Jul 2026 13:52:23 +0200 Subject: [PATCH] feat: redesign home and register pages with professional Habbo-style layout --- src/app/(site)/page.tsx | 326 +++++++++++++++++++++++++++++-- src/app/(site)/register/page.tsx | 160 ++++++++++++--- 2 files changed, 445 insertions(+), 41 deletions(-) diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx index 38055447..1a44d7b0 100644 --- a/src/app/(site)/page.tsx +++ b/src/app/(site)/page.tsx @@ -1,12 +1,316 @@ -export default function Home() { - return ( -
-
-

Magic Hotel

-

0ONLINE

- Login - Register -
-
- ); +import Image from "next/image"; +import Link from "next/link"; +import { getTranslations } from "next-intl/server"; +import { cached } from "@/lib/cache"; +import { formatDate } from "@/lib/format-date"; +import { prisma } from "@/lib/prisma"; +import { siteSettings } from "@/lib/services/site-settings"; + +export const revalidate = 120; + +async function getHotelData() { + const hotelName = await siteSettings.get("hotel_name", "Hotel"); + const [online, users, rooms, articles] = await Promise.all([ + cached("online_count", 10_000, () => + prisma.user.count({ where: { online: "1" } }), + ).catch(() => 0), + cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0), + cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0), + prisma.websiteArticles + .findMany({ orderBy: { createdAt: "desc" }, take: 4 }) + .catch(() => []), + ]); + return { hotelName, online, users, rooms, articles }; +} + +export default async function Home() { + const t = await getTranslations("header"); + const { hotelName, online, users, rooms, articles } = await getHotelData(); + + const features = [ + { + icon: "🎨", + title: "Express Yourself", + desc: "Create a unique avatar with thousands of clothing and accessory combinations.", + }, + { + icon: "🏠", + title: "Design Rooms", + desc: "Build and decorate your own rooms with hundreds of furniture items.", + }, + { + icon: "🎮", + title: "Play Games", + desc: "Challenge friends to battles, races, and snowstorm fights.", + }, + { + icon: "💬", + title: "Make Friends", + desc: "Chat with people from all over the world in a safe environment.", + }, + ]; + + return ( +
+ {/* Hero */} +
+
+
+
+

+ Welcome to{" "} + + {hotelName} + +

+

+ {t("tagline")} +

+
+ + ▶ Play Now + + + ✨ Create Account + +
+
+
+ Frank +
+

+ Welcome to {hotelName}! 🎉 +

+

+ Create your account now! +

+
+
+
+
+ + {/* Stats */} +
+
+
{online.toLocaleString()}
+
Online Now
+
+
+
{users.toLocaleString()}
+
Total Users
+
+
+
{rooms.toLocaleString()}
+
Rooms Created
+
+
+
🎮
+
Games & More
+
+
+ + {/* Features */} +
+ {features.map((f) => ( +
+
{f.icon}
+

+ {f.title} +

+

+ {f.desc} +

+
+ ))} +
+ + {/* News */} + {articles.length > 0 && ( +
+
+

Latest News

+ + View all → + +
+
+ {articles.map((a) => ( + + {a.image ? ( +
+ +
+ ) : ( +
+ )} +
+

+ {a.title} +

+

+ {formatDate(a.createdAt, "date", "")} +

+
+ + ))} +
+
+ )} + + {/* CTA */} +
+

+ Ready to join {hotelName}? +

+

+ Create your free account and start your adventure today! +

+
+ + ✨ Create Free Account + + + ▶ Play as Guest + +
+
+
+ ); } diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx index d5488c38..942a6e18 100644 --- a/src/app/(site)/register/page.tsx +++ b/src/app/(site)/register/page.tsx @@ -1,31 +1,131 @@ -export default function Register() { - return ( -
-
-

Konto erstellen

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -

- Al een account? Inloggen -

-
-
- ); +import { headers } from "next/headers"; +import Image from "next/image"; +import Link from "next/link"; +import { getTranslations } from "next-intl/server"; +import { RegisterForm } from "@/components/auth/register-form"; +import { cached } from "@/lib/cache"; +import { prisma } from "@/lib/prisma"; +import { captchaConfig } from "@/lib/services/captcha"; +import { siteSettings } from "@/lib/services/site-settings"; + +export default async function RegisterPage() { + const t = await getTranslations("header"); + const [hotelName, cfg] = await Promise.all([ + siteSettings.get("hotel_name", "Hotel"), + captchaConfig(), + ]); + const nonce = (await headers()).get("x-nonce") ?? undefined; + + const online = await cached("online_count", 10_000, () => + prisma.user.count({ where: { online: "1" } }), + ).catch(() => 0); + + return ( +
+ {/* Left: Info / Welcome */} +
+
+
+
+ Frank +
+
+

+ Join{" "} + + {hotelName} + +

+

+ {t("tagline")} +

+
+
+
+
+ {online.toLocaleString()} +
+
Online
+
+
+
🎉
+
Free to Play
+
+
+
+
+ +
+ {[ + { icon: "🎨", text: "Customize your avatar with unique looks" }, + { icon: "🏠", text: "Build and design your own rooms" }, + { icon: "💬", text: "Chat and make new friends" }, + { icon: "🎮", text: "Play games and compete" }, + ].map((item) => ( +
+ {item.icon} + + {item.text} + +
+ ))} +
+ +

+ Already have an account?{" "} + + Sign in here + +

+
+ + {/* Right: Register Form */} +
+ +
+
+ ); }