feat: reduce chart radius to add padding

Add husky & lint staged

.dockerignore

@@ -1,19 +1,17 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-**/node_modules
+node_modules
-**/.pnp
+.pnp
-**.pnp.js
+.pnp.js
 
 # testing
-**/coverage
+coverage
 
 # next.js
-**/.next/
+.next/
-**/out/
+out/
-
+build
-# production
-**/build
 
 # misc
 .DS_Store
@@ -23,16 +21,16 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
-.env*.local
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
 
 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-.env
-.env.example

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2

.env.example

@@ -1,54 +1,60 @@
-# Database
+# [[AUTH]]
-# Option 1: You can use the provided remote test database, courtesy of the documenso team: postgres://documenso_test_user:GnmLG14u12sd9zHsd4vVWwP40WneFJMo@dpg-cf2hljh4reb5o45oqpq0-a.oregon-postgres.render.com/documenso_test_e2i3
+NEXTAUTH_URL="http://localhost:3000"
-# Option 2: Set up a local Postgres SQL instance (RECOMMENDED)
+NEXTAUTH_SECRET="secret"
-# Option 3: Use the provided dx setup (RECOMMENDED)
-#   => postgres://documenso:password@127.0.0.1:54320/documenso
-#
-# ⚠ WARNING: The test database can be reset or taken offline at any point.
-# ⚠ WARNING: Please be aware that nothing written to the test database is private.
-DATABASE_URL=''
 
-# URL
+# [[AUTH OPTIONAL]]
-NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
+NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
+NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
-# AUTH
+# [[APP]]
-# For more see here: https://next-auth.js.org
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
-NEXTAUTH_SECRET='lorem ipsum sit dolor random string for encryption this could literally be anything'
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
-NEXTAUTH_URL='http://localhost:3000'
 
-# SIGNING
+# [[DATABASE]]
-CERT_FILE_PATH=
+NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
-CERT_PASSPHRASE=
-CERT_FILE_ENCODING=
 
-# MAIL (NODEMAILER)
+# [[SMTP]]
-# SENDGRID
+# OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
-# Get a Sendgrid Api key here: https://signup.sendgrid.com
+NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"
-SENDGRID_API_KEY=''
+# OPTIONAL: Defines the host to use for sending emails.
+NEXT_PRIVATE_SMTP_HOST="127.0.0.1"
+# OPTIONAL: Defines the port to use for sending emails.
+NEXT_PRIVATE_SMTP_PORT=2500
+# OPTIONAL: Defines the username to use with the SMTP server.
+NEXT_PRIVATE_SMTP_USERNAME="documenso"
+# OPTIONAL: Defines the password to use with the SMTP server.
+NEXT_PRIVATE_SMTP_PASSWORD="password"
+# OPTIONAL: Defines the API key user to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY_USER=
+# OPTIONAL: Defines the API key to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY=
+# OPTIONAL: Defines whether to force the use of TLS.
+NEXT_PRIVATE_SMTP_SECURE=
+# REQUIRED: Defines the sender name to use for the from address.
+NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
+# REQUIRED: Defines the email address to use as the from address.
+NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
+# OPTIONAL: The API key to use for the MailChannels proxy endpoint.
+NEXT_PRIVATE_MAILCHANNELS_API_KEY=
+# OPTIONAL: The endpoint to use for the MailChannels API if using a proxy.
+NEXT_PRIVATE_MAILCHANNELS_ENDPOINT=
+# OPTIONAL: The domain to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
+# OPTIONAL: The selector to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
+# OPTIONAL: The private key to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
 
-# SMTP
+# [[STRIPE]]
-# Set SMTP credentials to use SMTP instead of the Sendgrid API.
+NEXT_PRIVATE_STRIPE_API_KEY=
-# If you're using the dx setup you can use the following values:
+NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
-#
-# SMTP_MAIL_HOST='127.0.0.1'
-# SMTP_MAIL_PORT='2500'
-# SMTP_MAIL_USER='documenso'
-# SMTP_MAIL_PASSWORD='documenso'
-SMTP_MAIL_HOST=''
-SMTP_MAIL_PORT=''
-SMTP_MAIL_USER=''
-SMTP_MAIL_PASSWORD=''
-
-# Sender for signing requests and completion mails.
-MAIL_FROM='documenso@localhost.com'
-
-# STRIPE
-STRIPE_API_KEY=
-STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
-#FEATURE FLAGS
+# [[FEATURES]]
-# Allow users to register via the /signup page. Otherwise they will be redirect to the home page.
+NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
-NEXT_PUBLIC_ALLOW_SIGNUP=true
+
-NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS=false
+# This is only required for the marketing site
+# [[REDIS]]
+NEXT_PRIVATE_REDIS_URL=
+NEXT_PRIVATE_REDIS_TOKEN=

.eslintrc.cjs

@@ -0,0 +1,13 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@documenso/eslint-config'],
+  rules: {
+    '@next/next/no-img-element': 'off',
+  },
+  settings: {
+    next: {
+      rootDir: ['apps/*/'],
+    },
+  },
+};

.gitignore

@@ -1,19 +1,17 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
-/.pnp
+.pnp
 .pnp.js
 
 # testing
-/coverage
+coverage
 
 # next.js
-/.next/
+.next/
-/out/
+out/
-
+build
-# production
-/build
 
 # misc
 .DS_Store
@@ -23,19 +21,19 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
-.env*.local
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
 
 # vercel
 .vercel
 
-# typescript
+# contentlayer
-*.tsbuildinfo
+.contentlayer
-next-env.d.ts
-.env
-.env.example
-
-# turborepo
-.turbo

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

.vscode/settings.json

@@ -1,25 +1,10 @@
 {
-  "files.autoSave": "afterDelay",
-  "editor.formatOnSave": true,
-  "editor.formatOnPaste": true,
-  "editor.formatOnType": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[html]": {
-    "editor.defaultFormatter": "vscode.html-language-features"
-  },
-  "[prisma]": {
-    "editor.defaultFormatter": "Prisma.prisma"
-  },
-  "editor.codeActionsOnSave": {
-    "source.removeUnusedImports": false
-  },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "spellright.language": [
+  "editor.codeActionsOnSave": {
-    "de"
+    "source.fixAll.eslint": true
-  ],
+  },
-  "spellright.documentTypes": [
+  "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
-    "markdown",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
-    "latex",
+  "javascript.preferences.useAliasesForRenames": false,
-    "plaintext"
+  "typescript.enablePromptUseWorkspaceTsdk": true
-  ]
 }

CLA.md

@@ -0,0 +1,45 @@
+# Documenso Contributors License Agreement
+
+This Contributors License Agreement ("CLA") is entered into between the Contributor, and Documenso Inc. ("Documenso"), collectively referred to as the "Parties."
+
+## Background:
+
+Documenso is an open-source project aimed at providing an open-source document signing platform for all parties. This CLA governs the rights and contributions made by the Contributor to the Documenso project.
+
+## Agreement:
+
+**Contributor Grant of License:**
+
+By submitting code, documentation, or any other materials (collectively, "Contributions") to the Documenso project, the Contributor grants Documenso a perpetual, worldwide, non-exclusive, royalty-free, sublicensable license to use, modify, distribute, and otherwise exploit the Contributions, including any intellectual property rights therein, for the purposes of the Documenso project.
+
+**Representation of Ownership and Right to Contribute:**
+
+The Contributor represents that they have the legal right to grant the license stated in Section 1, and that the Contributions do not infringe upon the intellectual property rights of any third party. The Contributor also represents that they have the authority to submit the Contributions on their own behalf or, if applicable, on behalf of their employer or any other entity.
+
+**Patent Grant:**
+
+If the Contributions include any method, process, or apparatus that is covered by a patent, the Contributor agrees to grant Documenso a non-exclusive, worldwide, royalty-free license under any patent claims necessary to use, modify, distribute, and otherwise exploit the Contributions for the purposes of the Documenso project.
+
+**No Implied Warranties or Support:**
+
+The Contributor acknowledges that the Contributions are provided "as is," without any warranties or support of any kind. Documenso shall have no obligation to provide maintenance, updates, bug fixes, or support for the Contributions.
+
+**Retention of Contributor Rights:**
+
+The Contributor retains all right, title, and interest in and to their Contributions. This CLA does not restrict the Contributor from using their own Contributions for any other purpose.
+
+**Governing Law:**
+
+This CLA shall be governed by and construed in accordance with the laws of California (CA), without regard to its conflict of laws principles.
+
+**Entire Agreement:**
+
+This CLA constitutes the entire agreement between the Parties with respect to the subject matter hereof and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties.
+
+**Acceptance:**
+
+By submitting Contributions to the Documenso project, the Contributor acknowledges and agrees to the terms and conditions of this CLA. If the Contributor is agreeing to this CLA on behalf of an entity, they represent that they have the necessary authority to bind that entity to these terms.
+
+**Effective Date:**
+
+This CLA is effective as of the date of the first Contribution made by the Contributor to the Documenso project.

CONTRIBUTING.md

