feat: redesign auth pages — rounded-[48px] cards, serif titles, orbs, icon inputs

- Auth layout: warm background with brand-accent/ochre orbs, header with Globe + Momento branding
- Login form: serif heading, icon-inputs with focus transitions, uppercase labels, submit with arrow
- Register form: matching card style with User/Mail/Lock icons, confirm password field
- Forgot password: matching card with email icon, success state with mail icon
- Reset password: matching card with Lock icons, invalid link state with AlertCircle
- All text via i18n (new keys: welcomeBack, createYourSpace, forgot, etc.)
- Dark mode support via CSS variables
- Removed shadcn Card/Button/Input dependencies from auth forms

memento-note/components/login-form.tsx

@@ -3,18 +3,28 @@
 import { useActionState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { authenticate } from '@/app/actions/auth';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import Link from 'next/link';
+import { Mail, Lock, ArrowRight, Sparkles } from 'lucide-react';
 import { useLanguage } from '@/lib/i18n';
 
 function LoginButton() {
   const { pending } = useFormStatus();
   const { t } = useLanguage();
   return (
-    <Button className="w-full mt-4" aria-disabled={pending}>
-      {t('auth.signIn')}
-    </Button>
+    <button
+      type="submit"
+      disabled={pending}
+      className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50 mt-4"
+    >
+      {pending ? (
+        <Sparkles size={16} className="animate-spin" />
+      ) : (
+        <>
+          {t('auth.signIn')}
+          <ArrowRight size={14} />
+        </>
+      )}
+    </button>
   );
 }
 
@@ -23,22 +33,28 @@ export function LoginForm({ allowRegister = true }: { allowRegister?: boolean })
   const { t } = useLanguage();
 
   return (
-    <form action={dispatch} className="space-y-3">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
-        <h1 className="mb-3 text-2xl font-bold">
-          {t('auth.signInToAccount')}
-        </h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="email"
-            >
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+      <div className="space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
+            {t('auth.welcomeBack')}
+          </h1>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
+            {t('auth.welcomeBackSubtitle')}
+          </p>
+        </div>
+
+        <form action={dispatch} className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
               {t('auth.email')}
             </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Mail size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="email"
                 type="email"
                 name="email"
@@ -47,53 +63,62 @@ export function LoginForm({ allowRegister = true }: { allowRegister?: boolean })
               />
             </div>
           </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="password"
-            >
-              {t('auth.password')}
-            </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+
+          <div className="space-y-1.5">
+            <div className="flex justify-between items-center px-4">
+              <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)]">
+                {t('auth.password')}
+              </label>
+              <Link
+                href="/forgot-password"
+                className="text-[10px] text-[var(--color-brand-accent)] font-bold uppercase tracking-widest hover:underline"
+              >
+                {t('auth.forgot')}
+              </Link>
+            </div>
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Lock size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="password"
                 type="password"
                 name="password"
-                placeholder={t('auth.passwordPlaceholder')}
+                placeholder="••••••••"
                 required
                 minLength={6}
               />
             </div>
           </div>
-        </div>
-        <div className="flex items-center justify-end mt-2">
-          <Link
-            href="/forgot-password"
-            className="text-xs text-gray-500 hover:text-gray-900 underline"
+
+          <LoginButton />
+
+          <div
+            className="flex h-8 items-end space-x-1"
+            aria-live="polite"
+            aria-atomic="true"
           >
-            {t('auth.forgotPassword')}
-          </Link>
-        </div>
-        <LoginButton />
-        <div
-          className="flex h-8 items-end space-x-1"
-          aria-live="polite"
-          aria-atomic="true"
-        >
-          {errorMessage && (
-            <p className="text-sm text-red-500">{errorMessage}</p>
-          )}
-        </div>
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        </form>
+
         {allowRegister && (
-          <div className="mt-4 text-center text-sm">
-            {t('auth.noAccount')}{' '}
-            <Link href="/register" className="underline">
-              {t('auth.signUp')}
-            </Link>
+          <div className="text-center pt-2">
+            <p className="text-xs text-[var(--muted-foreground)]">
+              {t('auth.noAccount')}{' '}
+              <Link
+                href="/register"
+                className="text-[var(--color-brand-accent)] font-bold hover:underline"
+              >
+                {t('auth.signUp')}
+              </Link>
+            </p>
           </div>
         )}
       </div>
