style(landing): polish the public index, login and register screens
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Failing after 26s
CI / tests-unit (push) Skipped
CI / tests-integration (push) Skipped
CI / tests-ui (push) Skipped
CI / preflight (push) Skipped
CI / deploy (push) Skipped
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Failing after 26s
CI / tests-unit (push) Skipped
CI / tests-integration (push) Skipped
CI / tests-ui (push) Skipped
CI / preflight (push) Skipped
CI / deploy (push) Skipped
- 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
1 parent
5b2eb91c5c
commit
57710a7fe3
8 files changed
+879
-521
No files matched your search
@@ -72,6 +72,21 @@ export default async function LoginPage() {
|
|||||||
className="absolute inset-0 overflow-hidden"
|
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="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>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
|
<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"
|
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={{
|
style={{
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
"color-mix(in srgb, var(--color-surface) 72%, transparent)",
|
||||||
color:
|
color:
|
||||||
"var(--color-primary-readable, var(--color-primary))",
|
"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="relative flex h-2 w-2">
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
|
<span
|
||||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
|
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>
|
</span>
|
||||||
{t("usersOnline", { count: online })}
|
{t("usersOnline", { count: online })}
|
||||||
</div>
|
</div>
|
||||||
@@ -111,7 +134,7 @@ export default async function LoginPage() {
|
|||||||
{t("welcomeBack")}
|
{t("welcomeBack")}
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<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)" }}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
>
|
>
|
||||||
{t("welcomeBackSub", { hotelName })}
|
{t("welcomeBackSub", { hotelName })}
|
||||||
@@ -130,26 +153,19 @@ export default async function LoginPage() {
|
|||||||
{recentUsers.map((u) => (
|
{recentUsers.map((u) => (
|
||||||
<div
|
<div
|
||||||
key={u.username}
|
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)]"
|
title={u.username}
|
||||||
style={{
|
className="avatar-tile"
|
||||||
background:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<UserAvatarThumbnail
|
<div className="relative">
|
||||||
figure={u.look}
|
<UserAvatarThumbnail
|
||||||
alt=""
|
figure={u.look}
|
||||||
options={{ direction: 2 }}
|
alt=""
|
||||||
className="rounded-lg"
|
options={{ direction: 2 }}
|
||||||
/>
|
className="rounded-lg"
|
||||||
<span
|
/>
|
||||||
className="w-full truncate text-center text-[9px] font-bold leading-tight"
|
<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
|
||||||
style={{ color: "var(--color-text-readable)" }}
|
</div>
|
||||||
>
|
<span className="avatar-name">{u.username}</span>
|
||||||
{u.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -167,13 +183,8 @@ export default async function LoginPage() {
|
|||||||
{latestUsers.map((u) => (
|
{latestUsers.map((u) => (
|
||||||
<div
|
<div
|
||||||
key={u.username}
|
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)]"
|
title={u.username}
|
||||||
style={{
|
className="avatar-tile"
|
||||||
background:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<UserAvatarThumbnail
|
<UserAvatarThumbnail
|
||||||
figure={u.look}
|
figure={u.look}
|
||||||
@@ -181,12 +192,7 @@ export default async function LoginPage() {
|
|||||||
options={{ direction: 2 }}
|
options={{ direction: 2 }}
|
||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
/>
|
/>
|
||||||
<span
|
<span className="avatar-name">{u.username}</span>
|
||||||
className="w-full truncate text-center text-[9px] font-bold leading-tight"
|
|
||||||
style={{ color: "var(--color-text-readable)" }}
|
|
||||||
>
|
|
||||||
{u.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -196,26 +202,29 @@ export default async function LoginPage() {
|
|||||||
|
|
||||||
{/* Right: form */}
|
{/* Right: form */}
|
||||||
<div className="flex-1 lg:sticky lg:top-6">
|
<div className="flex-1 lg:sticky lg:top-6">
|
||||||
<SurfaceCard
|
<div className="gradient-border">
|
||||||
title={t("title")}
|
<SurfaceCard
|
||||||
icon={ICON_NAV_ME}
|
title={t("title")}
|
||||||
bodyClassName="p-6 sm:p-7"
|
icon={ICON_NAV_ME}
|
||||||
>
|
bodyClassName="p-6 sm:p-7"
|
||||||
<p
|
className="card-glow"
|
||||||
className="text-sm mb-6"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
>
|
||||||
{t("subtitle")}
|
<p
|
||||||
</p>
|
className="text-sm mb-6 leading-relaxed"
|
||||||
<LoginForm
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
captcha={{
|
>
|
||||||
provider: cfg.provider,
|
{t("subtitle")}
|
||||||
siteKey: cfg.siteKey || undefined,
|
</p>
|
||||||
field: cfg.field || undefined,
|
<LoginForm
|
||||||
}}
|
captcha={{
|
||||||
nonce={nonce}
|
provider: cfg.provider,
|
||||||
/>
|
siteKey: cfg.siteKey || undefined,
|
||||||
</SurfaceCard>
|
field: cfg.field || undefined,
|
||||||
|
}}
|
||||||
|
nonce={nonce}
|
||||||
|
/>
|
||||||
|
</SurfaceCard>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|||||||
+175
-112
@@ -1,4 +1,5 @@
|
|||||||
import { count, desc, eq } from "drizzle-orm";
|
import { count, desc, eq } from "drizzle-orm";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { headers } from "next/headers";
|
import { headers } from "next/headers";
|
||||||
import Image from "next/image";
|
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%)",
|
"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
|
<div
|
||||||
aria-hidden="true"
|
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"
|
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>
|
</p>
|
||||||
|
|
||||||
{recentUsers !== null && recentUsers.length > 0 && (
|
{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">
|
<div className="flex -space-x-2.5">
|
||||||
{recentUsers.slice(0, 4).map((u) => (
|
{recentUsers.slice(0, 4).map((u) => (
|
||||||
<UserAvatarThumbnail
|
<UserAvatarThumbnail
|
||||||
@@ -566,8 +598,8 @@ export default async function Home() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className="text-[10px] font-extrabold uppercase tracking-[0.22em]"
|
className="pr-1 text-[10px] font-extrabold uppercase tracking-[0.22em]"
|
||||||
style={{ color: "rgba(255,255,255,0.72)" }}
|
style={{ color: "rgba(255,255,255,0.75)" }}
|
||||||
>
|
>
|
||||||
{tp("recentUsers")}
|
{tp("recentUsers")}
|
||||||
</span>
|
</span>
|
||||||
@@ -577,14 +609,7 @@ export default async function Home() {
|
|||||||
<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
|
<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
|
||||||
<Link
|
<Link
|
||||||
href="/register"
|
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"
|
className="btn-brand btn-shine px-8 py-4 text-sm font-black uppercase tracking-wider"
|
||||||
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)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/assets/images/EnterHubbly.png"
|
src="/assets/images/EnterHubbly.png"
|
||||||
@@ -597,16 +622,15 @@ export default async function Home() {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/login"
|
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"
|
className="btn-glass-dark px-8 py-4 text-sm font-bold"
|
||||||
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)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{th("login")} →
|
{th("login")}
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
className="transition-transform duration-300 group-hover:translate-x-1"
|
||||||
|
>
|
||||||
|
→
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -633,6 +657,28 @@ export default async function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</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. */}
|
{/* Floating mascot — decorative, hidden on smaller screens. */}
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
@@ -661,26 +707,25 @@ export default async function Home() {
|
|||||||
aria-label={tp("exploreLabel")}
|
aria-label={tp("exploreLabel")}
|
||||||
className="flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
|
className="flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
|
||||||
>
|
>
|
||||||
{exploreLinks.map((l) => (
|
{exploreLinks.map((l, i) => (
|
||||||
<Link
|
<Link key={l.href} href={l.href} className="explore-pill group">
|
||||||
key={l.href}
|
<span
|
||||||
href={l.href}
|
aria-hidden="true"
|
||||||
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"
|
className="h-1.5 w-1.5 shrink-0 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-surface) 55%, transparent)",
|
i % 2 === 0
|
||||||
border:
|
? "var(--color-primary)"
|
||||||
"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
: "var(--color-accent)",
|
||||||
color: "var(--color-text-readable)",
|
boxShadow: `0 0 8px color-mix(in srgb, ${
|
||||||
backdropFilter: "blur(10px)",
|
i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)"
|
||||||
WebkitBackdropFilter: "blur(10px)",
|
} 70%, transparent)`,
|
||||||
boxShadow:
|
}}
|
||||||
"0 2px 8px -2px color-mix(in srgb, #000 8%, transparent)",
|
/>
|
||||||
}}
|
|
||||||
>
|
|
||||||
{l.label}
|
{l.label}
|
||||||
<span
|
<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={{
|
style={{
|
||||||
color: "var(--color-primary-readable, var(--color-primary))",
|
color: "var(--color-primary-readable, var(--color-primary))",
|
||||||
}}
|
}}
|
||||||
@@ -738,8 +783,8 @@ export default async function Home() {
|
|||||||
<div
|
<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"
|
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={{
|
style={{
|
||||||
background: `color-mix(in srgb, ${accentVar} 16%, 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} 22%, 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,
|
borderRadius: 14,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -787,64 +832,73 @@ export default async function Home() {
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-8 lg:grid-cols-4">
|
<div
|
||||||
{[
|
className="card-hairline overflow-hidden rounded-2xl border"
|
||||||
{ value: users, label: tp("statsCitizens"), icon: ICON_FRIENDS },
|
style={PANEL_STYLE}
|
||||||
{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
|
>
|
||||||
{
|
<div className="grid grid-cols-2 gap-x-4 gap-y-8 p-6 sm:p-8 lg:grid-cols-4">
|
||||||
value: totalPhotos,
|
{[
|
||||||
label: tp("statsPhotos"),
|
{
|
||||||
icon: ICON_CAMERA,
|
value: users,
|
||||||
},
|
label: tp("statsCitizens"),
|
||||||
{
|
icon: ICON_FRIENDS,
|
||||||
value: articles?.length ?? null,
|
},
|
||||||
label: tp("statsArticles"),
|
{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
|
||||||
icon: ICON_ARTICLE,
|
{
|
||||||
},
|
value: totalPhotos,
|
||||||
].map((s) => (
|
label: tp("statsPhotos"),
|
||||||
<div
|
icon: ICON_CAMERA,
|
||||||
key={s.label}
|
},
|
||||||
className="group relative flex flex-col items-center gap-2.5 text-center"
|
{
|
||||||
>
|
value: articles?.length ?? null,
|
||||||
|
label: tp("statsArticles"),
|
||||||
|
icon: ICON_ARTICLE,
|
||||||
|
},
|
||||||
|
].map((s) => (
|
||||||
<div
|
<div
|
||||||
className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
|
key={s.label}
|
||||||
style={{
|
className="stat-cell group relative flex flex-col items-center gap-2.5 text-center"
|
||||||
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
|
<div
|
||||||
src={s.icon}
|
className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
|
||||||
alt=""
|
style={{
|
||||||
width={20}
|
background:
|
||||||
height={20}
|
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||||
unoptimized
|
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>
|
||||||
<div
|
))}
|
||||||
className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
|
</div>
|
||||||
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>
|
</div>
|
||||||
</Reveal>
|
</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"
|
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 }}
|
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
|
<h2
|
||||||
id="join-cta-title"
|
id="join-cta-title"
|
||||||
className="relative text-3xl font-black tracking-tight text-balance sm:text-4xl"
|
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">
|
<div className="relative mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||||
<Link
|
<Link
|
||||||
href="/register"
|
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"
|
className="btn-brand btn-shine group px-8 py-4 text-sm font-black uppercase tracking-wide"
|
||||||
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)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{tp("ctaJoin")}
|
{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>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/community"
|
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"
|
className="btn-glass-dark px-8 py-4 text-sm font-bold"
|
||||||
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)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{tp("browseCommunity")}
|
{tp("browseCommunity")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="hero-ring" aria-hidden="true" />
|
||||||
</section>
|
</section>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -82,6 +82,21 @@ export default async function RegisterPage() {
|
|||||||
className="absolute inset-0 overflow-hidden"
|
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="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>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="flex items-center gap-4">
|
<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"
|
className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2 border"
|
||||||
style={{
|
style={{
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
"color-mix(in srgb, var(--color-surface) 72%, transparent)",
|
||||||
color:
|
color:
|
||||||
"var(--color-primary-readable, var(--color-primary))",
|
"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="relative flex h-2 w-2">
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
|
<span
|
||||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
|
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>
|
</span>
|
||||||
{tpr("usersOnline", { count: online })}
|
{tpr("usersOnline", { count: online })}
|
||||||
</div>
|
</div>
|
||||||
@@ -148,26 +171,18 @@ export default async function RegisterPage() {
|
|||||||
<div
|
<div
|
||||||
key={u.username}
|
key={u.username}
|
||||||
title={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)]"
|
className="avatar-tile"
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<UserAvatarThumbnail
|
<div className="relative">
|
||||||
figure={u.look}
|
<UserAvatarThumbnail
|
||||||
alt=""
|
figure={u.look}
|
||||||
options={{ direction: 2 }}
|
alt=""
|
||||||
className="rounded-lg"
|
options={{ direction: 2 }}
|
||||||
/>
|
className="rounded-lg"
|
||||||
<span
|
/>
|
||||||
className="w-full truncate text-center text-[9px] font-bold leading-tight"
|
<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
|
||||||
style={{ color: "var(--color-text-readable)" }}
|
</div>
|
||||||
>
|
<span className="avatar-name">{u.username}</span>
|
||||||
{u.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -186,13 +201,7 @@ export default async function RegisterPage() {
|
|||||||
<div
|
<div
|
||||||
key={u.username}
|
key={u.username}
|
||||||
title={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)]"
|
className="avatar-tile"
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<UserAvatarThumbnail
|
<UserAvatarThumbnail
|
||||||
figure={u.look}
|
figure={u.look}
|
||||||
@@ -200,12 +209,7 @@ export default async function RegisterPage() {
|
|||||||
options={{ direction: 2 }}
|
options={{ direction: 2 }}
|
||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
/>
|
/>
|
||||||
<span
|
<span className="avatar-name">{u.username}</span>
|
||||||
className="w-full truncate text-center text-[9px] font-bold leading-tight"
|
|
||||||
style={{ color: "var(--color-text-readable)" }}
|
|
||||||
>
|
|
||||||
{u.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -215,26 +219,29 @@ export default async function RegisterPage() {
|
|||||||
|
|
||||||
{/* Right: form */}
|
{/* Right: form */}
|
||||||
<div className="flex-1 lg:sticky lg:top-6">
|
<div className="flex-1 lg:sticky lg:top-6">
|
||||||
<SurfaceCard
|
<div className="gradient-border">
|
||||||
title={tpr("title")}
|
<SurfaceCard
|
||||||
icon={ICON_NAV_ME}
|
title={tpr("title")}
|
||||||
bodyClassName="p-6 sm:p-7"
|
icon={ICON_NAV_ME}
|
||||||
>
|
bodyClassName="p-6 sm:p-7"
|
||||||
<p
|
className="card-glow"
|
||||||
className="text-sm mb-6"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
>
|
||||||
{tpr("subtitle")}
|
<p
|
||||||
</p>
|
className="text-sm mb-6 leading-relaxed"
|
||||||
<RegisterForm
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
hotelName={hotelName}
|
>
|
||||||
captcha={{
|
{tpr("subtitle")}
|
||||||
provider: cfg.provider,
|
</p>
|
||||||
siteKey: cfg.siteKey || undefined,
|
<RegisterForm
|
||||||
}}
|
hotelName={hotelName}
|
||||||
nonce={nonce}
|
captcha={{
|
||||||
/>
|
provider: cfg.provider,
|
||||||
</SurfaceCard>
|
siteKey: cfg.siteKey || undefined,
|
||||||
|
}}
|
||||||
|
nonce={nonce}
|
||||||
|
/>
|
||||||
|
</SurfaceCard>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|||||||
+307
-2
@@ -2162,14 +2162,14 @@ details[open] > summary .details-open\:rotate-180 {
|
|||||||
/* Glass morphism */
|
/* Glass morphism */
|
||||||
.glass {
|
.glass {
|
||||||
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
|
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-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);
|
border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
|
||||||
}
|
}
|
||||||
.glass-strong {
|
.glass-strong {
|
||||||
background: color-mix(in srgb, var(--color-surface) 85%, transparent);
|
background: color-mix(in srgb, var(--color-surface) 85%, transparent);
|
||||||
backdrop-filter: blur(32px);
|
|
||||||
-webkit-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);
|
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2532,3 +2532,308 @@ html {
|
|||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: var(--color-text-muted);
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -23,14 +23,14 @@ export function AuthTopBar({
|
|||||||
return (
|
return (
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div
|
<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={{
|
style={{
|
||||||
background:
|
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)",
|
backdropFilter: "blur(14px)",
|
||||||
WebkitBackdropFilter: "blur(14px)",
|
WebkitBackdropFilter: "blur(14px)",
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||||
boxShadow:
|
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)",
|
"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}
|
height={28}
|
||||||
className="shrink-0 object-contain"
|
className="shrink-0 object-contain"
|
||||||
unoptimized
|
unoptimized
|
||||||
style={{ maxHeight: 28, width: "auto", height: "auto" }}
|
style={{ maxHeight: 26, width: "auto", height: "auto" }}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Image
|
<div
|
||||||
src={ICON_LIGHTHOUSE}
|
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
|
||||||
alt={hotelName}
|
style={{
|
||||||
width={28}
|
background:
|
||||||
height={28}
|
"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
|
||||||
className="shrink-0"
|
boxShadow:
|
||||||
unoptimized
|
"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 ? (
|
{showHotelName ? (
|
||||||
<span
|
<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)" }}
|
style={{ color: "var(--color-text-readable)" }}
|
||||||
>
|
>
|
||||||
{hotelName}
|
{hotelName}
|
||||||
@@ -66,10 +77,10 @@ export function AuthTopBar({
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<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={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
|
"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
|
|||||||
+112
-122
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { KeyRound, Lock, UserRound } from "lucide-react";
|
||||||
import { signIn } from "next-auth/react";
|
import { signIn } from "next-auth/react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { type FormEvent, useId, useState } from "react";
|
import { type FormEvent, useId, useState } from "react";
|
||||||
@@ -9,6 +10,7 @@ import {
|
|||||||
CaptchaWidget,
|
CaptchaWidget,
|
||||||
readCaptchaToken,
|
readCaptchaToken,
|
||||||
} from "@/components/auth/captcha-widget";
|
} from "@/components/auth/captcha-widget";
|
||||||
|
import { PasswordToggle } from "@/components/auth/password-toggle";
|
||||||
import Link from "@/components/link";
|
import Link from "@/components/link";
|
||||||
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
||||||
|
|
||||||
@@ -49,7 +51,6 @@ export function LoginForm({
|
|||||||
const [pending, setPending] = useState(false);
|
const [pending, setPending] = useState(false);
|
||||||
|
|
||||||
const showFooter = variant === "page";
|
const showFooter = variant === "page";
|
||||||
const labelled = variant === "compact";
|
|
||||||
const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
|
const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
|
||||||
|
|
||||||
async function onSubmit(e: FormEvent<HTMLFormElement>) {
|
async function onSubmit(e: FormEvent<HTMLFormElement>) {
|
||||||
@@ -103,8 +104,14 @@ export function LoginForm({
|
|||||||
<>
|
<>
|
||||||
{needs2fa && (
|
{needs2fa && (
|
||||||
<p
|
<p
|
||||||
className="animate-fade-in-up mb-4 text-sm font-semibold"
|
className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
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")}
|
{t("subtitle2fa")}
|
||||||
</p>
|
</p>
|
||||||
@@ -115,113 +122,89 @@ export function LoginForm({
|
|||||||
aria-label={t("signIn")}
|
aria-label={t("signIn")}
|
||||||
className="relative flex flex-col gap-4"
|
className="relative flex flex-col gap-4"
|
||||||
>
|
>
|
||||||
<div className={labelled ? "space-y-1" : lockCredentials}>
|
<div className={`space-y-1.5 ${lockCredentials}`}>
|
||||||
<label
|
<label htmlFor={`${fieldId}-username`} className="auth-label">
|
||||||
htmlFor={`${fieldId}-username`}
|
|
||||||
className={
|
|
||||||
labelled
|
|
||||||
? "block text-xs font-bold uppercase tracking-wider"
|
|
||||||
: "sr-only"
|
|
||||||
}
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("username")}
|
{t("username")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div className="relative">
|
||||||
id={`${fieldId}-username`}
|
<UserRound
|
||||||
name="username"
|
aria-hidden="true"
|
||||||
type="text"
|
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||||
value={username}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
/>
|
||||||
placeholder={t("usernamePlaceholder")}
|
<input
|
||||||
autoComplete="username"
|
id={`${fieldId}-username`}
|
||||||
disabled={needs2fa}
|
name="username"
|
||||||
required
|
type="text"
|
||||||
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"
|
value={username}
|
||||||
style={{
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
backgroundColor: "var(--color-background)",
|
placeholder={t("usernamePlaceholder")}
|
||||||
color: "var(--color-text-readable)",
|
autoComplete="username"
|
||||||
borderColor: needs2fa
|
disabled={needs2fa}
|
||||||
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
required
|
||||||
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
className="auth-input has-icon"
|
||||||
}}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
|
<div className={`space-y-1.5 ${lockCredentials}`}>
|
||||||
<label
|
<label htmlFor={`${fieldId}-password`} className="auth-label">
|
||||||
htmlFor={`${fieldId}-password`}
|
|
||||||
className={
|
|
||||||
labelled
|
|
||||||
? "block text-xs font-bold uppercase tracking-wider"
|
|
||||||
: "sr-only"
|
|
||||||
}
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("password")}
|
{t("password")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div className="relative">
|
||||||
id={`${fieldId}-password`}
|
<Lock
|
||||||
name="password"
|
aria-hidden="true"
|
||||||
type={showPassword ? "text" : "password"}
|
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||||
value={password}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
/>
|
||||||
placeholder={t("passwordPlaceholder")}
|
<input
|
||||||
autoComplete="current-password"
|
id={`${fieldId}-password`}
|
||||||
disabled={needs2fa}
|
name="password"
|
||||||
required
|
type={showPassword ? "text" : "password"}
|
||||||
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"
|
value={password}
|
||||||
style={{
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
backgroundColor: "var(--color-background)",
|
placeholder={t("passwordPlaceholder")}
|
||||||
color: "var(--color-text-readable)",
|
autoComplete="current-password"
|
||||||
borderColor: needs2fa
|
disabled={needs2fa}
|
||||||
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
required
|
||||||
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
className="auth-input has-icon has-action"
|
||||||
}}
|
/>
|
||||||
/>
|
<PasswordToggle
|
||||||
<button
|
show={showPassword}
|
||||||
type="button"
|
onToggle={() => setShowPassword((v) => !v)}
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
labelShow={t("showPassword")}
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
|
labelHide={t("hidePassword")}
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
/>
|
||||||
tabIndex={-1}
|
</div>
|
||||||
aria-label={showPassword ? t("hidePassword") : t("showPassword")}
|
|
||||||
aria-pressed={showPassword}
|
|
||||||
>
|
|
||||||
{showPassword ? t("hidePassword") : t("showPassword")}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{needs2fa ? (
|
{needs2fa ? (
|
||||||
<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
|
<div className="animate-scale-in space-y-1.5">
|
||||||
<label
|
<label htmlFor={`${fieldId}-2fa`} className="auth-label">
|
||||||
htmlFor={`${fieldId}-2fa`}
|
|
||||||
className={
|
|
||||||
labelled
|
|
||||||
? "block text-xs font-bold uppercase tracking-wider"
|
|
||||||
: "sr-only"
|
|
||||||
}
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("codePlaceholder")}
|
{t("codePlaceholder")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div className="relative">
|
||||||
id={`${fieldId}-2fa`}
|
<KeyRound
|
||||||
name="code"
|
aria-hidden="true"
|
||||||
type="text"
|
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||||
value={code}
|
style={{ color: "var(--color-primary)" }}
|
||||||
onChange={(e) => setCode(e.target.value)}
|
/>
|
||||||
placeholder={t("codePlaceholder")}
|
<input
|
||||||
inputMode="numeric"
|
id={`${fieldId}-2fa`}
|
||||||
autoComplete="one-time-code"
|
name="code"
|
||||||
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
type="text"
|
||||||
style={{
|
value={code}
|
||||||
backgroundColor: "var(--color-background)",
|
onChange={(e) => setCode(e.target.value)}
|
||||||
color: "var(--color-text-readable)",
|
placeholder={t("codePlaceholder")}
|
||||||
borderColor:
|
inputMode="numeric"
|
||||||
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
autoComplete="one-time-code"
|
||||||
}}
|
className="auth-input has-icon"
|
||||||
/>
|
style={{
|
||||||
|
borderColor:
|
||||||
|
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
||||||
@@ -231,8 +214,7 @@ export function LoginForm({
|
|||||||
<p
|
<p
|
||||||
role="alert"
|
role="alert"
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
className="m-0 animate-fade-in-up text-center text-sm font-semibold"
|
className="auth-alert animate-fade-in-up m-0"
|
||||||
style={{ color: "var(--color-danger)" }}
|
|
||||||
>
|
>
|
||||||
{error}
|
{error}
|
||||||
</p>
|
</p>
|
||||||
@@ -241,13 +223,7 @@ export function LoginForm({
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={pending}
|
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"
|
className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider 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)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{pending ? (
|
{pending ? (
|
||||||
<span className="inline-flex items-center justify-center gap-2">
|
<span className="inline-flex items-center justify-center gap-2">
|
||||||
@@ -283,27 +259,41 @@ export function LoginForm({
|
|||||||
</form>
|
</form>
|
||||||
|
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
<p
|
<div
|
||||||
className="mt-6 text-center text-xs"
|
className="mt-6 space-y-3 border-t pt-5"
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
style={{
|
||||||
|
borderColor:
|
||||||
|
"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{t("noAccount")}{" "}
|
<p
|
||||||
<Link
|
className="text-center text-xs"
|
||||||
href="/register"
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
className="font-extrabold hover:underline"
|
|
||||||
style={{ color: "var(--color-primary)" }}
|
|
||||||
>
|
>
|
||||||
{t("createOne")}
|
{t("noAccount")}{" "}
|
||||||
</Link>{" "}
|
<Link
|
||||||
·{" "}
|
href="/register"
|
||||||
|
className="font-extrabold transition-colors hover:underline"
|
||||||
|
style={{ color: "var(--color-primary)" }}
|
||||||
|
>
|
||||||
|
{t("createOne")}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href="/forgot"
|
href="/forgot"
|
||||||
className="font-extrabold hover:underline"
|
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)" }}
|
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")}
|
{t("forgotPassword")}
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Image from "next/image";
|
import { Lock, Mail, UserRound } from "lucide-react";
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
import { signIn } from "next-auth/react";
|
import { signIn } from "next-auth/react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
type RegisterState,
|
type RegisterState,
|
||||||
register,
|
register,
|
||||||
} from "@/actions/register";
|
} from "@/actions/register";
|
||||||
|
import { PasswordToggle } from "@/components/auth/password-toggle";
|
||||||
import Link from "@/components/link";
|
import Link from "@/components/link";
|
||||||
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
||||||
|
|
||||||
@@ -142,56 +143,6 @@ export function RegisterForm({
|
|||||||
nonce={nonce}
|
nonce={nonce}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : 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 */}
|
||||||
<form
|
<form
|
||||||
action={(fd) => {
|
action={(fd) => {
|
||||||
@@ -201,33 +152,27 @@ export function RegisterForm({
|
|||||||
};
|
};
|
||||||
formAction(fd);
|
formAction(fd);
|
||||||
}}
|
}}
|
||||||
className="p-6 flex flex-col gap-6"
|
className="flex flex-col gap-6"
|
||||||
style={{
|
|
||||||
backgroundColor:
|
|
||||||
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
|
||||||
borderRadius: "0 0 12px 12px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{errorMessage && (
|
{errorMessage && (
|
||||||
<div
|
<p
|
||||||
role="alert"
|
role="alert"
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-primary-foreground"
|
className="auth-alert animate-fade-in-up m-0"
|
||||||
style={{ backgroundColor: "var(--color-danger)" }}
|
|
||||||
>
|
>
|
||||||
{errorMessage}
|
{errorMessage}
|
||||||
</div>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{referralCode && (
|
{referralCode && (
|
||||||
<div
|
<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={{
|
style={{
|
||||||
backgroundColor:
|
background:
|
||||||
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
||||||
color: "var(--color-primary-readable, var(--color-primary))",
|
color: "var(--color-primary-readable, var(--color-primary))",
|
||||||
border:
|
borderColor:
|
||||||
"1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 26%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t("invitedBy", { username: referralCode })}
|
{t("invitedBy", { username: referralCode })}
|
||||||
@@ -257,51 +202,45 @@ export function RegisterForm({
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label
|
<label htmlFor="username" className="auth-label">
|
||||||
htmlFor="username"
|
|
||||||
className="block text-xs font-bold uppercase tracking-wider"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("username")}
|
{t("username")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div className="relative">
|
||||||
id="username"
|
<UserRound
|
||||||
name="username"
|
aria-hidden="true"
|
||||||
type="text"
|
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||||
placeholder={t("usernamePlaceholder")}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
autoComplete="username"
|
/>
|
||||||
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
<input
|
||||||
style={{
|
id="username"
|
||||||
backgroundColor: "var(--color-background)",
|
name="username"
|
||||||
color: "var(--color-text-readable)",
|
type="text"
|
||||||
borderColor:
|
placeholder={t("usernamePlaceholder")}
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
autoComplete="username"
|
||||||
}}
|
className="auth-input has-icon"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label
|
<label htmlFor="mail" className="auth-label">
|
||||||
htmlFor="mail"
|
|
||||||
className="block text-xs font-bold uppercase tracking-wider"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("email")}
|
{t("email")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div className="relative">
|
||||||
id="mail"
|
<Mail
|
||||||
name="mail"
|
aria-hidden="true"
|
||||||
type="email"
|
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||||
placeholder={t("emailPlaceholder")}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
autoComplete="email"
|
/>
|
||||||
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
<input
|
||||||
style={{
|
id="mail"
|
||||||
backgroundColor: "var(--color-background)",
|
name="mail"
|
||||||
color: "var(--color-text-readable)",
|
type="email"
|
||||||
borderColor:
|
placeholder={t("emailPlaceholder")}
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
autoComplete="email"
|
||||||
}}
|
className="auth-input has-icon"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -327,14 +266,15 @@ export function RegisterForm({
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label
|
<label htmlFor="password" className="auth-label">
|
||||||
htmlFor="password"
|
|
||||||
className="block text-xs font-bold uppercase tracking-wider"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("password")}
|
{t("password")}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<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
|
<input
|
||||||
id="password"
|
id="password"
|
||||||
name="password"
|
name="password"
|
||||||
@@ -343,28 +283,19 @@ export function RegisterForm({
|
|||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
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"
|
className="auth-input has-icon has-action"
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--color-background)",
|
|
||||||
color: "var(--color-text-readable)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<button
|
<PasswordToggle
|
||||||
type="button"
|
show={showPassword}
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
onToggle={() => setShowPassword((v) => !v)}
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
|
labelShow={t("showPassword")}
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
labelHide={t("hidePassword")}
|
||||||
tabIndex={-1}
|
/>
|
||||||
>
|
|
||||||
{showPassword ? t("hidePassword") : t("showPassword")}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
{password.length > 0 && (
|
{password.length > 0 && (
|
||||||
<div className="animate-fade-in-up space-y-1">
|
<div className="animate-fade-in-up space-y-1.5 pt-0.5">
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1.5">
|
||||||
{[1, 2, 3, 4, 5].map((i) => (
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
@@ -373,13 +304,17 @@ export function RegisterForm({
|
|||||||
backgroundColor:
|
backgroundColor:
|
||||||
i <= strength.score
|
i <= strength.score
|
||||||
? strength.color
|
? 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>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="text-xs font-bold"
|
className="text-[11px] font-extrabold uppercase tracking-wider"
|
||||||
style={{ color: strength.color }}
|
style={{ color: strength.color }}
|
||||||
>
|
>
|
||||||
{strength.label}
|
{strength.label}
|
||||||
@@ -388,38 +323,30 @@ export function RegisterForm({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label
|
<label htmlFor="password_confirmation" className="auth-label">
|
||||||
htmlFor="password_confirmation"
|
|
||||||
className="block text-xs font-bold uppercase tracking-wider"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("confirmPassword")}
|
{t("confirmPassword")}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<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
|
<input
|
||||||
id="password_confirmation"
|
id="password_confirmation"
|
||||||
name="password_confirmation"
|
name="password_confirmation"
|
||||||
type={showConfirm ? "text" : "password"}
|
type={showConfirm ? "text" : "password"}
|
||||||
placeholder={t("confirmPasswordPlaceholder")}
|
placeholder={t("confirmPasswordPlaceholder")}
|
||||||
autoComplete="new-password"
|
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"
|
className="auth-input has-icon has-action"
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--color-background)",
|
|
||||||
color: "var(--color-text-readable)",
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<button
|
<PasswordToggle
|
||||||
type="button"
|
show={showConfirm}
|
||||||
onClick={() => setShowConfirm(!showConfirm)}
|
onToggle={() => setShowConfirm((v) => !v)}
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
|
labelShow={t("showPassword")}
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
labelHide={t("hidePassword")}
|
||||||
tabIndex={-1}
|
/>
|
||||||
>
|
|
||||||
{showConfirm ? t("hidePassword") : t("showPassword")}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 ${
|
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] hover:scale-100"
|
termsAccepted ? "" : "opacity-70 saturate-[0.85]"
|
||||||
}`}
|
}`}
|
||||||
style={{
|
style={{
|
||||||
background: "var(--color-primary)",
|
|
||||||
color: "var(--color-primary-foreground)",
|
|
||||||
boxShadow: termsAccepted
|
boxShadow: termsAccepted
|
||||||
? "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)"
|
? undefined
|
||||||
: "0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
: "0 4px 14px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isPending || signingIn ? (
|
{isPending || signingIn ? (
|
||||||
@@ -597,14 +522,25 @@ export function RegisterForm({
|
|||||||
)}
|
)}
|
||||||
</button>
|
</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
|
<Link
|
||||||
href="/login"
|
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={{
|
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")}
|
{t("alreadyHaveAccount")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user