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

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

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

No files matched your search

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