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/app/(auth)/forgot-password/page.tsx

@@ -1,79 +1,113 @@
-'use client'
+'use client';
 
-import { useState } from 'react'
+import { useState } from 'react';
-import { Button } from '@/components/ui/button'
+import { forgotPassword } from '@/app/actions/auth-reset';
-import { Input } from '@/components/ui/input'
+import { toast } from 'sonner';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import Link from 'next/link';
-import { forgotPassword } from '@/app/actions/auth-reset'
+import { Mail, ArrowRight, Sparkles, ArrowLeft } from 'lucide-react';
-import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n';
-import Link from 'next/link'
-import { useLanguage } from '@/lib/i18n'
 
 export default function ForgotPasswordPage() {
-  const { t } = useLanguage()
+  const { t } = useLanguage();
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isDone, setIsSubmittingDone] = useState(false)
+  const [isDone, setIsDone] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
-    setIsSubmitting(true)
+    setIsSubmitting(true);
-    const formData = new FormData(e.currentTarget)
+    const formData = new FormData(e.currentTarget);
-    const result = await forgotPassword(formData.get('email') as string)
+    const result = await forgotPassword(formData.get('email') as string);
-    setIsSubmitting(false)
+    setIsSubmitting(false);
 
     if (result.error) {
-      toast.error(result.error)
+      toast.error(result.error);
     } else {
-      setIsSubmittingDone(true)
+      setIsDone(true);
     }
-  }
+  };
 
   if (isDone) {
     return (
-      <main className="flex items-center justify-center md:h-screen p-4">
+      <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-        <Card className="w-full max-w-[400px]">
+        <div className="space-y-6 text-center">
-          <CardHeader>
+          <div className="w-12 h-12 mx-auto rounded-2xl bg-[var(--color-brand-accent)]/10 flex items-center justify-center">
-            <CardTitle>{t('auth.checkYourEmail')}</CardTitle>
+            <Mail size={24} className="text-[var(--color-brand-accent)]" />
-            <CardDescription>
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-serif font-bold">{t('auth.checkYourEmail')}</h1>
+            <p className="text-[var(--muted-foreground)] text-sm">
               {t('auth.resetEmailSent')}
-            </CardDescription>
+            </p>
-          </CardHeader>
+          </div>
-          <CardFooter>
+          <Link href="/login" className="block">
-            <Link href="/login" className="w-full">
+            <button 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]">
-              <Button variant="outline" className="w-full">{t('auth.returnToLogin')}</Button>
+              <ArrowLeft size={14} />
-            </Link>
+              {t('auth.returnToLogin')}
-          </CardFooter>
+            </button>
-        </Card>
+          </Link>
-      </main>
+        </div>
-    )
+      </div>
+    );
   }
 
   return (
-    <main className="flex items-center justify-center md:h-screen p-4">
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-      <Card className="w-full max-w-[400px]">
+      <div className="space-y-8">
-        <CardHeader>
+        <div className="text-center space-y-2">
-          <CardTitle>{t('auth.forgotPasswordTitle')}</CardTitle>
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
-          <CardDescription>
+            {t('auth.forgotPasswordTitle')}
+          </h1>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
             {t('auth.forgotPasswordDescription')}
-          </CardDescription>
+          </p>
-        </CardHeader>
+        </div>
-        <form onSubmit={handleSubmit}>
+
-          <CardContent className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
+          <div className="space-y-1.5">
-              <label htmlFor="email" className="text-sm font-medium">{t('auth.email')}</label>
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
-              <Input id="email" name="email" type="email" required placeholder="name@example.com" />
+              {t('auth.email')}
+            </label>
+            <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"
+                name="email"
+                type="email"
+                required
+                placeholder="name@example.com"
+              />
             </div>
-          </CardContent>
+          </div>
-          <CardFooter className="flex flex-col gap-4">
+
-            <Button type="submit" className="w-full" disabled={isSubmitting}>
+          <button
-              {isSubmitting ? t('auth.sending') : t('auth.sendResetLink')}
+            type="submit"
-            </Button>
+            disabled={isSubmitting}
-            <Link href="/login" className="text-sm text-center underline">
+            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"
-              {t('auth.backToLogin')}
+          >
-            </Link>
+            {isSubmitting ? (
-          </CardFooter>
+              <Sparkles size={16} className="animate-spin" />
+            ) : (
+              <>
+                {t('auth.sendResetLink')}
+                <ArrowRight size={14} />
+              </>
+            )}
+          </button>
         </form>
-      </Card>
+
-    </main>
+        <div className="text-center">
-  )
+          <Link
+            href="/login"
+            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
+          >
+            <ArrowLeft size={12} />
+            {t('auth.backToLogin')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 }

