Professional redesign: dark glass, warm tones, muted palette, gold accents
Local Build and Deploy / deploy (push) Successful in 1m0s
Local Build and Deploy / deploy (push) Successful in 1m0s
This commit is contained in:
openhands committed
1 parent
db860a290d
commit
c528afa7b9
6 files changed
+315
-310
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { KeyRound, Mail } from "lucide-react";
|
||||
import { KeyRound, Mail, ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { requestReset } from "@/actions/password-reset";
|
||||
@@ -13,38 +13,36 @@ export default async function ForgotPage({
|
||||
|
||||
return (
|
||||
<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="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 -top-40 -right-40 w-[400px] h-[400px] bg-[#5AB4C6]/5 rounded-full blur-[120px]" />
|
||||
|
||||
<div className="w-full max-w-md">
|
||||
<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-[#EEB425]/5 via-transparent to-transparent" />
|
||||
<div className="relative">
|
||||
<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">
|
||||
<KeyRound className="h-6 w-6 text-[#5AB4C6]" />
|
||||
<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-5 w-5 text-[#EEB425]" />
|
||||
</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")}
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-white/40">
|
||||
<p className="mt-1 text-sm text-white/30">
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{sent ? (
|
||||
<div className="rounded-xl bg-green-500/10 border border-green-500/20 px-4 py-6 text-center">
|
||||
<p className="text-sm font-bold text-green-400 m-0">
|
||||
<div className="rounded-md bg-green-500/10 border border-green-500/20 px-3 py-4 text-center">
|
||||
<p className="text-sm font-medium text-green-400 m-0">
|
||||
{t("sentNotice")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form action={requestReset} className="space-y-4">
|
||||
<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
|
||||
</label>
|
||||
<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="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Mail size={15} />
|
||||
</div>
|
||||
<input
|
||||
@@ -53,21 +51,22 @@ export default async function ForgotPage({
|
||||
placeholder={t("emailPlaceholder")}
|
||||
autoComplete="email"
|
||||
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>
|
||||
<button
|
||||
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")}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-white/40">
|
||||
<Link href="/login" className="font-bold text-[#5AB4C6] hover:underline">
|
||||
<p className="text-sm text-white/30">
|
||||
<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")}
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"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 { signIn } from "next-auth/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -53,129 +53,131 @@ export default function LoginPage() {
|
||||
|
||||
return (
|
||||
<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="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8"
|
||||
>
|
||||
<div className="w-full max-w-md">
|
||||
<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-[#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">
|
||||
{/* Header */}
|
||||
<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">
|
||||
<Lock className="h-6 w-6 text-[#EEB425]" />
|
||||
<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-5 w-5 text-[#EEB425]" />
|
||||
</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")}
|
||||
</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")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3">
|
||||
<p className="text-xs font-bold text-red-400 text-center m-0">
|
||||
<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
|
||||
<p className="text-xs font-medium text-red-400 text-center m-0">
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3.5">
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Username
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
</div>
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
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"
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
|
||||
Username
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<User size={15} />
|
||||
</div>
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
disabled={needs2fa}
|
||||
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>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
</div>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="current-password"
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors"
|
||||
>
|
||||
{showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{needs2fa && (
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
2FA Code
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
</div>
|
||||
<input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder={t("codePlaceholder")}
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="current-password"
|
||||
disabled={needs2fa}
|
||||
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
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
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} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{needs2fa && (
|
||||
<div>
|
||||
<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
|
||||
2FA Code
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Mail size={15} />
|
||||
</div>
|
||||
<input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder={t("codePlaceholder")}
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
autoFocus
|
||||
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>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
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 ? (
|
||||
<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">
|
||||
<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>
|
||||
{t("pleaseWait")}
|
||||
</span>
|
||||
) : needs2fa ? t("verify") : t("signIn")}
|
||||
) : (
|
||||
<>
|
||||
<LogIn size={15} />
|
||||
<span className="uppercase tracking-wider">{needs2fa ? t("verify") : t("signIn")}</span>
|
||||
<ArrowRight size={15} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
{/* OAuth */}
|
||||
{!needs2fa && (
|
||||
<>
|
||||
<div className="relative my-4">
|
||||
<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 className="relative flex justify-center text-[10px] uppercase tracking-widest font-black">
|
||||
<span className="bg-[#09090b] px-3 text-white/30">
|
||||
<div className="relative flex justify-center text-[10px] uppercase tracking-widest font-medium">
|
||||
<span className="bg-black/60 px-3 text-white/20">
|
||||
{t("or")}
|
||||
</span>
|
||||
</div>
|
||||
@@ -185,7 +187,7 @@ export default function LoginPage() {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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
|
||||
type="button"
|
||||
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">
|
||||
<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">
|
||||
<p className="text-sm text-white/40">
|
||||
<p className="text-xs text-white/30">
|
||||
{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")}
|
||||
</Link>
|
||||
<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")}
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"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 { signIn } from "next-auth/react";
|
||||
import { type FormEvent, useState } from "react";
|
||||
@@ -49,29 +49,29 @@ export function HomeLoginForm() {
|
||||
}
|
||||
|
||||
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 && (
|
||||
<div className="rounded-md bg-red-500/10 border border-red-500/20 px-4 py-2.5">
|
||||
<p className="text-xs font-bold text-red-400 text-center m-0">
|
||||
<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
|
||||
<p className="text-xs font-medium text-red-400 text-center m-0">
|
||||
{error}
|
||||
</p>
|
||||
</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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<User size={15} />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
placeholder="Enter your username"
|
||||
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
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
@@ -79,19 +79,19 @@ export function HomeLoginForm() {
|
||||
</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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
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-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
placeholder="Enter your password"
|
||||
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
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
@@ -100,12 +100,12 @@ export function HomeLoginForm() {
|
||||
|
||||
{needs2fa && (
|
||||
<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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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} />
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
@@ -114,7 +114,7 @@ export function HomeLoginForm() {
|
||||
placeholder="Enter your 2FA code"
|
||||
inputMode="numeric"
|
||||
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>
|
||||
@@ -123,21 +123,31 @@ export function HomeLoginForm() {
|
||||
<button
|
||||
type="submit"
|
||||
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} />
|
||||
<span className="uppercase tracking-widest">
|
||||
{pending ? "Please wait..." : needs2fa ? "Verify" : "Sign In"}
|
||||
</span>
|
||||
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
|
||||
{pending ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
||||
<div className="pt-5 border-t border-white/5 text-center">
|
||||
<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">
|
||||
<UserPlus size={14} className="text-[#EEB425]" />
|
||||
<span>No account yet? Register now</span>
|
||||
</div>
|
||||
<div className="pt-4 text-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="inline-flex items-center gap-1.5 text-xs text-white/30 hover:text-white/50 transition-colors font-medium"
|
||||
>
|
||||
No account yet? <span className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2">Register here</span>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"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 { useTranslations } from "next-intl";
|
||||
import { useActionState, useState } from "react";
|
||||
@@ -20,35 +20,31 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="animate-fade-in">
|
||||
<div
|
||||
className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8 md:p-10"
|
||||
>
|
||||
<div>
|
||||
<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-[#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">
|
||||
{/* Header */}
|
||||
<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">
|
||||
<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">
|
||||
<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="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" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
</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")}
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-white/40">
|
||||
<p className="mt-1 text-sm text-white/30">
|
||||
{t("subtitle", { hotel: hotelName })}
|
||||
</p>
|
||||
</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) && (
|
||||
<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3">
|
||||
<p className="text-xs font-bold text-red-400 text-center m-0">
|
||||
<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
|
||||
<p className="text-xs font-medium text-red-400 text-center m-0">
|
||||
{error || serverError}
|
||||
</p>
|
||||
</div>
|
||||
@@ -56,11 +52,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<User size={15} />
|
||||
</div>
|
||||
<input
|
||||
@@ -69,17 +65,17 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
type="text"
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
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
|
||||
/>
|
||||
</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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Mail size={15} />
|
||||
</div>
|
||||
<input
|
||||
@@ -88,7 +84,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
type="email"
|
||||
placeholder={t("emailPlaceholder")}
|
||||
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>
|
||||
@@ -96,11 +92,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
@@ -109,24 +105,24 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
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
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
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} />}
|
||||
</button>
|
||||
</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
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<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="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
@@ -135,7 +131,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
type="password"
|
||||
placeholder={t("confirmPasswordPlaceholder")}
|
||||
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
|
||||
/>
|
||||
</div>
|
||||
@@ -143,27 +139,27 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
type="button"
|
||||
role="checkbox"
|
||||
aria-checked={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={{
|
||||
borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.15)",
|
||||
borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.1)",
|
||||
backgroundColor: termsAccepted ? "#EEB425" : "transparent",
|
||||
}}
|
||||
>
|
||||
{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" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<input type="hidden" name="terms" value={termsAccepted ? "1" : ""} />
|
||||
<label
|
||||
className="text-sm cursor-pointer select-none text-white/60"
|
||||
className="text-xs cursor-pointer select-none text-white/40"
|
||||
onClick={() => setTermsAccepted(!termsAccepted)}
|
||||
>
|
||||
{t("termsAccept", { hotel: hotelName })}
|
||||
@@ -185,23 +181,28 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
<button
|
||||
type="submit"
|
||||
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 ? (
|
||||
<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">
|
||||
<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>
|
||||
{t("creatingAccount")}
|
||||
</span>
|
||||
) : t("createAccount")}
|
||||
) : (
|
||||
<>
|
||||
<ArrowRight size={15} />
|
||||
<span className="uppercase tracking-wider">{t("createAccount")}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="text-center pt-2">
|
||||
<p className="text-sm text-white/40">
|
||||
<div className="text-center pt-1">
|
||||
<p className="text-xs text-white/30">
|
||||
{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")}
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -51,45 +51,47 @@ export default async function GuestView() {
|
||||
} catch {}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<div className="flex flex-col items-center gap-10">
|
||||
{/* Logo + Online Count */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-4">
|
||||
{logo ? (
|
||||
<Image
|
||||
src={logo}
|
||||
alt={hotelName ?? "Hotel"}
|
||||
width={250}
|
||||
height={80}
|
||||
width={220}
|
||||
height={70}
|
||||
className="block"
|
||||
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}
|
||||
</h1>
|
||||
)}
|
||||
<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-[#EEB425] rounded-full animate-pulse" />
|
||||
<span className="text-white font-black text-xs uppercase tracking-wider">
|
||||
{onlineCount} Online
|
||||
<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 shadow-[0_0_6px_#EEB425]" />
|
||||
<span className="text-[#EEB425] font-semibold text-xs uppercase tracking-wider">
|
||||
{onlineCount} online
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Card: 900x500 split layout */}
|
||||
<div className="w-[900px] h-[500px] overflow-hidden rounded-md bg-white/5 backdrop-blur-2xl flex max-w-full">
|
||||
{/* Main Card */}
|
||||
<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 */}
|
||||
<div className="w-1/2 flex flex-col justify-center px-10">
|
||||
<div className="mb-6 text-center">
|
||||
<h2 className="text-xl font-black text-white mb-1.5 tracking-tight uppercase">
|
||||
Sign In
|
||||
<div className="w-1/2 flex flex-col justify-center px-12">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-white/90 tracking-tight m-0">
|
||||
Welcome back
|
||||
</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>
|
||||
<HomeLoginForm />
|
||||
</div>
|
||||
|
||||
{/* Right: Hotel Image with Overlay */}
|
||||
{/* Right: Visual Panel */}
|
||||
<div className="w-1/2 relative overflow-hidden">
|
||||
<Image
|
||||
src={bannerUrl}
|
||||
@@ -98,43 +100,46 @@ export default async function GuestView() {
|
||||
className="object-cover object-center scale-110"
|
||||
unoptimized
|
||||
/>
|
||||
<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 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(238,180,37,0.35)]">
|
||||
<div className="text-white/60">
|
||||
<User size={64} strokeWidth={1.5} />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/40 via-black/40 to-[#EEB425]/40" />
|
||||
<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 gap-4">
|
||||
<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/30">
|
||||
<User size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-white/25 font-medium tracking-wide uppercase">
|
||||
{hotelName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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="flex items-center gap-2.5">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#EEB425]/10">
|
||||
<Newspaper className="h-4 w-4 text-[#EEB425]" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-[#EEB425]/10">
|
||||
<Newspaper className="h-3.5 w-3.5 text-[#EEB425]" />
|
||||
</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")}
|
||||
</h2>
|
||||
</div>
|
||||
<Link
|
||||
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" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{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">
|
||||
<Newspaper className="mb-3 h-10 w-10 text-white/20" />
|
||||
<p className="text-sm text-white/40 m-0">{t("noArticles")}</p>
|
||||
<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-8 w-8 text-white/10" />
|
||||
<p className="text-sm text-white/20 m-0">{t("noArticles")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
@@ -142,7 +147,7 @@ export default async function GuestView() {
|
||||
<Link
|
||||
key={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` }}
|
||||
>
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
@@ -150,16 +155,16 @@ export default async function GuestView() {
|
||||
src={a.image}
|
||||
alt={a.title}
|
||||
fill
|
||||
className="object-cover transition-all duration-500 group-hover:scale-110"
|
||||
className="object-cover transition-all duration-500 group-hover:scale-105"
|
||||
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">
|
||||
<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}
|
||||
</h3>
|
||||
{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)}
|
||||
</p>
|
||||
)}
|
||||
@@ -171,28 +176,28 @@ export default async function GuestView() {
|
||||
<Link
|
||||
key={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
|
||||
src={a.image}
|
||||
alt={a.title}
|
||||
fill
|
||||
className="object-cover transition-all duration-300 group-hover:scale-110"
|
||||
className="object-cover transition-all duration-300 group-hover:scale-105"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<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}
|
||||
</h4>
|
||||
{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)}
|
||||
</p>
|
||||
)}
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
@@ -200,40 +205,37 @@ export default async function GuestView() {
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className="animate-slide-up space-y-6"
|
||||
style={{ animationDelay: "150ms" }}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Recent Users */}
|
||||
{recentUsers.length > 0 && (
|
||||
<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 h-7 w-7 items-center justify-center rounded-lg bg-[#EEB425]/10">
|
||||
<Users className="h-3.5 w-3.5 text-[#EEB425]" />
|
||||
<div className="rounded-lg border border-white/[0.06] bg-black/30 overflow-hidden">
|
||||
<div className="flex items-center gap-2.5 px-4 py-3 border-b border-white/[0.04]">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
|
||||
<Users className="h-3 w-3 text-[#EEB425]" />
|
||||
</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
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 p-4">
|
||||
<div className="grid grid-cols-4 gap-2 p-3">
|
||||
{recentUsers.map((u) => (
|
||||
<Link
|
||||
key={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
|
||||
src={avatarImageUrl(imager, u.look, {
|
||||
headOnly: true,
|
||||
direction: 3,
|
||||
})}
|
||||
alt={u.username}
|
||||
width={56}
|
||||
height={70}
|
||||
width={48}
|
||||
height={60}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-8px",
|
||||
top: "-6px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
maxWidth: "none",
|
||||
@@ -241,7 +243,7 @@ export default async function GuestView() {
|
||||
unoptimized
|
||||
/>
|
||||
</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}
|
||||
</span>
|
||||
</Link>
|
||||
@@ -250,17 +252,15 @@ export default async function GuestView() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Register CTA */}
|
||||
{/* Register CTA */}
|
||||
<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="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 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="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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#EEB425"
|
||||
@@ -273,14 +273,14 @@ export default async function GuestView() {
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mt-4 text-lg font-black text-white">
|
||||
Join {hotelName} Today
|
||||
<h3 className="text-base font-bold text-white/80">
|
||||
Join {hotelName}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-white/40">
|
||||
Create your free account and start your adventure!
|
||||
<p className="mt-1 text-xs text-white/30">
|
||||
Create your free account and start your adventure
|
||||
</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">
|
||||
Register Now <ArrowRight className="h-3.5 w-3.5" />
|
||||
<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 <ArrowRight className="h-3 w-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,51 +57,48 @@ export default async function UserView({
|
||||
<div className="flex flex-col gap-6 lg:flex-row">
|
||||
{/* Main Content */}
|
||||
<div className="flex w-full flex-col gap-6 lg:w-3/4">
|
||||
{/* Hero/Welcome Banner */}
|
||||
<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl">
|
||||
{/* Welcome Banner */}
|
||||
<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 -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="shrink-0">
|
||||
<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
|
||||
src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
|
||||
alt={username}
|
||||
width={120}
|
||||
height={200}
|
||||
className="block drop-shadow-xl"
|
||||
width={100}
|
||||
height={160}
|
||||
className="block"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
unoptimized
|
||||
/>
|
||||
</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]">
|
||||
<span className="h-3 w-3 rounded-full bg-green-200 animate-ping absolute" />
|
||||
<span className="h-3 w-3 rounded-full bg-white relative" />
|
||||
<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-2 w-2 rounded-full bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 text-center md:text-left">
|
||||
<h1 className="m-0 text-2xl font-black tracking-tight text-white">
|
||||
Welcome back,{" "}
|
||||
<span className="text-[#EEB425]">{username}</span>
|
||||
<p className="text-xs text-white/30 uppercase tracking-widest font-medium mb-1">
|
||||
Welcome back
|
||||
</p>
|
||||
<h1 className="m-0 text-2xl font-bold text-white/90 tracking-tight">
|
||||
{username}
|
||||
</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!"}
|
||||
</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">
|
||||
<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} />
|
||||
{t("enterHotel", { hotelName })}
|
||||
<ArrowRight
|
||||
size={14}
|
||||
className="transition-transform group-hover:translate-x-0.5"
|
||||
/>
|
||||
<ArrowRight size={14} />
|
||||
</div>
|
||||
</Link>
|
||||
<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
|
||||
</div>
|
||||
</Link>
|
||||
@@ -110,21 +107,21 @@ export default async function UserView({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Online Friends Bar */}
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-1">
|
||||
<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">
|
||||
{/* Online Friends */}
|
||||
<div className="rounded-lg border border-white/[0.06] bg-black/30 p-3">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
||||
<div className="flex shrink-0 items-center gap-2 px-1">
|
||||
<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]" />
|
||||
</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")}
|
||||
</span>
|
||||
</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 ? (
|
||||
<p className="m-0 text-xs font-medium text-white/40">
|
||||
<p className="m-0 text-xs text-white/25">
|
||||
{t("noFriendsOnline")}
|
||||
</p>
|
||||
) : (
|
||||
@@ -132,22 +129,19 @@ export default async function UserView({
|
||||
<Link
|
||||
key={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
|
||||
src={avatarImageUrl(imager, f.look, { headOnly: true })}
|
||||
alt={f.username}
|
||||
width={36}
|
||||
height={36}
|
||||
width={32}
|
||||
height={32}
|
||||
className="block"
|
||||
title={f.username}
|
||||
unoptimized
|
||||
/>
|
||||
</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>
|
||||
))
|
||||
)}
|
||||
@@ -159,12 +153,12 @@ export default async function UserView({
|
||||
{/* Sidebar */}
|
||||
<div className="flex w-full flex-col gap-6 lg:w-1/4">
|
||||
{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="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-[#EEB425]/10">
|
||||
<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.04]">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
|
||||
<Newspaper className="h-3 w-3 text-[#EEB425]" />
|
||||
</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")}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -174,21 +168,21 @@ export default async function UserView({
|
||||
src={latestArticle.image}
|
||||
alt={latestArticle.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
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 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}
|
||||
</h3>
|
||||
{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)}
|
||||
</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} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,13 +190,13 @@ export default async function UserView({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Quick Stats */}
|
||||
<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-[#EEB425]/10">
|
||||
{/* Quick Info */}
|
||||
<div className="rounded-lg border border-white/[0.06] bg-black/30 p-5 text-center">
|
||||
<div className="mx-auto flex h-9 w-9 items-center justify-center rounded-lg bg-[#EEB425]/10 mb-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#EEB425"
|
||||
@@ -215,12 +209,11 @@ export default async function UserView({
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
</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
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-white/40">
|
||||
Check out the latest news, visit the marketplace, or chat with
|
||||
friends!
|
||||
<p className="mt-1 text-xs text-white/30 leading-relaxed">
|
||||
Check out the latest news, visit the marketplace, or chat with friends
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user