fix: add missing URL to email template

Updated email template imports

README.md

@@ -28,12 +28,12 @@
 
 > 🦺 Documenso 1.0 is deployed to our <a href="https://documen.so/staging" target="_blank">Staging Environment</a>.
 >
-> The code be found on the [feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh) branch.
+> The code can be found on the [feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh) branch.
 > 
-> The new Version will be release after the current testing phase.
+> The new Version will be released after the current testing phase.
 
 
-# Join us in testing Documenso 1.0 during [MALFUNCTION MANIA](https://documenso.com/blog/manfunction-mania)
+# Join us in testing Documenso 1.0 during [MALFUNCTION MANIA](https://documenso.com/blog/malfunction-mania)
 <div>
   <img style="display: block; height: 120px; width: 24%"
     src="https://github.com/documenso/documenso/assets/1309312/67e08c98-c153-4115-aa2d-77979bb12c94)">

apps/marketing/content/blog/next.mdx

@@ -20,11 +20,11 @@ Today, I'm pleased to share with you a preview of the next Documenso.
 
 We redesigned the whole signing flow to make it more appealing and more convenient.
 
-We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it. 
+We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it.
 
 **We call it happy minimalism.**
 
-We paid particular attention to the moment of signing, which should be celebrated. 
+We paid particular attention to the moment of signing, which should be celebrated.
 
 The image below is the final bloom of the completion celebration we added:
 

apps/marketing/content/blog/shop.mdx

@@ -0,0 +1,62 @@
+---
+title: Shop and Limited Edition "Mania" Shirt
+description: Happy Launch Week Day 3. The limited edition "Malfunction Mania" shirt is here. Grab it, while you can.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-27
+tags:
+  - Testing
+  - Rewrite
+  - Bounties
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/mania-shirt.png"
+    width="1260"
+    height="630"
+    alt="Malfunctioning Mania Themed Documenso Shirt"
+  />
+
+  <figcaption className="text-center">
+    The Limited Edition "Malfunction Mania" Shirt - Only during Malfunction Mania
+  </figcaption>
+</figure>
+
+> TLDR; We have a fancy limited edition shirt. Contribute to Malfunction Mania to get one.
+
+We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania) yesterday, and the first [Issues](https://github.com/documenso/documenso/issues) are coming in. As mentioned, there will be dollar bounties, but we also wanted to celebrate entering the final stage of version 1.0 with something special. This is why we created the limited edition shirt for Malfunction Mania. It will only be available during the runtime of Malfunction Mania. We have yet to set an exact end date, the next event in October, however, is looming, ready to end MM.
+
+## Documenso Merch Shop
+
+The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors.
+
+<figure>
+  <MdxNextImage
+    src="/blog/shop.png"
+    width="1260"
+    height="630"
+    alt="Malfunctioning Mania Themed Documenso Shirt"
+  />
+
+  <figcaption className="text-center">
+    Merch at Documenso is always given to those who deserve it.
+  </figcaption>
+</figure>
+
+## How to get the shirt
+
+If you have been following us, you know we are not big on formalities but highly value rewarding merit. That being said, any worthwhile contribution has a chance to get one. To inspire, here are a few ideas on how to contribute to securing one:
+
+- Report a bug with detailed reproduction details
+- Fix a bug (you or somebody else reported)
+- Analyze and describe a usability or user experience shortcoming
+- Test the product in a systematic and least somewhat documented way
+- Engage in discussion about the current version and its choices
+- Raise awareness for Malfunction Mania and try out the [version currently in staging](https://documen.so/staging)
+- Review the version with a video, stream, or screenshots and post about it
+- Review existing or create missing documenso
+- ...
+
+**[Follow Documenso on Twitter / X](https://documen.so/tw) and [join the Discord server](https://documen.so/discord) to get the latest about Malfunction Mania.**

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -177,9 +177,7 @@ export const createSinglePlayerDocument = async (
     },
   );
 
-  // Todo: Handle `downloadLink`
   const template = createElement(DocumentSelfSignedEmailTemplate, {
-    downloadLink: `${process.env.NEXT_PUBLIC_MARKETING_URL}/single-player-mode/${documentToken}`,
     documentName: documentName,
     assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
   });
@@ -197,6 +195,7 @@ export const createSinglePlayerDocument = async (
     subject: 'Document signed',
     html: render(template),
     text: render(template, { plainText: true }),
+    attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
   });
 
   return documentToken;

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -73,7 +73,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
         <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
       )}
 
-      <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
+      <h2 className="relative z-10 text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
         You have signed
         <span className="mt-2 block">{document.title}</span>
       </h2>
@@ -84,17 +84,17 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
         signingCelebrationImage={signingCelebration}
       />
 