memento-note/app/(auth)/layout.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { LanguageProvider } from '@/lib/i18n/LanguageProvider';
+import Link from 'next/link';
+import { Globe } from 'lucide-react';
 
 export default function AuthLayout({
   children,
@@ -9,10 +11,38 @@ export default function AuthLayout({
 }>) {
   return (
     <LanguageProvider>
-      <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-zinc-950">
+      <div className="min-h-screen bg-[#FDFCFB] dark:bg-[#0D0D0D] flex flex-col relative overflow-hidden">
-        <div className="w-full max-w-md p-4">
+        <div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-[var(--color-brand-accent)]/5 blur-[120px] rounded-full pointer-events-none" />
-          {children}
+        <div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#D4A373]/5 blur-[120px] rounded-full pointer-events-none" />
-        </div>
+
+        <header className="p-6 md:p-8 flex justify-between items-center relative z-10">
+          <Link
+            href="/"
+            className="flex items-center gap-2 text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors group"
+          >
+            <div className="w-8 h-8 rounded-full border border-[var(--border)] flex items-center justify-center group-hover:border-[var(--color-brand-accent)] transition-colors">
+              <Globe size={14} className="group-hover:rotate-12 transition-transform" />
+            </div>
+          </Link>
+
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-[var(--foreground)] text-[var(--background)] rounded-xl flex items-center justify-center shadow-lg">
+              <span className="font-serif font-bold text-xl">M</span>
+            </div>
+            <span className="font-serif text-xl font-medium tracking-tight">Momento</span>
+          </Link>
+
+          <div className="w-8" />
+        </header>
+
+        <main className="flex-1 flex items-center justify-center p-4 md:p-6 relative z-10">
+          <div className="w-full max-w-md">
+            {children}
+            <p className="text-center mt-8 text-[9px] text-[var(--muted-foreground)] font-bold uppercase tracking-[0.3em] opacity-40 select-none">
+              © 2025 Momento Labs
+            </p>
+          </div>
+        </main>
       </div>
     </LanguageProvider>
   );

memento-note/app/(auth)/login/page.tsx

@@ -3,15 +3,7 @@ import { getSystemConfig } from '@/lib/config';
 
 export default async function LoginPage() {
   const config = await getSystemConfig();
-  
-  // Default to true unless explicitly disabled in DB or Env
   const allowRegister = config.ALLOW_REGISTRATION !== 'false' && process.env.ALLOW_REGISTRATION !== 'false';
 
-  return (
+  return <LoginForm allowRegister={allowRegister} />;
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <LoginForm allowRegister={allowRegister} />
-      </div>
-    </main>
-  );
 }

memento-note/app/(auth)/register/page.tsx

@@ -10,11 +10,5 @@ export default async function RegisterPage() {
     redirect('/login');
   }
 
-  return (
+  return <RegisterForm />;
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <RegisterForm />
-      </div>
-    </main>
-  );
 }

memento-note/app/(auth)/reset-password/page.tsx

@@ -1,98 +1,156 @@
-'use client'
+'use client';
 
-import { useState, Suspense } from 'react'
+import { useState, Suspense } from 'react';
-import { Button } from '@/components/ui/button'
+import { resetPassword } from '@/app/actions/auth-reset';
-import { Input } from '@/components/ui/input'
+import { toast } from 'sonner';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { useSearchParams, useRouter } from 'next/navigation';
-import { resetPassword } from '@/app/actions/auth-reset'
+import Link from 'next/link';
-import { toast } from 'sonner'
+import { Lock, ArrowRight, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react';
-import { useSearchParams, useRouter } from 'next/navigation'
+import { useLanguage } from '@/lib/i18n';
-import Link from 'next/link'
-import { useLanguage } from '@/lib/i18n'
 
 function ResetPasswordForm() {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
-  const router = useRouter()
+  const router = useRouter();
-  const { t } = useLanguage()
+  const { t } = useLanguage();
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const token = searchParams.get('token')
+  const token = searchParams.get('token');
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
-    if (!token) return
+    if (!token) return;
 
-    const formData = new FormData(e.currentTarget)
+    const formData = new FormData(e.currentTarget);
-    const password = formData.get('password') as string
+    const password = formData.get('password') as string;
-    const confirm = formData.get('confirmPassword') as string
+    const confirm = formData.get('confirmPassword') as string;
 
     if (password !== confirm) {
-      toast.error(t('resetPassword.passwordMismatch'))
+      toast.error(t('resetPassword.passwordMismatch'));
-      return
+      return;
     }
 
-    setIsSubmitting(true)
+    setIsSubmitting(true);
-    const result = await resetPassword(token, password)
+    const result = await resetPassword(token, password);
-    setIsSubmitting(false)
+    setIsSubmitting(false);
 
     if (result.error) {
-      toast.error(result.error)
+      toast.error(result.error);
     } else {
-      toast.success(t('resetPassword.success'))
+      toast.success(t('resetPassword.success'));
-      router.push('/login')
+      router.push('/login');
     }
-  }
+  };
 
   if (!token) {
     return (
-      <Card className="w-full max-w-[400px]">
+      <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-        <CardHeader>
+        <div className="space-y-6 text-center">
-          <CardTitle>{t('resetPassword.invalidLinkTitle')}</CardTitle>
+          <div className="w-12 h-12 mx-auto rounded-2xl bg-red-500/10 flex items-center justify-center">
-          <CardDescription>{t('resetPassword.invalidLinkDescription')}</CardDescription>
+            <AlertCircle size={24} className="text-red-500" />
-        </CardHeader>
+          </div>
-        <CardFooter>
+          <div className="space-y-2">
-          <Link href="/forgot-password" title={t('resetPassword.requestNewLink')} className="w-full">
+            <h1 className="text-2xl font-serif font-bold">{t('resetPassword.invalidLinkTitle')}</h1>
-            <Button variant="outline" className="w-full">{t('resetPassword.requestNewLink')}</Button>
+            <p className="text-[var(--muted-foreground)] text-sm">{t('resetPassword.invalidLinkDescription')}</p>
+          </div>
+          <Link href="/forgot-password" className="block">
+            <button className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]">
+              {t('resetPassword.requestNewLink')}
+            </button>
           </Link>
-        </CardFooter>
+        </div>
-      </Card>
+      </div>
-    )
+    );
   }
 
   return (
-    <Card className="w-full max-w-[400px]">
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-      <CardHeader>
+      <div className="space-y-8">
-        <CardTitle>{t('resetPassword.title')}</CardTitle>
+        <div className="text-center space-y-2">
-        <CardDescription>{t('resetPassword.description')}</CardDescription>
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
-      </CardHeader>
+            {t('resetPassword.title')}
-      <form onSubmit={handleSubmit}>
+          </h1>
-        <CardContent className="space-y-4">
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
-          <div className="space-y-2">
+            {t('resetPassword.description')}
-            <label htmlFor="password">{t('resetPassword.newPassword')}</label>
+          </p>
-            <Input id="password" name="password" type="password" required minLength={6} autoFocus />
+        </div>
+
+        <form onSubmit={handleSubmit} 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('resetPassword.newPassword')}
+            </label>
+            <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"
+                name="password"
+                type="password"
+                required
+                minLength={6}
+                autoFocus
+                placeholder="••••••••"
+              />
+            </div>
           </div>