@@ -7,10 +7,11 @@ If you plan to contribute to Documenso, please take a moment to feel awesome ✨
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/documenso/documenso/pulls) or [issues](https://github.com/documenso/documenso/issues) for an open or closed item that relates to your submission.
 - Select and issue from [here](https://github.com/documenso/documenso/issues) or create a new one
 - Consider the results from the discussion in the issue
+- Accept the [Contributor License Agreement](https://documen.so/cla) to ensure we can accept your contributions.
 
 ## Developing
 
-The development branch is <code>main</code>. All pull request should be made against this branch. If you need help getting started, [join us on Slack](https://join.slack.com/t/documenso/shared_invite/zt-1qwxxsvli-nDyojjt~wakhgBGl9JRl2w).
+The development branch is <code>main</code>. All pull request should be made against this branch. If you need help getting started, [join us on Discord](https://documen.so/discord).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
    own GitHub account and then

README.md

@@ -11,7 +11,7 @@
     <a href="https://documenso.com"><strong>Learn more »</strong></a>
     <br />
     <br />
-    <a href="https://documen.so/slack">Slack</a>
+    <a href="https://documen.so/discord">Discord</a>
     ·
     <a href="https://documenso.com">Website</a>
     ·
@@ -22,7 +22,7 @@
 </p>
 
 <p align="center">
-   <a href="https://documen.so/slack"><img src="https://img.shields.io/badge/Slack-documenso.slack.com-%234A154B" alt="Join Documenso on Slack"></a> 
+   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a>
    <a href="https://github.com/documenso/documenso/stargazers"><img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars"></a>
    <a href="https://github.com/documenso/documenso/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
    <a href="https://github.com/documenso/documenso/pulse"><img src="https://img.shields.io/github/commit-activity/m/documenso/documenso" alt="Commits-per-month"></a>

apps/marketing/README.md

@@ -0,0 +1 @@
+# @documenso/marketing

apps/marketing/ambient.d.ts

@@ -0,0 +1 @@
+declare module '@documenso/tailwind-config';

apps/marketing/content/blog/announcing-open-source-docusign-alternative.mdx

@@ -0,0 +1,51 @@
+---
+title: Announcing Documenso
+description: Launching an open-source document signing tool because trusted-based products should be built on openness. The first release will be in 2023. Sign up at documenso.com to be on board.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2022-12-29
+tags:
+  - Announcement
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-announcing-documenso.webp"
+    width="1400"
+    height="884"
+    alt="Documenso announcement blog banner"
+  />
+
+  <figcaption className="text-center">Documenso — The Open Source DocuSign Alternative.</figcaption>
+</figure>
+
+## TL; DR;
+
+I'm launching an open source document signing tool because trust-based products should be built on openness. The first release will be in 2023. Sign up at <a href="https://documenso.com" target="_blank">documenso.com</a> and get on board.
+
+## Let’s build the world’s most trusted document-signing tool.
+
+Today I'm excited to announce my new project Documenso. Documenso is an open source document signing tool you can host yourself and freely build upon because it's, you know, open source. Before I get more into the details of what and when will be launched I want to take a moment and talk about why.
+
+## Digital signing is great
+
+Signing Documents digitally has countless benefits: Less struggle with printing, less wasting paper, faster request delivery, easier changes, easier coordination of people far away, verifiable document integrity, and verifiable signer identity (this is a vast topic, will write more on soon), easier storage and search of signed documents, the list goes on. Digital Signatures take something very old and very trusted like personally signing documents into the digital space, adding the benefits listed above. It also introduces a new party to every signing transaction, the signing tool providers. What was peer to peer transaction before, now goes through an intermediary. While this isn't a problem in itself, it should make us think about how we want these providers of trust to work.
+
+## How do we build trusted systems?
+
+While doing research for Documenso I came upon a quote that expresses the current state of document signing pretty well:
+
+> Document signing is NOT a technical problem. [Editor’s Note: Because it was solved technically a long time ago] It’s a legal acceptance problem — and everyone KNOWS DocuSign and friends and understands how they’re admissible. Anything else would have to compete with that and people would be suspicious of it for a long time.
+
+While this may sound like a hurdle at first, it immediately gave me a sense of validation for a more open approach to signing. People will and should be suspicious of their tools and demand a high bar when it comes to trust. And the way to earn this trust is by being open. Trusted tools should be the result of thoughtful discussion and reviews. They should be the result of the needs and will of its community. They should be transparent, adaptable, and empowering while using. Open Source embodies these values very well for software, which makes it a perfect fit for this space and creating a high-trust tool.
+
+## Next Steps
+
+So, what can you expect from here on out? I've started to build Documenso 0.1 which is scheduled to release in “early” 2023. If you're interested in helping make this happen, let me know via [hi@documenso.com](mailto:hi@documenso.com). Getting working code into the hands of the perspective Documenso community is currently the #1 goal. Other than that I'll be releasing several articles about document signing and what something like Documenso should look like, in my humble opinion. So stay tuned!
+
+If you think Documenso is worthy of support, please share <a href="https://documenso.com" target="_blank">documenso.com</a> with anyone interested, and sign up to be among the first to try out version 0.1 as soon as it launches.
+
+Cheers from Hamburg
+
+Timur

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -0,0 +1,98 @@
+---
+title: 'Building Documenso — Part 1: Certificates'
+description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-06-23
+tags:
+  - Open Source
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-building-documenso.webp"
+    width="1200"
+    height="675"
+    alt="Building Documenso blog banner"
+  />
+
+  <figcaption className="text-center">
+    What actually is a signature?
+  </figcaption>
+</figure>
+
+> Disclaimer: I’m not a lawyer and this isn’t legal advice. We plan to publish a much more specific framework on the topic of signature validity.
+
+This is the first installment of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+
+As you may have heard, we launched the community-reviewed <a href="https://github.com/documenso/documenso" target="_blank">version 0.9 of Documenso on GitHub</a> recently and it’s now available through the early adopter’s plan. One of the most fundamental choices we had to make on this first release, was the choice of certificate. While it’s interesting to know what we opted for, this shall also serve as a guide for everyone facing the same choice for self-hosting Documenso.
+
+> Question: Why do I need a document signing certificate to self-host?
+>
+> Short Answer: Inserting the images of a signature into the document is only part of the signing process.
+
+To have an actual digitally signed document you need a document signing certificate that is used to create the digital signature that is inserted into the document, alongside the visible one¹.
+
+When hosting a signature service yourself, as we do, there are four main choices for handling the certificate: Not using a certificate, creating your own, buying a trusted certificate, and becoming and trusted service provider to issue your own trusted certificate.
+
+## 1\. No Certificate
+
+A lot of signing services actually don’t employ actual digital signatures besides the inserted image. The only insert and image of the signatures into the document you sign. This can be done and is legally acceptable in many cases. This option isn’t directly supported by Documenso without changing the code.
+
+## 2\. Create your own
+
+Since the cryptography behind certificates is freely available as open source you could generate your own using OpenSSL for example. Since it’s hardly more work than option 1 (using Documenso at least), this would be my minimum effort recommendation. Having a self-created (“self-signed”) certificate doesn’t add much in terms of regulation but it guarantees the document’s integrity, meaning no changes have been made after signing². What this doesn’t give you, is the famous green checkmark in Adobe Acrobat. Why? Because you aren’t on the list of providers Adobe “trusts”.³
+
+## 3\. Buy a “trusted” certificate.
+
+There are Certificate Authorities (CAs) that can sell you a certificate⁴. The service they provide is, that they validate your name (personal certificates) or your organization’s name (corporate certificate) before creating your certificate for you, just like you did in option 2. The difference is, that they are listed on the previously mentioned trust lists (e.g. Adobe’s) and thus the resulting signatures get a nice, green checkmark in Adobe Reader⁵
+
+## 4\. Becoming a Trusted Certificate Authority (CA) yourself and create your own certificate
+
+This option is an incredibly complex endeavour, requiring a lot of effort and skill. It can be done, as there are multiple CAs around the world. Is it worth the effort? That depends a lot on what you’re trying to accomplish.
+
+<center>.&nbsp;&nbsp;.&nbsp;&nbsp;.</center>
+
+## What we did
+
+Having briefly introduced the options, here is what we did: Since we aim to raise the bar on digital signature proliferation and trust, we opted to buy an “Advanced Personal Certificates for Companies/Organisations” from WiseKey. Thus, documents signed with Documenso’s hosted version look like this:
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-fig-building-documenso.webp"
+    width="1262"
+    height="481"
+    alt="Figure 1"
+  />
+
+  <figcaption className="text-center">The famous green checkmark: Signed by hosted Documenso</figcaption>
+</figure>
+
+There weren’t any deeper reasons we choose WiseKey, other than they offered what we needed and there wasn’t any reason to look much further. While I didn’t map the entire certificate market offering (yet), I’m pretty sure something similar could be found elsewhere. While we opted for option 3, choosing option 2 might be perfectly reasonable considering your use case.⁶
+
+> While this is our setup, for now, we have a bigger plan for this topic. While globally trusted SSL Certificates have been available for free, courtesy of Let’s Encrypt, for a while now, there is no such thing as document signing. And there should be. Not having free and trusted infrastructure for signing is blocking a completely new generation of signing products from being created. This is why we’ll start working on option 4 when the time is right.
+
+Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
+or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
+
+Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>
+
+Best from Hamburg
+
+Timur
+
+\[1\] There are different approaches to signing a document. For the sake of simplicity, here we talk about a document with X inserted signature images, that is afterward signed once the by signing service, i.e. Documenso. If each visual signature should have its own digital one (e.g. QES — eIDAS Level 3), the case is a bit more complex.
+
+\[2\] Of course, the signing service provider technically can change and resign the document, especially in the case mentioned in \[1\]. This can be countered by requiring actual digital signatures from each signer, that are bound to their identity/ account. Creating a completely trustless system in the context however is extremely hard to do and not the most pressing business need for the industry at this point, in my opinion. Though, this would be nice.
+
+\[3\] Adobe, like the EU, has a list of organizations they trust. The Adobe green checkmark is powered by the Adobe trust list, if you want to be trusted by EU standards here: <a href="https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation" target="_blank">https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation</a>, you need to be on the EU trust list. Getting on each list is possible, though the latter is much more work.
+
+\[4\] Technically, they sign your certificate creation request (created by you), containing your info with their certificate (which is trusted), making your certificate trusted. This way, everything you sign with your certificate is seen as trusted. They created their certificate just like you, the difference is they are on the lists, mentioned in \[3\]
+
+\[5\] Why does Adobe get to say, what is trusted? They simply happen to have the most used pdf viewer. And since everyone checks there, whom they consider trusted carries weight. If it should be like this, is a different matter.
+
+\[6\] Self-Signed signatures, even purely visual signatures, are fully legally binding. Why you use changes mainly your confidence in the signature and the burden of proof. Also, some industries require a certain level of signatures e.g. retail loans (QES/ eIDAS Level 3 in the EU).

apps/marketing/content/blog/manifest.mdx

@@ -0,0 +1,29 @@
+---
+title: The Documenso Manifest
+description: Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-07-13
+tags:
+  - Manifesto
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-manifest.jpeg"
+    width="1260"
+    height="630"
+    alt="The Documenso Manifest blog banner"
+  />
+
+  <figcaption className="text-center">
+    Documenso — The Open Source DocuSign Alternative.
+  </figcaption>
+</figure>
+
+Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+
+We know that open source is the key to solving this need once and for all to benefit all humankind. Using open source kickstarts innovation by putting the open sharing of ideas and solutions first. With Documenso, we will create an open and globally accessible signing platform to empower users, customers, and developers to fulfill their needs. Documenso is built by and for the global community, listening and implementing what is needed. Being transparent with the code and the processes that use it brings trust and security to the platform.
+
+We build Documenso for longevity and scale by embracing the capital efficiency and inclusiveness of the Commercial Open Source (COSS) movement. We are building a global commodity for the world.

apps/marketing/content/blog/switching-from-slack-to-discord.mdx

@@ -0,0 +1,135 @@
+---
+title: Switching to Discord
+description: The Documenso community is growing and we feel the need to have a more community and developer-friendly environment. We're switching to Discord.
+authorName: 'Flo Merian'
+authorImage: '/blog/blog-author-flo.jpeg'
+authorRole: 'Go-to-market'
+date: 2023-08-02
+tags:
+  - Announcement
+  - Community
+---
+
+We’re switching to Discord.
+
+Documenso is an open-source DocuSign alternative, built with community and transparency in mind.
+
+So, when we started working on the project, we quickly set up a Slack workspace to start engaging with community members.
+
+As the community grows (reached 2K stars on GitHub and 100 community members on Slack), we felt the need to set up a more community-friendly environment.
+
+The Documenso team is growing, too. [Lucas joined Timur](https://twitter.com/ElTimuro/status/1648608988391514112), then [Ephraim](https://twitter.com/documenso/status/1662418374243041280) and [David](https://github.com/dguyen) recently joined the journey. We want to stay in touch with the community as much as possible and avoid context-switching to focus on work, support, and fun.
+
+We’re an open-source project and focus on building a great developer experience. So, when we thought of a Slack replacement, community and developer-friendly, Discord was an obvious choice — not to mention that it would help us keep up with [OSS friends](https://documen.so/oss), too.
+
+So, we’re switching all conversations, team and community-wide, to Discord.
+
+In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+
+Instead, we’ll focus on *how* we plan to make the switch.
+
+## Who is this story for?
+
+First, we wrote this post for the team so we’re ready for the switch. Then we post it online because we value transparency and thought it might help the community.
+
+For community members, this story would help you understand how we plan to make the switch and give you the guidance to fully embrace the new experience.
+
+For founders and makers who would like to switch too, in one way or another, this story would help you handle the transition with a detailed guide.
+
+## Switching to Discord
+
+We’re switching to Discord, step by step. First, we’re moving team conversations, then we’re moving the community with a 15-day buffering. 
+
+The detailed plan goes like this:
+
+- 2023-07-25 `t=0`: Timur starts setting up the Discord server and sends invites to the team.
+- 2023-07-26 `t+1`: The team switches to Discord. The objective is to get used to the product and to customize it to feel at home and, when we’re ready to welcome the community, to make new members feel at home, too.
+- 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
+
+    - **GitHub**
+        - Create new Pull Request
+            - Add story to the blog
+            - Update link to the community
+                
+            ```
+            https://documen.so/discord
+            ```
+                
+        - Start a new Discussion
+            
+            ```markdown
+            Happy Wednesday!
+            
+            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+            
+            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+            
+            Make sure to join the server to keep up to date on all things Documenso. 
+            
+            Oh and, spoiler alert, there may be some swag there 👀
+            
+            See you there!
+            Flo
+            ```
+            
+    - **Twitter**
+        - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
+        - Pin Tweet
+        - Update link in bio
+            
+            ```
+            The Open Source DocuSign Alternative.
+            
+            http://documen.so/github
+            http://documen.so/discord
+            http://documen.so/manifest
+            ㅤ
+            ```
+            
+    - **Slack**
+        - Post message in `#general`
+            
+            ```markdown
+            Happy Wednesday!
+            
+            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+            
+            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+            
+            Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso. 
+            
+            Oh and, spoiler alert, there may be some swag there 👀
+            
+            See you there!
+            Flo
+            ```
+            
+        - Pin post
+        - Set topic and description
+            
+            ```
+            We're switching to Discord. Join the fun: https://documen.so/discord
+            ```
+            
+        - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
+        
+- 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
+    - **Slack**
+        - Schedule reminder in `#general`
+            
+            ```
+            Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
+            
+            Join the fun! https://documen.so/discord
+            ```
+            
+- 2023-08-16 `t+22`: 15 days later, we’re making the final edits to the Slack workspace.
+    - **Slack**
+        - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
+        - Disconnect Slack
+
+## Final thoughts
+
+- We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
+- For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/content/privacy.mdx

@@ -0,0 +1,256 @@
+---
+title: Privacy Policy
+---
+
+# Privacy Policy
+
+Effective date: 05/28/2023
+
+### 1\. Introduction
+
+Welcome to **Documenso Inc.**
+
+Documenso Inc. (“us”, “we”, or “our”) operates [https://documenso.com](https://documenso.com) (hereinafter referred to as “ **Service**”).
+
+Our Privacy Policy governs your visit to [https://documenso.com](https://documenso.com), and explains how we collect, safeguard and disclose information that results from your use of our Service.
+
+We use your data to provide and improve Service. By using Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, the terms used in this Privacy Policy have the same meanings as in our Terms and Conditions.
+
+Our Terms and Conditions (“**Terms**”) govern all use of our Service and together with the Privacy Policy constitutes your agreement with us (“ **agreement**”).
+
+### 2\. Definitions
+
+**SERVICE** means the https://documenso.com website operated by Documenso Inc.
+
+**PERSONAL DATA** means data about a living individual who can be identified from those data (or from those and other information either in our possession or likely to come into our possession).
+
+**USAGE DATA** is data collected automatically either generated by the use of Service or from Service infrastructure itself (for example, the duration of a page visit).
+
+**COOKIES** are small files stored on your device (computer or mobile device).
+
+**DATA CONTROLLER** means a natural or legal person who (either alone or jointly or in common with other persons) determines the purposes for which and the manner in which any personal data are, or are to be, processed. For the purpose of this Privacy Policy, we are a Data Controller of your data.
+
+**DATA PROCESSORS (OR SERVICE PROVIDERS)** means any natural or legal person who processes the data on behalf of the Data Controller. We may use the services of various Service Providers in order to process your data more effectively.
+
+**DATA SUBJECT** is any living individual who is the subject of Personal Data.
+
+**THE USER** is the individual using our Service. The User corresponds to the Data Subject, who is the subject of Personal Data.
+
+### 3\. Information Collection and Use
+
+We collect several different types of information for various purposes to provide and improve our Service to you.
+
+### 4\. Types of Data Collected
+
+**Personal Data**
+
+While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you (“**Personal Data**”). Personally identifiable information may include, but is not limited to:
+
+1.  Email address
+2.  First name and last name
+3.  Cookies and Usage Data
+
+We may use your Personal Data to contact you with newsletters, marketing or promotional materials and other information that may be of interest to you. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link.
+
+**Usage Data**
+
+We may also collect information that your browser sends whenever you visit our Service or when you access Service by or through a mobile device (“**Usage Data**”).
+
+This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+
+When you access Service with a mobile device, this Usage Data may include information such as the type of mobile device you use, your mobile device unique ID, the IP address of your mobile device, your mobile operating system, the type of mobile Internet browser you use, unique device identifiers and other diagnostic data.
+
+**Tracking Cookies Data**
+
+We use cookies and similar tracking technologies to track the activity on our Service and we hold certain information.
+
+Cookies are files with a small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Other tracking technologies are also used such as beacons, tags and scripts to collect and track information and to improve and analyze our Service.
+
+You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.
+
+Examples of Cookies we use:
+
+1.  **Session Cookies:** We use Session Cookies to operate our Service.
+2.  **Preference Cookies:** We use Preference Cookies to remember your preferences and various settings.
+3.  **Security Cookies:** We use Security Cookies for security purposes.
+4.  **Advertising Cookies:** Advertising Cookies are used to serve you with advertisements that may be relevant to you and your interests.
+
+### 5\. Use of Data
+
+Documenso Inc. uses the collected data for various purposes:
+
+1.  to provide and maintain our Service;
+2.  to notify you about changes to our Service;
+3.  to allow you to participate in interactive features of our Service when you choose to do so;
+4.  to provide customer support;
+5.  to gather analysis or valuable information so that we can improve our Service;
+6.  to monitor the usage of our Service;
+7.  to detect, prevent and address technical issues;
+8.  to fulfill any other purpose for which you provide it;
+9.  to carry out our obligations and enforce our rights arising from any contracts entered into between you and us, including for billing and collection;
+10. to provide you with notices about your account and/or subscription, including expiration and renewal notices, email-instructions, etc.;
+11. to provide you with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless you have opted not to receive such information;
+12. in any other way we may describe when you provide the information;
+13. for any other purpose with your consent.
+
+### 6\. Retention of Data
+
+We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+
+### 7\. Transfer of Data
+
+Your information, including Personal Data, may be transferred to – and maintained on – computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ from those of your jurisdiction.
+
+If you are located outside United States and choose to provide information to us, please note that we transfer the data, including Personal Data, to United States and process it there.
+
+Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.
+
+Documenso Inc. will take all the steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organisation or a country unless there are adequate controls in place including the security of your data and other personal information.
+
+### 8\. Disclosure of Data
+
+We may disclose personal information that we collect, or you provide:
+
+1.  **Disclosure for Law Enforcement.**
+2.  Under certain circumstances, we may be required to disclose your Personal Data if required to do so by law or in response to valid requests by public authorities.
+3.  **Business Transaction.**
+4.  If we or our subsidiaries are involved in a merger, acquisition or asset sale, your Personal Data may be transferred.
+5.  **Other cases. We may disclose your information also:**
+    1.  to our subsidiaries and affiliates;
+    2.  to contractors, service providers, and other third parties we use to support our business;
+    3.  to fulfill the purpose for which you provide it;
+
+### 9\. Security of Data
+
+The security of your data is important to us but remember that no method of transmission over the Internet or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security.
+
+### 10\. Your Data Protection Rights Under General Data Protection Regulation (GDPR)
+
+If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights, covered by GDPR. – See more at [https://eur-lex.europa.eu/eli/reg/2016/679/oj](https://eur-lex.europa.eu/eli/reg/2016/679/oj)
+
+We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.
+
+If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please email us at hi@documenso.com.
+
+In certain circumstances, you have the following data protection rights:
+
+1.  the right to access, update or to delete the information we have on you;
+2.  the right of rectification. You have the right to have your information rectified if that information is inaccurate or incomplete;
+3.  the right to object. You have the right to object to our processing of your Personal Data;
+4.  the right of restriction. You have the right to request that we restrict the processing of your personal information;
+5.  the right to data portability. You have the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format;
+6.  the right to withdraw consent. You also have the right to withdraw your consent at any time where we rely on your consent to process your personal information;
+
+Please note that we may ask you to verify your identity before responding to such requests. Please note, we may not able to provide Service without some necessary data.
+
+You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA).
+
+### 11\. Your Data Protection Rights under the California Privacy Protection Act (CalOPPA)
+
+CalOPPA is the first state law in the nation to require commercial websites and online services to post a privacy policy. The law’s reach stretches well beyond California to require a person or company in the United States (and conceivable the world) that operates websites collecting personally identifiable information from California consumers to post a conspicuous privacy policy on its website stating exactly the information being collected and those individuals with whom it is being shared, and to comply with this policy. – See more at: [https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/](https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/)
+
+According to CalOPPA we agree to the following:
+
+1.  users can visit our site anonymously;
+2.  our Privacy Policy link includes the word “Privacy”, and can easily be found on the page specified above on the home page of our website;
+3.  users will be notified of any privacy policy changes on our Privacy Policy Page;
+4.  users are able to change their personal information by emailing us at hi@documenso.com.
+
+Our Policy on “Do Not Track” Signals:
+
+We honor Do Not Track signals and do not track, plant cookies, or use advertising when a Do Not Track browser mechanism is in place. Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.
+
+You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.
+
+### 12\. Your Data Protection Rights under the California Consumer Privacy Act (CCPA)
+
+If you are a California resident, you are entitled to learn what data we collect about you, ask to delete your data and not to sell (share) it. To exercise your data protection rights, you can make certain requests and ask us:
+
+1.  **What personal information we have about you**. If you make this request, we will return to you:
+
+    1.  The categories of personal information we have collected about you.
+    2.  The categories of sources from which we collect your personal information.
+    3.  The business or commercial purpose for collecting or selling your personal information.
+    4.  The categories of third parties with whom we share personal information.
+    5.  The specific pieces of personal information we have collected about you.
+    6.  A list of categories of personal information that we have sold, along with the category of any other company we sold it to. If we have not sold your personal information, we will inform you of that fact.
+    7.  A list of categories of personal information that we have disclosed for a business purpose, along with the category of any other company we shared it with.
+
+    Please note, you are entitled to ask us to provide you with this information up to two times in a rolling twelve-month period. When you make this request, the information provided may be limited to the personal information we collected about you in the previous 12 months.
+
+2.  **To delete your personal information**. If you make this request, we will delete the personal information we hold about you as of the date of your request from our records and direct any service providers to do the same. In some cases, deletion may be accomplished through de-identification of the information. If you choose to delete your personal information, you may not be able to use certain functions that require your personal information to operate.
+3.  **To stop selling your personal information**. We don't sell or rent your personal information to any third parties for any purpose. You are the only owner of your Personal Data and can request disclosure or deletion at any time.
+
+Please note, if you ask us to delete or stop selling your data, it may impact your experience with us, and you may not be able to participate in certain programs or membership services which require the usage of your personal information to function. But in no circumstances, we will discriminate against you for exercising your rights.
+
+To exercise your California data protection rights described above, please send your request(s) by one of the following means:
+
+By email: hi@documenso.com
+
+Your data protection rights, described above, are covered by the CCPA, short for the California Consumer Privacy Act. To find out more, visit the official [California Legislative Information website](https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=201720180AB375). The CCPA took effect on 01/01/2020.
+
+### 13\. Service Providers
+
+We may employ third party companies and individuals to facilitate our Service (“ **Service Providers**”), provide Service on our behalf, perform Service-related services or assist us in analysing how our Service is used.
+
+These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.
+
+### 14\. Analytics
+
+We may use third-party Service Providers to monitor and analyze the use of our Service.
+
+**Plausible Analytics**
+
+Plausible Analytics is an analytics service provided by Conva Ventures Inc. You can find their Privacy Policy here: [https://plausible.io/privacy](https://plausible.io/privacy)
+
+### 15\. CI/CD tools
+
+We may use third-party Service Providers to automate the development process of our Service.
+
+**GitHub**
+
+GitHub is provided by GitHub, Inc.
+
+GitHub is a development platform to host and review code, manage projects, and build software.
+
+For more information on what data GitHub collects for what purpose and how the protection of the data is ensured, please visit GitHub Privacy Policy page: [https://help.github.com/en/articles/github-privacy-statement](https://help.github.com/en/articles/github-privacy-statement) .
+
+### 16\. Payments
+
+We may provide paid products and/or services within Service. In that case, we use third-party services for payment processing (e.g. payment processors).
+
+We will not store or collect your payment card details. That information is provided directly to our third-party payment processors whose use of your personal information is governed by their Privacy Policy. These payment processors adhere to the standards set by PCI-DSS as managed by the PCI Security Standards Council, which is a joint effort of brands like Visa, Mastercard, American Express and Discover. PCI-DSS requirements help ensure the secure handling of payment information.
+
+The payment processors we work with are:
+
+**Stripe:**
+
+Their Privacy Policy can be viewed at: [https://stripe.com/us/privacy](https://stripe.com/us/privacy)
+
+### 17\. Links to Other Sites
+
+Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
+
+We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+
+### 18\. Children's Privacy
+
+Our Services are not intended for use by children under the age of 18 (“ **Child**” or “**Children**”).
+
+We do not knowingly collect personally identifiable information from Children under 18. If you become aware that a Child has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from Children without verification of parental consent, we take steps to remove that information from our servers.
+
+### 19\. Changes to This Privacy Policy
+
+We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
+
+We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update “effective date” at the top of this Privacy Policy.
+
+You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
+
+### 20\. Contact Us
+
+If you have any questions about this Privacy Policy, please contact us:
+
+By email: hi@documenso.com.

apps/marketing/contentlayer.config.ts

@@ -0,0 +1,33 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+
+export const BlogPost = defineDocumentType(() => ({
+  name: 'BlogPost',
+  filePathPattern: `blog/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+    description: { type: 'string', required: true },
+    date: { type: 'date', required: true },
+    tags: { type: 'list', of: { type: 'string' }, required: false, default: [] },
+    authorName: { type: 'string', required: true },
+    authorImage: { type: 'string', required: false },
+    authorRole: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export const GenericPage = defineDocumentType(() => ({
+  name: 'GenericPage',
+  filePathPattern: '**/*.mdx',
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export default makeSource({ contentDirPath: 'content', documentTypes: [BlogPost, GenericPage] });

apps/marketing/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/marketing/next.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const { withContentlayer } = require('next-contentlayer');
+
+const { parsed: env } = require('dotenv').config({
+  path: path.join(__dirname, '../../.env.local'),
+});
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  env,
+};
+
+module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@documenso/marketing",
+  "version": "0.1.0",
+  "private": true,
+  "license": "AGPL-3.0",
+  "scripts": {
+    "dev": "PORT=3001 next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@documenso/lib": "*",
+    "@documenso/tailwind-config": "*",
+    "@documenso/trpc": "*",
+    "@documenso/ui": "*",
+    "@hookform/resolvers": "^3.1.0",
+    "contentlayer": "^0.3.4",
+    "framer-motion": "^10.12.8",
+    "lucide-react": "^0.214.0",
+    "micro": "^10.0.1",
+    "next": "13.4.12",
+    "next-auth": "4.22.3",
+    "next-contentlayer": "^0.3.4",
+    "next-plausible": "^3.10.1",
+    "perfect-freehand": "^1.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-icons": "^4.8.0",
+    "recharts": "^2.7.2",
+    "typescript": "5.1.6",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@types/node": "20.1.0",
+    "@types/react": "18.2.18",
+    "@types/react-dom": "18.2.7"
+  }
+}

apps/marketing/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/marketing/process-env.d.ts

@@ -0,0 +1,13 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    NEXT_PUBLIC_SITE_URL?: string;
+
+    NEXT_PRIVATE_DATABASE_URL: string;
+
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
+
+    NEXT_PRIVATE_STRIPE_API_KEY: string;
+    NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
+  }
+}

apps/marketing/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/marketing/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Documenso",
+  "short_name": "Documenso",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#A2E771",
+  "background_color": "#FFFFFF",
+  "display": "standalone"
+}

apps/marketing/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

apps/marketing/src/api/claim-plan/fetcher.ts

@@ -0,0 +1,41 @@
+import { TClaimPlanRequestSchema, ZClaimPlanResponseSchema } from './types';
+
+export const claimPlan = async ({
+  name,
+  email,
+  planId,
+  signatureDataUrl,
+  signatureText,
+}: TClaimPlanRequestSchema) => {
+  const response = await fetch('/api/claim-plan', {
+    method: 'POST',
+    body: JSON.stringify({
+      name,
+      email,
+      planId,
+      signatureDataUrl,
+      signatureText,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const body = await response.json();
+
+  if (response.status !== 200) {
+    throw new Error('Failed to claim plan');
+  }
+
+  const safeBody = ZClaimPlanResponseSchema.safeParse(body);
+
+  if (!safeBody.success) {
+    throw new Error('Failed to claim plan');
+  }
+
+  if ('error' in safeBody.data) {
+    throw new Error(safeBody.data.error);
+  }
+
+  return safeBody.data.redirectUrl;
+};

apps/marketing/src/api/claim-plan/types.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod';
+
+export const ZClaimPlanRequestSchema = z
+  .object({
+    email: z
+      .string()
+      .email()
+      .transform((value) => value.toLowerCase()),
+    name: z.string(),
+    planId: z.string(),
+  })
+  .and(
+    z.union([
+      z.object({
+        signatureDataUrl: z.string().min(1),
+        signatureText: z.null(),
+      }),
+      z.object({
+        signatureDataUrl: z.null(),
+        signatureText: z.string().min(1),
+      }),
+    ]),
+  );
+
+export type TClaimPlanRequestSchema = z.infer<typeof ZClaimPlanRequestSchema>;
+
+export const ZClaimPlanResponseSchema = z
+  .object({
+    redirectUrl: z.string(),
+  })
+  .or(
+    z.object({
+      error: z.string(),
+    }),
+  );
+
+export type TClaimPlanResponseSchema = z.infer<typeof ZClaimPlanResponseSchema>;

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import { notFound } from 'next/navigation';
+
+import { allDocuments } from 'contentlayer/generated';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { content: string } }) => {
+  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!document) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${document.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+/**
+ * A generic catch all page for the root level that checks for content layer documents.
+ *
+ * Will render the document if it exists, otherwise will return a 404.
+ */
+export default function ContentPage({ params }: { params: { content: string } }) {
+  const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto">
+      <MDXContent components={mdxComponents} />
+    </article>
+  );
+}

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -0,0 +1,88 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { allBlogPosts } from 'contentlayer/generated';
+import { ChevronLeft } from 'lucide-react';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { post: string } }) => {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!blogPost) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${blogPost.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+export default function BlogPostPage({ params }: { params: { post: string } }) {
+  const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto py-8">
+      <div className="mb-6 text-center">
+        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
+          {new Date(post.date).toLocaleDateString()}
+        </time>
+
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+
+        <div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
+          <div className="h-10 w-10 rounded-full bg-gray-50">
+            {post.authorImage && (
+              <img
+                src={post.authorImage}
+                alt={`Image of ${post.authorName}`}
+                className="h-10 w-10 rounded-full bg-gray-50"
+              />
+            )}
+          </div>
+
+          <div className="text-sm leading-6">
+            <p className="text-foreground text-left font-semibold">{post.authorName}</p>
+            <p className="text-muted-foreground">{post.authorRole}</p>
+          </div>
+        </div>
+      </div>
+
+      <MDXContent components={mdxComponents} />
+
+      {post.tags.length > 0 && (
+        <ul className="not-prose flex list-none flex-row space-x-2 px-0">
+          {post.tags.map((tag, i) => (
+            <li
+              key={`tag-${i}`}
+              className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
+            >
+              {tag}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <hr />
+
+      <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
+        <ChevronLeft className="mr-2 h-6 w-6" />
+        Back to all posts
+      </Link>
+    </article>
+  );
+}

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -0,0 +1,80 @@
+import { allBlogPosts } from 'contentlayer/generated';
+
+export default function BlogPage() {
+  const blogPosts = allBlogPosts.sort((a, b) => {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">From the blog</h1>
+
+        <p className="mx-auto mt-4 max-w-xl text-center text-lg leading-normal text-[#31373D]">
+          Get the latest news from Documenso, including product updates, team announcements and
+          more!
+        </p>
+      </div>
+
+      <div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
+        {blogPosts.map((post, i) => (
+          <article
+            key={`blog-${i}`}
+            className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
+          >
+            <div className="flex items-center gap-x-4 text-xs">
+              <time dateTime={post.date} className="text-muted-foreground">
+                {new Date(post.date).toLocaleDateString()}
+              </time>
+
+              {post.tags.length > 0 && (
+                <ul className="flex flex-row space-x-2">
+                  {post.tags.map((tag, j) => (
+                    <li
+                      key={`blog-${i}-tag-${j}`}
+                      className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
+                    >
+                      {tag}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="group relative">
+              <h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
+                <a href={post.href}>
+                  <span className="absolute inset-0" />
+                  {post.title}
+                </a>
+              </h3>
+              <p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
+                {post.description}
+              </p>
+            </div>
+
+            <div className="relative mt-4 flex items-center gap-x-4">
+              <div className="h-10 w-10 rounded-full bg-slate-50">
+                {post.authorImage && (
+                  <img
+                    src={post.authorImage}
+                    alt={`Image of ${post.authorName}`}
+                    className="h-10 w-10 rounded-full bg-slate-50"
+                  />
+                )}
+              </div>
+
+              <div className="text-sm leading-6">
+                <p className="text-foreground font-semibold">{post.authorName}</p>
+                <p className="text-foreground/60">{post.authorRole}</p>
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/claimed/page.tsx

@@ -0,0 +1,173 @@
+import { Caveat } from 'next/font/google';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ArrowRight } from 'lucide-react';
+
+import { redis } from '@documenso/lib/server-only/redis';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { prisma } from '@documenso/prisma';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { PasswordReveal } from '~/components/(marketing)/password-reveal';
+
+const fontCaveat = Caveat({
+  weight: ['500'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+export type ClaimedPlanPageProps = {
+  searchParams?: {
+    sessionId?: string;
+  };
+};
+
+export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlanPageProps) {
+  const { sessionId } = searchParams;
+
+  const session = await stripe.checkout.sessions.retrieve(sessionId as string);
+
+  const user = await prisma.user.findFirst({
+    where: {
+      id: Number(session.client_reference_id),
+    },
+  });
+
+  if (!user) {
+    redirect('/');
+  }
+
+  const signatureText = session.metadata?.signatureText || user.name;
+  let signatureDataUrl = '';
+
+  if (session.metadata?.signatureDataUrl) {
+    const result = await redis.get<string>(`signature:${session.metadata.signatureDataUrl}`);
+
+    if (result) {
+      signatureDataUrl = result;
+    }
+  }
+
+  const password = await redis.get<string>(`user:${user.id}:temp-password`);
+
+  return (
+    <div className="mt-12">
+      <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">
+        Welcome to the <span className="text-primary">open signing</span> revolution{' '}
+        <u>{user.name}</u>
+      </h1>
+
+      <p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
+        It's not every day you get to be part of a revolution.
+      </p>
+
+      <p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
+        But today is that day, by signing up to Documenso, you're joining a movement of people who
+        want to make the world a better place.
+      </p>
+
+      <p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
+        We're going to change the way people sign documents. We're going to make it easier, faster,
+        and more secure. And we're going to do it together.
+      </p>
+
+      <div className="mt-12">
+        <h2 className="text-2xl font-bold text-slate-900">Let's do it together</h2>
+
+        <div className="-mx-4 mt-8 flex md:-mx-8">
+          <div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
+            <p
+              className={cn(
+                'text-4xl font-semibold text-slate-900 md:text-5xl',
+                fontCaveat.className,
+              )}
+            >
+              Timur
+            </p>
+
+            <p className="text-sm text-slate-500 md:text-lg">
+              Timur Ercan
+              <span className="block lg:hidden" />
+              <span className="hidden lg:inline"> - </span>
+              Co Founder
+            </p>
+          </div>
+
+          <div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
+            <p
+              className={cn(
+                'text-4xl font-semibold text-slate-900 md:text-5xl',
+                fontCaveat.className,
+              )}
+            >
+              Lucas
+            </p>
+
+            <p className="text-sm text-slate-500 md:text-lg">
+              Lucas Smith
+              <span className="block lg:hidden" />
+              <span className="hidden lg:inline"> - </span>
+              Co Founder
+            </p>
+          </div>
+
+          <div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
+            {signatureDataUrl && (
+              <img src={signatureDataUrl} alt="your-signature" className="max-w-[172px]" />
+            )}
+            {!signatureDataUrl && (
+              <p
+                className={cn(
+                  'text-4xl font-semibold text-slate-900 md:text-5xl',
+                  fontCaveat.className,
+                )}
+              >
+                {signatureText}
+              </p>
+            )}
+
+            <p className="text-sm text-slate-500 md:text-lg">
+              {user.name}
+              <span className="block lg:hidden" />
+              <span className="hidden lg:inline"> - </span>
+              Our new favourite customer
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-12">
+        <h2 className="text-2xl font-bold text-slate-900">Your sign in details</h2>
+
+        <div className="mt-4">
+          <p className="text-lg text-slate-500">
+            <span className="font-bold">Email:</span> {user.email}
+          </p>
+
+          <p className="mt-2 text-lg text-slate-500">
+            <span className="font-bold">Password:</span>{' '}
+            <PasswordReveal password={password ?? 'password'} />
+          </p>
+        </div>
+
+        <p className="mt-4 text-sm italic text-slate-500">
+          This is a temporary password. Please change it as soon as possible.
+        </p>
+
+        <Link
+          // eslint-disable-next-line turbo/no-undeclared-env-vars
+          href={`${process.env.NEXT_PUBLIC_APP_URL}/login`}
+          target="_blank"
+          className="mt-4 block"
+        >
+          <Button size="lg" className="text-base">
+            Let's get started!
+            <ArrowRight className="ml-2 h-5 w-5" />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/layout.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Footer } from '~/components/(marketing)/footer';
+import { Header } from '~/components/(marketing)/header';
+
+export type MarketingLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function MarketingLayout({ children }: MarketingLayoutProps) {
+  return (
+    <div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+      <div className="fixed left-0 top-0 z-50 w-full bg-white/50 backdrop-blur-md">
+        <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      </div>
+
+      <div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
+
+      <Footer className="mt-24 bg-transparent backdrop-blur-[2px]" />
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { HTMLAttributes, useEffect, useState } from 'react';
+
+import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { CAP_TABLE } from './data';
+
+const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
+const RADIAN = Math.PI / 180;
+
+export type LabelRenderProps = {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  percent: number;
+};
+
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: LabelRenderProps) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.25;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${(percent * 100).toFixed(1)}%`}
+    </text>
+  );
+};
+
+export type CapTableProps = HTMLAttributes<HTMLDivElement>;
+
+export const CapTable = ({ className, ...props }: CapTableProps) => {
+  const [isSSR, setIsSSR] = useState(true);
+
+  useEffect(() => {
+    setIsSSR(false);
+  }, []);
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        {!isSSR && (
+          <PieChart width={400} height={400}>
+            <Pie
+              data={CAP_TABLE}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={renderCustomizedLabel}
+              outerRadius={160}
+              innerRadius={80}
+              fill="#8884d8"
+              dataKey="percentage"
+            >
+              {CAP_TABLE.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Legend
+              formatter={(value) => {
+                return <span className="text-sm text-black">{value}</span>;
+              }}
+            />
+            <Tooltip
+              formatter={(percent: number, name, props) => {
+                return [`${percent}%`, name || props['name'] || props['payload']['name']];
+              }}
+            />
+          </PieChart>
+        )}
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/data.ts

@@ -0,0 +1,124 @@
+export const TEAM_MEMBERS = [
+  {
+    name: 'Timur Ercan',
+    role: 'Co-Founder, CEO',
+    salary: 95_000,
+    location: 'Germany',
+    engagement: 'Full-Time',
+    joinDate: 'November 14th, 2022',
+  },
+  {
+    name: 'Lucas Smith',
+    role: 'Co-Founder, CTO',
+    salary: 95_000,
+    location: 'Australia',
+    engagement: 'Full-Time',
+    joinDate: 'April 19th, 2023',
+  },
+  {
+    name: 'Ephraim Atta-Duncan',
+    role: 'Software Engineer - Intern',
+    salary: 15_000,
+    location: 'Ghana',
+    engagement: 'Part-Time',
+    joinDate: 'June 6th, 2023',
+  },
+  {
+    name: 'Florent Merian',
+    role: 'Marketer - III',
+    salary: 'Project-Based',
+    location: 'France',
+    engagement: 'Full-Time',
+    joinDate: 'July 10th, 2023',
+  },
+  {
+    name: 'Thilo Konzok',
+    role: 'Designer',
+    salary: 'Project-Based',
+    location: 'Germany',
+    engagement: 'Full-Time',
+    joinDate: 'April 26th, 2023',
+  },
+  {
+    name: 'David Nguyen',
+    role: 'Software Engineer - III',
+    salary: 100_000,
+    location: 'Australia',
+    engagement: 'Full-Time',
+    joinDate: 'July 26th, 2023',
+  },
+];
+
+export const FUNDING_RAISED = [
+  {
+    date: '2023-04',
+    amount: 0,
+  },
+  {
+    date: '2023-05',
+    amount: 300_000,
+  },
+  {
+    date: '2023-07',
+    amount: 1_550_000,
+  },
+];
+
+export const SALARY_BANDS = [
+  {
+    title: 'Software Engineer - Intern',
+    seniority: 'Intern',
+    salary: 30_000,
+  },
+  {
+    title: 'Software Engineer - I',
+    seniority: 'Junior',
+    salary: 60_000,
+  },
+  {
+    title: 'Software Engineer - II',
+    seniority: 'Mid',
+    salary: 80_000,
+  },
+  {
+    title: 'Software Engineer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Software Engineer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
+  {
+    title: 'Designer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Designer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
+  {
+    title: 'Marketer - I',
+    seniority: 'Junior',
+    salary: 50_000,
+  },
+  {
+    title: 'Marketer - II',
+    seniority: 'Mid',
+    salary: 65_000,
+  },
+  {
+    title: 'Marketer - III',
+    seniority: 'Senior',
+    salary: 80_000,
+  },
+];
+
+export const CAP_TABLE = [
+  { name: 'Founders', percentage: 75.5 },
+  { name: 'Investors', percentage: 14.5 },
+  { name: 'Team Pool', percentage: 10 },
+];

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
+
+export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
+  const formattedData = FUNDING_RAISED.map((item) => ({
+    amount: Number(item.amount),
+    date: formatMonth(item.date),
+  }));
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="date" />
+            <YAxis
+              tickFormatter={(value) =>
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                })
+              }
+            />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                }),
+                'Amount Raised',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="amount" fill="hsl(var(--primary))" label="Amount Raised" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/gh-metrics.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { StargazersType } from './page';
+
+export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
+export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
+  data: StargazersType;
+  metricKey: MetricsDataKey;
+  title: string;
+  label: string;
+  chartHeight?: number;
+};
+
+export const GithubMetric = ({
+  className,
+  data,
+  metricKey,
+  title,
+  label,
+  chartHeight = 400,
+  ...props
+}: GithubMetricProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      [metricKey]: data[key][metricKey],
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={chartHeight}>
+          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), label]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/metric-card.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MetricCardProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  value: string;
+};
+
+export const MetricCard = ({ className, title, value, ...props }: MetricCardProps) => {
+  return (
+    <div className={cn('rounded-md border p-4 shadow-sm hover:shadow', className)} {...props}>
+      <h4 className="text-muted-foreground text-sm font-medium">{title}</h4>
+
+      <p className="mb-2 mt-6 text-4xl font-bold">{value}</p>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -0,0 +1,154 @@
+import { z } from 'zod';
+
+import { MetricCard } from '~/app/(marketing)/open/metric-card';
+import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
+
+import { CapTable } from './cap-table';
+import { FundingRaised } from './funding-raised';
+import { GithubMetric } from './gh-metrics';
+import { TeamMembers } from './team-members';
+
+export const revalidate = 86400;
+
+const ZGithubStatsResponse = z.object({
+  stargazers_count: z.number(),
+  forks_count: z.number(),
+  open_issues: z.number(),
+});
+
+const ZMergedPullRequestsResponse = z.object({
+  total_count: z.number(),
+});
+
+const ZStargazersLiveResponse = z.record(
+  z.object({
+    stars: z.number(),
+    forks: z.number(),
+    mergedPRs: z.number(),
+    openIssues: z.number(),
+  }),
+);
+
+export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+
+// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
+
+export default async function OpenPage() {
+  const {
+    forks_count: forksCount,
+    open_issues: openIssues,
+    stargazers_count: stargazersCount,
+  } = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZGithubStatsResponse.parse(res));
+
+  const { total_count: mergedPullRequests } = await fetch(
+    'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1',
+    {
+      headers: {
+        accept: 'application/vnd.github.v3+json',
+      },
+    },
+  )
+    .then((res) => res.json())
+    .then((res) => ZMergedPullRequestsResponse.parse(res));
+
+  const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZStargazersLiveResponse.parse(res));
+
+  return (
+    <div className="mx-auto mt-12 max-w-screen-lg">
+      <div className="flex flex-col items-center justify-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          All our metrics, finances, and learnings are public. We believe in transparency and want
+          to share our journey with you.
+        </p>
+      </div>
+
+      <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="col-span-12 grid grid-cols-4 gap-4">
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Stargazers"
+            value={stargazersCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Forks"
+            value={forksCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Open Issues"
+            value={openIssues.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Merged PR's"
+            value={mergedPullRequests.toLocaleString('en-US')}
+          />
+        </div>
+
+        <TeamMembers className="col-span-12" />
+
+        <SalaryBands className="col-span-12 lg:col-span-6" />
+
+        <FundingRaised className="col-span-12 lg:col-span-6" />
+
+        <CapTable className="col-span-12 lg:col-span-6" />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="stars"
+          title="Github: Total Stars"
+          label="Stars"
+          className="col-span-12 lg:col-span-6"
+        />
+
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="mergedPRs"
+          title="Github: Total Merged PRs"
+          label="Merged PRs"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="forks"
+          title="Github: Total Forks"
+          label="Forks"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="openIssues"
+          title="Github: Total Open Issues"
+          label="Open Issues"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+
+        <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+          <h2 className="text-2xl font-bold">Where's the rest?</h2>
+
+          <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+            We're still working on getting all our metrics together. We'll update this page as soon
+            as we have more to share.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/open/salary-bands.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { SALARY_BANDS } from '~/app/(marketing)/open/data';
+
+export type SalaryBandsProps = HTMLAttributes<HTMLDivElement>;
+
+export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Global Salary Bands</h3>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[200px]">Title</TableHead>
+              <TableHead>Seniority</TableHead>
+              <TableHead className="w-[100px] text-right">Salary</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {SALARY_BANDS.map((band, index) => (
+              <TableRow key={index}>
+                <TableCell className="font-medium">{band.title}</TableCell>
+                <TableCell>{band.seniority}</TableCell>
+                <TableCell className="text-right">
+                  {band.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/team-members.tsx

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { TEAM_MEMBERS } from './data';
+
+export type TeamMembersProps = HTMLAttributes<HTMLDivElement>;
+
+export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h2 className="px-4 text-2xl font-semibold">Team</h2>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="">Name</TableHead>
+              <TableHead>Role</TableHead>
+              <TableHead>Salary</TableHead>
+              <TableHead>Engagement</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead className="w-[100px] text-right">Join Date</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {TEAM_MEMBERS.map((member) => (
+              <TableRow key={member.name}>
+                <TableCell className="font-medium">{member.name}</TableCell>
+                <TableCell>{member.role}</TableCell>
+
+                <TableCell>
+                  {member.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+                <TableCell>{member.engagement}</TableCell>
+                <TableCell>{member.location}</TableCell>
+                <TableCell className="text-right">{member.joinDate}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+const OSSFriends = [
+  {
+    name: 'BoxyHQ',
+    description:
+      'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+    href: 'https://boxyhq.com',
+  },
+  {
+    name: 'Cal.com',
+    description:
+      'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+    href: 'https://cal.com',
+  },
+  {
+    name: 'Crowd.dev',
+    description:
+      'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+    href: 'https://www.crowd.dev',
+  },
+  {
+    name: 'Documenso',
+    description:
+      'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+    href: 'https://documenso.com',
+  },
+  {
+    name: 'Erxes',
+    description:
+      'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences ​​that work for all types of business.',
+    href: 'https://erxes.io',
+  },
+  {
+    name: 'Formbricks',
+    description:
+      'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+    href: 'https://formbricks.com',
+  },
+  {
+    name: 'Forward Email',
+    description:
+      'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
+    href: 'https://forwardemail.net',
+  },
+  {
+    name: 'GitWonk',
+    description:
+      'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
+    href: 'https://gitwonk.com',
+  },
+  {
+    name: 'Hanko',
+    description:
+      'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+    href: 'https://www.hanko.io',
+  },
+  {
+    name: 'HTMX',
+    description:
+      'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
+    href: 'https://htmx.org',
+  },
+  {
+    name: 'Infisical',
+    description:
+      'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+    href: 'https://infisical.com',
+  },
+  {
+    name: 'Novu',
+    description:
+      'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+    href: 'https://novu.co',
+  },
+  {
+    name: 'OpenBB',
+    description:
+      'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+    href: 'https://openbb.co',
+  },
+  {
+    name: 'Sniffnet',
+    description:
+      'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
+    href: 'https://www.sniffnet.net',
+  },
+  {
+    name: 'Typebot',
+    description:
+      'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
+    href: 'https://typebot.io',
+  },
+  {
+    name: 'Webiny',
+    description:
+      'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
+    href: 'https://www.webiny.com',
+  },
+  {
+    name: 'Webstudio',
+    description: 'Webstudio is an open source alternative to Webflow',
+    href: 'https://webstudio.is',
+  },
+];
+
+const ContainerVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.075,
+    },
+  },
+};
+
+const CardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+const randomDegrees = () => {
+  const degrees = [45, 120, -140, -45];
+
+  return degrees[Math.floor(Math.random() * degrees.length)];
+};
+
+export default function OSSFriendsPage() {
+  return (
+    <div className="relative mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">
+          Our <span title="Open Source Software">OSS</span> Friends
+        </h1>
+
+        <p className="mx-auto mt-4 max-w-[55ch] text-lg leading-normal text-[#31373D]">
+          We love open source and so should you, below you can find a list of our friends who are
+          just as passionate about open source as we are.
+        </p>
+      </div>
+
+      <motion.div
+        className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+        variants={ContainerVariants}
+        initial="initial"
+        animate="animate"
+      >
+        {OSSFriends.map((friend, index) => (
+          <motion.div key={index} className="h-full w-full" variants={CardVariants}>
+            <Card
+              className="h-full"
+              degrees={randomDegrees()}
+              gradient={index % 2 === 0}
+              spotlight={index % 2 !== 0}
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <CardTitle>
+                  <Link href={friend.href}>{friend.name}</Link>
+                </CardTitle>
+
+                <p className="mt-4 flex-1 text-sm text-slate-700">{friend.description}</p>
+
+                <div className="mt-8">
+                  <Link target="_blank" href={friend.href}>
+                    <Button>Learn more</Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/page.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
+import { Caveat } from 'next/font/google';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { Callout } from '~/components/(marketing)/callout';
+import { FasterSmarterBeautifulBento } from '~/components/(marketing)/faster-smarter-beautiful-bento';
+import { Hero } from '~/components/(marketing)/hero';
+import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-template-bento';
+import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
+
+export const revalidate = 600;
+
+const fontCaveat = Caveat({
+  weight: ['500'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-caveat',
+});
+
+export default async function IndexPage() {
+  const starCount = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
+    .catch(() => undefined);
+
+  return (
+    <div className={cn('mt-12', fontCaveat.variable)}>
+      <Hero starCount={starCount} />
+
+      <FasterSmarterBeautifulBento className="my-48" />
+      <ShareConnectPaidWidgetBento className="my-48" />
+      <OpenBuildTemplateBento className="my-48" />
+
+      <Callout starCount={starCount} />
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/pricing/page.tsx

@@ -0,0 +1,163 @@
+import Link from 'next/link';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+
+import { PricingTable } from '~/components/(marketing)/pricing-table';
+
+export type PricingPageProps = {
+  searchParams?: {
+    planId?: string;
+    email?: string;
+    name?: string;
+    cancelled?: string;
+  };
+};
+
+export default function PricingPage() {
+  return (
+    <div className="mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Pricing</h1>
+
+        <p className="mt-4 text-lg leading-normal text-[#31373D]">
+          Designed for every stage of your journey.
+        </p>
+        <p className="text-lg leading-normal text-[#31373D]">Get started today.</p>
+      </div>
+
+      <div className="mt-12">
+        <PricingTable />
+      </div>
+
+      <div className="mx-auto mt-36 max-w-2xl">
+        {/* FAQ Section */}
+
+        <h2 className="text-4xl font-semibold">FAQs</h2>
+
+        <Accordion type="multiple" className="mt-8">
+          <AccordionItem value="plan-differences">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              What is the difference between the plans?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              You can self-host Documenso for free or use our ready-to-use hosted version. The
+              hosted version comes with additional support, painless scalability and more. Early
+              adopters of the community plan will get access to all features we build this year, for
+              no additional cost! Forever! Yes, that includes multiple users per account later. If
+              you want Documenso for your enterprise, we are happy to talk about your needs.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="data-handling">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              How do you handle my data?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              Securely. Our data centers are located in Frankfurt (Germany), giving us the best
+              local privacy laws. We are very aware of the sensitive nature of our data and follow
+              best practices to ensure the security and integrity of the data entrusted to us.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="should-use-cloud">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              Why should I use your hosting service?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              Using our hosted version is the easiest way to get started, you can simply subscribe
+              and start signing your documents. We take care of the infrastructure, so you can focus
+              on your business. Additionally, when using our hosted version you benefit from our
+              trusted signing certificates which helps you to build trust with your customers.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="how-to-contribute">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              How can I contribute?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              That's awesome. You can take a look at the current{' '}
+              <Link
+                className="text-documenso-700 font-bold"
+                href="https://github.com/documenso/documenso/milestones"
+                target="_blank"
+              >
+                Issues
+              </Link>{' '}
+              and join our{' '}
+              <Link
+                className="text-documenso-700 font-bold"
+                href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
+                target="_blank"
+              >
+                Slack Community
+              </Link>{' '}
+              to keep up to date, on what the current priorities are. In any case, we are an open
+              community and welcome all input, technical and non-technical ❤️
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="can-i-use-documenso-commercially">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              Can I use Documenso commercially?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              Yes! Documenso is offered under the GNU AGPL V3 open source license. This means you
+              can use it for free and even modify it to fit your needs, as long as you publish your
+              changes under the same license.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="why-prefer-documenso">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              Why should I prefer Documenso over DocuSign or some other signing tool?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              Documenso is a community effort to create an open and vibrant ecosystem around a tool,
+              everybody is free to use and adapt. By being truly open we want to create trusted
+              infrastructure for the future of the internet.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="where-can-i-get-support">
+            <AccordionTrigger className="text-left text-lg font-semibold">
+              Where can I get support?
+            </AccordionTrigger>
+
+            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+              We are happy to assist you at{' '}
+              <Link
+                className="text-documenso-700 font-bold"
+                target="_blank"
+                href="mailto:support@documenso.com"
+              >
+                support@documenso.com
+              </Link>{' '}
+              or{' '}
+              <a
+                className="text-documenso-700 font-bold"
+                href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
+                target="_blank"
+              >
+                in our Slack-Support-Channel
+              </a>{' '}
+              please message either Lucas or Timur to get added to the channel if you are not
+              already a member.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/globals.css

@@ -0,0 +1 @@
+@import '@documenso/ui/styles/theme.css';

apps/marketing/src/app/layout.tsx

@@ -0,0 +1,51 @@
+import { Inter } from 'next/font/google';
+
+import { Toaster } from '@documenso/ui/primitives/toaster';
+
+import { PlausibleProvider } from '~/providers/plausible';
+
+import './globals.css';
+
+const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+
+export const metadata = {
+  title: 'Documenso - The Open Source DocuSign Alternative',
+  description:
+    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+  keywords:
+    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+  authors: { name: 'Documenso, Inc.' },
+  robots: 'index, follow',
+  openGraph: {
+    title: 'Documenso - The Open Source DocuSign Alternative',
+    description:
+      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    type: 'website',
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+  },
+  twitter: {
+    site: '@documenso',
+    card: 'summary_large_image',
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    description:
+      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+      </head>
+
+      <body>
+        <PlausibleProvider>{children}</PlausibleProvider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

apps/marketing/src/components/(marketing)/callout.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Github } from 'lucide-react';
+import { usePlausible } from 'next-plausible';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export type CalloutProps = {
+  starCount?: number;
+  [key: string]: unknown;
+};
+
+export const Callout = ({ starCount }: CalloutProps) => {
+  const event = usePlausible();
+
+  const onSignUpClick = () => {
+    const el = document.getElementById('email');
+
+    if (el) {
+      const { top } = el.getBoundingClientRect();
+
+      window.scrollTo({
+        top: top - 120,
+        behavior: 'smooth',
+      });
+
+      setTimeout(() => {
+        el.focus();
+      }, 500);
+    }
+  };
+
+  return (
+    <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4">
+      <Button
+        type="button"
+        variant="outline"
+        className="rounded-full bg-transparent backdrop-blur-sm"
+        onClick={onSignUpClick}
+      >
+        Get the Community Plan
+        <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+          $30/mo. forever!
+        </span>
+      </Button>
+
+      <Link
+        href="https://github.com/documenso/documenso"
+        target="_blank"
+        onClick={() => event('view-github')}
+      >
+        <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
+          <Github className="mr-2 h-5 w-5" />
+          Star on Github
+          {starCount && starCount > 0 && (
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              {starCount.toLocaleString('en-US')}
+            </span>
+          )}
+        </Button>
+      </Link>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Info, Loader } from 'lucide-react';
+import { usePlausible } from 'next-plausible';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { claimPlan } from '~/api/claim-plan/fetcher';
+
+import { FormErrorMessage } from '../form/form-error-message';
+
+export const ZClaimPlanDialogFormSchema = z.object({
+  name: z.string().min(3),
+  email: z.string().email(),
+});
+
+export type TClaimPlanDialogFormSchema = z.infer<typeof ZClaimPlanDialogFormSchema>;
+
+export type ClaimPlanDialogProps = {
+  className?: string;
+  planId: string;
+  children: React.ReactNode;
+};
+
+export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
+  const params = useSearchParams();
+  const { toast } = useToast();
+  const event = usePlausible();
+
+  const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TClaimPlanDialogFormSchema>({
+    mode: 'onBlur',
+    defaultValues: {
+      name: params?.get('name') ?? '',
+      email: params?.get('email') ?? '',
+    },
+    resolver: zodResolver(ZClaimPlanDialogFormSchema),
+  });
+
+  const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
+    try {
+      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+
+      const [redirectUrl] = await Promise.all([
+        claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
+        delay,
+      ]);
+
+      event('claim-plan-pricing');
+
+      window.location.href = redirectUrl;
+    } catch (error) {
+      event('claim-plan-failed');
+
+      toast({
+        title: 'Something went wrong',
+        description: error instanceof Error ? error.message : 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Claim your plan</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            We're almost there! Please enter your email address and name to claim your plan.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          className={cn('flex flex-col gap-y-4', className)}
+          onSubmit={handleSubmit(onFormSubmit)}
+        >
+          {params?.get('cancelled') === 'true' && (
+            <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <Info className="h-5 w-5 text-yellow-400" />
+                </div>
+                <div className="ml-3">
+                  <p className="text-sm leading-5 text-yellow-700">
+                    You have cancelled the payment process. If you didn't mean to do this, please
+                    try again.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <Label className="text-slate-500">Name</Label>
+
+            <Input type="text" className="mt-2" {...register('name')} autoFocus />
+
+            <FormErrorMessage className="mt-1" error={errors.name} />
+          </div>
+
+          <div>
+            <Label className="text-slate-500">Email</Label>
+
+            <Input type="email" className="mt-2" {...register('email')} />
+
+            <FormErrorMessage className="mt-1" error={errors.email} />
+          </div>
+
+          <Button type="submit" size="lg" disabled={isSubmitting}>
+            {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+            Claim the Community Plan ({/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
+            {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
+              ? 'Monthly'
+              : 'Yearly'}
+            )
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -0,0 +1,77 @@
+import { HTMLAttributes } from 'react';
+
+import Image from 'next/image';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import cardBeautifulFigure from '~/assets/card-beautiful-figure.png';
+import cardFastFigure from '~/assets/card-fast-figure.png';
+import cardSmartFigure from '~/assets/card-smart-figure.png';
+
+export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;
+
+export const FasterSmarterBeautifulBento = ({
+  className,
+  ...props
+}: FasterSmarterBeautifulBentoProps) => {
+  return (
+    <div className={cn('relative', className)} {...props}>
+      <div className="absolute inset-0 -z-10 flex items-center justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
+        A 10x better signing experience.
+        <span className="block md:mt-0">Faster, smarter and more beautiful.</span>
+      </h2>
+
+      <div className="mt-6 grid grid-cols-2 gap-8 md:mt-8">
+        <Card className="col-span-2" degrees={45} gradient>
+          <CardContent className="grid grid-cols-12 gap-8 overflow-hidden p-6 lg:aspect-[2.5/1]">
+            <p className="col-span-12 leading-relaxed text-[#555E67] lg:col-span-6">
+              <strong className="block">Fast.</strong>
+              When it comes to sending or receiving a contract, you can count on lightning-fast
+              speeds.
+            </p>
+
+            <div className="col-span-12 -my-6 -mr-6 flex items-end justify-end pt-12 lg:col-span-6">
+              <Image src={cardFastFigure} alt="its fast" className="max-w-[80%] lg:max-w-none" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Beautiful.</strong>
+              Because signing should be celebrated. That’s why we care about the smallest detail in
+              our product.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardBeautifulFigure} alt="its fast" className="w-full max-w-xs" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Smart.</strong>
+              Our custom templates come with smart rules that can help you save time and energy.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardSmartFigure} alt="its fast" className="w-full max-w-[16rem]" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/footer.tsx

@@ -0,0 +1,90 @@
+import { HTMLAttributes } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Github, Slack, Twitter } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type FooterProps = HTMLAttributes<HTMLDivElement>;
+
+export const Footer = ({ className, ...props }: FooterProps) => {
+  return (
+    <div className={cn('border-t py-12', className)} {...props}>
+      <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
+        <div>
+          <Link href="/">
+            <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
+          </Link>
+
+          <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4 text-[#8D8D8D]">
+            <Link
+              href="https://twitter.com/documenso"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Twitter className="h-6 w-6" />
+            </Link>
+
+            <Link
+              href="https://github.com/documenso/documenso"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Github className="h-6 w-6" />
+            </Link>
+
+            <Link
+              href="https://documenso.slack.com"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Slack className="h-6 w-6" />
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Blog
+          </Link>
+
+          <Link
+            href="/pricing"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Pricing
+          </Link>
+
+          <Link
+            href="https://status.documenso.com"
+            target="_blank"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Status
+          </Link>
+
+          <Link
+            href="mailto:support@documenso.com"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Support
+          </Link>
+
+          <Link
+            href="/privacy"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Privacy
+          </Link>
+        </div>
+      </div>
+      <div className="mx-auto mt-4 w-full max-w-screen-xl px-8 md:mt-12 lg:mt-24">
+        <p className="text-sm text-[#8D8D8D]">
+          © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/header.tsx

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type HeaderProps = HTMLAttributes<HTMLElement>;
+
+export const Header = ({ className, ...props }: HeaderProps) => {
+  return (
+    <header className={cn('flex items-center justify-between', className)} {...props}>
+      <Link href="/">
+        <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
+      </Link>
+
+      <div className="flex items-center gap-x-6">
+        <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Blog
+        </Link>
+
+        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Pricing
+        </Link>
+
+        <Link
+          href="https://app.documenso.com/login"
+          target="_blank"
+          className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          Sign in
+        </Link>
+      </div>
+    </header>
+  );
+};

apps/marketing/src/components/(marketing)/hero.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+import { Github } from 'lucide-react';
+import { usePlausible } from 'next-plausible';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+import { Widget } from './widget';
+
+export type HeroProps = {
+  className?: string;
+  [key: string]: unknown;
+};
+
+const BackgroundPatternVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+
+  animate: {
+    opacity: 1,
+
+    transition: {
+      delay: 1,
+      duration: 1.2,
+    },
+  },
+};
+
+const HeroTitleVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 60,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+export const Hero = ({ className, ...props }: HeroProps) => {
+  const event = usePlausible();
+
+  const onSignUpClick = () => {
+    const el = document.getElementById('email');
+
+    if (el) {
+      const { top } = el.getBoundingClientRect();
+
+      window.scrollTo({
+        top: top - 120,
+        behavior: 'smooth',
+      });
+
+      requestAnimationFrame(() => {
+        el.focus();
+      });
+    }
+  };
+
+  return (
+    <motion.div className={cn('relative', className)} {...props}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full origin-top-right items-center justify-center"
+          variants={BackgroundPatternVariants}
+          initial="initial"
+          animate="animate"
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+          />
+        </motion.div>
+      </div>
+
+      <div className="relative">
+        <motion.h2
+          variants={HeroTitleVariants}
+          initial="initial"
+          animate="animate"
+          className="text-center text-4xl font-bold leading-tight tracking-tight lg:text-[64px]"
+        >
+          Document signing,
+          <span className="block" /> finally open source.
+        </motion.h2>
+
+        <motion.div
+          variants={HeroTitleVariants}
+          initial="initial"
+          animate="animate"
+          className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4"
+        >
+          <Button
+            type="button"
+            variant="outline"
+            className="rounded-full bg-transparent backdrop-blur-sm"
+            onClick={onSignUpClick}
+          >
+            Get the Community Plan
+            <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              $30/mo. forever!
+            </span>
+          </Button>
+
+          <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
+            <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
+              <Github className="mr-2 h-5 w-5" />
+              Star on Github
+            </Button>
+          </Link>
+        </motion.div>
+
+        <motion.div
+          variants={HeroTitleVariants}
+          initial="initial"
+          animate="animate"
+          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+        >
+          <Link
+            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+            target="_blank"
+          >
+            <img
+              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+              alt="Documenso - The open source DocuSign alternative | Product Hunt"
+              style={{ width: '250px', height: '54px' }}
+            />
+          </Link>
+        </motion.div>
+
+        <motion.div
+          className="mt-12"
+          variants={{
+            initial: {
+              scale: 0.2,
+              opacity: 0,
+            },
+            animate: {
+              scale: 1,
+              opacity: 1,
+              transition: {
+                ease: 'easeInOut',
+                delay: 0.5,
+                duration: 0.8,
+              },
+            },
+          }}
+          initial="initial"
+          animate="animate"
+        >
+          <Widget className="mt-12">
+            <strong>Documenso Supporter Pledge</strong>
+            <p className="w-full max-w-[70ch]">
+              Our mission is to create an open signing infrastructure that empowers the world,
+              enabling businesses to embrace openness, cooperation, and transparency. We believe
+              that signing, as a fundamental act, should embody these values. By offering an
+              open-source signing solution, we aim to make document signing accessible, transparent,
+              and trustworthy.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              Through our platform, called Documenso, we strive to earn your trust by allowing
+              self-hosting and providing complete visibility into its inner workings. We value
+              inclusivity and foster an environment where diverse perspectives and contributions are
+              welcomed, even though we may not implement them all.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              At Documenso, we envision a web-enabled future for business and contracts, and we are
+              committed to being the leading provider of open signing infrastructure. By combining
+              exceptional product design with open-source principles, we aim to deliver a robust and
+              well-designed application that exceeds your expectations.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              We understand that exceptional products are born from exceptional communities, and we
+              invite you to join our open-source community. Your contributions, whether technical or
+              non-technical, will help shape the future of signing. Together, we can create a better
+              future for everyone.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              Today we invite you to join us on this journey: By signing this mission statement you
+              signal your support of Documenso's mission{' '}
+              <span className="bg-primary text-black">
+                (in a non-legally binding, but heartfelt way)
+              </span>{' '}
+              and lock in the early supporter plan for forever, including everything we build this
+              year.
+            </p>
+
+            <div className="flex h-24 items-center">
+              <p className={cn('text-5xl [font-family:var(--font-caveat)]')}>Timur & Lucas</p>
+            </div>
+
+            <div>
+              <strong>Timur Ercan & Lucas Smith</strong>
+              <p className="mt-1">Co-Founders, Documenso</p>
+            </div>
+          </Widget>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -0,0 +1,74 @@
+import { HTMLAttributes } from 'react';
+
+import Image from 'next/image';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import cardBuildFigure from '~/assets/card-build-figure.png';
+import cardOpenFigure from '~/assets/card-open-figure.png';
+import cardTemplateFigure from '~/assets/card-template-figure.png';
+
+export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
+
+export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
+  return (
+    <div className={cn('relative', className)} {...props}>
+      <div className="absolute inset-0 -z-10 flex items-center justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
+        Truly your own.
+        <span className="block md:mt-0">Customise and expand.</span>
+      </h2>
+
+      <div className="mt-6 grid grid-cols-2 gap-8 md:mt-8">
+        <Card className="col-span-2" degrees={45} gradient>
+          <CardContent className="grid grid-cols-12 gap-8 overflow-hidden p-6 lg:aspect-[2.5/1]">
+            <p className="col-span-12 leading-relaxed text-[#555E67] lg:col-span-6">
+              <strong className="block">Open Source or Hosted.</strong>
+              It’s up to you. Either clone our repository or rely on our easy to use hosting
+              solution.
+            </p>
+
+            <div className="col-span-12 -my-6 -mr-6 flex items-end justify-end pt-12 lg:col-span-6">
+              <Image src={cardOpenFigure} alt="its fast" className="max-w-[80%] lg:max-w-full" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Build on top.</strong>
+              Make it your own through advanced customization and adjustability.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardBuildFigure} alt="its fast" className="w-full max-w-xs" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Template Store (Soon).</strong>
+              Choose a template from the community app store. Or submit your own template for others
+              to use.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardTemplateFigure} alt="its fast" className="w-full max-w-sm" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/password-reveal.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
+export type PasswordRevealProps = {
+  password: string;
+};
+
+export const PasswordReveal = ({ password }: PasswordRevealProps) => {
+  const { toast } = useToast();
+  const [, copy] = useCopyToClipboard();
+
+  const onCopyClick = () => {
+    copy(password).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'Your password has been copied to your clipboard.',
+      });
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      className="px-2 blur-sm hover:opacity-50 hover:blur-none"
+      onClick={onCopyClick}
+    >
+      {password}
+    </button>
+  );
+};

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { HTMLAttributes, useMemo, useState } from 'react';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { usePlausible } from 'next-plausible';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ClaimPlanDialog } from './claim-plan-dialog';
+
+export type PricingTableProps = HTMLAttributes<HTMLDivElement>;
+
+const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar';
+
+export const PricingTable = ({ className, ...props }: PricingTableProps) => {
+  const params = useSearchParams();
+  const event = usePlausible();
+
+  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>(() =>
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    params?.get('planId') === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID
+      ? 'YEARLY'
+      : 'MONTHLY',
+  );
+
+  const planId = useMemo(() => {
+    if (period === 'MONTHLY') {
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
+    }
+
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID;
+  }, [period]);
+
+  return (
+    <div className={cn('', className)} {...props}>
+      <div className="flex items-center justify-center gap-x-6">
+        <AnimatePresence>
+          <motion.button
+            key="MONTHLY"
+            className={cn('relative flex items-center gap-x-2.5 px-1 py-2.5 text-[#727272]', {
+              'text-slate-900': period === 'MONTHLY',
+              'hover:text-slate-900/80': period !== 'MONTHLY',
+            })}
+            onClick={() => setPeriod('MONTHLY')}
+          >
+            Monthly
+            {period === 'MONTHLY' && (
+              <motion.div
+                layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+              />
+            )}
+          </motion.button>
+
+          <motion.button
+            key="YEARLY"
+            className={cn('relative flex items-center gap-x-2.5 px-1 py-2.5 text-[#727272]', {
+              'text-slate-900': period === 'YEARLY',
+              'hover:text-slate-900/80': period !== 'YEARLY',
+            })}
+            onClick={() => setPeriod('YEARLY')}
+          >
+            Yearly
+            <div className="block rounded-full bg-slate-200 px-2 py-0.5 text-xs text-slate-700">
+              Save $60
+            </div>
+            {period === 'YEARLY' && (
+              <motion.div
+                layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+              />
+            )}
+          </motion.button>
+        </AnimatePresence>
+      </div>
+
+      <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
+        <div
+          data-plan="self-hosted"
+          className="flex flex-col items-center justify-center rounded-lg border bg-white px-8 py-12 shadow-lg shadow-slate-900/5"
+        >
+          <p className="text-4xl font-medium text-slate-900">Self Hosted</p>
+          <p className="text-primary mt-2.5 text-xl font-medium">Free</p>
+
+          <p className="mt-4 max-w-[30ch] text-center text-slate-900">
+            For small teams and individuals who need a simple solution
+          </p>
+
+          <Link
+            href="https://github.com/documenso/documenso"
+            target="_blank"
+            className="mt-6"
+            onClick={() => event('view-github')}
+          >
+            <Button className="rounded-full text-base">View on Github</Button>
+          </Link>
+
+          <div className="mt-8 flex w-full flex-col divide-y">
+            <p className="py-4 font-medium text-slate-900">Host your own instance</p>
+            <p className="py-4 text-slate-900">Full Control</p>
+            <p className="py-4 text-slate-900">Customizability</p>
+            <p className="py-4 text-slate-900">Docker Ready</p>
+            <p className="py-4 text-slate-900">Community Support</p>
+            <p className="py-4 text-slate-900">Free, Forever</p>
+          </div>
+        </div>
+
+        <div
+          data-plan="community"
+          className="border-primary flex flex-col items-center justify-center rounded-lg border-2 bg-white px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380] shadow-slate-900/5"
+        >
+          <p className="text-4xl font-medium text-slate-900">Community</p>
+          <div className="text-primary mt-2.5 text-xl font-medium">
+            <AnimatePresence mode="wait">
+              {period === 'MONTHLY' && <motion.div layoutId="pricing">$30</motion.div>}
+              {period === 'YEARLY' && <motion.div layoutId="pricing">$300</motion.div>}
+            </AnimatePresence>
+          </div>
+
+          <p className="mt-4 max-w-[30ch] text-center text-slate-900">
+            For fast-growing companies that aim to scale across multiple teams.
+          </p>
+
+          <ClaimPlanDialog planId={planId}>
+            <Button className="mt-6 rounded-full text-base">Signup Now</Button>
+          </ClaimPlanDialog>
+
+          <div className="mt-8 flex w-full flex-col divide-y">
+            <p className="py-4 font-medium text-slate-900">Documenso Early Adopter Deal:</p>
+            <p className="py-4 text-slate-900">Join the movement</p>
+            <p className="py-4 text-slate-900">Simple signing solution</p>
+            <p className="py-4 text-slate-900">Email and Slack assistance</p>
+            <p className="py-4 text-slate-900">
+              <strong>Includes all upcoming features</strong>
+            </p>
+            <p className="py-4 text-slate-900">Fixed, straightforward pricing</p>
+          </div>
+        </div>
+
+        <div
+          data-plan="enterprise"
+          className="flex flex-col items-center justify-center rounded-lg border bg-white px-8 py-12 shadow-lg shadow-slate-900/5"
+        >
+          <p className="text-4xl font-medium text-slate-900">Enterprise</p>
+          <p className="text-primary mt-2.5 text-xl font-medium">Pricing on request</p>
+
+          <p className="mt-4 max-w-[30ch] text-center text-slate-900">
+            For large organizations that need extra flexibility and control.
+          </p>
+
+          <Link
+            href="https://dub.sh/enterprise"
+            target="_blank"
+            className="mt-6"
+            onClick={() => event('enterprise-contact')}
+          >
+            <Button className="rounded-full text-base">Contact Us</Button>
+          </Link>
+
+          <div className="mt-8 flex w-full flex-col divide-y">
+            <p className="py-4 font-medium text-slate-900">Everything in Community, plus:</p>
+            <p className="py-4 text-slate-900">Custom Subdomain</p>
+            <p className="py-4 text-slate-900">Compliance Check</p>
+            <p className="py-4 text-slate-900">Guaranteed Uptime</p>
+            <p className="py-4 text-slate-900">Reporting & Analysis</p>
+            <p className="py-4 text-slate-900">24/7 Support</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -0,0 +1,91 @@
+import { HTMLAttributes } from 'react';
+
+import Image from 'next/image';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import cardConnectionsFigure from '~/assets/card-connections-figure.png';
+import cardPaidFigure from '~/assets/card-paid-figure.png';
+import cardSharingFigure from '~/assets/card-sharing-figure.png';
+import cardWidgetFigure from '~/assets/card-widget-figure.png';
+
+export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
+
+export const ShareConnectPaidWidgetBento = ({
+  className,
+  ...props
+}: ShareConnectPaidWidgetBentoProps) => {
+  return (
+    <div className={cn('relative', className)} {...props}>
+      <div className="absolute inset-0 -z-10 flex items-center justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
+        Integrates with all your favourite tools.
+        <span className="block md:mt-0">Send, connect, receive and embed everywhere.</span>
+      </h2>
+
+      <div className="mt-6 grid grid-cols-2 gap-8 md:mt-8">
+        <Card className="col-span-2 lg:col-span-1" degrees={120} gradient>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Easy Sharing (Soon).</strong>
+              Receive your personal link to share with everyone you care about.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardSharingFigure} alt="its fast" className="w-full max-w-xs" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Connections (Soon).</strong>
+              Create connections and automations with Zapier and more to integrate with your
+              favorite tools.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardConnectionsFigure} alt="its fast" className="w-full max-w-sm" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">Get paid (Soon).</strong>
+              Integrated payments with stripe so you don’t have to worry about getting paid.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardPaidFigure} alt="its fast" className="w-full max-w-[14rem]" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2 lg:col-span-1" spotlight>
+          <CardContent className="grid grid-cols-1 gap-8 p-6">
+            <p className="leading-relaxed text-[#555E67]">
+              <strong className="block">React Widget (Soon).</strong>
+              Easily embed Documenso into your product. Simply copy and paste our react widget into
+              your application.
+            </p>
+
+            <div className="flex items-center justify-center p-8">
+              <Image src={cardWidgetFigure} alt="its fast" className="w-full max-w-xs" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/widget.tsx

@@ -0,0 +1,400 @@
+'use client';
+
+import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader } from 'lucide-react';
+import { usePlausible } from 'next-plausible';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { claimPlan } from '~/api/claim-plan/fetcher';
+
+import { FormErrorMessage } from '../form/form-error-message';
+import { SignaturePad } from '../signature-pad';
+
+const ZWidgetFormSchema = z
+  .object({
+    email: z.string().email({ message: 'Please enter a valid email address.' }),
+    name: z.string().min(3, { message: 'Please enter a valid name.' }),
+  })
+  .and(
+    z.union([
+      z.object({
+        signatureDataUrl: z.string().min(1),
+        signatureText: z.null().or(z.string().max(0)),
+      }),
+      z.object({
+        signatureDataUrl: z.null().or(z.string().max(0)),
+        signatureText: z.string().min(1),
+      }),
+    ]),
+  );
+
+export type TWidgetFormSchema = z.infer<typeof ZWidgetFormSchema>;
+
+export type WidgetProps = HTMLAttributes<HTMLDivElement>;
+
+export const Widget = ({ className, children, ...props }: WidgetProps) => {
+  const { toast } = useToast();
+  const event = usePlausible();
+
+  const [step, setStep] = useState<'EMAIL' | 'NAME' | 'SIGN'>('EMAIL');
+  const [showSigningDialog, setShowSigningDialog] = useState(false);
+  const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState<string | null>(null);
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    trigger,
+    watch,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TWidgetFormSchema>({
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      name: '',
+      signatureDataUrl: null,
+      signatureText: '',
+    },
+    resolver: zodResolver(ZWidgetFormSchema),
+  });
+
+  const signatureDataUrl = watch('signatureDataUrl');
+  const signatureText = watch('signatureText');
+
+  const stepsRemaining = useMemo(() => {
+    if (step === 'NAME') {
+      return 2;
+    }
+
+    if (step === 'SIGN') {
+      return 1;
+    }
+
+    return 3;
+  }, [step]);
+
+  const onNextStepClick = () => {
+    if (step === 'EMAIL') {
+      setStep('NAME');
+
+      setTimeout(() => {
+        document.querySelector<HTMLElement>('#name')?.focus();
+      }, 0);
+    }
+
+    if (step === 'NAME') {
+      setStep('SIGN');
+
+      setTimeout(() => {
+        document.querySelector<HTMLElement>('#signatureText')?.focus();
+      }, 0);
+    }
+  };
+
+  const onEnterPress = (callback: () => void) => {
+    return (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+
+        callback();
+      }
+    };
+  };
+
+  const onSignatureConfirmClick = () => {
+    setValue('signatureDataUrl', draftSignatureDataUrl);
+    setValue('signatureText', '');
+
+    trigger('signatureDataUrl');
+    setShowSigningDialog(false);
+  };
+
+  const onFormSubmit = async ({
+    email,
+    name,
+    signatureDataUrl,
+    signatureText,
+  }: TWidgetFormSchema) => {
+    try {
+      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
+
+      const claimPlanInput = signatureDataUrl
+        ? {
+            name,
+            email,
+            planId,
+            signatureDataUrl: signatureDataUrl!,
+            signatureText: null,
+          }
+        : {
+            name,
+            email,
+            planId,
+            signatureDataUrl: null,
+            signatureText: signatureText!,
+          };
+
+      const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);
+
+      event('claim-plan-widget');
+
+      window.location.href = result;
+    } catch (error) {
+      event('claim-plan-failed');
+
+      toast({
+        title: 'Something went wrong',
+        description: error instanceof Error ? error.message : 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <>
+      <Card
+        className={cn('mx-auto w-full max-w-4xl rounded-3xl before:rounded-3xl', className)}
+        gradient
+        {...props}
+      >
+        <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">
+          <div className="col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed text-[#727272] lg:col-span-7">
+            {children}
+          </div>
+
+          <form
+            className="col-span-12 flex flex-col rounded-2xl bg-[#F7F7F7] p-6 lg:col-span-5"
+            onSubmit={handleSubmit(onFormSubmit)}
+          >
+            <h3 className="text-2xl font-semibold">Sign up for the community plan</h3>
+            <p className="mt-2 text-xs text-[#AFAFAF]">
+              with Timur Ercan & Lucas Smith from Documenso
+            </p>
+
+            <hr className="mb-6 mt-4" />
+
+            <AnimatePresence>
+              <motion.div key="email">
+                <label htmlFor="email" className="text-lg font-semibold text-slate-900 lg:text-xl">
+                  What’s your email?
+                </label>
+
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field }) => (
+                    <div className="relative mt-2">
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder=""
+                        className="w-full bg-white pr-16"
+                        disabled={isSubmitting}
+                        onKeyDown={(e) =>
+                          field.value !== '' &&
+                          !errors.email?.message &&
+                          onEnterPress(onNextStepClick)(e)
+                        }
+                        {...field}
+                      />
+
+                      <div className="absolute inset-y-0 right-0 p-1.5">
+                        <Button
+                          type="button"
+                          className="bg-primary h-full w-14 rounded"
+                          disabled={!field.value || !!errors.email?.message}
+                          onClick={() => onNextStepClick()}
+                        >
+                          Next
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                />
+
+                <FormErrorMessage error={errors.email} className="mt-1" />
+              </motion.div>
+
+              {(step === 'NAME' || step === 'SIGN') && (
+                <motion.div
+                  key="name"
+                  className="mt-4"
+                  animate={{
+                    opacity: 1,
+                    transform: 'translateX(0)',
+                  }}
+                  initial={{
+                    opacity: 0,
+                    transform: 'translateX(-25%)',
+                  }}
+                  exit={{
+                    opacity: 0,
+                    transform: 'translateX(25%)',
+                  }}
+                >
+                  <label htmlFor="name" className="text-lg font-semibold text-slate-900 lg:text-xl">
+                    and your name?
+                  </label>
+
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <div className="relative mt-2">
+                        <Input
+                          id="name"
+                          type="text"
+                          placeholder=""
+                          className="w-full bg-white pr-16"
+                          disabled={isSubmitting}
+                          onKeyDown={(e) =>
+                            field.value !== '' &&
+                            !errors.name?.message &&
+                            onEnterPress(onNextStepClick)(e)
+                          }
+                          {...field}
+                        />
+
+                        <div className="absolute inset-y-0 right-0 p-1.5">
+                          <Button
+                            type="button"
+                            className="bg-primary h-full w-14 rounded"
+                            disabled={!field.value || !!errors.name?.message}
+                            onClick={() => onNextStepClick()}
+                          >
+                            Next
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  />
+
+                  <FormErrorMessage error={errors.name} className="mt-1" />
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <div className="mt-12 flex-1" />
+
+            <div className="flex items-center justify-between">
+              <p className="text-xs text-[#AFAFAF]">{stepsRemaining} step(s) until signed</p>
+              <p className="block text-xs text-[#AFAFAF] md:hidden">Minimise contract</p>
+            </div>
+
+            <div className="relative mt-2.5 h-[2px] w-full bg-[#E9E9E9]">
+              <div
+                className={cn('bg-primary/60 absolute inset-y-0 left-0 duration-200', {
+                  'w-1/3': stepsRemaining === 3,
+                  'w-2/3': stepsRemaining === 2,
+                  'w-11/12': stepsRemaining === 1,
+                })}
+              />
+            </div>
+
+            <Card id="signature" className="mt-4" degrees={-140} gradient>
+              <CardContent
+                role="button"
+                className="relative cursor-pointer pt-6"
+                onClick={() => setShowSigningDialog(true)}
+              >
+                <div className="flex h-28 items-center justify-center pb-6">
+                  {!signatureText && signatureDataUrl && (
+                    <img src={signatureDataUrl} alt="user signature" className="h-full" />
+                  )}
+
+                  {signatureText && (
+                    <p
+                      className={cn(
+                        'text-4xl font-semibold text-slate-900 [font-family:var(--font-caveat)]',
+                      )}
+                    >
+                      {signatureText}
+                    </p>
+                  )}
+                </div>
+
+                <div
+                  className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Input
+                    id="signatureText"
+                    className="border-none p-0 text-sm text-slate-700 placeholder:text-[#D6D6D6] focus-visible:ring-0"
+                    placeholder="Draw or type name here"
+                    disabled={isSubmitting}
+                    {...register('signatureText', {
+                      onChange: (e) => {
+                        if (e.target.value !== '') {
+                          setValue('signatureDataUrl', null);
+                        }
+                      },
+                    })}
+                  />
+
+                  <Button
+                    type="submit"
+                    className="h-8 disabled:bg-[#ECEEED] disabled:text-[#C6C6C6] disabled:hover:bg-[#ECEEED]"
+                    disabled={!isValid || isSubmitting}
+                  >
+                    {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                    Sign
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </form>
+        </div>
+      </Card>
+
+      <Dialog open={showSigningDialog} onOpenChange={setShowSigningDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add your signature</DialogTitle>
+          </DialogHeader>
+
+          <DialogDescription>
+            By signing you signal your support of Documenso's mission in a <br></br>
+            <strong>non-legally binding, but heartfelt way</strong>. <br></br>
+            <br></br>You also unlock the option to purchase the early supporter plan including
+            everything we build this year for fixed price.
+          </DialogDescription>
+
+          <SignaturePad
+            className="aspect-video w-full rounded-md border"
+            onChange={setDraftSignatureDataUrl}
+          />
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setShowSigningDialog(false)}>
+              Cancel
+            </Button>
+
+            <Button onClick={() => onSignatureConfirmClick()}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

apps/marketing/src/components/form/form-error-message.tsx

@@ -0,0 +1,35 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { FieldError } from 'react-hook-form';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type FormErrorMessageProps = {
+  className?: string;
+  error: FieldError | undefined;
+};
+
+export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
+  return (
+    <AnimatePresence>
+      {error && (
+        <motion.p
+          initial={{
+            opacity: 0,
+            y: -10,
+          }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          exit={{
+            opacity: 0,
+            y: 10,
+          }}
+          className={cn('text-xs text-red-500', className)}
+        >
+          {error.message}
+        </motion.p>
+      )}
+    </AnimatePresence>
+  );
+};

apps/marketing/src/components/signature-pad/canvas.ts

@@ -0,0 +1,321 @@
+import { Point } from './point';
+
+export class Canvas {
+  private readonly $canvas: HTMLCanvasElement;
+  private readonly $offscreenCanvas: HTMLCanvasElement;
+
+  private currentCanvasWidth = 0;
+  private currentCanvasHeight = 0;
+
+  private points: Point[] = [];
+  private onChangeHandlers: Array<(_canvas: Canvas, _cleared: boolean) => void> = [];
+
+  private isPressed = false;
+  private lastVelocity = 0;
+
+  private readonly VELOCITY_FILTER_WEIGHT = 0.5;
+  private readonly DPI = 2;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.$canvas = canvas;
+    this.$offscreenCanvas = document.createElement('canvas');
+
+    const { width, height } = this.$canvas.getBoundingClientRect();
+
+    this.currentCanvasWidth = width * this.DPI;
+    this.currentCanvasHeight = height * this.DPI;
+
+    this.$canvas.width = this.currentCanvasWidth;
+    this.$canvas.height = this.currentCanvasHeight;
+
+    Object.assign(this.$canvas.style, {
+      touchAction: 'none',
+      msTouchAction: 'none',
+      userSelect: 'none',
+    });
+
+    window.addEventListener('resize', this.onResize.bind(this));
+
+    this.$canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.$canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.$canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
+    this.$canvas.addEventListener('mouseenter', this.onMouseEnter.bind(this));
+    this.$canvas.addEventListener('mouseleave', this.onMouseLeave.bind(this));
+    this.$canvas.addEventListener('pointerdown', this.onMouseDown.bind(this));
+    this.$canvas.addEventListener('pointermove', this.onMouseMove.bind(this));
+    this.$canvas.addEventListener('pointerup', this.onMouseUp.bind(this));
+  }
+
+  /**
+   * Calculates the minimum stroke width as a percentage of the current canvas suitable for a signature.
+   */
+  private minStrokeWidth(): number {
+    return Math.min(this.currentCanvasWidth, this.currentCanvasHeight) * 0.005;
+  }
+
+  /**
+   * Calculates the maximum stroke width as a percentage of the current canvas suitable for a signature.
+   */
+  private maxStrokeWidth(): number {
+    return Math.min(this.currentCanvasWidth, this.currentCanvasHeight) * 0.035;
+  }
+
+  /**
+   * Retrieves the HTML canvas element.
+   */
+  public getCanvas(): HTMLCanvasElement {
+    return this.$canvas;
+  }
+
+  /**
+   * Retrieves the 2D rendering context of the canvas.
+   * Throws an error if the context is not available.
+   */
+  public getContext(): CanvasRenderingContext2D {
+    const ctx = this.$canvas.getContext('2d');
+
+    if (!ctx) {
+      throw new Error('Canvas context is not available.');
+    }
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    return ctx;
+  }
+
+  /**
+   * Handles the resize event of the canvas.
+   * Adjusts the canvas size and preserves the content using image data.
+   */
+  private onResize(): void {
+    const { width, height } = this.$canvas.getBoundingClientRect();
+
+    const oldWidth = this.currentCanvasWidth;
+    const oldHeight = this.currentCanvasHeight;
+
+    const ctx = this.getContext();
+
+    const imageData = ctx.getImageData(0, 0, oldWidth, oldHeight);
+
+    this.$canvas.width = width * this.DPI;
+    this.$canvas.height = height * this.DPI;
+
+    this.currentCanvasWidth = width * this.DPI;
+    this.currentCanvasHeight = height * this.DPI;
+
+    ctx.putImageData(imageData, 0, 0, 0, 0, width * this.DPI, height * this.DPI);
+  }
+
+  /**
+   * Handles the mouse down event on the canvas.
+   * Adds the starting point for the signature.
+   */
+  private onMouseDown(event: MouseEvent | PointerEvent | TouchEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.isPressed = true;
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    this.addPoint(point);
+  }
+
+  /**
+   * Handles the mouse move event on the canvas.
+   * Adds a point to the signature if the mouse is pressed, based on the sample rate.
+   */
+  private onMouseMove(event: MouseEvent | PointerEvent | TouchEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (!this.isPressed) {
+      return;
+    }
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    if (point.distanceTo(this.points[this.points.length - 1]) > 10) {
+      this.addPoint(point);
+    }
+  }
+
+  /**
+   * Handles the mouse up event on the canvas.
+   * Adds the final point for the signature and resets the points array.
+   */
+  private onMouseUp(event: MouseEvent | PointerEvent | TouchEvent, addPoint = true): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.isPressed = false;
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    if (addPoint) {
+      this.addPoint(point);
+    }
+
+    this.onChangeHandlers.forEach((handler) => handler(this, false));
+
+    this.points = [];
+  }
+
+  private onMouseEnter(event: MouseEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    event.buttons === 1 && this.onMouseDown(event);
+  }
+
+  private onMouseLeave(event: MouseEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.onMouseUp(event, false);
+  }
+
+  /**
+   * Adds a point to the signature and performs smoothing and drawing.
+   */
+  private addPoint(point: Point): void {
+    const lastPoint = this.points[this.points.length - 1] ?? point;
+
+    this.points.push(point);
+
+    const smoothedPoints = this.smoothSignature(this.points);
+
+    let velocity = point.velocityFrom(lastPoint);
+    velocity =
+      this.VELOCITY_FILTER_WEIGHT * velocity +
+      (1 - this.VELOCITY_FILTER_WEIGHT) * this.lastVelocity;
+
+    const newWidth =
+      velocity > 0 && this.lastVelocity > 0 ? this.strokeWidth(velocity) : this.minStrokeWidth();
+
+    this.drawSmoothSignature(smoothedPoints, newWidth);
+
+    this.lastVelocity = velocity;
+  }
+
+  /**
+   * Applies a smoothing algorithm to the signature points.
+   */
+  private smoothSignature(points: Point[]): Point[] {
+    const smoothedPoints: Point[] = [];
+
+    const startPoint = points[0];
+    const endPoint = points[points.length - 1];
+
+    smoothedPoints.push(startPoint);
+
+    for (let i = 0; i < points.length - 1; i++) {
+      const p0 = i > 0 ? points[i - 1] : startPoint;
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const p3 = i < points.length - 2 ? points[i + 2] : endPoint;
+
+      const cp1x = p1.x + (p2.x - p0.x) / 6;
+      const cp1y = p1.y + (p2.y - p0.y) / 6;
+
+      const cp2x = p2.x - (p3.x - p1.x) / 6;
+      const cp2y = p2.y - (p3.y - p1.y) / 6;
+
+      smoothedPoints.push(new Point(cp1x, cp1y));
+      smoothedPoints.push(new Point(cp2x, cp2y));
+      smoothedPoints.push(p2);
+    }
+
+    return smoothedPoints;
+  }
+
+  /**
+   * Draws the smoothed signature on the canvas.
+   */
+  private drawSmoothSignature(points: Point[], width: number): void {
+    const ctx = this.getContext();
+
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+
+    const startPoint = points[0];
+
+    ctx.moveTo(startPoint.x, startPoint.y);
+
+    ctx.lineWidth = width;
+
+    for (let i = 1; i < points.length; i += 3) {
+      const cp1 = points[i];
+      const cp2 = points[i + 1];
+      const endPoint = points[i + 2];
+
+      ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, endPoint.x, endPoint.y);
+    }
+
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  /**
+   * Calculates the stroke width based on the velocity.
+   */
+  private strokeWidth(velocity: number): number {
+    return Math.max(this.maxStrokeWidth() / (velocity + 1), this.minStrokeWidth());
+  }
+
+  public registerOnChangeHandler(handler: (_canvas: Canvas, _cleared: boolean) => void): void {
+    this.onChangeHandlers.push(handler);
+  }
+
+  public unregisterOnChangeHandler(handler: (_canvas: Canvas, _cleared: boolean) => void): void {
+    this.onChangeHandlers = this.onChangeHandlers.filter((l) => l !== handler);
+  }
+
+  /**
+   * Retrieves the signature as a data URL.
+   */
+  public toDataURL(type?: string, quality?: number): string {
+    return this.$canvas.toDataURL(type, quality);
+  }
+
+  /**
+   * Clears the signature from the canvas.
+   */
+  public clear(): void {
+    const ctx = this.getContext();
+
+    ctx.clearRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
+
+    this.onChangeHandlers.forEach((handler) => handler(this, true));
+
+    this.points = [];
+  }
+
+  /**
+   * Retrieves the signature as an image blob.
+   */
+  public toBlob(type?: string, quality?: number): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      this.$canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Could not convert canvas to blob.'));
+            return;
+          }
+
+          resolve(blob);
+        },
+        type,
+        quality,
+      );
+    });
+  }
+}

apps/marketing/src/components/signature-pad/helper.ts

@@ -0,0 +1,29 @@
+export const average = (a: number, b: number) => (a + b) / 2;
+
+export const getSvgPathFromStroke = (points: number[][], closed = true) => {
+  const len = points.length;
+
+  if (len < 4) {
+    return ``;
+  }
+
+  let a = points[0];
+  let b = points[1];
+  const c = points[2];
+
+  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(
+    2,
+  )} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;
+
+  for (let i = 2, max = len - 1; i < max; i++) {
+    a = points[i];
+    b = points[i + 1];
+    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+  }
+
+  if (closed) {
+    result += 'Z';
+  }
+
+  return result;
+};

apps/marketing/src/components/signature-pad/index.ts

@@ -0,0 +1 @@
+export * from './signature-pad';

apps/marketing/src/components/signature-pad/point.ts

@@ -0,0 +1,98 @@
+import {
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
+
+export type PointLike = {
+  x: number;
+  y: number;
+  timestamp: number;
+};
+
+const isTouchEvent = (
+  event:
+    | ReactMouseEvent
+    | ReactPointerEvent
+    | ReactTouchEvent
+    | MouseEvent
+    | PointerEvent
+    | TouchEvent,
+): event is TouchEvent | ReactTouchEvent => {
+  return 'touches' in event;
+};
+
+export class Point implements PointLike {
+  public x: number;
+  public y: number;
+  public timestamp: number;
+
+  constructor(x: number, y: number, timestamp?: number) {
+    this.x = x;
+    this.y = y;
+    this.timestamp = timestamp ?? Date.now();
+  }
+
+  public distanceTo(point: PointLike): number {
+    return Math.sqrt(Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2));
+  }
+
+  public equals(point: PointLike): boolean {
+    return this.x === point.x && this.y === point.y && this.timestamp === point.timestamp;
+  }
+
+  public velocityFrom(start: PointLike): number {
+    const timeDifference = this.timestamp - start.timestamp;
+
+    if (timeDifference !== 0) {
+      return this.distanceTo(start) / timeDifference;
+    }
+
+    return 0;
+  }
+
+  public static fromPointLike({ x, y, timestamp }: PointLike): Point {
+    return new Point(x, y, timestamp);
+  }
+
+  public static fromEvent(
+    event:
+      | ReactMouseEvent
+      | ReactPointerEvent
+      | ReactTouchEvent
+      | MouseEvent
+      | PointerEvent
+      | TouchEvent,
+    dpi = 1,
+    el?: HTMLElement | null,
+  ): Point {
+    const target = el ?? event.target;
+
+    if (!(target instanceof HTMLElement)) {
+      throw new Error('Event target is not an HTMLElement.');
+    }
+
+    const { top, bottom, left, right } = target.getBoundingClientRect();
+
+    let clientX, clientY;
+
+    if (isTouchEvent(event)) {
+      clientX = event.touches[0].clientX;
+      clientY = event.touches[0].clientY;
+    } else {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    }
+
+    // create a new point snapping to the edge of the current target element if it exceeds
+    // the bounding box of the target element
+    let x = Math.min(Math.max(left, clientX), right) - left;
+    let y = Math.min(Math.max(top, clientY), bottom) - top;
+
+    // adjust for DPI
+    x *= dpi;
+    y *= dpi;
+
+    return new Point(x, y);
+  }
+}

apps/marketing/src/components/signature-pad/signature-pad.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import {
+  HTMLAttributes,
+  MouseEvent,
+  PointerEvent,
+  TouchEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { StrokeOptions, getStroke } from 'perfect-freehand';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { getSvgPathFromStroke } from './helper';
+import { Point } from './point';
+
+const DPI = 2;
+
+export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
+  onChange?: (_signatureDataUrl: string | null) => void;
+};
+
+export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProps) => {
+  const $el = useRef<HTMLCanvasElement>(null);
+
+  const [isPressed, setIsPressed] = useState(false);
+  const [points, setPoints] = useState<Point[]>([]);
+
+  const perfectFreehandOptions = useMemo(() => {
+    const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
+
+    return {
+      size,
+      thinning: 0.25,
+      streamline: 0.5,
+      smoothing: 0.5,
+      end: {
+        taper: size * 2,
+      },
+    } satisfies StrokeOptions;
+  }, []);
+
+  const onMouseDown = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(true);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points, point];
+
+    setPoints(newPoints);
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.save();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+      }
+    }
+  };
+
+  const onMouseMove = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (!isPressed) {
+      return;
+    }
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    if (point.distanceTo(points[points.length - 1]) > 5) {
+      const newPoints = [...points, point];
+
+      setPoints(newPoints);
+
+      if ($el.current) {
+        const ctx = $el.current.getContext('2d');
+
+        if (ctx) {
+          ctx.restore();
+
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = 'high';
+
+          const pathData = new Path2D(
+            getSvgPathFromStroke(getStroke(points, perfectFreehandOptions)),
+          );
+
+          ctx.fill(pathData);
+        }
+      }
+    }
+  };
+
+  const onMouseUp = (event: MouseEvent | PointerEvent | TouchEvent, addPoint = true) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(false);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points];
+
+    if (addPoint) {
+      newPoints.push(point);
+
+      setPoints(newPoints);
+    }
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.restore();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+
+        ctx.save();
+      }
+
+      onChange?.($el.current.toDataURL());
+    }
+
+    setPoints([]);
+  };
+
+  const onMouseEnter = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if ('buttons' in event && event.buttons === 1) {
+      onMouseDown(event);
+    }
+  };
+
+  const onMouseLeave = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    onMouseUp(event, false);
+  };
+
+  const onClearClick = () => {
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+    }
+
+    onChange?.(null);
+
+    setPoints([]);
+  };
+
+  useEffect(() => {
+    if ($el.current) {
+      $el.current.width = $el.current.clientWidth * DPI;
+      $el.current.height = $el.current.clientHeight * DPI;
+    }
+  }, []);
+
+  return (
+    <div className="relative block">
+      <canvas
+        ref={$el}
+        className={cn('relative block', className)}
+        style={{ touchAction: 'none' }}
+        onPointerMove={(event) => onMouseMove(event)}
+        onPointerDown={(event) => onMouseDown(event)}
+        onPointerUp={(event) => onMouseUp(event)}
+        onPointerLeave={(event) => onMouseLeave(event)}
+        onPointerEnter={(event) => onMouseEnter(event)}
+        {...props}
+      />
+
+      <div className="absolute bottom-2 right-2">
+        <button className="rounded-full p-2 text-xs text-slate-500" onClick={() => onClearClick()}>
+          Clear Signature
+        </button>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export type CopiedValue = string | null;
+export type CopyFn = (_text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn('Clipboard not supported');
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn('Copy failed', error);
+      setCopiedText(null);
+      return false;
+    }
+  };
+
+  return [copiedText, copy];
+}

apps/marketing/src/pages/api/claim-plan/index.ts

@@ -0,0 +1,128 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { randomUUID } from 'crypto';
+
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+import { redis } from '@documenso/lib/server-only/redis';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { prisma } from '@documenso/prisma';
+
+import { TClaimPlanResponseSchema, ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<TClaimPlanResponseSchema>,
+) {
+  try {
+    const { method } = req;
+
+    if (method?.toUpperCase() !== 'POST') {
+      return res.status(405).json({
+        error: 'Method not allowed',
+      });
+    }
+
+    const safeBody = ZClaimPlanRequestSchema.safeParse(req.body);
+
+    if (!safeBody.success) {
+      return res.status(400).json({
+        error: 'Bad request',
+      });
+    }
+
+    const { email, name, planId, signatureDataUrl, signatureText } = safeBody.data;
+
+    const user = await prisma.user.findFirst({
+      where: {
+        email: email.toLowerCase(),
+      },
+      include: {
+        Subscription: true,
+      },
+    });
+
+    if (user && user.Subscription.length > 0) {
+      return res.status(200).json({
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/login`,
+      });
+    }
+
+    const password = Math.random().toString(36).slice(2, 9);
+    const passwordHash = hashSync(password);
+
+    const { id: userId } = await prisma.user.upsert({
+      where: {
+        email: email.toLowerCase(),
+      },
+      create: {
+        email: email.toLowerCase(),
+        name,
+        password: passwordHash,
+      },
+      update: {
+        name,
+        password: passwordHash,
+      },
+    });
+
+    await redis.set(`user:${userId}:temp-password`, password, {
+      // expire in 24 hours
+      ex: 60 * 60 * 24,
+    });
+
+    const signatureDataUrlKey = randomUUID();
+
+    if (signatureDataUrl) {
+      await redis.set(`signature:${signatureDataUrlKey}`, signatureDataUrl, {
+        // expire in 7 days
+        ex: 60 * 60 * 24 * 7,
+      });
+    }
+
+    const metadata: Record<string, string> = {
+      name,
+      email,
+      signatureText: signatureText || name,
+      source: 'landing',
+    };
+
+    if (signatureDataUrl) {
+      metadata.signatureDataUrl = signatureDataUrlKey;
+    }
+
+    const checkout = await stripe.checkout.sessions.create({
+      customer_email: email,
+      client_reference_id: userId.toString(),
+      payment_method_types: ['card'],
+      line_items: [
+        {
+          price: planId,
+          quantity: 1,
+        },
+      ],
+      mode: 'subscription',
+      metadata,
+      allow_promotion_codes: true,
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      success_url: `${process.env.NEXT_PUBLIC_SITE_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL}/pricing?email=${encodeURIComponent(
+        email,
+      )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
+    });
+
+    if (!checkout.url) {
+      throw new Error('Checkout URL not found');
+    }
+
+    return res.json({
+      redirectUrl: checkout.url,
+    });
+  } catch (error) {
+    console.error(error);
+
+    return res.status(500).json({
+      error: 'Internal server error',
+    });
+  }
+}

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -0,0 +1,173 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { randomBytes } from 'crypto';
+import { readFileSync } from 'fs';
+import { buffer } from 'micro';
+
+import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
+import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
+import { redis } from '@documenso/lib/server-only/redis';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentStatus,
+  FieldType,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+const log = (...args: any[]) => console.log('[stripe]', ...args);
+
+export const config = {
+  api: { bodyParser: false },
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  // if (!process.env.NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS) {
+  //   return res.status(500).json({
+  //     success: false,
+  //     message: 'Subscriptions are not enabled',
+  //   });
+  // }
+
+  const sig =
+    typeof req.headers['stripe-signature'] === 'string' ? req.headers['stripe-signature'] : '';
+
+  if (!sig) {
+    return res.status(400).json({
+      success: false,
+      message: 'No signature found in request',
+    });
+  }
+
+  log('constructing body...');
+  const body = await buffer(req);
+  log('constructed body');
+
+  const event = stripe.webhooks.constructEvent(
+    body,
+    sig,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, turbo/no-undeclared-env-vars
+    process.env.NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET!,
+  );
+  log('event-type:', event.type);
+
+  if (event.type === 'checkout.session.completed') {
+    const session = event.data.object as Stripe.Checkout.Session;
+
+    if (session.metadata?.source === 'landing') {
+      const user = await prisma.user.findFirst({
+        where: {
+          id: Number(session.client_reference_id),
+        },
+      });
+
+      if (!user) {
+        return res.status(500).json({
+          success: false,
+          message: 'User not found',
+        });
+      }
+
+      const signatureText = session.metadata?.signatureText || user.name;
+      let signatureDataUrl = '';
+
+      if (session.metadata?.signatureDataUrl) {
+        const result = await redis.get<string>(`signature:${session.metadata.signatureDataUrl}`);
+
+        if (result) {
+          signatureDataUrl = result;
+        }
+      }
+
+      const now = new Date();
+
+      const document = await prisma.document.create({
+        data: {
+          title: 'Documenso Supporter Pledge.pdf',
+          status: DocumentStatus.COMPLETED,
+          userId: user.id,
+          document: readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64'),
+          created: now,
+        },
+      });
+
+      const recipient = await prisma.recipient.create({
+        data: {
+          name: user.name ?? '',
+          email: user.email,
+          token: randomBytes(16).toString('hex'),
+          signedAt: now,
+          readStatus: ReadStatus.OPENED,
+          sendStatus: SendStatus.SENT,
+          signingStatus: SigningStatus.SIGNED,
+          documentId: document.id,
+        },
+      });
+
+      const field = await prisma.field.create({
+        data: {
+          documentId: document.id,
+          recipientId: recipient.id,
+          type: FieldType.SIGNATURE,
+          page: 0,
+          positionX: 77,
+          positionY: 638,
+          inserted: false,
+          customText: '',
+        },
+      });
+
+      if (signatureDataUrl) {
+        document.document = await insertImageInPDF(
+          document.document,
+          signatureDataUrl,
+          Number(field.positionX),
+          Number(field.positionY),
+          field.page,
+        );
+      } else {
+        document.document = await insertTextInPDF(
+          document.document,
+          signatureText ?? '',
+          Number(field.positionX),
+          Number(field.positionY),
+          field.page,
+        );
+      }
+
+      await Promise.all([
+        prisma.signature.create({
+          data: {
+            fieldId: field.id,
+            recipientId: recipient.id,
+            signatureImageAsBase64: signatureDataUrl || undefined,
+            typedSignature: signatureDataUrl ? '' : signatureText,
+          },
+        }),
+        prisma.document.update({
+          where: {
+            id: document.id,
+          },
+          data: {
+            document: document.document,
+          },
+        }),
+      ]);
+    }
+
+    return res.status(200).json({
+      success: true,
+      message: 'Webhook received',
+    });
+  }
+
+  log('Unhandled webhook event', event.type);
+
+  return res.status(400).json({
+    success: false,
+    message: 'Unhandled webhook event',
+  });
+}

apps/marketing/src/providers/plausible.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+
+import NextPlausibleProvider from 'next-plausible';
+
+export type PlausibleProviderProps = {
+  children: React.ReactNode;
+};
+
+export const PlausibleProvider = ({ children }: PlausibleProviderProps) => {
+  return <NextPlausibleProvider domain="documenso.com">{children}</NextPlausibleProvider>;
+};

apps/marketing/tailwind.config.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const baseConfig = require('@documenso/tailwind-config');
+const path = require('path');
+
+module.exports = {
+  ...baseConfig,
+  content: [
+    ...baseConfig.content,
+    `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
+  ],
+};

apps/marketing/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "extends": "@documenso/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
+      ]
+    },
+    "types": [
+      "@documenso/lib/types/next-auth.d.ts"
+    ],
+    "strictNullChecks": true,
+    "incremental": false
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".contentlayer/generated"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}