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

Swap teal accent for Habbo gold (#EEB425) and green (#22c55e)
Local Build and Deploy / deploy (push) Successful in 51s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-16 20:24:25 +02:00
1 parent 008e7d921b
commit db860a290d
5 files changed
+66 -66
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+13 -13
View File
@@ -57,14 +57,14 @@ export default function LoginPage() {
<div <div
className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8" className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8"
> >
<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6]/5 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
<div className="absolute -top-40 -right-40 w-[400px] h-[400px] bg-[#5AB4C6]/5 rounded-full blur-[120px]" /> <div className="absolute -top-40 -right-40 w-[400px] h-[400px] bg-[#EEB425]/5 rounded-full blur-[120px]" />
<div className="relative"> <div className="relative">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#5AB4C6]/10 border border-[#5AB4C6]/20"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#EEB425]/10 border border-[#EEB425]/20">
<Lock className="h-6 w-6 text-[#5AB4C6]" /> <Lock className="h-6 w-6 text-[#EEB425]" />
</div> </div>
<h1 className="text-2xl font-black text-white tracking-tight m-0"> <h1 className="text-2xl font-black text-white tracking-tight m-0">
{t("title")} {t("title")}
@@ -89,7 +89,7 @@ export default function LoginPage() {
Username Username
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<User size={15} /> <User size={15} />
</div> </div>
<input <input
@@ -98,7 +98,7 @@ export default function LoginPage() {
placeholder={t("usernamePlaceholder")} placeholder={t("usernamePlaceholder")}
autoComplete="username" autoComplete="username"
disabled={needs2fa} disabled={needs2fa}
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
/> />
</div> </div>
</div> </div>
@@ -107,7 +107,7 @@ export default function LoginPage() {
Password Password
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -117,7 +117,7 @@ export default function LoginPage() {
placeholder={t("passwordPlaceholder")} placeholder={t("passwordPlaceholder")}
autoComplete="current-password" autoComplete="current-password"
disabled={needs2fa} disabled={needs2fa}
className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
/> />
<button <button
type="button" type="button"
@@ -134,7 +134,7 @@ export default function LoginPage() {
2FA Code 2FA Code
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Mail size={15} /> <Mail size={15} />
</div> </div>
<input <input
@@ -144,7 +144,7 @@ export default function LoginPage() {
inputMode="numeric" inputMode="numeric"
autoComplete="one-time-code" autoComplete="one-time-code"
autoFocus autoFocus
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
/> />
</div> </div>
</div> </div>
@@ -154,7 +154,7 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
disabled={pending} disabled={pending}
className="w-full flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20" className="w-full flex items-center justify-center gap-2 bg-[#EEB425] hover:bg-[#EEB425]/90 text-black font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#EEB425]/20"
> >
{pending ? ( {pending ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
@@ -212,11 +212,11 @@ export default function LoginPage() {
<div className="pt-2 text-center"> <div className="pt-2 text-center">
<p className="text-sm text-white/40"> <p className="text-sm text-white/40">
{t("noAccount")}{" "} {t("noAccount")}{" "}
<Link href="/register" className="font-bold text-[#5AB4C6] hover:underline"> <Link href="/register" className="font-bold text-[#EEB425] hover:underline">
{t("createOne")} {t("createOne")}
</Link> </Link>
<span className="mx-2 text-white/10">·</span> <span className="mx-2 text-white/10">·</span>
<Link href="/forgot" className="font-bold text-[#5AB4C6] hover:underline"> <Link href="/forgot" className="font-bold text-[#EEB425] hover:underline">
{t("forgotPassword")} {t("forgotPassword")}
</Link> </Link>
</p> </p>
src/components/auth/home-login-form.tsx
+8 -8
View File
@@ -63,7 +63,7 @@ export function HomeLoginForm() {
Username Username
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<User size={16} /> <User size={16} />
</div> </div>
<input <input
@@ -71,7 +71,7 @@ export function HomeLoginForm() {
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Username" placeholder="Username"
className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
required required
disabled={needs2fa} disabled={needs2fa}
/> />
@@ -83,7 +83,7 @@ export function HomeLoginForm() {
Password Password
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Lock size={16} /> <Lock size={16} />
</div> </div>
<input <input
@@ -91,7 +91,7 @@ export function HomeLoginForm() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Password"
className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
required required
disabled={needs2fa} disabled={needs2fa}
/> />
@@ -104,7 +104,7 @@ export function HomeLoginForm() {
2FA Code 2FA Code
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Lock size={16} /> <Lock size={16} />
</div> </div>
<input <input
@@ -114,7 +114,7 @@ export function HomeLoginForm() {
placeholder="Enter your 2FA code" placeholder="Enter your 2FA code"
inputMode="numeric" inputMode="numeric"
autoFocus autoFocus
className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
/> />
</div> </div>
</div> </div>
@@ -123,7 +123,7 @@ export function HomeLoginForm() {
<button <button
type="submit" type="submit"
disabled={pending} disabled={pending}
className="w-full group relative flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6] text-white font-black text-sm py-3.5 rounded-md transition-all disabled:opacity-50 active:scale-[0.98]" className="w-full group relative flex items-center justify-center gap-2 bg-[#EEB425] hover:bg-[#EEB425]/90 text-black font-black text-sm py-3.5 rounded-md transition-all disabled:opacity-50 active:scale-[0.98]"
> >
<LogIn size={16} /> <LogIn size={16} />
<span className="uppercase tracking-widest"> <span className="uppercase tracking-widest">
@@ -135,7 +135,7 @@ export function HomeLoginForm() {
<div className="pt-5 border-t border-white/5 text-center"> <div className="pt-5 border-t border-white/5 text-center">
<Link href="/register"> <Link href="/register">
<div className="flex items-center justify-center gap-2 w-full py-3 rounded-md bg-white/5 border border-white/10 text-white text-xs font-black hover:bg-white/10 transition-all active:scale-95 uppercase tracking-wider"> <div className="flex items-center justify-center gap-2 w-full py-3 rounded-md bg-white/5 border border-white/10 text-white text-xs font-black hover:bg-white/10 transition-all active:scale-95 uppercase tracking-wider">
<UserPlus size={14} className="text-[#5AB4C6]" /> <UserPlus size={14} className="text-[#EEB425]" />
<span>No account yet? Register now</span> <span>No account yet? Register now</span>
</div> </div>
</Link> </Link>
src/components/auth/register-form.tsx
+16 -16
View File
@@ -24,14 +24,14 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
<div <div
className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8 md:p-10" className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8 md:p-10"
> >
<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6]/5 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
<div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-[#5AB4C6]/5 rounded-full blur-[120px]" /> <div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-[#EEB425]/5 rounded-full blur-[120px]" />
<div className="relative"> <div className="relative">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#5AB4C6]/10 border border-[#5AB4C6]/20"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#EEB425]/10 border border-[#EEB425]/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#5AB4C6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EEB425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
<polyline points="10 17 15 12 10 7" /> <polyline points="10 17 15 12 10 7" />
<line x1="15" x2="3" y1="12" y2="12" /> <line x1="15" x2="3" y1="12" y2="12" />
@@ -60,7 +60,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
Username Username
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<User size={15} /> <User size={15} />
</div> </div>
<input <input
@@ -69,7 +69,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
type="text" type="text"
placeholder={t("usernamePlaceholder")} placeholder={t("usernamePlaceholder")}
autoComplete="username" autoComplete="username"
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
required required
/> />
</div> </div>
@@ -79,7 +79,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
Email Email
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Mail size={15} /> <Mail size={15} />
</div> </div>
<input <input
@@ -88,7 +88,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
type="email" type="email"
placeholder={t("emailPlaceholder")} placeholder={t("emailPlaceholder")}
autoComplete="email" autoComplete="email"
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
/> />
</div> </div>
</div> </div>
@@ -100,7 +100,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
Password Password
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -109,7 +109,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
placeholder={t("passwordPlaceholder")} placeholder={t("passwordPlaceholder")}
autoComplete="new-password" autoComplete="new-password"
className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
required required
/> />
<button <button
@@ -126,7 +126,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
Confirm Confirm
</label> </label>
<div className="relative group"> <div className="relative group">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors"> <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -135,7 +135,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
type="password" type="password"
placeholder={t("confirmPasswordPlaceholder")} placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password" autoComplete="new-password"
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
required required
/> />
</div> </div>
@@ -151,8 +151,8 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
onClick={() => setTermsAccepted(!termsAccepted)} onClick={() => setTermsAccepted(!termsAccepted)}
className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition-all" className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition-all"
style={{ style={{
borderColor: termsAccepted ? "#5AB4C6" : "rgba(255,255,255,0.15)", borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.15)",
backgroundColor: termsAccepted ? "#5AB4C6" : "transparent", backgroundColor: termsAccepted ? "#EEB425" : "transparent",
}} }}
> >
{termsAccepted && ( {termsAccepted && (
@@ -185,7 +185,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
<button <button
type="submit" type="submit"
disabled={isPending} disabled={isPending}
className="w-full flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20" className="w-full flex items-center justify-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20"
> >
{isPending ? ( {isPending ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
@@ -201,7 +201,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
<div className="text-center pt-2"> <div className="text-center pt-2">
<p className="text-sm text-white/40"> <p className="text-sm text-white/40">
{t("alreadyHaveAccount")}{" "} {t("alreadyHaveAccount")}{" "}
<Link href="/login" className="font-bold text-[#5AB4C6] hover:underline"> <Link href="/login" className="font-bold text-[#EEB425] hover:underline">
{t("signIn")} {t("signIn")}
</Link> </Link>
</p> </p>
src/components/home/guest-view.tsx
+17 -17
View File
@@ -68,8 +68,8 @@ export default async function GuestView() {
{hotelName} {hotelName}
</h1> </h1>
)} )}
<div className="flex items-center gap-2 px-4 py-4 border border-[#5AB4C6]/50 bg-[#5AB4C6]/20 rounded-md"> <div className="flex items-center gap-2 px-4 py-4 border border-[#EEB425]/50 bg-[#EEB425]/20 rounded-md">
<div className="w-2 h-2 bg-[#5AB4C6] rounded-full animate-pulse" /> <div className="w-2 h-2 bg-[#EEB425] rounded-full animate-pulse" />
<span className="text-white font-black text-xs uppercase tracking-wider"> <span className="text-white font-black text-xs uppercase tracking-wider">
{onlineCount} Online {onlineCount} Online
</span> </span>
@@ -84,7 +84,7 @@ export default async function GuestView() {
<h2 className="text-xl font-black text-white mb-1.5 tracking-tight uppercase"> <h2 className="text-xl font-black text-white mb-1.5 tracking-tight uppercase">
Sign In Sign In
</h2> </h2>
<div className="h-1 w-full bg-[#5AB4C6] rounded-full" /> <div className="h-1 w-full bg-[#EEB425] rounded-full" />
</div> </div>
<HomeLoginForm /> <HomeLoginForm />
</div> </div>
@@ -98,11 +98,11 @@ export default async function GuestView() {
className="object-cover object-center scale-110" className="object-cover object-center scale-110"
unoptimized unoptimized
/> />
<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6] via-transparent to-[#5AB4C6]" /> <div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/60 via-transparent to-[#EEB425]/60" />
<div className="absolute inset-0 bg-black/30" /> <div className="absolute inset-0 bg-black/30" />
<div className="absolute inset-0 flex flex-col items-center justify-center z-20"> <div className="absolute inset-0 flex flex-col items-center justify-center z-20">
<div className="w-[140px] h-[140px] rounded-md bg-white/10 border border-white/20 backdrop-blur-xl overflow-hidden flex items-center justify-center shadow-[0_0_60px_rgba(130,204,221,0.35)]"> <div className="w-[140px] h-[140px] rounded-md bg-white/10 border border-white/20 backdrop-blur-xl overflow-hidden flex items-center justify-center shadow-[0_0_60px_rgba(238,180,37,0.35)]">
<div className="text-white/40"> <div className="text-white/60">
<User size={64} strokeWidth={1.5} /> <User size={64} strokeWidth={1.5} />
</div> </div>
</div> </div>
@@ -116,8 +116,8 @@ export default async function GuestView() {
<div className="lg:col-span-2 animate-slide-up"> <div className="lg:col-span-2 animate-slide-up">
<div className="mb-5 flex items-center justify-between"> <div className="mb-5 flex items-center justify-between">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#5AB4C6]/10"> <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#EEB425]/10">
<Newspaper className="h-4 w-4 text-[#5AB4C6]" /> <Newspaper className="h-4 w-4 text-[#EEB425]" />
</div> </div>
<h2 className="m-0 text-sm font-black text-white uppercase tracking-wider"> <h2 className="m-0 text-sm font-black text-white uppercase tracking-wider">
{t("latestNews")} {t("latestNews")}
@@ -125,7 +125,7 @@ export default async function GuestView() {
</div> </div>
<Link <Link
href="/news" href="/news"
className="text-[10px] font-black uppercase tracking-widest text-[#5AB4C6] hover:underline flex items-center gap-1" className="text-[10px] font-black uppercase tracking-widest text-[#EEB425] hover:underline flex items-center gap-1"
> >
View all <ArrowRight className="h-3 w-3" /> View all <ArrowRight className="h-3 w-3" />
</Link> </Link>
@@ -208,8 +208,8 @@ export default async function GuestView() {
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<div className="rounded-md border border-white/10 bg-white/[0.03] overflow-hidden"> <div className="rounded-md border border-white/10 bg-white/[0.03] overflow-hidden">
<div className="flex items-center gap-2.5 px-5 py-3.5 border-b border-white/[0.06]"> <div className="flex items-center gap-2.5 px-5 py-3.5 border-b border-white/[0.06]">
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#5AB4C6]/10"> <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#EEB425]/10">
<Users className="h-3.5 w-3.5 text-[#5AB4C6]" /> <Users className="h-3.5 w-3.5 text-[#EEB425]" />
</div> </div>
<h3 className="m-0 text-[11px] font-black text-white uppercase tracking-wider"> <h3 className="m-0 text-[11px] font-black text-white uppercase tracking-wider">
Recent Users Recent Users
@@ -222,7 +222,7 @@ export default async function GuestView() {
href={`/u/${u.username}`} href={`/u/${u.username}`}
className="group relative flex items-center justify-center transition-all duration-200 hover:scale-110" className="group relative flex items-center justify-center transition-all duration-200 hover:scale-110"
> >
<div className="relative h-14 w-14 overflow-hidden rounded-md border-2 border-transparent bg-white/5 transition-all duration-200 group-hover:border-[#5AB4C6]/30 group-hover:shadow-lg"> <div className="relative h-14 w-14 overflow-hidden rounded-md border-2 border-transparent bg-white/5 transition-all duration-200 group-hover:border-[#EEB425]/30 group-hover:shadow-lg">
<Image <Image
src={avatarImageUrl(imager, u.look, { src={avatarImageUrl(imager, u.look, {
headOnly: true, headOnly: true,
@@ -253,17 +253,17 @@ export default async function GuestView() {
{/* Quick Register CTA */} {/* Quick Register CTA */}
<Link href="/register" className="group block"> <Link href="/register" className="group block">
<div className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.03] px-6 py-8 text-center transition-all duration-300 hover:bg-white/[0.06] hover:-translate-y-1"> <div className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.03] px-6 py-8 text-center transition-all duration-300 hover:bg-white/[0.06] hover:-translate-y-1">
<div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-[#5AB4C6]/10 blur-3xl" /> <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-[#EEB425]/10 blur-3xl" />
<div className="absolute -bottom-10 -left-10 h-24 w-24 rounded-full bg-[#5AB4C6]/10 blur-3xl" /> <div className="absolute -bottom-10 -left-10 h-24 w-24 rounded-full bg-[#EEB425]/10 blur-3xl" />
<div className="relative"> <div className="relative">
<div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#5AB4C6]/10"> <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#EEB425]/10">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="#5AB4C6" stroke="#EEB425"
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -279,7 +279,7 @@ export default async function GuestView() {
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-white/40">
Create your free account and start your adventure! Create your free account and start your adventure!
</p> </p>
<div className="mt-5 inline-flex items-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3 px-6 rounded-md transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20"> <div className="mt-5 inline-flex items-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3 px-6 rounded-md transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20">
Register Now <ArrowRight className="h-3.5 w-3.5" /> Register Now <ArrowRight className="h-3.5 w-3.5" />
</div> </div>
</div> </div>
src/components/home/user-view.tsx
+12 -12
View File
@@ -59,8 +59,8 @@ export default async function UserView({
<div className="flex w-full flex-col gap-6 lg:w-3/4"> <div className="flex w-full flex-col gap-6 lg:w-3/4">
{/* Hero/Welcome Banner */} {/* Hero/Welcome Banner */}
<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl"> <div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl">
<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6]/5 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
<div className="absolute -top-20 -right-20 w-64 h-64 bg-[#5AB4C6]/5 rounded-full blur-[100px]" /> <div className="absolute -top-20 -right-20 w-64 h-64 bg-[#EEB425]/5 rounded-full blur-[100px]" />
<div className="relative flex flex-col items-center gap-6 px-6 py-8 md:flex-row md:px-8"> <div className="relative flex flex-col items-center gap-6 px-6 py-8 md:flex-row md:px-8">
<div className="shrink-0"> <div className="shrink-0">
<div className="relative"> <div className="relative">
@@ -84,14 +84,14 @@ export default async function UserView({
<div className="flex-1 text-center md:text-left"> <div className="flex-1 text-center md:text-left">
<h1 className="m-0 text-2xl font-black tracking-tight text-white"> <h1 className="m-0 text-2xl font-black tracking-tight text-white">
Welcome back,{" "} Welcome back,{" "}
<span className="text-[#5AB4C6]">{username}</span> <span className="text-[#EEB425]">{username}</span>
</h1> </h1>
<p className="mt-1 text-sm text-white/50"> <p className="mt-1 text-sm text-white/50">
{motto || "Happy to see you again!"} {motto || "Happy to see you again!"}
</p> </p>
<div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start"> <div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
<Link href="/client" target="_blank" rel="noopener noreferrer"> <Link href="/client" target="_blank" rel="noopener noreferrer">
<div className="inline-flex items-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3 px-6 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20"> <div className="inline-flex items-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3 px-6 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20">
<Gamepad2 size={15} /> <Gamepad2 size={15} />
{t("enterHotel", { hotelName })} {t("enterHotel", { hotelName })}
<ArrowRight <ArrowRight
@@ -115,8 +115,8 @@ export default async function UserView({
<div className="flex flex-col gap-2 lg:flex-row lg:items-center"> <div className="flex flex-col gap-2 lg:flex-row lg:items-center">
<div className="flex shrink-0 items-center gap-2 px-4 py-2.5"> <div className="flex shrink-0 items-center gap-2 px-4 py-2.5">
<div className="relative flex h-2 w-2"> <div className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#5AB4C6] opacity-80" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#EEB425] opacity-80" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-[#5AB4C6]" /> <span className="relative inline-flex h-2 w-2 rounded-full bg-[#EEB425]" />
</div> </div>
<span className="text-[10px] font-black uppercase tracking-widest text-white/60"> <span className="text-[10px] font-black uppercase tracking-widest text-white/60">
{t("onlineFriends")} {t("onlineFriends")}
@@ -134,7 +134,7 @@ export default async function UserView({
href={`/u/${f.username}`} href={`/u/${f.username}`}
className="group relative transition-all duration-200 hover:scale-110" className="group relative transition-all duration-200 hover:scale-110"
> >
<div className="overflow-hidden rounded-xl border-2 border-transparent bg-white/5 transition-all group-hover:border-[#5AB4C6]/30"> <div className="overflow-hidden rounded-xl border-2 border-transparent bg-white/5 transition-all group-hover:border-[#EEB425]/30">
<Image <Image
src={avatarImageUrl(imager, f.look, { headOnly: true })} src={avatarImageUrl(imager, f.look, { headOnly: true })}
alt={f.username} alt={f.username}
@@ -161,8 +161,8 @@ export default async function UserView({
{latestArticle ? ( {latestArticle ? (
<div className="overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.06]"> <div className="overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.06]">
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]"> <div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]">
<div className="flex h-6 w-6 items-center justify-center rounded-lg bg-[#5AB4C6]/10"> <div className="flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEB425]/10">
<Newspaper className="h-3 w-3 text-[#5AB4C6]" /> <Newspaper className="h-3 w-3 text-[#EEB425]" />
</div> </div>
<h2 className="m-0 text-[11px] font-black text-white uppercase tracking-wider"> <h2 className="m-0 text-[11px] font-black text-white uppercase tracking-wider">
{t("latestArticle")} {t("latestArticle")}
@@ -188,7 +188,7 @@ export default async function UserView({
{excerpt(latestArticle.shortStory, 100)} {excerpt(latestArticle.shortStory, 100)}
</p> </p>
)} )}
<div className="mt-3 flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-[#5AB4C6]"> <div className="mt-3 flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-[#EEB425]">
Read more <ArrowRight size={12} /> Read more <ArrowRight size={12} />
</div> </div>
</div> </div>
@@ -198,14 +198,14 @@ export default async function UserView({
{/* Quick Stats */} {/* Quick Stats */}
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5 text-center"> <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5 text-center">
<div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#5AB4C6]/10"> <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#EEB425]/10">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="#5AB4C6" stroke="#EEB425"
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"