-          <div className="space-y-2">
+
-            <label htmlFor="confirmPassword">{t('resetPassword.confirmNewPassword')}</label>
+          <div className="space-y-1.5">
-            <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
+              {t('resetPassword.confirmNewPassword')}
+            </label>
+            <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"
+                name="confirmPassword"
+                type="password"
+                required
+                minLength={6}
+                placeholder="••••••••"
+              />
+            </div>
           </div>
-        </CardContent>
+
-        <CardFooter>
+          <button
-          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            type="submit"
-            {isSubmitting ? t('resetPassword.resetting') : t('resetPassword.resetPassword')}
+            disabled={isSubmitting}
-          </Button>
+            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"
-        </CardFooter>
+          >
-      </form>
+            {isSubmitting ? (
-    </Card>
+              <Sparkles size={16} className="animate-spin" />
-  )
+            ) : (
+              <>
+                {t('resetPassword.resetPassword')}
+                <ArrowRight size={14} />
+              </>
+            )}
+          </button>
+        </form>
+
+        <div className="text-center">
+          <Link
+            href="/login"
+            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
+          >
+            <ArrowLeft size={12} />
+            {t('auth.backToLogin')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default function ResetPasswordPage() {
-  const { t } = useLanguage()
+  const { t } = useLanguage();
   return (
-    <main className="flex items-center justify-center md:h-screen p-4">
+    <Suspense fallback={<div className="text-center text-sm text-[var(--muted-foreground)]">{t('resetPassword.loading')}</div>}>
-      <Suspense fallback={<div>{t('resetPassword.loading')}</div>}>
+      <ResetPasswordForm />
-        <ResetPasswordForm />
+    </Suspense>
-      </Suspense>
+  );
-    </main>
-  )
 }

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}>
+    <button
-      {t('auth.signIn')}
+      type="submit"
-    </Button>
+      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="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
+      <div className="space-y-8">
-        <h1 className="mb-3 text-2xl font-bold">
+        <div className="text-center space-y-2">
-          {t('auth.signInToAccount')}
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
-        </h1>
+            {t('auth.welcomeBack')}
-        <div className="w-full">
+          </h1>
-          <div>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
-            <label
+            {t('auth.welcomeBackSubtitle')}
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+          </p>
-              htmlFor="email"
+        </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">
+            <div className="relative group">
-              <Input
+              <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">
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                <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
+          <div className="space-y-1.5">
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+            <div className="flex justify-between items-center px-4">
-              htmlFor="password"
+              <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)]">
-            >
+                {t('auth.password')}
-              {t('auth.password')}
+              </label>
-            </label>
+              <Link
-            <div className="relative">
+                href="/forgot-password"
-              <Input
+                className="text-[10px] text-[var(--color-brand-accent)] font-bold uppercase tracking-widest hover:underline"
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+              >
+                {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">
+          <LoginButton />
-          <Link
+
-            href="/forgot-password"
+          <div
-            className="text-xs text-gray-500 hover:text-gray-900 underline"
+            className="flex h-8 items-end space-x-1"
+            aria-live="polite"
+            aria-atomic="true"
           >
-            {t('auth.forgotPassword')}
+            {errorMessage && (
-          </Link>
+              <p className="text-sm text-red-500">{errorMessage}</p>
-        </div>
+            )}
-        <LoginButton />
+          </div>
-        <div
+        </form>
-          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>
         {allowRegister && (
-          <div className="mt-4 text-center text-sm">
+          <div className="text-center pt-2">
-            {t('auth.noAccount')}{' '}
+            <p className="text-xs text-[var(--muted-foreground)]">
-            <Link href="/register" className="underline">
+              {t('auth.noAccount')}{' '}
-              {t('auth.signUp')}
+              <Link
-            </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}>
+    <button
-      {t('auth.signUp')}
+      type="submit"
-    </Button>
+      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="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
+      <div className="space-y-8">
-        <h1 className="mb-3 text-2xl font-bold">
+        <div className="text-center space-y-2">
-          {t('auth.createAccount')}
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
-        </h1>
+            {t('auth.createYourSpace')}
-        <div className="w-full">
+          </h1>
-          <div>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
-            <label
+            {t('auth.createYourSpaceSubtitle')}
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+          </p>
-              htmlFor="name"
+        </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">
+            <div className="relative group">
-              <Input
+              <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">
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                <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
+          <div className="space-y-1.5">
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
-              htmlFor="email"
-            >
               {t('auth.email')}
             </label>
-            <div className="relative">
+            <div className="relative group">
-              <Input
+              <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">
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                <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
+          <div className="space-y-1.5">
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
-              htmlFor="password"
-            >
               {t('auth.password')}
             </label>
-            <div className="relative">
+            <div className="relative group">
-              <Input
+              <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">
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                <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
+          <div className="space-y-1.5">
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
-              htmlFor="confirmPassword"
-            >
               {t('auth.confirmPassword')}
             </label>
-            <div className="relative">
+            <div className="relative group">
-              <Input
+              <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">
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                <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 />
+          <RegisterButton />
-        <div
+
-          className="flex h-8 items-end space-x-1"
+          <div
-          aria-live="polite"
+            className="flex h-8 items-end space-x-1"
-          aria-atomic="true"
+            aria-live="polite"
-        >
+            aria-atomic="true"
-          {errorMessage && (
+          >
-            <p className="text-sm text-red-500">{errorMessage}</p>
+            {errorMessage && (
-          )}
+              <p className="text-sm text-red-500">{errorMessage}</p>
-        </div>
+            )}
-        <div className="mt-4 text-center text-sm">
+          </div>
-          {t('auth.hasAccount')}{' '}
+        </form>
-          <Link href="/login" className="underline">
+
-            {t('auth.signIn')}
+        <div className="text-center pt-2">
-          </Link>
+          <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>
   );
 }

