have footer on emails (#11300)

# ISSUE 

- Closes #9622

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-emails/src/emails/password-reset-link.email.tsx

@@ -1,4 +1,5 @@
-import { Trans } from '@lingui/react/macro';
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { Link } from 'src/components/Link';
@@ -19,16 +20,24 @@ export const PasswordResetLinkEmail = ({
 }: PasswordResetLinkEmailProps) => {
   return (
     <BaseEmail locale={locale}>
-      <Title value={<Trans>Reset your password 🗝</Trans>} />
-      <CallToAction href={link} value={<Trans>Reset</Trans>} />
+      <Title value={i18n._('Reset your password 🗝')} />
+      <CallToAction href={link} value={i18n._('Reset')} />
       <MainText>
-        <Trans>
-          This link is only valid for the next {duration}. If the link does not
-          work, you can use the login verification link directly:
-        </Trans>
+        <Trans
+          id="This link is only valid for the next {duration}. If the link does not work, you can use the login verification link directly:"
+          values={{ duration }}
+        />
         <br />
         <Link href={link} value={link} />
       </MainText>
     </BaseEmail>
   );
 };
+
+PasswordResetLinkEmail.PreviewProps = {
+  duration: '24 hours',
+  link: 'https://app.twenty.com/reset-password/123',
+  locale: 'en',
+} as PasswordResetLinkEmailProps;
+
+export default PasswordResetLinkEmail;