finish new demo

frontend/src/components/ui/AuthModal.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect, useId } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import type { ParseKeys } from 'i18next';
 import { CloseIcon } from './icons/CloseIcon';
 import { GoogleIcon } from './icons/GoogleIcon';
 import { trackEvent } from '../../lib/analytics';
@@ -18,6 +19,7 @@ export default function AuthModal({
   error,
   onClearError,
   initialTab = 'login',
+  valuePropKey,
 }: {
   onClose: () => void;
   onAuthenticated?: () => void;
@@ -29,6 +31,9 @@ export default function AuthModal({
   error: string | null;
   onClearError: () => void;
   initialTab?: 'login' | 'register';
+  /** Translation key for the value-prop line, e.g. a context-specific nudge. Falls
+   *  back to the generic `auth.valueProp`. */
+  valuePropKey?: ParseKeys;
 }) {
   const { t } = useTranslation();
   const [view, setView] = useState<View>(initialTab);
@@ -166,7 +171,7 @@ export default function AuthModal({
           {/* Value prop */}
           {view !== 'forgot' && (
             <p className="text-xs text-warm-500 dark:text-warm-400 text-center">
-              {t('auth.valueProp')}
+              {t(valuePropKey ?? 'auth.valueProp')}
             </p>
           )}