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
+175
-112
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user