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

style(landing): polish the public index, login and register screens
Gitea Actions Runner Test / test-job (push) Successful in 1s
Details
CI / check (push) Failing after 26s
Details
CI / tests-unit (push) Skipped
Details
CI / tests-integration (push) Skipped
Details
CI / tests-ui (push) Skipped
Details
CI / preflight (push) Skipped
Details
CI / deploy (push) Skipped
Details

Browse Source 
- add theme-aware helpers: btn-brand, btn-glass-dark, auth-input, auth-label,
  auth-alert, explore-pill, avatar-tile, aurora blobs and a hero scroll cue
- reorder backdrop-filter declarations so the glass blur survives the
  production CSS optimizer in modern Chromium
- hero: aurora glow, frosted recent-users chip, premium CTA buttons and cue
- explore nav: icon pills with hover arrows; features: gradient icon tiles
- stats: single glass panel with column dividers; join CTA: aurora + ring
- auth forms: visible labels, icon inputs, eye/password toggle, gradient
  submit and pill footer links
- auth pages: gradient card frame, aurora accents on the intro panel and
  hover-lift avatar tiles; unified pill-shaped top bar
- drop the hard-coded register banner image in favor of the framed card
This commit is contained in:
openhands committed 2026-10-06 22:00:02 +02:00
1 parent 5b2eb91c5c
commit 57710a7fe3
8 files changed
+879 -521
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+65 -56
View File
@@ -72,6 +72,21 @@ export default async function LoginPage() {
className="absolute inset-0 overflow-hidden"
>
<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
<div
className="aurora-blob -left-16 top-10 h-56 w-56"
style={{
background:
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
}}
/>
<div
className="aurora-blob -right-16 bottom-0 h-56 w-56"
style={{
background:
"color-mix(in srgb, var(--color-accent) 40%, transparent)",
animationDelay: "-8s",
}}
/>
</div>
<div className="relative">
<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
@@ -88,16 +103,24 @@ export default async function LoginPage() {
className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary) 18%, transparent)",
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
background:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
"color-mix(in srgb, var(--color-surface) 72%, transparent)",
color:
"var(--color-primary-readable, var(--color-primary))",
boxShadow:
"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
}}
>
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
<span
className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
style={{ background: "var(--color-primary)" }}
/>
<span
className="relative inline-flex rounded-full h-2 w-2"
style={{ background: "var(--color-primary)" }}
/>
</span>
{t("usersOnline", { count: online })}
</div>
@@ -111,7 +134,7 @@ export default async function LoginPage() {
{t("welcomeBack")}
</h1>
<p
className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
className="text-xs mt-1.5 mx-auto max-w-[220px] leading-relaxed"
style={{ color: "var(--color-text-muted)" }}
>
{t("welcomeBackSub", { hotelName })}
@@ -130,26 +153,19 @@ export default async function LoginPage() {
{recentUsers.map((u) => (
<div
key={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
}}
title={u.username}
className="avatar-tile"
>
<UserAvatarThumbnail
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-lg"
/>
<span
className="w-full truncate text-center text-[9px] font-bold leading-tight"
style={{ color: "var(--color-text-readable)" }}
>
{u.username}
</span>
<div className="relative">
<UserAvatarThumbnail
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-lg"
/>
<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
</div>
<span className="avatar-name">{u.username}</span>
</div>
))}
</div>
@@ -167,13 +183,8 @@ export default async function LoginPage() {
{latestUsers.map((u) => (
<div
key={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
}}
title={u.username}
className="avatar-tile"
>
<UserAvatarThumbnail
figure={u.look}
@@ -181,12 +192,7 @@ export default async function LoginPage() {
options={{ direction: 2 }}
className="rounded-lg"
/>
<span
className="w-full truncate text-center text-[9px] font-bold leading-tight"
style={{ color: "var(--color-text-readable)" }}
>
{u.username}
</span>
<span className="avatar-name">{u.username}</span>
</div>
))}
</div>
@@ -196,26 +202,29 @@ export default async function LoginPage() {
{/* Right: form */}
<div className="flex-1 lg:sticky lg:top-6">
<SurfaceCard
title={t("title")}
icon={ICON_NAV_ME}
bodyClassName="p-6 sm:p-7"
>
<p
className="text-sm mb-6"
style={{ color: "var(--color-text-muted)" }}
<div className="gradient-border">
<SurfaceCard
title={t("title")}
icon={ICON_NAV_ME}
bodyClassName="p-6 sm:p-7"
className="card-glow"
>
{t("subtitle")}
</p>
<LoginForm
captcha={{
provider: cfg.provider,
siteKey: cfg.siteKey || undefined,
field: cfg.field || undefined,
}}
nonce={nonce}
/>
</SurfaceCard>
<p
className="text-sm mb-6 leading-relaxed"
style={{ color: "var(--color-text-muted)" }}
>
{t("subtitle")}
</p>
<LoginForm
captcha={{
provider: cfg.provider,
siteKey: cfg.siteKey || undefined,
field: cfg.field || undefined,
}}
nonce={nonce}
/>
</SurfaceCard>
</div>
</div>
</div>
</Reveal>
src/app/(site)/page.tsx
+175 -112
View File
@@ -1,4 +1,5 @@
import { count, desc, eq } from "drizzle-orm";
import { ChevronDown } from "lucide-react";
import type { Metadata } from "next";
import { headers } from "next/headers";
import Image from "next/image";
@@ -484,6 +485,29 @@ export default async function Home() {
"linear-gradient(180deg, rgba(8,11,24,0.74) 0%, rgba(8,11,24,0.55) 38%, rgba(8,11,24,0.38) 62%, rgba(8,11,24,0.55) 85%, color-mix(in srgb, var(--color-background) 94%, transparent) 100%)",
}}
/>
{/* Drifting brand-tinted aurora behind the copy */}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 overflow-hidden"
>
<div
className="aurora-blob -left-24 top-1/4 h-[420px] w-[420px]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 35%, transparent)",
opacity: 0.5,
}}
/>
<div
className="aurora-blob -right-24 top-1/3 h-[380px] w-[380px]"
style={{
background:
"color-mix(in srgb, var(--color-accent) 32%, transparent)",
animationDelay: "-7s",
opacity: 0.45,
}}
/>
</div>
<div
aria-hidden="true"
className="brand-halo left-1/2 top-1/2 h-[420px] w-[720px] max-w-full -translate-x-1/2 -translate-y-1/2"
@@ -553,7 +577,15 @@ export default async function Home() {
</p>
{recentUsers !== null && recentUsers.length > 0 && (
<div className="mt-7 flex items-center justify-center gap-3">
<div
className="mt-7 inline-flex items-center gap-3 rounded-full border px-3 py-1.5"
style={{
background: "rgba(255,255,255,0.08)",
borderColor: "rgba(255,255,255,0.22)",
backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)",
}}
>
<div className="flex -space-x-2.5">
{recentUsers.slice(0, 4).map((u) => (
<UserAvatarThumbnail
@@ -566,8 +598,8 @@ export default async function Home() {
))}
</div>
<span
className="text-[10px] font-extrabold uppercase tracking-[0.22em]"
style={{ color: "rgba(255,255,255,0.72)" }}
className="pr-1 text-[10px] font-extrabold uppercase tracking-[0.22em]"
style={{ color: "rgba(255,255,255,0.75)" }}
>
{tp("recentUsers")}
</span>
@@ -577,14 +609,7 @@ export default async function Home() {
<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
<Link
href="/register"
className="btn-shine inline-flex items-center gap-2.5 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wider transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
style={{
background:
"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
color: "var(--color-primary-foreground)",
boxShadow:
"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, transparent)",
}}
className="btn-brand btn-shine px-8 py-4 text-sm font-black uppercase tracking-wider"
>
<Image
src="/assets/images/EnterHubbly.png"
@@ -597,16 +622,15 @@ export default async function Home() {
</Link>
<Link
href="/login"
className="inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 ease-out hover:-translate-y-1 hover:brightness-110 active:scale-95"
style={{
color: "#fff",
background: "rgba(255,255,255,0.07)",
border: "1px solid rgba(255,255,255,0.24)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
}}
className="btn-glass-dark px-8 py-4 text-sm font-bold"
>
{th("login")} →
{th("login")}
<span
aria-hidden="true"
className="transition-transform duration-300 group-hover:translate-x-1"
>
→
</span>
</Link>
</div>
@@ -633,6 +657,28 @@ export default async function Home() {
</div>
</div>
{/* Scroll cue */}
<div
aria-hidden="true"
className="pointer-events-none absolute bottom-6 left-1/2 hidden -translate-x-1/2 sm:block"
style={{ zIndex: 2 }}
>
<div
className="hero-cue flex h-10 w-10 items-center justify-center rounded-full"
style={{
background: "rgba(255,255,255,0.09)",
border: "1px solid rgba(255,255,255,0.3)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
}}
>
<ChevronDown
className="h-5 w-5"
style={{ color: "rgba(255,255,255,0.88)" }}
/>
</div>
</div>
{/* Floating mascot — decorative, hidden on smaller screens. */}
<div
aria-hidden="true"
@@ -661,26 +707,25 @@ export default async function Home() {
aria-label={tp("exploreLabel")}
className="flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
>
{exploreLinks.map((l) => (
<Link
key={l.href}
href={l.href}
className="group inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-xs font-bold transition-all duration-300 hover:-translate-y-0.5 sm:text-sm"
style={{
background:
"color-mix(in srgb, var(--color-surface) 55%, transparent)",
border:
"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
color: "var(--color-text-readable)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
boxShadow:
"0 2px 8px -2px color-mix(in srgb, #000 8%, transparent)",
}}
>
{exploreLinks.map((l, i) => (
<Link key={l.href} href={l.href} className="explore-pill group">
<span
aria-hidden="true"
className="h-1.5 w-1.5 shrink-0 rounded-full"
style={{
background:
i % 2 === 0
? "var(--color-primary)"
: "var(--color-accent)",
boxShadow: `0 0 8px color-mix(in srgb, ${
i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)"
} 70%, transparent)`,
}}
/>
{l.label}
<span
className="-translate-x-1 text-[10px] opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
aria-hidden="true"
className="pill-arrow text-[11px]"
style={{
color: "var(--color-primary-readable, var(--color-primary))",
}}
@@ -738,8 +783,8 @@ export default async function Home() {
<div
className="relative flex h-12 w-12 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3"
style={{
background: `color-mix(in srgb, ${accentVar} 16%, transparent)`,
boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 22%, transparent)`,
background: `linear-gradient(135deg, color-mix(in srgb, ${accentVar} 30%, transparent), color-mix(in srgb, ${accentVar} 12%, transparent))`,
boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 30%, transparent), 0 8px 18px -10px color-mix(in srgb, ${accentVar} 70%, transparent)`,
borderRadius: 14,
}}
>
@@ -787,64 +832,73 @@ export default async function Home() {
</h2>
</div>
</div>
<div className="grid grid-cols-2 gap-x-4 gap-y-8 lg:grid-cols-4">
{[
{ value: users, label: tp("statsCitizens"), icon: ICON_FRIENDS },
{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
{
value: totalPhotos,
label: tp("statsPhotos"),
icon: ICON_CAMERA,
},
{
value: articles?.length ?? null,
label: tp("statsArticles"),
icon: ICON_ARTICLE,
},
].map((s) => (
<div
key={s.label}
className="group relative flex flex-col items-center gap-2.5 text-center"
>
<div
className="card-hairline overflow-hidden rounded-2xl border"
style={PANEL_STYLE}
>
<div className="grid grid-cols-2 gap-x-4 gap-y-8 p-6 sm:p-8 lg:grid-cols-4">
{[
{
value: users,
label: tp("statsCitizens"),
icon: ICON_FRIENDS,
},
{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
{
value: totalPhotos,
label: tp("statsPhotos"),
icon: ICON_CAMERA,
},
{
value: articles?.length ?? null,
label: tp("statsArticles"),
icon: ICON_ARTICLE,
},
].map((s) => (
<div
className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
style={{
background:
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
boxShadow:
"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent)",
}}
key={s.label}
className="stat-cell group relative flex flex-col items-center gap-2.5 text-center"
>
<Image
src={s.icon}
alt=""
width={20}
height={20}
unoptimized
/>
<div
className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
style={{
background:
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
boxShadow:
"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent)",
}}
>
<Image
src={s.icon}
alt=""
width={20}
height={20}
unoptimized
/>
</div>
<div
className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
style={{ fontVariantNumeric: "tabular-nums" }}
>
{s.value === null ? (
<span className="text-base">{te("unavailable")}</span>
) : (
<AnimatedCounter value={s.value} />
)}
</div>
<span
className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest"
style={{
background:
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
color: "var(--color-text-muted)",
}}
>
{s.label}
</span>
</div>
<div
className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
style={{ fontVariantNumeric: "tabular-nums" }}
>
{s.value === null ? (
<span className="text-base">{te("unavailable")}</span>
) : (
<AnimatedCounter value={s.value} />
)}
</div>
<span
className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest"
style={{
background:
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
color: "var(--color-text-muted)",
}}
>
{s.label}
</span>
</div>
))}
))}
</div>
</div>
</div>
</Reveal>
@@ -1011,6 +1065,28 @@ export default async function Home() {
className="brand-halo left-1/2 top-0 h-72 w-[620px] max-w-full -translate-x-1/2 -translate-y-1/3"
style={{ opacity: 0.6 }}
/>
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 overflow-hidden"
>
<div
className="aurora-blob -left-20 bottom-0 h-72 w-72"
style={{
background:
"color-mix(in srgb, var(--color-accent) 45%, transparent)",
opacity: 0.5,
}}
/>
<div
className="aurora-blob -right-16 top-4 h-64 w-64"
style={{
background:
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
animationDelay: "-6s",
opacity: 0.5,
}}
/>
</div>
<h2
id="join-cta-title"
className="relative text-3xl font-black tracking-tight text-balance sm:text-4xl"
@@ -1027,34 +1103,21 @@ export default async function Home() {
<div className="relative mt-8 flex flex-wrap items-center justify-center gap-3">
<Link
href="/register"
className="btn-shine group inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wide transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
style={{
background:
"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
color: "var(--color-primary-foreground)",
boxShadow:
"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
}}
className="btn-brand btn-shine group px-8 py-4 text-sm font-black uppercase tracking-wide"
>
{tp("ctaJoin")}
<span className="transition-transform duration-300 group-hover:translate-x-0.5">
<span className="transition-transform duration-300 group-hover:translate-x-1">
→
</span>
</Link>
<Link
href="/community"
className="inline-flex items-center rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95"
style={{
color: "#fff",
background: "rgba(255,255,255,0.07)",
border: "1px solid rgba(255,255,255,0.22)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
}}
className="btn-glass-dark px-8 py-4 text-sm font-bold"
>
{tp("browseCommunity")}
</Link>
</div>
<div className="hero-ring" aria-hidden="true" />
</section>
</Reveal>
</div>
src/app/(site)/register/page.tsx
+62 -55
View File
@@ -82,6 +82,21 @@ export default async function RegisterPage() {
className="absolute inset-0 overflow-hidden"
>
<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
<div
className="aurora-blob -left-16 top-6 h-56 w-56"
style={{
background:
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
}}
/>
<div
className="aurora-blob -right-16 bottom-0 h-56 w-56"
style={{
background:
"color-mix(in srgb, var(--color-accent) 40%, transparent)",
animationDelay: "-8s",
}}
/>
</div>
<div className="relative">
<div className="flex items-center gap-4">
@@ -102,16 +117,24 @@ export default async function RegisterPage() {
className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2 border"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary) 18%, transparent)",
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
background:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
"color-mix(in srgb, var(--color-surface) 72%, transparent)",
color:
"var(--color-primary-readable, var(--color-primary))",
boxShadow:
"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
}}
>
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
<span
className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
style={{ background: "var(--color-primary)" }}
/>
<span
className="relative inline-flex rounded-full h-2 w-2"
style={{ background: "var(--color-primary)" }}
/>
</span>
{tpr("usersOnline", { count: online })}
</div>
@@ -148,26 +171,18 @@ export default async function RegisterPage() {
<div
key={u.username}
title={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
}}
className="avatar-tile"
>
<UserAvatarThumbnail
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-lg"
/>
<span
className="w-full truncate text-center text-[9px] font-bold leading-tight"
style={{ color: "var(--color-text-readable)" }}
>
{u.username}
</span>
<div className="relative">
<UserAvatarThumbnail
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-lg"
/>
<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
</div>
<span className="avatar-name">{u.username}</span>
</div>
))}
</div>
@@ -186,13 +201,7 @@ export default async function RegisterPage() {
<div
key={u.username}
title={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
}}
className="avatar-tile"
>
<UserAvatarThumbnail
figure={u.look}
@@ -200,12 +209,7 @@ export default async function RegisterPage() {
options={{ direction: 2 }}
className="rounded-lg"
/>
<span
className="w-full truncate text-center text-[9px] font-bold leading-tight"
style={{ color: "var(--color-text-readable)" }}
>
{u.username}
</span>
<span className="avatar-name">{u.username}</span>
</div>
))}
</div>
@@ -215,26 +219,29 @@ export default async function RegisterPage() {
{/* Right: form */}
<div className="flex-1 lg:sticky lg:top-6">
<SurfaceCard
title={tpr("title")}
icon={ICON_NAV_ME}
bodyClassName="p-6 sm:p-7"
>
<p
className="text-sm mb-6"
style={{ color: "var(--color-text-muted)" }}
<div className="gradient-border">
<SurfaceCard
title={tpr("title")}
icon={ICON_NAV_ME}
bodyClassName="p-6 sm:p-7"
className="card-glow"
>
{tpr("subtitle")}
</p>
<RegisterForm
hotelName={hotelName}
captcha={{
provider: cfg.provider,
siteKey: cfg.siteKey || undefined,
}}
nonce={nonce}
/>
</SurfaceCard>
<p
className="text-sm mb-6 leading-relaxed"
style={{ color: "var(--color-text-muted)" }}
>
{tpr("subtitle")}
</p>
<RegisterForm
hotelName={hotelName}
captcha={{
provider: cfg.provider,
siteKey: cfg.siteKey || undefined,
}}
nonce={nonce}
/>
</SurfaceCard>
</div>
</div>
</div>
</Reveal>
src/app/globals.css
+307 -2
View File
@@ -2162,14 +2162,14 @@ details[open] > summary .details-open\:rotate-180 {
/* Glass morphism */
.glass {
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
}
.glass-strong {
background: color-mix(in srgb, var(--color-surface) 85%, transparent);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
}
@@ -2532,3 +2532,308 @@ html {
letter-spacing: 0.12em;
color: var(--color-text-muted);
}
/* ── Public page polish: buttons ──────────────────────────────────── */
.btn-brand {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 999px;
background: linear-gradient(
120deg,
var(--color-primary) 0%,
color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)) 55%,
color-mix(in srgb, var(--color-accent) 85%, var(--color-primary)) 100%
);
color: var(--color-primary-foreground);
box-shadow:
0 10px 26px -12px color-mix(in srgb, var(--color-primary) 75%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 35%, transparent);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
filter 0.22s ease;
}
.btn-brand:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow:
0 18px 36px -14px color-mix(in srgb, var(--color-primary) 85%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 45%, transparent);
}
.btn-brand:active {
transform: translateY(0) scale(0.985);
}
.btn-brand:focus-visible {
outline: none;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent),
0 14px 32px -14px color-mix(in srgb, var(--color-primary) 80%, transparent);
}
/* Frosted CTA meant to sit on top of the dark hero image. */
.btn-glass-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 999px;
color: #fff;
background: color-mix(in srgb, #ffffff 10%, transparent);
border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 0 color-mix(in srgb, #ffffff 25%, transparent);
transition:
background 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease;
}
.btn-glass-dark:hover {
background: color-mix(in srgb, #ffffff 20%, transparent);
border-color: color-mix(in srgb, #ffffff 60%, transparent);
transform: translateY(-2px);
}
.btn-glass-dark:active {
transform: translateY(0);
}
.btn-glass-dark:focus-visible {
outline: none;
border-color: #fff;
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 55%, transparent);
}
/* ── Public page polish: auth fields ──────────────────────────────── */
.auth-label {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.4rem;
}
.auth-input {
width: 100%;
border-radius: 14px;
border: 1.5px solid
color-mix(in srgb, var(--color-text-muted) 22%, transparent);
background: color-mix(
in srgb,
var(--color-background) 88%,
var(--color-surface)
);
padding: 0.78rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-readable);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.auth-input::placeholder {
color: color-mix(in srgb, var(--color-text-muted) 75%, transparent);
font-weight: 500;
}
.auth-input:hover:not(:disabled):not(:focus) {
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.auth-input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent),
0 0 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.auth-input:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.auth-input.has-icon {
padding-left: 2.75rem;
}
.auth-input.has-action {
padding-right: 2.75rem;
}
/* Alert box used for form errors. */
.auth-alert {
display: flex;
align-items: flex-start;
gap: 0.5rem;
border-radius: 14px;
padding: 0.7rem 0.85rem;
font-size: 0.85rem;
font-weight: 700;
color: color-mix(
in srgb,
var(--color-danger) 85%,
var(--color-text-readable)
);
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-danger) 32%, transparent);
}
/* ── Public page polish: explore pills ────────────────────────────── */
.explore-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.15rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
color: var(--color-text-readable);
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 16%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.explore-pill:hover {
background: color-mix(
in srgb,
var(--color-primary) 16%,
var(--color-surface)
);
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
transform: translateY(-2px);
box-shadow: 0 12px 26px -14px
color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.explore-pill .pill-arrow {
opacity: 0;
transform: translateX(-4px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.explore-pill:hover .pill-arrow {
opacity: 1;
transform: translateX(0);
}
.explore-pill:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 20%, transparent);
}
/* ── Public page polish: avatar tiles ─────────────────────────────── */
.avatar-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.3rem;
border-radius: 14px;
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.avatar-tile:hover {
transform: translateY(-3px);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
box-shadow: 0 12px 24px -14px
color-mix(in srgb, var(--color-primary) 85%, transparent);
}
.avatar-name {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--color-text-muted);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.avatar-tile:hover .avatar-name {
color: var(--color-text-readable);
}
.avatar-online {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-surface);
}
/* ── Public page polish: drifting aurora blobs ────────────────────── */
.aurora-blob {
position: absolute;
border-radius: 999px;
filter: blur(70px);
pointer-events: none;
will-change: transform;
animation: aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
from {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.55;
}
to {
transform: translate3d(30px, -24px, 0) scale(1.15);
opacity: 0.85;
}
}
/* Small bobbing scroll cue at the bottom of the hero. */
.hero-cue {
animation: float 2.4s ease-in-out infinite;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.aurora-blob,
.hero-cue {
animation: none;
}
.btn-brand:hover,
.btn-glass-dark:hover,
.explore-pill:hover,
.avatar-tile:hover {
transform: none;
}
}
/* Dividers between the four counters in the stats panel. */
.stat-cell {
position: relative;
}
@media (min-width: 1024px) {
.stat-cell:not(:first-child)::before {
content: "";
position: absolute;
left: -0.5rem;
top: 18%;
height: 64%;
width: 1px;
background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}
}
@media (max-width: 1023px) {
.stat-cell:nth-child(3)::before {
content: "";
position: absolute;
left: -0.5rem;
top: 10%;
height: 80%;
width: 1px;
background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}
}
src/components/auth/auth-top-bar.tsx
+26 -15
View File
@@ -23,14 +23,14 @@ export function AuthTopBar({
return (
<Reveal>
<div
className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
className="relative flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
style={{
background:
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
backdropFilter: "blur(14px)",
WebkitBackdropFilter: "blur(14px)",
borderColor:
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
boxShadow:
"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
}}
@@ -44,21 +44,32 @@ export function AuthTopBar({
height={28}
className="shrink-0 object-contain"
unoptimized
style={{ maxHeight: 28, width: "auto", height: "auto" }}
style={{ maxHeight: 26, width: "auto", height: "auto" }}
/>
) : (
<Image
src={ICON_LIGHTHOUSE}
alt={hotelName}
width={28}
height={28}
className="shrink-0"
unoptimized
/>
<div
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
style={{
background:
"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
boxShadow:
"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
}}
>
<Image
src={ICON_LIGHTHOUSE}
alt=""
width={18}
height={18}
className="shrink-0"
unoptimized
style={{ filter: "brightness(0) invert(1)" }}
/>
</div>
)}
{showHotelName ? (
<span
className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
style={{ color: "var(--color-text-readable)" }}
>
{hotelName}
@@ -66,10 +77,10 @@ export function AuthTopBar({
) : null}
</div>
<div
className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1 sm:px-2"
style={{
background:
"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
}}
>
<LanguageSwitcher />
src/components/auth/login-form.tsx
+112 -122
View File
@@ -1,5 +1,6 @@
"use client";
import { KeyRound, Lock, UserRound } from "lucide-react";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import { type FormEvent, useId, useState } from "react";
@@ -9,6 +10,7 @@ import {
CaptchaWidget,
readCaptchaToken,
} from "@/components/auth/captcha-widget";
import { PasswordToggle } from "@/components/auth/password-toggle";
import Link from "@/components/link";
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
@@ -49,7 +51,6 @@ export function LoginForm({
const [pending, setPending] = useState(false);
const showFooter = variant === "page";
const labelled = variant === "compact";
const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
async function onSubmit(e: FormEvent<HTMLFormElement>) {
@@ -103,8 +104,14 @@ export function LoginForm({
<>
{needs2fa && (
<p
className="animate-fade-in-up mb-4 text-sm font-semibold"
style={{ color: "var(--color-text-muted)" }}
className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
style={{
color: "var(--color-text-readable)",
background:
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 26%, transparent)",
}}
>
{t("subtitle2fa")}
</p>
@@ -115,113 +122,89 @@ export function LoginForm({
aria-label={t("signIn")}
className="relative flex flex-col gap-4"
>
<div className={labelled ? "space-y-1" : lockCredentials}>
<label
htmlFor={`${fieldId}-username`}
className={
labelled
? "block text-xs font-bold uppercase tracking-wider"
: "sr-only"
}
style={{ color: "var(--color-text-muted)" }}
>
<div className={`space-y-1.5 ${lockCredentials}`}>
<label htmlFor={`${fieldId}-username`} className="auth-label">
{t("username")}
</label>
<input
id={`${fieldId}-username`}
name="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder={t("usernamePlaceholder")}
autoComplete="username"
disabled={needs2fa}
required
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<div className="relative">
<UserRound
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id={`${fieldId}-username`}
name="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder={t("usernamePlaceholder")}
autoComplete="username"
disabled={needs2fa}
required
className="auth-input has-icon"
/>
</div>
</div>
<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
<label
htmlFor={`${fieldId}-password`}
className={
labelled
? "block text-xs font-bold uppercase tracking-wider"
: "sr-only"
}
style={{ color: "var(--color-text-muted)" }}
>
<div className={`space-y-1.5 ${lockCredentials}`}>
<label htmlFor={`${fieldId}-password`} className="auth-label">
{t("password")}
</label>
<input
id={`${fieldId}-password`}
name="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t("passwordPlaceholder")}
autoComplete="current-password"
disabled={needs2fa}
required
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
aria-label={showPassword ? t("hidePassword") : t("showPassword")}
aria-pressed={showPassword}
>
{showPassword ? t("hidePassword") : t("showPassword")}
</button>
<div className="relative">
<Lock
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id={`${fieldId}-password`}
name="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t("passwordPlaceholder")}
autoComplete="current-password"
disabled={needs2fa}
required
className="auth-input has-icon has-action"
/>
<PasswordToggle
show={showPassword}
onToggle={() => setShowPassword((v) => !v)}
labelShow={t("showPassword")}
labelHide={t("hidePassword")}
/>
</div>
</div>
{needs2fa ? (
<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
<label
htmlFor={`${fieldId}-2fa`}
className={
labelled
? "block text-xs font-bold uppercase tracking-wider"
: "sr-only"
}
style={{ color: "var(--color-text-muted)" }}
>
<div className="animate-scale-in space-y-1.5">
<label htmlFor={`${fieldId}-2fa`} className="auth-label">
{t("codePlaceholder")}
</label>
<input
id={`${fieldId}-2fa`}
name="code"
type="text"
value={code}
onChange={(e) => setCode(e.target.value)}
placeholder={t("codePlaceholder")}
inputMode="numeric"
autoComplete="one-time-code"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor:
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
}}
/>
<div className="relative">
<KeyRound
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-primary)" }}
/>
<input
id={`${fieldId}-2fa`}
name="code"
type="text"
value={code}
onChange={(e) => setCode(e.target.value)}
placeholder={t("codePlaceholder")}
inputMode="numeric"
autoComplete="one-time-code"
className="auth-input has-icon"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
}}
/>
</div>
</div>
) : (
<CaptchaWidget captcha={captcha} nonce={nonce} />
@@ -231,8 +214,7 @@ export function LoginForm({
<p
role="alert"
aria-live="polite"
className="m-0 animate-fade-in-up text-center text-sm font-semibold"
style={{ color: "var(--color-danger)" }}
className="auth-alert animate-fade-in-up m-0"
>
{error}
</p>
@@ -241,13 +223,7 @@ export function LoginForm({
<button
type="submit"
disabled={pending}
className="btn-shine w-full cursor-pointer rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
boxShadow:
"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
}}
className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60"
>
{pending ? (
<span className="inline-flex items-center justify-center gap-2">
@@ -283,27 +259,41 @@ export function LoginForm({
</form>
{showFooter && (
<p
className="mt-6 text-center text-xs"
style={{ color: "var(--color-text-muted)" }}
<div
className="mt-6 space-y-3 border-t pt-5"
style={{
borderColor:
"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
}}
>
{t("noAccount")}{" "}
<Link
href="/register"
className="font-extrabold hover:underline"
style={{ color: "var(--color-primary)" }}
<p
className="text-center text-xs"
style={{ color: "var(--color-text-muted)" }}
>
{t("createOne")}
</Link>{" "}
·{" "}
{t("noAccount")}{" "}
<Link
href="/register"
className="font-extrabold transition-colors hover:underline"
style={{ color: "var(--color-primary)" }}
>
{t("createOne")}
</Link>
</p>
<Link
href="/forgot"
className="font-extrabold hover:underline"
style={{ color: "var(--color-primary)" }}
className="flex items-center justify-center gap-2 rounded-full border px-4 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
style={{
color: "var(--color-primary)",
background:
"color-mix(in srgb, var(--color-primary) 8%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 35%, transparent)",
}}
>
<KeyRound aria-hidden="true" className="h-3.5 w-3.5" />
{t("forgotPassword")}
</Link>
</p>
</div>
)}
</>
);
src/components/auth/password-toggle.tsx
+37
View File
@@ -0,0 +1,37 @@
"use client";
import { Eye, EyeOff } from "lucide-react";
/**
* Round eye-icon button that reveals / hides a password field. Kept separate so
* the login and register forms share one consistent control (and a11y labels).
*/
export function PasswordToggle({
show,
onToggle,
labelShow,
labelHide,
}: {
show: boolean;
onToggle: () => void;
labelShow: string;
labelHide: string;
}) {
return (
<button
type="button"
onClick={onToggle}
aria-label={show ? labelHide : labelShow}
aria-pressed={show}
tabIndex={-1}
className="absolute right-2.5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
style={{ color: "var(--color-text-muted)" }}
>
{show ? (
<EyeOff aria-hidden="true" className="h-4 w-4" />
) : (
<Eye aria-hidden="true" className="h-4 w-4" />
)}
</button>
);
}
src/components/auth/register-form.tsx
+95 -159
View File
@@ -1,6 +1,6 @@
"use client";
import Image from "next/image";
import { Lock, Mail, UserRound } from "lucide-react";
import Script from "next/script";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
@@ -10,6 +10,7 @@ import {
type RegisterState,
register,
} from "@/actions/register";
import { PasswordToggle } from "@/components/auth/password-toggle";
import Link from "@/components/link";
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
@@ -142,56 +143,6 @@ export function RegisterForm({
nonce={nonce}
/>
) : null}
{/* Header Banner */}
<div
className="relative overflow-hidden bg-center bg-cover rounded-t-xl"
style={{
backgroundImage: "url(/assets/images/mybobba_banner.png)",
height: "160px",
}}
>
<div
className="absolute inset-0 z-10"
style={{
background:
"linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)",
}}
/>
<div className="relative flex items-center justify-center w-full h-full z-20">
<div
className="relative animate-float"
style={{ width: "140px", height: "140px" }}
>
<div
className="absolute inset-0 rounded-full overflow-hidden"
style={{ zIndex: -1 }}
>
<div
className="w-full h-full"
style={{
background: "black",
filter: "blur(8px)",
transform: "scale(1.2)",
opacity: 0.6,
}}
/>
</div>
<Image
src="/assets/images/FrankwithBag.gif"
alt=""
fill
className="!static"
style={{
objectFit: "contain",
objectPosition: "center",
width: "100%",
height: "100%",
}}
/>
</div>
</div>
</div>
{/* Form */}
<form
action={(fd) => {
@@ -201,33 +152,27 @@ export function RegisterForm({
};
formAction(fd);
}}
className="p-6 flex flex-col gap-6"
style={{
backgroundColor:
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
borderRadius: "0 0 12px 12px",
}}
className="flex flex-col gap-6"
>
{errorMessage && (
<div
<p
role="alert"
aria-live="polite"
className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-primary-foreground"
style={{ backgroundColor: "var(--color-danger)" }}
className="auth-alert animate-fade-in-up m-0"
>
{errorMessage}
</div>
</p>
)}
{referralCode && (
<div
className="animate-fade-in-up flex items-center gap-2 p-3 rounded-lg text-sm font-semibold"
className="animate-fade-in-up flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm font-semibold"
style={{
backgroundColor:
background:
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
color: "var(--color-primary-readable, var(--color-primary))",
border:
"1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 26%, transparent)",
}}
>
{t("invitedBy", { username: referralCode })}
@@ -257,51 +202,45 @@ export function RegisterForm({
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
<div className="space-y-1.5">
<label
htmlFor="username"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
<label htmlFor="username" className="auth-label">
{t("username")}
</label>
<input
id="username"
name="username"
type="text"
placeholder={t("usernamePlaceholder")}
autoComplete="username"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor:
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<div className="relative">
<UserRound
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id="username"
name="username"
type="text"
placeholder={t("usernamePlaceholder")}
autoComplete="username"
className="auth-input has-icon"
required
/>
</div>
</div>
<div className="space-y-1.5">
<label
htmlFor="mail"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
<label htmlFor="mail" className="auth-label">
{t("email")}
</label>
<input
id="mail"
name="mail"
type="email"
placeholder={t("emailPlaceholder")}
autoComplete="email"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor:
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<div className="relative">
<Mail
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id="mail"
name="mail"
type="email"
placeholder={t("emailPlaceholder")}
autoComplete="email"
className="auth-input has-icon"
/>
</div>
</div>
</div>
</div>
@@ -327,14 +266,15 @@ export function RegisterForm({
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
<div className="space-y-1.5">
<label
htmlFor="password"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
<label htmlFor="password" className="auth-label">
{t("password")}
</label>
<div className="relative">
<Lock
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id="password"
name="password"
@@ -343,28 +283,19 @@ export function RegisterForm({
autoComplete="new-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor:
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
className="auth-input has-icon has-action"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? t("hidePassword") : t("showPassword")}
</button>
<PasswordToggle
show={showPassword}
onToggle={() => setShowPassword((v) => !v)}
labelShow={t("showPassword")}
labelHide={t("hidePassword")}
/>
</div>
{password.length > 0 && (
<div className="animate-fade-in-up space-y-1">
<div className="flex gap-1">
<div className="animate-fade-in-up space-y-1.5 pt-0.5">
<div className="flex gap-1.5">
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
@@ -373,13 +304,17 @@ export function RegisterForm({
backgroundColor:
i <= strength.score
? strength.color
: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
: "color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
boxShadow:
i <= strength.score
? `0 0 8px color-mix(in srgb, ${strength.color} 45%, transparent)`
: undefined,
}}
/>
))}
</div>
<p
className="text-xs font-bold"
className="text-[11px] font-extrabold uppercase tracking-wider"
style={{ color: strength.color }}
>
{strength.label}
@@ -388,38 +323,30 @@ export function RegisterForm({
)}
</div>
<div className="space-y-1.5">
<label
htmlFor="password_confirmation"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
<label htmlFor="password_confirmation" className="auth-label">
{t("confirmPassword")}
</label>
<div className="relative">
<Lock
aria-hidden="true"
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
style={{ color: "var(--color-text-muted)" }}
/>
<input
id="password_confirmation"
name="password_confirmation"
type={showConfirm ? "text" : "password"}
placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor:
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
className="auth-input has-icon has-action"
required
/>
<button
type="button"
onClick={() => setShowConfirm(!showConfirm)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showConfirm ? t("hidePassword") : t("showPassword")}
</button>
<PasswordToggle
show={showConfirm}
onToggle={() => setShowConfirm((v) => !v)}
labelShow={t("showPassword")}
labelHide={t("hidePassword")}
/>
</div>
</div>
</div>
@@ -556,15 +483,13 @@ export function RegisterForm({
});
}
}}
className={`btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60 ${
termsAccepted ? "" : "opacity-70 saturate-[0.85] hover:scale-100"
className={`btn-brand btn-shine w-full py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60 ${
termsAccepted ? "" : "opacity-70 saturate-[0.85]"
}`}
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
boxShadow: termsAccepted
? "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)"
: "0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent)",
? undefined
: "0 4px 14px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
}}
>
{isPending || signingIn ? (
@@ -597,14 +522,25 @@ export function RegisterForm({
)}
</button>
<div className="text-center">
<div
className="border-t pt-4 text-center"
style={{
borderColor:
"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
}}
>
<Link
href="/login"
className="text-sm font-bold hover:underline transition-all"
className="inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
style={{
color: "var(--color-primary-readable, var(--color-primary))",
color: "var(--color-primary)",
background:
"color-mix(in srgb, var(--color-primary) 8%, transparent)",
borderColor:
"color-mix(in srgb, var(--color-primary) 35%, transparent)",
}}
>
<UserRound aria-hidden="true" className="h-3.5 w-3.5" />
{t("alreadyHaveAccount")}
</Link>
</div>