-    </form>
+    </div>
   );
 }

memento-note/components/register-form.tsx

@@ -3,18 +3,28 @@
 import { useActionState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { register } from '@/app/actions/register';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import Link from 'next/link';
+import { Mail, Lock, User, ArrowRight, Sparkles } from 'lucide-react';
 import { useLanguage } from '@/lib/i18n';
 
 function RegisterButton() {
   const { pending } = useFormStatus();
   const { t } = useLanguage();
   return (
-    <Button className="w-full mt-4" aria-disabled={pending}>
-      {t('auth.signUp')}
-    </Button>
+    <button
+      type="submit"
+      disabled={pending}
+      className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50 mt-4"
+    >
+      {pending ? (
+        <Sparkles size={16} className="animate-spin" />
+      ) : (
+        <>
+          {t('auth.signUp')}
+          <ArrowRight size={14} />
+        </>
+      )}
+    </button>
   );
 }
 
@@ -23,22 +33,28 @@ export function RegisterForm() {
   const { t } = useLanguage();
 
   return (
-    <form action={dispatch} className="space-y-3">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
-        <h1 className="mb-3 text-2xl font-bold">
-          {t('auth.createAccount')}
-        </h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="name"
-            >
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+      <div className="space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
+            {t('auth.createYourSpace')}
+          </h1>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
+            {t('auth.createYourSpaceSubtitle')}
+          </p>
+        </div>
+
+        <form action={dispatch} className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
               {t('auth.name')}
             </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <User size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="name"
                 type="text"
                 name="name"
@@ -47,16 +63,17 @@ export function RegisterForm() {
               />
             </div>
           </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="email"
-            >
+
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
               {t('auth.email')}
             </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Mail size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="email"
                 type="email"
                 name="email"
@@ -65,16 +82,17 @@ export function RegisterForm() {
               />
             </div>
           </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="password"
-            >
+
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
               {t('auth.password')}
             </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Lock size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="password"
                 type="password"
                 name="password"
@@ -84,16 +102,17 @@ export function RegisterForm() {
               />
             </div>
           </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="confirmPassword"
-            >
+
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
               {t('auth.confirmPassword')}
             </label>
-            <div className="relative">
-              <Input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Lock size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                 id="confirmPassword"
                 type="password"
                 name="confirmPassword"
@@ -103,24 +122,32 @@ export function RegisterForm() {
               />
             </div>
           </div>
-        </div>
-        <RegisterButton />
-        <div
-          className="flex h-8 items-end space-x-1"
-          aria-live="polite"
-          aria-atomic="true"
-        >
-          {errorMessage && (
-            <p className="text-sm text-red-500">{errorMessage}</p>
-          )}
-        </div>
-        <div className="mt-4 text-center text-sm">
-          {t('auth.hasAccount')}{' '}
-          <Link href="/login" className="underline">
-            {t('auth.signIn')}
-          </Link>
+
+          <RegisterButton />
+
+          <div
+            className="flex h-8 items-end space-x-1"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        </form>
+
+        <div className="text-center pt-2">
+          <p className="text-xs text-[var(--muted-foreground)]">
+            {t('auth.hasAccount')}{' '}
+            <Link
+              href="/login"
+              className="text-[var(--color-brand-accent)] font-bold hover:underline"
+            >
+              {t('auth.signIn')}
+            </Link>
+          </p>
         </div>
       </div>
-    </form>
+    </div>
   );
 }