style(landing): add micro-interactions and polish public pages
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Successful in 29s
CI / tests-unit (push) Successful in 1m48s
CI / tests-integration (push) Successful in 1m52s
CI / tests-ui (push) Successful in 2m35s
CI / preflight (push) Skipped
CI / deploy (push) Successful in 3m7s

This commit is contained in:
openhands committed 2026-10-06 22:59:03 +02:00
1 parent 57710a7fe3
commit 3265c149da
8 files changed
+235 -36

No files matched your search

+56 -9
View File
@@ -1,6 +1,6 @@
"use client";
import { Lock, Mail, UserRound } from "lucide-react";
import { KeyRound, Lock, Mail, ShieldCheck, UserRound } from "lucide-react";
import Script from "next/script";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
@@ -183,7 +183,24 @@ export function RegisterForm({
{/* Username & Email */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2.5">
<span
aria-hidden="true"
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
style={{
background:
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
boxShadow:
"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent)",
}}
>
<UserRound
className="h-3.5 w-3.5"
style={{
color: "var(--color-primary-readable, var(--color-primary))",
}}
/>
</span>
<span
className="text-[11px] font-black uppercase tracking-widest"
style={{
@@ -199,6 +216,9 @@ export function RegisterForm({
"linear-gradient(90deg, color-mix(in srgb, var(--color-text-muted) 18%, transparent), transparent)",
}}
/>
<span aria-hidden="true" className="number-mark text-lg">
01
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
<div className="space-y-1.5">
@@ -247,7 +267,24 @@ export function RegisterForm({
{/* Password & Confirm */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2.5">
<span
aria-hidden="true"
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
style={{
background:
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
boxShadow:
"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent)",
}}
>
<KeyRound
className="h-3.5 w-3.5"
style={{
color: "var(--color-primary-readable, var(--color-primary))",
}}
/>
</span>
<span
className="text-[11px] font-black uppercase tracking-widest"
style={{
@@ -263,6 +300,9 @@ export function RegisterForm({
"linear-gradient(90deg, color-mix(in srgb, var(--color-text-muted) 18%, transparent), transparent)",
}}
/>
<span aria-hidden="true" className="number-mark text-lg">
02
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
<div className="space-y-1.5">
@@ -313,12 +353,19 @@ export function RegisterForm({
/>
))}
</div>
<p
className="text-[11px] font-extrabold uppercase tracking-wider"
style={{ color: strength.color }}
>
{strength.label}
</p>
<div className="flex items-center gap-1.5">
<ShieldCheck
aria-hidden="true"
className="h-3.5 w-3.5 shrink-0"
style={{ color: strength.color }}
/>
<p
className="text-[11px] font-extrabold uppercase tracking-wider"
style={{ color: strength.color }}
>
{strength.label}
</p>
</div>
</div>
)}
</div>