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

Professional redesign: dark glass, warm tones, muted palette, gold accents
Local Build and Deploy / deploy (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-16 20:31:13 +02:00
1 parent db860a290d
commit c528afa7b9
6 files changed
+265 -260
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/forgot/page.tsx
+18 -19
View File
@@ -1,4 +1,4 @@
import { KeyRound, Mail } from "lucide-react"; import { KeyRound, Mail, ArrowLeft } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { getTranslations } from "next-intl/server"; import { getTranslations } from "next-intl/server";
import { requestReset } from "@/actions/password-reset"; import { requestReset } from "@/actions/password-reset";
@@ -13,38 +13,36 @@ export default async function ForgotPage({
return ( return (
<div className="flex min-h-[70vh] items-center justify-center px-4 py-12"> <div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
<div className="w-full max-w-md animate-fade-in"> <div className="w-full max-w-md">
<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8"> <div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] 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="relative"> <div className="relative">
<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-12 w-12 items-center justify-center rounded-lg bg-[#EEB425]/10 border border-[#EEB425]/20">
<KeyRound className="h-6 w-6 text-[#5AB4C6]" /> <KeyRound className="h-5 w-5 text-[#EEB425]" />
</div> </div>
<h1 className="text-2xl font-black text-white tracking-tight m-0"> <h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
{t("title")} {t("title")}
</h1> </h1>
<p className="mt-1.5 text-sm text-white/40"> <p className="mt-1 text-sm text-white/30">
{t("subtitle")} {t("subtitle")}
</p> </p>
</div> </div>
{sent ? ( {sent ? (
<div className="rounded-xl bg-green-500/10 border border-green-500/20 px-4 py-6 text-center"> <div className="rounded-md bg-green-500/10 border border-green-500/20 px-3 py-4 text-center">
<p className="text-sm font-bold text-green-400 m-0"> <p className="text-sm font-medium text-green-400 m-0">
{t("sentNotice")} {t("sentNotice")}
</p> </p>
</div> </div>
) : ( ) : (
<form action={requestReset} className="space-y-4"> <form action={requestReset} className="space-y-4">
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Email Email
</label> </label>
<div className="relative group"> <div className="relative">
<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 top-1/2 -translate-y-1/2 text-white/20">
<Mail size={15} /> <Mail size={15} />
</div> </div>
<input <input
@@ -53,21 +51,22 @@ export default async function ForgotPage({
placeholder={t("emailPlaceholder")} placeholder={t("emailPlaceholder")}
autoComplete="email" autoComplete="email"
required required
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-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
</div> </div>
</div> </div>
<button <button
type="submit" type="submit"
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 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20" className="w-full flex items-center justify-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all active:scale-[0.98]"
> >
{t("sendResetLink")} {t("sendResetLink")}
</button> </button>
</form> </form>
)} )}
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-sm text-white/40"> <p className="text-sm text-white/30">
<Link href="/login" className="font-bold text-[#5AB4C6] hover:underline"> <Link href="/login" className="inline-flex items-center gap-1 text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
<ArrowLeft size={14} />
{t("backToLogin")} {t("backToLogin")}
</Link> </Link>
</p> </p>
src/app/(site)/login/page.tsx
+42 -40
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { Eye, EyeOff, Lock, Mail, User } from "lucide-react"; import { Eye, EyeOff, Lock, Mail, User, LogIn, ArrowRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@@ -53,43 +53,38 @@ export default function LoginPage() {
return ( return (
<div className="flex min-h-[70vh] items-center justify-center px-4 py-12"> <div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
<div className="w-full max-w-md animate-fade-in"> <div className="w-full max-w-md">
<div <div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] 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-[#EEB425]/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-[#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-[#EEB425]/10 border border-[#EEB425]/20"> <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-[#EEB425]/10 border border-[#EEB425]/20">
<Lock className="h-6 w-6 text-[#EEB425]" /> <Lock className="h-5 w-5 text-[#EEB425]" />
</div> </div>
<h1 className="text-2xl font-black text-white tracking-tight m-0"> <h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
{t("title")} {t("title")}
</h1> </h1>
<p className="mt-1.5 text-sm text-white/40"> <p className="mt-1 text-sm text-white/30">
{needs2fa ? t("subtitle2fa") : t("subtitle")} {needs2fa ? t("subtitle2fa") : t("subtitle")}
</p> </p>
</div> </div>
<form onSubmit={onSubmit} className="space-y-4"> <form onSubmit={onSubmit} className="space-y-4">
{error && ( {error && (
<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3"> <div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
<p className="text-xs font-bold text-red-400 text-center m-0"> <p className="text-xs font-medium text-red-400 text-center m-0">
{error} {error}
</p> </p>
</div> </div>
)} )}
<div className="space-y-3.5">
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Username Username
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<User size={15} /> <User size={15} />
</div> </div>
<input <input
@@ -98,16 +93,17 @@ 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Password Password
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -117,24 +113,25 @@ 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-9 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors" className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-white/40 transition-colors"
> >
{showPassword ? <EyeOff size={15} /> : <Eye size={15} />} {showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
</button> </button>
</div> </div>
</div> </div>
{needs2fa && ( {needs2fa && (
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
2FA Code 2FA Code
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Mail size={15} /> <Mail size={15} />
</div> </div>
<input <input
@@ -144,38 +141,43 @@ 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
</div> </div>
</div> </div>
)} )}
</div>
<button <button
type="submit" type="submit"
disabled={pending} disabled={pending}
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" className="w-full flex items-center justify-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98]"
> >
{pending ? ( {pending ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center gap-2">
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none"> <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg> </svg>
{t("pleaseWait")} {t("pleaseWait")}
</span> </span>
) : needs2fa ? t("verify") : t("signIn")} ) : (
<>
<LogIn size={15} />
<span className="uppercase tracking-wider">{needs2fa ? t("verify") : t("signIn")}</span>
<ArrowRight size={15} />
</>
)}
</button> </button>
{/* Divider */} {/* OAuth */}
{!needs2fa && ( {!needs2fa && (
<> <>
<div className="relative my-4"> <div className="relative my-4">
<div className="absolute inset-0 flex items-center"> <div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-white/[0.06]" /> <div className="w-full border-t border-white/[0.04]" />
</div> </div>
<div className="relative flex justify-center text-[10px] uppercase tracking-widest font-black"> <div className="relative flex justify-center text-[10px] uppercase tracking-widest font-medium">
<span className="bg-[#09090b] px-3 text-white/30"> <span className="bg-black/60 px-3 text-white/20">
{t("or")} {t("or")}
</span> </span>
</div> </div>
@@ -185,7 +187,7 @@ export default function LoginPage() {
<button <button
type="button" type="button"
onClick={() => signIn("discord", { callbackUrl: "/" })} onClick={() => signIn("discord", { callbackUrl: "/" })}
className="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10" className="w-full flex items-center justify-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 rounded-md transition-all border border-white/[0.06]"
> >
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"> <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" /> <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
@@ -195,7 +197,7 @@ export default function LoginPage() {
<button <button
type="button" type="button"
onClick={() => signIn("google", { callbackUrl: "/" })} onClick={() => signIn("google", { callbackUrl: "/" })}
className="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10" className="w-full flex items-center justify-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 rounded-md transition-all border border-white/[0.06]"
> >
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"> <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" /> <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
@@ -210,13 +212,13 @@ 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-xs text-white/30">
{t("noAccount")}{" "} {t("noAccount")}{" "}
<Link href="/register" className="font-bold text-[#EEB425] hover:underline"> <Link href="/register" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
{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-[#EEB425] hover:underline"> <Link href="/forgot" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
{t("forgotPassword")} {t("forgotPassword")}
</Link> </Link>
</p> </p>
src/components/auth/home-login-form.tsx
+42 -32
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { LogIn, UserPlus, ArrowRight, User, Lock } from "lucide-react"; import { LogIn, ArrowRight, User, Lock } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import { type FormEvent, useState } from "react"; import { type FormEvent, useState } from "react";
@@ -49,29 +49,29 @@ export function HomeLoginForm() {
} }
return ( return (
<form onSubmit={onSubmit} className="w-full flex flex-col justify-center space-y-5"> <form onSubmit={onSubmit} className="w-full space-y-4">
{error && ( {error && (
<div className="rounded-md bg-red-500/10 border border-red-500/20 px-4 py-2.5"> <div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
<p className="text-xs font-bold text-red-400 text-center m-0"> <p className="text-xs font-medium text-red-400 text-center m-0">
{error} {error}
</p> </p>
</div> </div>
)} )}
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Username Username
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<User size={16} /> <User size={15} />
</div> </div>
<input <input
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Username" placeholder="Enter your 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
required required
disabled={needs2fa} disabled={needs2fa}
/> />
@@ -79,19 +79,19 @@ export function HomeLoginForm() {
</div> </div>
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Password Password
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Lock size={16} /> <Lock size={15} />
</div> </div>
<input <input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Enter your 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
required required
disabled={needs2fa} disabled={needs2fa}
/> />
@@ -100,12 +100,12 @@ export function HomeLoginForm() {
{needs2fa && ( {needs2fa && (
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
2FA Code 2FA Code
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Lock size={16} /> <Lock size={15} />
</div> </div>
<input <input
type="text" type="text"
@@ -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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
</div> </div>
</div> </div>
@@ -123,21 +123,31 @@ 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-[#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]" className="w-full flex items-center justify-center gap-2.5 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98]"
> >
<LogIn size={16} /> {pending ? (
<span className="uppercase tracking-widest"> <span className="flex items-center gap-2">
{pending ? "Please wait..." : needs2fa ? "Verify" : "Sign In"} <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
Signing in...
</span> </span>
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" /> ) : (
<>
<LogIn size={15} />
<span className="uppercase tracking-wider">{needs2fa ? "Verify" : "Sign in"}</span>
<ArrowRight size={15} className="group-hover:translate-x-0.5 transition-transform" />
</>
)}
</button> </button>
<div className="pt-5 border-t border-white/5 text-center"> <div className="pt-4 text-center">
<Link href="/register"> <Link
<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"> href="/register"
<UserPlus size={14} className="text-[#EEB425]" /> className="inline-flex items-center gap-1.5 text-xs text-white/30 hover:text-white/50 transition-colors font-medium"
<span>No account yet? Register now</span> >
</div> No account yet? <span className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2">Register here</span>
</Link> </Link>
</div> </div>
</form> </form>
src/components/auth/register-form.tsx
+43 -42
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { Eye, EyeOff, Lock, Mail, User } from "lucide-react"; import { Eye, EyeOff, Lock, Mail, User, ArrowRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useActionState, useState } from "react"; import { useActionState, useState } from "react";
@@ -20,35 +20,31 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
return ( return (
<div className="animate-fade-in"> <div>
<div <div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl p-8">
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-[#EEB425]/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-[#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-[#EEB425]/10 border border-[#EEB425]/20"> <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg 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="#EEB425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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" />
</svg> </svg>
</div> </div>
<h1 className="text-2xl font-black text-white tracking-tight m-0"> <h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
{t("title")} {t("title")}
</h1> </h1>
<p className="mt-1.5 text-sm text-white/40"> <p className="mt-1 text-sm text-white/30">
{t("subtitle", { hotel: hotelName })} {t("subtitle", { hotel: hotelName })}
</p> </p>
</div> </div>
<form action={formAction} className="space-y-5 max-w-md mx-auto"> <form action={formAction} className="space-y-4 max-w-md mx-auto">
{(error || serverError) && ( {(error || serverError) && (
<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3"> <div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
<p className="text-xs font-bold text-red-400 text-center m-0"> <p className="text-xs font-medium text-red-400 text-center m-0">
{error || serverError} {error || serverError}
</p> </p>
</div> </div>
@@ -56,11 +52,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Username Username
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<User size={15} /> <User size={15} />
</div> </div>
<input <input
@@ -69,17 +65,17 @@ 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
required required
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Email Email
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Mail size={15} /> <Mail size={15} />
</div> </div>
<input <input
@@ -88,7 +84,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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
/> />
</div> </div>
</div> </div>
@@ -96,11 +92,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Password Password
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -109,24 +105,24 @@ 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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-9 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
required required
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors" className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-white/40 transition-colors"
> >
{showPassword ? <EyeOff size={15} /> : <Eye size={15} />} {showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
</button> </button>
</div> </div>
</div> </div>
<div> <div>
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1"> <label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
Confirm Confirm
</label> </label>
<div className="relative group"> <div className="relative">
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
<Lock size={15} /> <Lock size={15} />
</div> </div>
<input <input
@@ -135,7 +131,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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium" className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
required required
/> />
</div> </div>
@@ -143,27 +139,27 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
</div> </div>
{/* Terms */} {/* Terms */}
<div className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4"> <div className="flex items-start gap-3 rounded-md border border-white/[0.06] bg-black/40 p-3">
<button <button
type="button" type="button"
role="checkbox" role="checkbox"
aria-checked={termsAccepted} aria-checked={termsAccepted}
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-4 w-4 shrink-0 items-center justify-center rounded border transition-all"
style={{ style={{
borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.15)", borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.1)",
backgroundColor: termsAccepted ? "#EEB425" : "transparent", backgroundColor: termsAccepted ? "#EEB425" : "transparent",
}} }}
> >
{termsAccepted && ( {termsAccepted && (
<svg className="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-2.5 w-2.5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
)} )}
</button> </button>
<input type="hidden" name="terms" value={termsAccepted ? "1" : ""} /> <input type="hidden" name="terms" value={termsAccepted ? "1" : ""} />
<label <label
className="text-sm cursor-pointer select-none text-white/60" className="text-xs cursor-pointer select-none text-white/40"
onClick={() => setTermsAccepted(!termsAccepted)} onClick={() => setTermsAccepted(!termsAccepted)}
> >
{t("termsAccept", { hotel: hotelName })} {t("termsAccept", { hotel: hotelName })}
@@ -185,23 +181,28 @@ 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-[#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" className="w-full flex items-center justify-center gap-2 bg-[#22c55e]/90 hover:bg-[#22c55e] text-white font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98] shadow-lg shadow-[#22c55e]/20"
> >
{isPending ? ( {isPending ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center gap-2">
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none"> <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg> </svg>
{t("creatingAccount")} {t("creatingAccount")}
</span> </span>
) : t("createAccount")} ) : (
<>
<ArrowRight size={15} />
<span className="uppercase tracking-wider">{t("createAccount")}</span>
</>
)}
</button> </button>
<div className="text-center pt-2"> <div className="text-center pt-1">
<p className="text-sm text-white/40"> <p className="text-xs text-white/30">
{t("alreadyHaveAccount")}{" "} {t("alreadyHaveAccount")}{" "}
<Link href="/login" className="font-bold text-[#EEB425] hover:underline"> <Link href="/login" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
{t("signIn")} {t("signIn")}
</Link> </Link>
</p> </p>
src/components/home/guest-view.tsx
+73 -73
View File
@@ -51,45 +51,47 @@ export default async function GuestView() {
} catch {} } catch {}
return ( return (
<div className="flex flex-col items-center gap-8"> <div className="flex flex-col items-center gap-10">
{/* Logo + Online Count */} {/* Logo + Online Count */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-4">
{logo ? ( {logo ? (
<Image <Image
src={logo} src={logo}
alt={hotelName ?? "Hotel"} alt={hotelName ?? "Hotel"}
width={250} width={220}
height={80} height={70}
className="block" className="block"
unoptimized unoptimized
/> />
) : ( ) : (
<h1 className="text-3xl font-black text-white tracking-tight m-0"> <h1 className="text-3xl font-bold text-white tracking-tight m-0">
{hotelName} {hotelName}
</h1> </h1>
)} )}
<div className="flex items-center gap-2 px-4 py-4 border border-[#EEB425]/50 bg-[#EEB425]/20 rounded-md"> <div className="flex items-center gap-2.5 px-3 py-2 border border-[#EEB425]/30 bg-[#EEB425]/10 rounded-md">
<div className="w-2 h-2 bg-[#EEB425] rounded-full animate-pulse" /> <div className="w-2 h-2 bg-[#EEB425] rounded-full animate-pulse shadow-[0_0_6px_#EEB425]" />
<span className="text-white font-black text-xs uppercase tracking-wider"> <span className="text-[#EEB425] font-semibold text-xs uppercase tracking-wider">
{onlineCount} Online {onlineCount} online
</span> </span>
</div> </div>
</div> </div>
{/* Main Card: 900x500 split layout */} {/* Main Card */}
<div className="w-[900px] h-[500px] overflow-hidden rounded-md bg-white/5 backdrop-blur-2xl flex max-w-full"> <div className="w-[900px] h-[500px] overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] flex max-w-full shadow-2xl">
{/* Left: Login Form */} {/* Left: Login Form */}
<div className="w-1/2 flex flex-col justify-center px-10"> <div className="w-1/2 flex flex-col justify-center px-12">
<div className="mb-6 text-center"> <div className="mb-8">
<h2 className="text-xl font-black text-white mb-1.5 tracking-tight uppercase"> <h2 className="text-2xl font-bold text-white/90 tracking-tight m-0">
Sign In Welcome back
</h2> </h2>
<div className="h-1 w-full bg-[#EEB425] rounded-full" /> <p className="text-sm text-white/30 mt-1.5 m-0">
Sign in to continue
</p>
</div> </div>
<HomeLoginForm /> <HomeLoginForm />
</div> </div>
{/* Right: Hotel Image with Overlay */} {/* Right: Visual Panel */}
<div className="w-1/2 relative overflow-hidden"> <div className="w-1/2 relative overflow-hidden">
<Image <Image
src={bannerUrl} src={bannerUrl}
@@ -98,43 +100,46 @@ 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-[#EEB425]/60 via-transparent to-[#EEB425]/60" /> <div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/40 via-black/40 to-[#EEB425]/40" />
<div className="absolute inset-0 bg-black/30" /> <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20" />
<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 gap-4">
<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="w-28 h-28 rounded-lg bg-black/40 border border-white/10 backdrop-blur-xl flex items-center justify-center shadow-2xl">
<div className="text-white/60"> <div className="text-white/30">
<User size={64} strokeWidth={1.5} /> <User size={48} strokeWidth={1.5} />
</div> </div>
</div> </div>
<p className="text-xs text-white/25 font-medium tracking-wide uppercase">
{hotelName}
</p>
</div> </div>
</div> </div>
</div> </div>
{/* Articles + Sidebar */} {/* Articles + Sidebar */}
<div className="w-full max-w-[900px] grid gap-6 lg:grid-cols-3 mt-6"> <div className="w-full max-w-[900px] grid gap-6 lg:grid-cols-3">
{/* Latest News */} {/* Latest News */}
<div className="lg:col-span-2 animate-slide-up"> <div className="lg:col-span-2">
<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-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#EEB425]/10"> <div className="flex h-7 w-7 items-center justify-center rounded-md bg-[#EEB425]/10">
<Newspaper className="h-4 w-4 text-[#EEB425]" /> <Newspaper className="h-3.5 w-3.5 text-[#EEB425]" />
</div> </div>
<h2 className="m-0 text-sm font-black text-white uppercase tracking-wider"> <h2 className="m-0 text-sm font-bold text-white/70 uppercase tracking-wider">
{t("latestNews")} {t("latestNews")}
</h2> </h2>
</div> </div>
<Link <Link
href="/news" href="/news"
className="text-[10px] font-black uppercase tracking-widest text-[#EEB425] hover:underline flex items-center gap-1" className="text-[11px] font-semibold uppercase tracking-widest text-[#EEB425]/70 hover:text-[#EEB425] transition-colors flex items-center gap-1"
> >
View all <ArrowRight className="h-3 w-3" /> View all <ArrowRight className="h-3 w-3" />
</Link> </Link>
</div> </div>
{articles.length === 0 ? ( {articles.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-6 py-16 text-center"> <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-white/[0.06] bg-black/20 px-6 py-16 text-center">
<Newspaper className="mb-3 h-10 w-10 text-white/20" /> <Newspaper className="mb-3 h-8 w-8 text-white/10" />
<p className="text-sm text-white/40 m-0">{t("noArticles")}</p> <p className="text-sm text-white/20 m-0">{t("noArticles")}</p>
</div> </div>
) : ( ) : (
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
@@ -142,7 +147,7 @@ export default async function GuestView() {
<Link <Link
key={a.slug} key={a.slug}
href={`/news/${a.slug}`} href={`/news/${a.slug}`}
className="group relative overflow-hidden rounded-md border border-white/10 bg-white/[0.03] transition-all duration-300 hover:bg-white/[0.06] hover:-translate-y-1" className="group relative overflow-hidden rounded-lg border border-white/[0.06] bg-black/30 transition-all duration-300 hover:bg-black/50 hover:-translate-y-0.5"
style={{ animationDelay: `${i * 100}ms` }} style={{ animationDelay: `${i * 100}ms` }}
> >
<div className="relative aspect-[16/9] overflow-hidden"> <div className="relative aspect-[16/9] overflow-hidden">
@@ -150,16 +155,16 @@ export default async function GuestView() {
src={a.image} src={a.image}
alt={a.title} alt={a.title}
fill fill
className="object-cover transition-all duration-500 group-hover:scale-110" className="object-cover transition-all duration-500 group-hover:scale-105"
unoptimized unoptimized
/> />
<div className="absolute inset-0 bg-gradient-to-t from-[#09090b] via-black/20 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 p-4"> <div className="absolute bottom-0 left-0 right-0 p-4">
<h3 className="m-0 text-base font-bold text-white truncate"> <h3 className="m-0 text-sm font-bold text-white/90 truncate">
{a.title} {a.title}
</h3> </h3>
{a.shortStory && ( {a.shortStory && (
<p className="mt-1 truncate text-xs text-white/60"> <p className="mt-1 truncate text-xs text-white/40">
{excerpt(a.shortStory, 80)} {excerpt(a.shortStory, 80)}
</p> </p>
)} )}
@@ -171,28 +176,28 @@ export default async function GuestView() {
<Link <Link
key={a.slug} key={a.slug}
href={`/news/${a.slug}`} href={`/news/${a.slug}`}
className="group flex items-center gap-3 rounded-md border border-white/10 bg-white/[0.03] p-3 transition-all duration-200 hover:bg-white/[0.06] hover:-translate-y-0.5" className="group flex items-center gap-3 rounded-lg border border-white/[0.06] bg-black/30 p-3 transition-all duration-200 hover:bg-black/50"
> >
<div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-md"> <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-md">
<Image <Image
src={a.image} src={a.image}
alt={a.title} alt={a.title}
fill fill
className="object-cover transition-all duration-300 group-hover:scale-110" className="object-cover transition-all duration-300 group-hover:scale-105"
unoptimized unoptimized
/> />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h4 className="m-0 text-sm font-bold text-white truncate"> <h4 className="m-0 text-sm font-semibold text-white/80 truncate">
{a.title} {a.title}
</h4> </h4>
{a.shortStory && ( {a.shortStory && (
<p className="m-0 mt-0.5 truncate text-xs text-white/40"> <p className="m-0 mt-0.5 truncate text-xs text-white/30">
{excerpt(a.shortStory, 60)} {excerpt(a.shortStory, 60)}
</p> </p>
)} )}
</div> </div>
<ArrowRight className="h-4 w-4 shrink-0 text-white/20 opacity-0 -translate-x-2 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" /> <ArrowRight className="h-3.5 w-3.5 shrink-0 text-white/10" />
</Link> </Link>
))} ))}
</div> </div>
@@ -200,40 +205,37 @@ export default async function GuestView() {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div <div className="space-y-6">
className="animate-slide-up space-y-6"
style={{ animationDelay: "150ms" }}
>
{/* Recent Users */} {/* Recent Users */}
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<div className="rounded-md border border-white/10 bg-white/[0.03] overflow-hidden"> <div className="rounded-lg border border-white/[0.06] bg-black/30 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-4 py-3 border-b border-white/[0.04]">
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#EEB425]/10"> <div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
<Users className="h-3.5 w-3.5 text-[#EEB425]" /> <Users className="h-3 w-3 text-[#EEB425]" />
</div> </div>
<h3 className="m-0 text-[11px] font-black text-white uppercase tracking-wider"> <h3 className="m-0 text-xs font-bold text-white/60 uppercase tracking-wider">
Recent Users Recent Users
</h3> </h3>
</div> </div>
<div className="grid grid-cols-4 gap-2 p-4"> <div className="grid grid-cols-4 gap-2 p-3">
{recentUsers.map((u) => ( {recentUsers.map((u) => (
<Link <Link
key={u.username} key={u.username}
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"
> >
<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"> <div className="relative h-12 w-12 overflow-hidden rounded-md border border-white/[0.04] bg-black/40 transition-all duration-200 group-hover:border-[#EEB425]/20">
<Image <Image
src={avatarImageUrl(imager, u.look, { src={avatarImageUrl(imager, u.look, {
headOnly: true, headOnly: true,
direction: 3, direction: 3,
})} })}
alt={u.username} alt={u.username}
width={56} width={48}
height={70} height={60}
style={{ style={{
position: "absolute", position: "absolute",
top: "-8px", top: "-6px",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
maxWidth: "none", maxWidth: "none",
@@ -241,7 +243,7 @@ export default async function GuestView() {
unoptimized unoptimized
/> />
</div> </div>
<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#09090b] px-2 py-0.5 text-[0.55rem] font-bold text-white/60 opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100 border border-white/10"> <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black/80 px-1.5 py-0.5 text-[0.5rem] font-medium text-white/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
{u.username} {u.username}
</span> </span>
</Link> </Link>
@@ -250,17 +252,15 @@ export default async function GuestView() {
</div> </div>
)} )}
{/* Quick Register CTA */} {/* 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-lg border border-white/[0.06] bg-black/30 px-5 py-6 text-center transition-all duration-300 hover:bg-black/50">
<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-[#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-[#EEB425]/10"> <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-lg bg-[#EEB425]/10 mb-3">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="18"
height="20" height="18"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="#EEB425" stroke="#EEB425"
@@ -273,14 +273,14 @@ export default async function GuestView() {
<line x1="15" x2="3" y1="12" y2="12" /> <line x1="15" x2="3" y1="12" y2="12" />
</svg> </svg>
</div> </div>
<h3 className="mt-4 text-lg font-black text-white"> <h3 className="text-base font-bold text-white/80">
Join {hotelName} Today Join {hotelName}
</h3> </h3>
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-white/30">
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-[#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"> <div className="mt-4 inline-flex items-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-xs py-2.5 px-5 rounded-md transition-all active:scale-95 uppercase tracking-wider">
Register Now <ArrowRight className="h-3.5 w-3.5" /> Register <ArrowRight className="h-3 w-3" />
</div> </div>
</div> </div>
</div> </div>
src/components/home/user-view.tsx
+47 -54
View File
@@ -57,51 +57,48 @@ export default async function UserView({
<div className="flex flex-col gap-6 lg:flex-row"> <div className="flex flex-col gap-6 lg:flex-row">
{/* Main Content */} {/* Main Content */}
<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 */} {/* Welcome Banner */}
<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl"> <div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl">
<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/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-[#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">
<div className="rounded-2xl bg-white/5 border border-white/10 p-1 shadow-lg"> <div className="rounded-lg bg-black/40 border border-white/[0.06] p-1">
<Image <Image
src={avatarImageUrl(imager, look, { size: "l", direction: 2 })} src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
alt={username} alt={username}
width={120} width={100}
height={200} height={160}
className="block drop-shadow-xl" className="block"
style={{ imageRendering: "pixelated" }} style={{ imageRendering: "pixelated" }}
unoptimized unoptimized
/> />
</div> </div>
<div className="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-full bg-green-500 shadow-lg ring-2 ring-[#09090b]"> <div className="absolute -bottom-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-[#22c55e] ring-2 ring-black/60">
<span className="h-3 w-3 rounded-full bg-green-200 animate-ping absolute" /> <span className="h-2 w-2 rounded-full bg-white" />
<span className="h-3 w-3 rounded-full bg-white relative" />
</div> </div>
</div> </div>
</div> </div>
<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"> <p className="text-xs text-white/30 uppercase tracking-widest font-medium mb-1">
Welcome back,{" "} Welcome back
<span className="text-[#EEB425]">{username}</span> </p>
<h1 className="m-0 text-2xl font-bold text-white/90 tracking-tight">
{username}
</h1> </h1>
<p className="mt-1 text-sm text-white/50"> <p className="mt-1 text-sm text-white/40">
{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-5 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-[#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"> <div className="inline-flex items-center gap-2 bg-[#22c55e]/90 hover:bg-[#22c55e] text-white font-semibold text-sm py-2.5 px-5 rounded-md transition-all active:scale-[0.98] shadow-lg shadow-[#22c55e]/20">
<Gamepad2 size={15} /> <Gamepad2 size={15} />
{t("enterHotel", { hotelName })} {t("enterHotel", { hotelName })}
<ArrowRight <ArrowRight size={14} />
size={14}
className="transition-transform group-hover:translate-x-0.5"
/>
</div> </div>
</Link> </Link>
<Link href={`/u/${username}`}> <Link href={`/u/${username}`}>
<div className="inline-flex items-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 px-6 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10"> <div className="inline-flex items-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 px-5 rounded-md transition-all border border-white/[0.06]">
View Profile View Profile
</div> </div>
</Link> </Link>
@@ -110,21 +107,21 @@ export default async function UserView({
</div> </div>
</div> </div>
{/* Online Friends Bar */} {/* Online Friends */}
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-1"> <div className="rounded-lg border border-white/[0.06] bg-black/30 p-3">
<div className="flex flex-col gap-2 lg:flex-row lg:items-center"> <div className="flex flex-col gap-3 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-1">
<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-[#EEB425] opacity-80" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#EEB425] opacity-60" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-[#EEB425]" /> <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-xs font-medium uppercase tracking-wider text-white/40">
{t("onlineFriends")} {t("onlineFriends")}
</span> </span>
</div> </div>
<div className="flex flex-wrap items-center gap-2 px-3 py-1"> <div className="flex flex-wrap items-center gap-2">
{onlineFriends.length === 0 ? ( {onlineFriends.length === 0 ? (
<p className="m-0 text-xs font-medium text-white/40"> <p className="m-0 text-xs text-white/25">
{t("noFriendsOnline")} {t("noFriendsOnline")}
</p> </p>
) : ( ) : (
@@ -132,22 +129,19 @@ export default async function UserView({
<Link <Link
key={f.username} key={f.username}
href={`/u/${f.username}`} href={`/u/${f.username}`}
className="group relative transition-all duration-200 hover:scale-110" className="group relative"
> >
<div className="overflow-hidden rounded-xl border-2 border-transparent bg-white/5 transition-all group-hover:border-[#EEB425]/30"> <div className="overflow-hidden rounded-md border border-white/[0.04] bg-black/40 transition-all group-hover:border-[#EEB425]/20">
<Image <Image
src={avatarImageUrl(imager, f.look, { headOnly: true })} src={avatarImageUrl(imager, f.look, { headOnly: true })}
alt={f.username} alt={f.username}
width={36} width={32}
height={36} height={32}
className="block" className="block"
title={f.username} title={f.username}
unoptimized unoptimized
/> />
</div> </div>
<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#09090b] px-2 py-0.5 text-[0.5rem] font-bold text-white/60 opacity-0 shadow-lg transition-all group-hover:opacity-100 border border-white/10">
{f.username}
</span>
</Link> </Link>
)) ))
)} )}
@@ -159,12 +153,12 @@ export default async function UserView({
{/* Sidebar */} {/* Sidebar */}
<div className="flex w-full flex-col gap-6 lg:w-1/4"> <div className="flex w-full flex-col gap-6 lg:w-1/4">
{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-lg border border-white/[0.06] bg-black/30 transition-all duration-200 hover:bg-black/50">
<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.04]">
<div className="flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEB425]/10"> <div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
<Newspaper className="h-3 w-3 text-[#EEB425]" /> <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-xs font-bold text-white/60 uppercase tracking-wider">
{t("latestArticle")} {t("latestArticle")}
</h2> </h2>
</div> </div>
@@ -174,21 +168,21 @@ export default async function UserView({
src={latestArticle.image} src={latestArticle.image}
alt={latestArticle.title} alt={latestArticle.title}
fill fill
className="object-cover transition-transform duration-500 group-hover:scale-110" className="object-cover transition-transform duration-500 group-hover:scale-105"
unoptimized unoptimized
/> />
<div className="absolute inset-0 bg-gradient-to-t from-[#09090b] via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" /> <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
</div> </div>
<div className="p-4"> <div className="p-4">
<h3 className="text-sm font-bold text-white leading-tight"> <h3 className="text-sm font-semibold text-white/80 leading-tight">
{latestArticle.title} {latestArticle.title}
</h3> </h3>
{latestArticle.shortStory && ( {latestArticle.shortStory && (
<p className="mt-1.5 text-xs text-white/40 leading-relaxed"> <p className="mt-1.5 text-xs text-white/30 leading-relaxed">
{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-[#EEB425]"> <div className="mt-3 flex items-center gap-1.5 text-[11px] font-medium text-[#EEB425]/70 group-hover:text-[#EEB425] transition-colors">
Read more <ArrowRight size={12} /> Read more <ArrowRight size={12} />
</div> </div>
</div> </div>
@@ -196,13 +190,13 @@ export default async function UserView({
</div> </div>
) : null} ) : null}
{/* Quick Stats */} {/* Quick Info */}
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5 text-center"> <div className="rounded-lg border border-white/[0.06] bg-black/30 p-5 text-center">
<div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#EEB425]/10"> <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-lg bg-[#EEB425]/10 mb-3">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="18"
height="20" height="18"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="#EEB425" stroke="#EEB425"
@@ -215,12 +209,11 @@ export default async function UserView({
<line x1="15" x2="3" y1="12" y2="12" /> <line x1="15" x2="3" y1="12" y2="12" />
</svg> </svg>
</div> </div>
<p className="mt-3 text-sm font-black text-white tracking-wide"> <p className="text-sm font-semibold text-white/70">
Explore the Hotel Explore the Hotel
</p> </p>
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-white/30 leading-relaxed">
Check out the latest news, visit the marketplace, or chat with Check out the latest news, visit the marketplace, or chat with friends
friends!
</p> </p>
</div> </div>
</div> </div>