memento-note/locales/en.json

@@ -28,7 +28,14 @@
     "backToLogin": "Back to login",
     "signOut": "Sign out",
     "confirmPassword": "Confirm Password",
-    "confirmPasswordPlaceholder": "Confirm your password"
+    "confirmPasswordPlaceholder": "Confirm your password",
+    "welcomeBack": "Welcome Back",
+    "welcomeBackSubtitle": "Enter your credentials to access your notes.",
+    "createYourSpace": "Create Your Space",
+    "createYourSpaceSubtitle": "Join the new era of smart note-taking.",
+    "forgot": "Forgot?",
+    "backToSite": "Back to site",
+    "privacyTerms": "© 2025 Momento Labs — Privacy · Terms"
   },
   "sidebar": {
     "notes": "Notes",

memento-note/locales/fr.json

@@ -28,7 +28,14 @@
     "backToLogin": "Retour à la connexion",
     "signOut": "Déconnexion",
     "confirmPassword": "Confirmer le mot de passe",
-    "confirmPasswordPlaceholder": "Confirmez votre mot de passe"
+    "confirmPasswordPlaceholder": "Confirmez votre mot de passe",
+    "welcomeBack": "Bon retour parmi nous",
+    "welcomeBackSubtitle": "Entrez vos identifiants pour accéder à vos notes.",
+    "createYourSpace": "Créer votre espace",
+    "createYourSpaceSubtitle": "Rejoignez la nouvelle ère de la prise de notes intelligente.",
+    "forgot": "Oublié ?",
+    "backToSite": "Retour",
+    "privacyTerms": "© 2025 Momento Labs — Confidentialité · Conditions"
   },
   "sidebar": {
     "notes": "Notes",