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);
}
}