-      <div className="mt-8 w-full">
+      <div className="relative mt-8 w-full">
         <div className={cn('flex flex-col items-center', className)}>
           <div className="grid w-full max-w-sm grid-cols-2 gap-4">
             {/* TODO: Hook this up */}
-            <Button variant="outline" className="flex-1" disabled>
+            <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
               <Share className="mr-2 h-5 w-5" />
               Share
             </Button>
 
             <DocumentDownloadButton
-              className="flex-1"
+              className="flex-1 bg-transparent backdrop-blur-sm"
               fileName={document.title}
               documentData={document.documentData}
               disabled={document.status !== DocumentStatus.COMPLETED}

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server';
+import { ImageResponse, NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
@@ -21,7 +21,7 @@ type SharePageOpenGraphImageProps = {
   params: { slug: string };
 };
 
-export default async function Image({ params: { slug } }: SharePageOpenGraphImageProps) {
+export async function GET(_request: Request, { params: { slug } }: SharePageOpenGraphImageProps) {
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
     getAssetBuffer('/fonts/inter-semibold.ttf'),
     getAssetBuffer('/fonts/inter-regular.ttf'),
@@ -32,7 +32,7 @@ export default async function Image({ params: { slug } }: SharePageOpenGraphImag
   const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
 
   if (!recipientOrSender) {
-    return null;
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
   const isRecipient = 'Signature' in recipientOrSender;

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -1,11 +1,39 @@
 import { Metadata } from 'next';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
 
-import { Redirect } from './redirect';
+import { APP_BASE_URL } from '@documenso/lib/constants/app';
 
-export const metadata: Metadata = {
-  title: 'Documenso - Share',
+type SharePageProps = {
+  params: { slug: string };
 };
 
-export default function SharePage() {
-  return <Redirect />;
+export function generateMetadata({ params: { slug } }: SharePageProps) {
+  return {
+    title: 'Documenso - Share',
+    description: 'I just signed a document with Documenso!',
+    openGraph: {
+      title: 'Documenso - Join the open source signing revolution',
+      description: 'I just signed with Documenso!',
+      type: 'website',
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      description: 'I just signed with Documenso!',
+    },
+  } satisfies Metadata;
+}
+
+export default function SharePage() {
+  const userAgent = headers().get('User-Agent') ?? '';
+
+  // https://stackoverflow.com/questions/47026171/how-to-detect-bots-for-open-graph-with-user-agent
+  if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
+    return null;
+  }
+
+  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
 }

apps/web/src/app/(share)/share/[slug]/redirect.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-export const Redirect = () => {
-  useEffect(() => {
-    window.location.href = process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001';
-  }, []);
-
-  return null;
-};

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -9,7 +9,7 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
-import { SigningCard } from '@documenso/ui/components/signing-card';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
 import signingCelebration from '~/assets/signing-celebration.png';
 
@@ -53,11 +53,11 @@ export default async function CompletedSigningPage({
     recipient.email;
 
   return (
-    <div className="flex flex-col items-center pt-24">
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
-      <SigningCard name={recipientName} signingCelebrationImage={signingCelebration} />
+      <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
 
-      <div className="mt-6">
+      <div className="relative mt-6 flex w-full flex-col items-center">
         {match(document.status)
           .with(DocumentStatus.COMPLETED, () => (
             <div className="text-documenso-700 flex items-center text-center">
@@ -71,41 +71,44 @@ export default async function CompletedSigningPage({
               <span className="text-sm">Waiting for others to sign</span>
             </div>
           ))}
+
+        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+          You have signed "{document.title}"
+        </h2>
+
+        {match(document.status)
+          .with(DocumentStatus.COMPLETED, () => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              Everyone has signed! You will receive an Email copy of the signed document.
+            </p>
+          ))
+          .otherwise(() => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              You will receive an Email copy of the signed document once everyone has signed.
+            </p>
+          ))}
+
+        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+          <ShareButton documentId={document.id} token={recipient.token} />
+
+          <DocumentDownloadButton
+            className="flex-1"
+            fileName={document.title}
+            documentData={documentData}
+            disabled={document.status !== DocumentStatus.COMPLETED}
+          />
+        </div>
+
+        <p className="text-muted-foreground/60 mt-36 text-sm">
+          Want to send slick signing links like this one?{' '}
+          <Link
+            href="https://documenso.com"
+            className="text-documenso-700 hover:text-documenso-600"
+          >
+            Check out Documenso.
+          </Link>
+        </p>
       </div>
-
-      <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-        You have signed "{document.title}"
-      </h2>
-
-      {match(document.status)
-        .with(DocumentStatus.COMPLETED, () => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            Everyone has signed! You will receive an Email copy of the signed document.
-          </p>
-        ))
-        .otherwise(() => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            You will receive an Email copy of the signed document once everyone has signed.
-          </p>
-        ))}
-
-      <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        <ShareButton documentId={document.id} token={recipient.token} />
-
-        <DocumentDownloadButton
-          className="flex-1"
-          fileName={document.title}
-          documentData={documentData}
-          disabled={document.status !== DocumentStatus.COMPLETED}
-        />
-      </div>
-
-      <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want to send slick signing links like this one?{' '}
-        <Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600">
-          Check out Documenso.
-        </Link>
-      </p>
     </div>
   );
 }

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -1,4 +1,4 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
@@ -9,7 +9,7 @@ import { viewedDocument } from '@documenso/lib/server-only/document/viewed-docum
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { FieldType } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -53,6 +53,13 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const user = await getServerComponentSession();
 
+  if (
+    document.status === DocumentStatus.COMPLETED ||
+    recipient.signingStatus === SigningStatus.SIGNED
+  ) {
+    redirect(`/sign/${token}/complete`);
+  }
+
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -40,7 +40,7 @@ export const StackAvatarsWithTooltip = ({
 
   return (
     <TooltipProvider>
-      <Tooltip>
+      <Tooltip delayDuration={200}>
         <TooltipTrigger className="flex cursor-pointer">
           {children || <StackAvatars recipients={recipients} />}
         </TooltipTrigger>

packages/email/template-components/template-document-completed.tsx

@@ -1,7 +1,9 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentCompletedProps {
   downloadLink: string;
   documentName: string;
@@ -27,27 +29,20 @@ export const TemplateDocumentCompleted = ({
         },
       }}
     >
-      <Section>
-        <Row className="table-fixed">
-          <Column />
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
+      <Section>
+        <Section className="mb-4">
+          <Column align="center">
+            <Text className="text-base font-semibold text-[#7AC455]">
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Completed
+            </Text>
           </Column>
-
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
-        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
-          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
-          Completed
-        </Text>
+        </Section>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
           “{documentName}” was signed by all signers
@@ -66,10 +61,13 @@ export const TemplateDocumentCompleted = ({
             Review
           </Button> */}
           <Button
-            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href={downloadLink}
           >
-            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            <Img
+              src={getAssetUrl('/static/download.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
             Download
           </Button>
         </Section>

packages/email/template-components/template-document-image.tsx

@@ -0,0 +1,28 @@
+import { Column, Img, Row, Section } from '@react-email/components';
+
+export interface TemplateDocumentImageProps {
+  assetBaseUrl: string;
+  className?: string;
+}
+
+export const TemplateDocumentImage = ({ assetBaseUrl, className }: TemplateDocumentImageProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Section className={className}>
+      <Row className="table-fixed">
+        <Column />
+
+        <Column>
+          <Img className="h-42 mx-auto" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </Column>
+
+        <Column />
+      </Row>
+    </Section>
+  );
+};
+
+export default TemplateDocumentImage;

packages/email/template-components/template-document-invite.tsx

@@ -1,7 +1,9 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentInviteProps {
   inviterName: string;
   inviterEmail: string;
@@ -16,10 +18,6 @@ export const TemplateDocumentInvite = ({
   signDocumentLink,
   assetBaseUrl,
 }: TemplateDocumentInviteProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -30,21 +28,7 @@ export const TemplateDocumentInvite = ({
         },
       }}
     >
-      <Section className="mt-4">
-        <Row className="table-fixed">
-          <Column />
-
-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
-          </Column>
-
-          <Column />
-        </Row>
-      </Section>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">

packages/email/template-components/template-document-pending.tsx

@@ -1,7 +1,9 @@
-import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Column, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentPendingProps {
   documentName: string;
   assetBaseUrl: string;
@@ -25,27 +27,20 @@ export const TemplateDocumentPending = ({
         },
       }}
     >
-      <Section>
-        <Row className="table-fixed">
-          <Column />
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
+      <Section>
+        <Section className="mb-4">
+          <Column align="center">
+            <Text className="text-base font-semibold text-blue-500">
+              <Img
+                src={getAssetUrl('/static/clock.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Waiting for others
+            </Text>
           </Column>
-
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
-        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
-          <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
-          Waiting for others
-        </Text>
+        </Section>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
           “{documentName}” has been signed

packages/email/template-components/template-document-self-signed.tsx

@@ -1,18 +1,20 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Link, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentSelfSignedProps {
-  downloadLink: string;
   documentName: string;
   assetBaseUrl: string;
 }
 
 export const TemplateDocumentSelfSigned = ({
-  downloadLink,
   documentName,
   assetBaseUrl,
 }: TemplateDocumentSelfSignedProps) => {
+  const signUpUrl = `${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signup`;
+
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
   };
@@ -27,39 +29,59 @@ export const TemplateDocumentSelfSigned = ({
         },
       }}
     >
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
       <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+        <Section>
+          <Column align="center">
+            <Text className="text-base font-semibold text-[#7AC455]">
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Completed
+            </Text>
+          </Column>
+        </Section>
 
-        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
-          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
-          Completed
-        </Text>
-
-        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+        <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
           You have signed “{documentName}”
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
-          Check out our plans to access the full suite of features.
+        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+          Create a{' '}
+          <Link
+            href={signUpUrl}
+            target="_blank"
+            className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+          >
+            free account
+          </Link>{' '}
+          to access your signed documents at any time.
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
           <Button
-            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={signUpUrl}
+            className="mr-4 rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+          >
+            <Img
+              src={getAssetUrl('/static/user-plus.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
+            Create account
+          </Button>
+
+          <Button
+            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href="https://documenso.com/pricing"
           >
-            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            <Img
+              src={getAssetUrl('/static/review.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
             View plans
           </Button>
-          <Button
-            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
-            href={downloadLink}
-          >
-            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
-            Download
-          </Button>
         </Section>
       </Section>
     </Tailwind>

packages/email/template-components/template-forgot-password.tsx

@@ -1,7 +1,9 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export type TemplateForgotPasswordProps = {
   resetPasswordLink: string;
   assetBaseUrl: string;
@@ -11,10 +13,6 @@ export const TemplateForgotPassword = ({
   resetPasswordLink,
   assetBaseUrl,
 }: TemplateForgotPasswordProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -25,11 +23,9 @@ export const TemplateForgotPassword = ({
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
+      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Forgot your password?
         </Text>

packages/email/template-components/template-reset-password.tsx

@@ -1,7 +1,9 @@
-import { Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateResetPasswordProps {
   userName: string;
   userEmail: string;
@@ -9,10 +11,6 @@ export interface TemplateResetPasswordProps {
 }
 
 export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -23,11 +21,9 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
+      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Password updated!
         </Text>
@@ -35,6 +31,15 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         <Text className="my-1 text-center text-base text-slate-400">
           Your password has been updated.
         </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
+          >
+            Sign In
+          </Button>
+        </Section>
       </Section>
     </Tailwind>
   );

packages/email/templates/document-completed.tsx

@@ -15,7 +15,7 @@ import {
   TemplateDocumentCompleted,
   TemplateDocumentCompletedProps,
 } from '../template-components/template-document-completed';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentCompletedProps>;
 

packages/email/templates/document-invite.tsx

@@ -18,7 +18,7 @@ import {
   TemplateDocumentInvite,
   TemplateDocumentInviteProps,
 } from '../template-components/template-document-invite';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;

packages/email/templates/document-self-signed.tsx

@@ -15,12 +15,11 @@ import {
   TemplateDocumentSelfSigned,
   TemplateDocumentSelfSignedProps,
 } from '../template-components/template-document-self-signed';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
 
 export const DocumentSelfSignedEmailTemplate = ({
-  downloadLink = 'https://documenso.com',
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentSelfSignedTemplateProps) => {
@@ -54,7 +53,6 @@ export const DocumentSelfSignedEmailTemplate = ({
                 />
 
                 <TemplateDocumentSelfSigned
-                  downloadLink={downloadLink}
                   documentName={documentName}
                   assetBaseUrl={assetBaseUrl}
                 />

packages/email/templates/forgot-password.tsx

@@ -11,7 +11,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 import {
   TemplateForgotPassword,
   TemplateForgotPasswordProps,

packages/email/templates/reset-password.tsx

@@ -14,7 +14,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 import {
   TemplateResetPassword,
   TemplateResetPasswordProps,

packages/ui/components/signing-card.tsx

@@ -148,7 +148,7 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
   return (
     <Card
       className={cn(
-        'group mx-auto flex aspect-[21/9] w-full items-center justify-center',
+        'group z-10 mx-auto flex aspect-[21/9] w-full items-center justify-center',
         className,
       )}
       degrees={-145}
@@ -180,14 +180,14 @@ type SigningCardImageProps = {
 const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
   return (
     <motion.div
-      className="pointer-events-none absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
+      className="pointer-events-none absolute -inset-32 -z-50 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
       initial={{
         opacity: 0,
-        scale: 0.8,
+        scale: 0.6,
       }}
       animate={{
         scale: 1,
-        opacity: 0.5,
+        opacity: 0.6,
       }}
       transition={{
         delay: 0.5,
@@ -197,7 +197,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
       <Image
         src={signingCelebrationImage}
         alt="background pattern"
-        className="w-full dark:invert dark:sepia"
+        className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
         style={{
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',