Merge branch 'feat/refresh' into docs/minor-readme-updatess

fix: sharp corners of signing card

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+{
+  "name": "Documenso",
+  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
+      "version": "latest",
+      "enableNonRootDocker": "true",
+      "moby": "true"
+    },
+    "ghcr.io/devcontainers/features/node:1": {}
+  },
+  "onCreateCommand": "./.devcontainer/on-create.sh",
+  "forwardPorts": [3000, 54320, 9000, 2500, 1100],
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "aaron-bond.better-comments",
+        "bradlc.vscode-tailwindcss",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "mikestead.dotenv",
+        "unifiedjs.vscode-mdx",
+        "GitHub.copilot-chat",
+        "GitHub.copilot-labs",
+        "GitHub.copilot",
+        "GitHub.vscode-pull-request-github",
+        "Prisma.prisma",
+        "VisualStudioExptTeam.vscodeintellicode",
+      ]
+    }
+  }
+}

.devcontainer/on-create.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+# Start the database and mailserver
+docker compose -f ./docker/compose-without-app.yml up -d
+
+# Install dependencies
+npm install
+
+# Copy the env file
+cp .env.example .env
+
+# Source the env file, export the variables
+set -a
+source .env
+set +a
+
+# Run the migrations
+npm run -w @documenso/prisma prisma:migrate-dev

.devcontainer/post-start.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+npm run dev

.env.example

@@ -6,12 +6,28 @@ NEXTAUTH_SECRET="secret"
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
-# [[APP]]
-NEXT_PUBLIC_SITE_URL="http://localhost:3000"
-NEXT_PUBLIC_APP_URL="http://localhost:3000"
+# [[URLS]]
+NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
+NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
+# Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
+NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
+
+# [[STORAGE]]
+# OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
+NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
+# OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
+NEXT_PRIVATE_UPLOAD_ENDPOINT=
+# OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
+NEXT_PRIVATE_UPLOAD_REGION=
+# REQUIRED: Defines the bucket to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_BUCKET=
+# OPTIONAL: Defines the access key ID to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID=
+# OPTIONAL: Defines the secret access key to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY=
 
 # [[SMTP]]
 # OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
@@ -34,7 +50,9 @@ NEXT_PRIVATE_SMTP_SECURE=
 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.
+# OPTIONAL: The API key to use for Resend.com
+NEXT_PRIVATE_RESEND_API_KEY=
+# OPTIONAL: The API key to use for MailChannels.
 NEXT_PRIVATE_MAILCHANNELS_API_KEY=
 # OPTIONAL: The endpoint to use for the MailChannels API if using a proxy.
 NEXT_PRIVATE_MAILCHANNELS_ENDPOINT=

.eslintignore

@@ -0,0 +1,8 @@
+# Config files
+*.config.js
+*.config.cjs
+
+# Statically hosted javascript files
+apps/*/public/*.js
+apps/*/public/*.cjs
+scripts/

.github/dependabot.yml

@@ -0,0 +1,32 @@
+version: 2
+
+updates:
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: "weekly"
+    target-branch: "feat/refresh"
+    labels:
+      - "ci dependencies"
+      - "ci"
+    open-pull-requests-limit: 2
+
+  - package-ecosystem: "npm"
+    directory: "/apps/marketing"
+    schedule:
+      interval: "weekly"
+    target-branch: "feat/refresh"
+    labels:
+      - "npm dependencies"
+      - "frontend"
+    open-pull-requests-limit: 2
+
+  - package-ecosystem: "npm"
+    directory: "/apps/web"
+    schedule:
+      interval: "weekly"
+    target-branch: "feat/refresh"
+    labels:
+      - "npm dependencies"
+      - "frontend"
+    open-pull-requests-limit: 2

.github/workflows/ci.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [ "feat/refresh" ]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
 env:
   HUSKY: 0
 
@@ -18,12 +22,18 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 2
+
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: npm
+
       - name: Install dependencies
         run: npm ci
+
+      - name: Copy env
+        run: cp .env.example .env
+
       - name: Build
         run: npm run build

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,48 @@
+name: "CodeQL"
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ feat/refresh ]
+  pull_request:
+    branches: [ feat/refresh ]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: true
+      matrix:
+        language: [ 'javascript' ]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: npm
+
+    - name: Install Dependencies
+      run: npm ci
+
+    - name: Copy env
+      run: cp .env.example .env
+
+    - name: Build Documenso
+      run: npm run build
+
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/semantic-pull-requests.yml

@@ -0,0 +1,21 @@
+name: "Validate PR Name"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  validate-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,13 +1,9 @@
-<p align="center" style="margin-top: 120px">
-  <a href="https://github.com/documenso/documenso.com">
-   <img width="250px" src="https://github.com/documenso/documenso/assets/1309312/cd7823ec-4baa-40b9-be78-4acb3b1c73cb" alt="Documenso Logo">
-  </a>
-
-  <h3 align="center">Open Source Signing Infrastructure</h3>
+<img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
+<p align="center" style="margin-top: 20px">
   <p align="center">
-    The DocuSign Open Source Alternative.
-    <br />
+  The Open Source DocuSign Alternative.
+  <br>
     <a href="https://documenso.com"><strong>Learn more »</strong></a>
     <br />
     <br />
@@ -18,6 +14,8 @@
     <a href="https://github.com/documenso/documenso/issues">Issues</a>
     ·
     <a href="https://github.com/documenso/documenso/milestones">Roadmap</a>
+    ·
+    <a href="https://documen.so/launches">Upcoming Launches</a>
   </p>
 </p>
 
@@ -26,182 +24,212 @@
    <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>
+   <a href="https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso">
+   <img alt="open in devcontainer" src="https://img.shields.io/static/v1?label=Dev%20Containers&message=Enabled&color=blue&logo=visualstudiocode" />
+   </a>
 </p>
 
-# Documenso 0.9 - Developer Preview
+> 🦺 Documenso 1.0 is deployed to our <a href="https://documen.so/staging" target="_blank">Staging Environment</a>.
+>
+> The code can be found on the [feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh) branch.
+>
+> The new version will be released after the current testing phase.
+
+# Join us in testing Documenso 1.0 during [MALFUNCTION MANIA](https://documenso.com/blog/malfunction-mania)
 
 <div>
   <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570645-167128ee-3e39-4578-85d2-5394d9a0379c.png">
+    src="https://github.com/documenso/documenso/assets/1309312/67e08c98-c153-4115-aa2d-77979bb12c94)">
   <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570651-0afd12f8-cfe3-49d1-805e-e495af963d91.png">
+    src="https://github.com/documenso/documenso/assets/1309312/040cfbae-3438-4ca3-87f2-ce52c793dcaf">
   <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570655-328d2279-058d-4a3e-b5c3-5cbd8a1f4e05.png">
+    src="https://github.com/documenso/documenso/assets/1309312/72d445be-41e5-4936-bdba-87ef8e70fa09">
   <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224571617-1f3c2811-c1ac-4d7d-b9b0-4ab183731405.png">
+    src="https://github.com/documenso/documenso/assets/1309312/d7b86c0f-a755-4476-a022-a608db2c4633">
   <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570322-b2c76ea8-7482-4043-ad97-f1221220c591.png">
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570325-a8055f24-9826-4a23-b116-4fbb0577581a.png">
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224570318-f724bbd9-c394-4bdc-bace-2d78af92de44.png">
-      <img style="display: block; height: 120px; width: 24%"
-    src="https://user-images.githubusercontent.com/1309312/224571539-f019b860-f613-4b20-86e8-4437c5784265.png">
+    src=https://github.com/documenso/documenso/assets/1309312/c0f55116-ab82-433f-a266-f3fc8571d69f">
 </div>
 
-> **Note**
-> This project is currently under community review and will publish it's first production release soon™.
-
 ## About this project
 
-Signing documents digitally is fast, easy and should be best practice for every document signed worldwide. This is technically quite easy today, but it also introduces a new party to every signature: The signing tool providers. While this is not a problem in itself, it should make us think about how we want these providers of trust to work. Documenso aims to be the world's most trusted document signing tool. This trust is built by empowering you to self-host Documenso and review how it works under the hood. Join us in creating the next generation of open trust infrastructure.
+Signing documents digitally should be fast and easy and should be the best practice for every document signed worldwide.
+
+This is technically quite easy today, but it also introduces a new party to every signature: The signing tool providers. While this is not a problem in itself, it should make us think about how we want these providers of trust to work.
+
+Documenso aims to be the world's most trusted document-signing tool. This trust is built by empowering you to self-host Documenso and review how it works under the hood.
+
+Join us in creating the next generation of open trust infrastructure.
 
 ## Recognition
 
-<a 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&#0032;open&#0032;source&#0032;DocuSign&#0032;alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-<a href="https://www.producthunt.com/posts/documenso?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-documenso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=395047&theme=light" alt="Documenso - The&#0032;Open&#0032;Source&#0032;DocuSign&#0032;Alternative&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<p align="center">
+  <a 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&#0032;open&#0032;source&#0032;DocuSign&#0032;alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+  <a href="https://www.producthunt.com/posts/documenso?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-documenso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=395047&theme=light" alt="Documenso - The&#0032;Open&#0032;Source&#0032;DocuSign&#0032;Alternative&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+</p>
 
 ## Community and Next Steps 🎯
 
-The current project goal is to <b>[release a production ready version](https://github.com/documenso/documenso/milestone/1)</b> for self-hosting as soon as possible. If you want to help making that happen you can:
+We're currently working on a redesign of the application, including a revamp of the codebase so Documenso can be more intuitive to use and robust to develop upon.
 
 - Check out the first source code release in this repository and test it
-- Tell us what you think in the current [Discussions](https://github.com/documenso/documenso/discussions)
-- Join the [Slack Channel](https://documen.so/slack) for any questions and getting to know to other community members
+- Tell us what you think in the [Discussions](https://github.com/documenso/documenso/discussions)
+- Join the [Discord server](https://documen.so/discord) for any questions and getting to know to other community members
 - ⭐ the repository to help us raise awareness
-- Spread the word on Twitter, that Documenso is working towards a more open signing tool
+- Spread the word on Twitter that Documenso is working towards a more open signing tool
 - Fix or create [issues](https://github.com/documenso/documenso/issues), that are needed for the first production release
 
 ## Contributing
 
-- To contribute please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md).
+- To contribute, please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md).
 
-# Tech
+## Contact us
 
-Documenso is built using awesome open source tech including:
+Contact us if you are interested in our Enterprise plan for large organizations that need extra flexibility and control.
 
-- [Typescript](https://www.typescriptlang.org/)
-- [Javascript (when necessary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
-- [NextJS (JS Fullstack Framework)](https://nextjs.org/)
-- [Postgres SQL (Database)](https://www.postgresql.org/)
-- [Prisma (ORM - Object-relational mapping)](https://www.prisma.io/)
-- [Tailwind CSS (Styling)](https://tailwindcss.com/)
-- [Node SignPDF (Digital Signature)](https://github.com/vbuch/node-signpdf)
-- [React-PDF for viewing PDFs](https://github.com/wojtekmaj/react-pdf)
-- [PDF-Lib for PDF manipulation](https://github.com/Hopding/pdf-lib)
-- Check out `/package.json` and `/apps/web/package.json` for more
-- Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned.
+<a href="https://cal.com/timurercan/enterprise-customers?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
-# Getting Started
+## Tech Stack
 
-## Requirements
+- [Typescript](https://www.typescriptlang.org/) - Language
+- [Next.js](https://nextjs.org/) - Framework
+- [Prisma](https://www.prisma.io/) - ORM
+- [Tailwind](https://tailwindcss.com/) - CSS
+- [shadcn/ui](https://ui.shadcn.com/) - Component Library
+- [NextAuth.js](https://next-auth.js.org/) - Authentication
+- [react-email](https://react.email/) - Email Templates
+- [tRPC](https://trpc.io/) - API
+- [Node SignPDF](https://github.com/vbuch/node-signpdf) - Digital Signature
+- [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
+- [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
+- [Stripe](https://stripe.com/) - Payments
+- [Vercel](https://vercel.com) - Hosting
 
-To run Documenso locally you need
+<!-- - Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned. -->
 
-- [Node.js (Version: >=18.x)](https://nodejs.org/en/download/)
-- Node Package Manager NPM - included in Node.js
-- [PostgreSQL (local or remote)](https://www.postgresql.org/download/)
+## Local Development
 
-## Developer Quickstart
+### Requirements
+
+To run Documenso locally you will need
+
+- Node.js
+- Postgres SQL Database
+- Docker (optional)
+
+### Developer Quickstart
 
 > **Note**: This is a quickstart for developers. It assumes that you have both [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/) installed on your machine.
 
 Want to get up and running quickly? Follow these steps:
 
-- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 
-  ```sh
-  git clone https://github.com/documenso/documenso
-  ```
+```sh
+git clone https://github.com/documenso/documenso
+```
 
-- Set up your `.env` file using the recommendations in the `.env.example` file.
-- Run `npm run dx` in the root directory
-  - This will spin up a postgres database and inbucket mail server in docker containers.
-- Run `npm run dev` in the root directory
-- Want it even faster? Just use
-  ```sh
-  npm run d
-  ```
+2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively just run `cp .env.example .env` to get started with our handpicked defaults.
 
-That's it! You should now be able to access the app at http://localhost:3000
 
-Incoming mail will be available at http://localhost:9000
+3. Run `npm run dx` in the root directory
 
-Your database will also be available on port `54320`. You can connect to it using your favorite database client.
+   - This will spin up a postgres database and inbucket mailserver in a docker container.
+
+4. Run `npm run dev` in the root directory
+
+
+5. Want it even faster? Just use
+
+```sh
+npm run d
+```
+
+#### Access Points for Your Application
+
+1. **App** - http://localhost:3000
+2. **Incoming Mail Access** - http://localhost:9000
+
+3. **Database Connection Details**
+   - **Port**: 54320
+   - **Connection**: Use your favorite database client to connect using the provided port.
 
 ## Developer Setup
 
+### Manual Setup
+
 Follow these steps to setup documenso on you local machine:
 
-- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
-  ```sh
-  git clone https://github.com/documenso/documenso
-  ```
-- Run <code>npm i</code> in root directory
-- Rename <code>.env.example</code> to <code>.env</code>
-- Set DATABASE_URL value in .env file
-  - You can use the provided test database url (may be wiped at any point)
-  - Or setup a local postgres sql instance (recommended)
-- Create the database scheme by running <code>db-migrate:dev</code>
-- Setup your mail provider
-  - Set <code>SENDGRID_API_KEY</code> value in .env file
-  - You need a SendGrid account, which you can create [here](https://signup.sendgrid.com/).
-  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* variables</code> in your .env
-- Run <code>npm run dev</code> root directory to start
-- Register a new user at http://localhost:3000/signup
+1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+
+```sh
+git clone https://github.com/documenso/documenso
+```
+
+2. Run `npm i` in root directory
+
+3. Create your `.env` from the `.env.example`. You can use `cp .env.example .env` to get started with our handpicked defaults.
+
+4. Set the following environement variables.
+    - NEXTAUTH_URL
+    - NEXTAUTH_SECRET
+    - NEXT_PUBLIC_WEBAPP_URL
+    - NEXT_PUBLIC_MARKETING_URL
+    - NEXT_PRIVATE_DATABASE_URL
+    - NEXT_PRIVATE_DIRECT_DATABASE_URL
+    - NEXT_PRIVATE_SMTP_FROM_NAME
+    - NEXT_PRIVATE_SMTP_FROM_ADDRESS
+
+5. Create the database schema by running `npm run prisma:migrate-dev -w @documenso/prisma`
+
+6. Run `npm run dev` root directory to start
+
+7. Register a new user at http://localhost:3000/signup
 
 ---
 
-- Optional: Seed the database using <code>npm run db-seed</code> to create a test user and document
-- Optional: Upload and sign <code>apps/web/resources/example.pdf</code> manually to test your setup
-
+- Optional: Seed the database using `npm run prisma:seed -w @documenso/prisma` to create a test user and document
 - Optional: Create your own signing certificate
-  - A demo certificate is provided in `/app/web/resources/certificate.p12`
-  - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](#creating-your-own-signing-certificate)**.
+  - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](./SIGNING.md)**.
 
-## Updating
+### Run in Gitpod
 
-- If you pull the newest version from main, using <code>git pull</code>, it may be necessary to regenerate your database client
-- You can do this by running the generate command in `/packages/prisma`:
-  ```sh
-  npx prisma generate
-  ```
-- This is not necessary on first clone.
+- Click below to launch a ready-to-use Gitpod workspace in your browser.
 
-# Creating your own signing certificate
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/documenso/documenso)
 
-For the digital signature of your documents you need a signing certificate in .p12 format (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
+### Run in DevContainer
 
-1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:\
-   <code>openssl genrsa -out private.key 2048</code>
+We support DevContainers for VSCode. [Click here to get started.](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso)
 
-2. Generate a self-signed certificate using the private key. You can run the following command to generate a self-signed certificate:\
-   <code>openssl req -new -x509 -key private.key -out certificate.crt -days 365</code> \
-   This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The -days parameter sets the number of days for which the certificate is valid.
-3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this: \
-   <code>openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt</code>
-4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
-5. Place the certificate <code>/apps/web/resources/certificate.p12</code>
+## Docker
 
-# Docker
+🚧 Docker containers and images are current in progress. We are actively working on bringing a simple docker build and publish pipeline for Documenso.
 
-> We are still working on the publishing of docker images, in the meantime you can follow the steps below to create a production ready docker image.
+## Self Hosting
 
-Want to create a production ready docker image? Follow these steps:
+We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
 
-- Run `./docker/build.sh` in the root directory.
-- Publish the image to your docker registry of choice.
+> Please note the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
 
-# Deploying - Coming Soon™
+### Railway
 
-- Docker support
-- One-Click-Deploy on Render.com Deploy
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
 
-# Troubleshooting
+### Render
 
-## Support IPv6
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
 
-In case you are deploying to a cluster that uses only IPv6. You can use a custom command to pass a parameter to the NextJS start command
+## Troubleshooting
+
+### I'm not receiving any emails when using the developer quickstart
+
+When using the developer quickstart an [Inbucket](https://inbucket.org/) server will be spun up in a docker container that will store all outgoing email locally for you to view.
+
+The Web UI can be found at http://localhost:9000 while the SMTP port will be on localhost:2500.
+
+### Support IPv6
+
+In case you are deploying to a cluster that uses only IPv6. You can use a custom command to pass a parameter to the Next.js start command
 
 For local docker run
 
@@ -223,5 +251,9 @@ containers:
       - start
       - --
       - -H
-      - "::"
+      - '::'
 ```
+
+## Repo Activity
+
+![Repository Activity](https://repobeats.axiom.co/api/embed/622a2e9aa709696f7226304b5b7178a5741b3868.svg)

SIGNING.md

@@ -0,0 +1,55 @@
+# Creating your own signing certificate
+
+For the digital signature of your documents you need a signing certificate in .p12 format (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
+
+1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:
+
+   `openssl genrsa -out private.key 2048`
+
+2. Generate a self-signed certificate using the private key. You can run the following command to generate a self-signed certificate:
+
+   `openssl req -new -x509 -key private.key -out certificate.crt -days 365`
+
+   This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The -days parameter sets the number of days for which the certificate is valid.
+
+3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this:
+
+   `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
+
+4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
+5. Place the certificate `/apps/web/resources/certificate.p12`
+
+## Docker
+
+> We are still working on the publishing of docker images, in the meantime you can follow the steps below to create a production ready docker image.
+
+Want to create a production ready docker image? Follow these steps:
+
+- cd into `docker` directory
+- Make `build.sh` executable by running `chmod +x build.sh`
+- Run `./build.sh` to start building the docker image.
+- Publish the image to your docker registry of choice (or) If you prefer running the image from local, run the below command
+
+```
+docker run -d --restart=unless-stopped -p 3000:3000 -v documenso:/app/data --name documenso documenso:latest
+```
+
+Command Breakdown:
+
+- `-d` - Let's you run the container in background
+- `-p` - Passes down which ports to use. First half is the host port, Second half is the app port. You can change the first half anything you want and reverse proxy to that port.
+- `-v` - Volume let's you persist the data
+- `--name` - Name of the container
+- `documenso:latest` - Image you have built
+
+## Deployment
+
+We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
+
+## Railway
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
+
+## Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)

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

@@ -1,98 +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).
+---
+title: 'Building Documenso — Part 1: Certificates'
+description: This is the first part 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.
+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://documen.so/discord" target="_blank">https://documen.so/discord</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/deploy-with-vercel-supabase-resend.mdx

@@ -0,0 +1,198 @@
+---
+title: 'Deploying Documenso with Vercel, Supabase and Resend'
+description: This is the first part 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.
+authorName: 'Ephraim Atta-Duncan'
+authorImage: '/blog/blog-author-duncan.jpeg'
+authorRole: 'Software Engineer Intern'
+date: 2023-09-08
+tags:
+  - Open Source
+  - Self Hosting
+  - Tutorial
+---
+
+In this article, we'll walk you through how to deploy and self-host Documenso using Vercel, Supabase, and Resend.
+
+You'll learn:
+
+- How to set up a Postgres database using Supabase,
+- How to install SMTP with Resend,
+- How to deploy your project with Vercel.
+
+If you don't know what [Documenso](https://documenso.com/) is, it's an open-source alternative to DocuSign, with the mission to create an open signing infrastructure while embracing openness, cooperation, and transparency.
+
+## Prerequisites
+
+Before we start, make sure you have a [GitHub](https://github.com/signup) account. You also need [Node.js](https://nodejs.org/en) and [npm](https://www.npmjs.com/) installed on your local machine (note: you also have the option to host it on a cloud environment using Gitpod for example; that would be another post). If you need accounts on Vercel, Supabase, and Resend, create them by visiting the [Vercel](https://vercel.com/), [Supabase](https://supabase.com/), and [Resend](https://resend.com/) websites.
+
+Checklist:
+
+- [ ] Have a GitHub account
+- [ ] Install Node.js
+- [ ] Install npm
+- [ ] Have a Vercel account
+- [ ] Have a Supabase account
+- [ ] Have a Resend account
+
+## Step-by-Step guide to deploying Documenso with Vercel, Supabase, and Resend
+
+To deploy Documenso, we'll take the following steps:
+
+1. Fork the Documenso repository
+2. Clone the forked repository and install dependencies
+3. Create a new project on Supabase
+4. Copy the Supabase Postgres database connection URL
+5. Create a `.env` file
+6. Run the migration on the Supabase Postgres Database
+7. Get your SMTP Keys on Resend
+8. Create a new project on Vercel
+9. Add Environment Variables to your Vercel project
+
+So, you're ready? Let’s dive in!
+
+### Step 1: Fork the Documenso repository
+
+Start by creating a fork of Documenso on GitHub. You can do this by visiting the [Documenso repository](https://github.com/documenso/documenso) and clicking on the 'Fork' button. (Also, star the repo!)
+
+![Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkcujctpf86p56bju3mq.png)
+
+Choose your GitHub profile as the owner and click on 'Create fork' to create a fork of the repo.
+
+![Fork the Documenso repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf49r2byu9nnd1465niy.png)
+
+### Step 2: Clone the forked repository and install dependencies
+
+Clone the forked repository to your local machine in any directory of your choice. Open your terminal and enter the following commands:
+
+```bash
+# Clone the repo using Github CLI
+gh repo clone [your_github_username]/documenso
+
+# Clone the repo using Git
+git clone <https://github.com/[your_github_username]/documenso.git>
+```
+
+You can now navigate into the directory and install the project’s dependencies:
+
+```bash
+cd documenso
+npm install
+```
+
+### Step 3: Create a new project on Supabase
+
+Now, let's set up the database.
+
+If you haven't already, create a new project on Supabase. This will automatically create a new Postgres database for you.
+
+On your Supabase dashboard, click the '**New project**' button and choose your organization.
+
+On the '**Create a new project**' page, set a database name of **documenso** and a secure password for your database. Choose a region closer to you, a pricing plan, and click on '**Create new project**' to create your project.
+
+![Create a new project on Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5lqz771iupjyi1ekfdz.png)
+
+### Step 4: Copy the Supabase Postgres database connection URL
+
+In your project, click the '**Settings**' icon at the bottom left.
+
+Under the '**Project Settings**' section, click '**Database**' and scroll down to the '**Connection string**' section. Copy the '**URI**' and update it with the password you chose in the previous step.
+
+![Copy the Supabase Postgres database connection URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ldu3qrg9moednbzjij.png)
+
+### Step 5: Create a `.env` file
+
+Create a `.env` file in the root of your project by copying the contents of the `.env.example` file.
+
+Add the connection string you copied from your Supabase dashboard to the `DATABASE_URL` variable in the `.env` file.
+
+The `.env` should look like this:
+
+```bash
+DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
+```
+
+### Step 6: Run the migration on the Supabase Postgres Database
+
+Run the migration on the Supabase Postgres Database using the following command:
+
+```bash
+npx prisma migrate deploy
+```
+
+### Step 7: Get your SMTP Keys on Resend
+
+So, you've just cloned Documenso, installed dependencies on your local machine, and set your database using Supabase. Now, SMTP is missing. Emails won't go out! Let's fix it with Resend.
+
+In the **[Resend](https://resend.com/)** dashboard, click 'Add API Key' to create a key for Resend SMTP.
+
+![Create a key for Resend SMTP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh2rztgn09mlvecl34i5.png)
+
+Next, add and verify your domain in the '**Domains**' section on the sidebar. This will allow you to send emails from any address associated with your domain.
+
+![Verify your domain on Resend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxgie0esz530vq5a494o.png)
+
+You can update your `.env` file with the following:
+
+```jsx
+SMTP_MAIL_HOST = 'smtp.resend.com';
+SMTP_MAIL_PORT = '25';
+SMTP_MAIL_USER = 'resend';
+SMTP_MAIL_PASSWORD = 'YOUR_RESEND_API_KEY';
+MAIL_FROM = 'noreply@[YOUR_DOMAIN]';
+```
+
+### Step 8: Create a new project on Vercel
+
+You set the database with Supabase and are SMTP-ready with Resend. Almost there! The next step is to deploy the project — we'll use Vercel for that.
+
+On your Vercel dashboard, create a new project using the forked project from your GitHub repositories. Select the project among the options and click '**Import**' to start running Documenso.
+
+![Create a new project on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdy97tltpnu7vf4fc11f.png)
+
+### Step 9: Add Environment Variables to your Vercel project
+
+In the '**Configure Project**' page, adding the required Environmental Variables is essential to ensure the application deploys without any errors.
+
+Specifically, for the `NEXT_PUBLIC_WEBAPP_URL` and `NEXTAUTH_URL` variables, you must add `.vercel.app` to your Project Name. This will form the deployment URL, which will be in the format: `https://[project_name].vercel.app`.
+
+For example, in my case, the deployment URL is `https://documenso-supabase-web.vercel.app`.
+
+![Add Environment Variables to your Vercel project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aru33fk1i19h0valffow.png)
+
+This is a sample `.env` to deploy. Copy and paste it to auto-populate the fields and click ‘**Deploy.’** Now, you only need to wait for your project to deploy. You’re going live — enjoy!
+
+```bash
+DATABASE_URL='postgresql://postgres:typeinastrongpassword@db.njuigobjlbteahssqbtw.supabase.co:5432/postgres'
+
+NEXT_PUBLIC_WEBAPP_URL='https://documenso-supabase-web.vercel.app'
+NEXTAUTH_SECRET='something gibrish to encrypt your jwt tokens'
+NEXTAUTH_URL='https://documenso-supabase-web.vercel.app'
+
+# Get a Sendgrid Api key here: <https://signup.sendgrid.com>
+SENDGRID_API_KEY=''
+
+# Set SMTP credentials to use SMTP instead of the Sendgrid API.
+SMTP_MAIL_HOST='smtp.resend.com'
+SMTP_MAIL_PORT='25'
+SMTP_MAIL_USER='resend'
+SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'
+MAIL_FROM='noreply@[YOUR_DOMAIN]'
+
+NEXT_PUBLIC_ALLOW_SIGNUP=true
+```
+
+## Wrapping up
+
+![Deploying Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/secg29j9j40o4u2oa8o8.png)
+
+Congratulations! 🎉 You've successfully deployed Documenso using Vercel, Supabase, and Resend. You're now ready to create and sign your own documents with your self-hosted Documenso!
+
+In this step-by-step guide, you learned how to:
+
+- set up a Postgres database using Supabase,
+- install SMTP with Resend,
+- deploy your project with Vercel.
+
+Over to you! How was the tutorial? If you enjoyed it, [please do share](https://twitter.com/documenso/status/1700141802693480482)! And if you have any questions or comments, please reach out to me on [Twitter / X](https://twitter.com/EphraimDuncan_) (DM open) or [Discord](https://documen.so/discord).
+
+We're building an open-source alternative to DocuSign and welcome every contribution. Head over to the GitHub repository and [leave us a Star](https://github.com/documenso/documenso)!

apps/marketing/content/blog/early-adopters.mdx

@@ -0,0 +1,67 @@
+---
+title: The Early Adopters Plan
+description: Launch Week Day 4 and we are still early! Early enough for you to get a sweet deal for supporting Documenso's Mission. Join the movement and get a shiny early adopter account in the process.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-28
+tags:
+  - Paid Plan
+  - Metrics
+  - Open Startup
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/early.png"
+    width="1260"
+    height="630"
+    alt="XKCD: Bug"
+  />
+
+  <figcaption className="text-center">
+    "Being early is, uh, good." -Unknown
+  </figcaption>
+</figure>
+
+> TLDR; we have 100 early adopter accounts available at a great price. [Secure yours now](https://documenso.com/pricing).
+
+## Community-Driven Development
+
+As we ramp up hiring and development speed for Documenso, I want to discuss how we plan to build its core version.
+As we want to be a highly community-driven product, we want to capture the thoughts and ideas of said community in two ways:
+
+1. Everything we plan (i.e. documen.so/roadmap) and build (i.e. documen.so/repo) is public and open to comments and suggestions from everyone by design. We plan to have discussions, streams, and articles showcasing what we're up to, encouraging feedback and iterations on our plans.
+2. We're looking for 100 die-hard early adopters to get more deep hands-on feedback. If you want to be among the first to use and help shape Documenso, we have a special offer for you:
+
+## The Early Adopter Plan
+
+- All first 100 signups are entitled to the early adopter plan.
+- The plan includes everything we build in the next 12 months and unlimited<sup>1</sup> signatures
+- This plan is priced at $30/mo.
+- No matter what we add, the price is guaranteed for life as a thank you for supporting Documenso's mission<sup>2</sup>. And we plan to add a lot.
+- This also includes unlimited users<sup>3</sup> as part of the upcoming support for teams.
+- If you already claimed an early adopter account in the past and canceled, we are happy to reactivate your account with the early adopter pricing. Reach out to support@documenso.com
+
+## Being an Early Adopter
+
+Being eligible for the early adopter plan has no formal requirements like giving feedback or being active in the community. In good faith, we assume you sign the Documenso Supporter Pledge to be part of this. And if you want to use the newest version quietly, that's fine, too. Everything the die-hard community brings up will be carefully considered and prioritized <sup>4</sup>. Also, there will obviously be limited edition merch available for the first 100.
+Documenso currently runs the community reviewed 0.9.1 version. Getting from here to the globally loved and adopted signing tool we all deserve will take a lot of work, and we want you on board to help us create it. Join us in shaping the future of open signing and having fun doing it. [Malfunction Mania](https://documenso.com/blog/malfunction-mania) and releasing 1.0 will go a long way.
+
+## Extending our open metrics
+
+As part of our ongoing effort to be open and transparent in our doing, we are adding "Early Adopters" to our [/open page](https://documenso.com/open) page. After we exceed the early adopter slots, this metric will transition to "Customers". When no more early adopter seats can be claimed, the early adopter plan will transition to a standard paid plan. It will still be priced at $30/mo., but will no longer include upcoming features or unlimited seats. You can [claim your early adopter account here](https://documenso.com/pricing).
+
+If you have any questions or comments, please reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord).
+
+Best from Hamburg\
+Timur
+
+\
+[1] Excluding signatures, we have to pay for i.e. third-party QES
+
+[2] The Documenso Manifest
+
+[3] Within reason. If you are unsure what that means, feel free to contact hi@documenso.com. But it should be fine if you don't plan to onboard a huge enterprise.
+
+[4] We won't be able to build everything everyone asks for. But we firmly plan to listen and build in a way everyone's requirements are met as well as possible.

apps/marketing/content/blog/malfunction-mania.mdx

@@ -0,0 +1,57 @@
+---
+title: Announcing Malfunction Mania
+description: Launch Week Day 2 Y'all! We're getting ready to release Documenso 1.0! Join in on the fun of making sure the open-source alternative to DocuSign is on point. We're calling a 'MALFUNCTION MANIA.'
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-26
+tags:
+  - Testing
+  - Rewrite
+  - Bounties
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/mm.png"
+    width="1260"
+    height="630"
+    alt="Malfunctioning Documenso Logo inbroken colors"
+  />
+
+  <figcaption className="text-center">
+   We're calling a MALFUNCTION MANIA! 🚨
+  </figcaption>
+</figure>
+
+> TLDR; Documenso 1.0 is in the [staging environment](https://documen.so/staging). Go check it out.
+
+It's been a minute since Lucas proclaimed, ["We're doing a rewrite"](https://documenso.com/blog/why-were-doing-a-rewrite), and many of you have been asking when the new version will be available. I'm happy to say that the wait has come to an end. The work on Documenso 1.0 has reached a level we feel comfortable going into the next phase with. We had a lot of community feedback, contributions, and moral support to get us this far, which is why we're excited to announce the most extensive community project yet:
+
+As Documenso 1.0 just hit the staging environment, we're calling a MALFUNCTION MANIA. An enormous, public testing phase, where we invite everyone to try out the new version, hunt down, report, and fix any malfunctions (aka bugs), and give feedback before release. Malfunction Mania will happen alongside our internal testing, and by combining the two, we want to ensure the best possible release we can have for Version 1.0. We know many of you have been eager to contribute; this is your chance (the first of many to come).
+
+## As part of Malfunction Mania, we're offering special bug bounties
+
+- We award $25 - $100 per report/ issue/ fix, depending on the severity and if the problem is already known
+- Bounties will be awarded for fixing reported or other critical issues via accepted Pull Requests (PR)
+- Just reporting issues in a reproducible way can also be awarded
+- Smaller but notable contributions like minor issues and documentation will be awarded with exclusive merch as we see fit.
+
+## What you can do
+
+- Head over to the [staging environment](https://documen.so/staging), check out the new version and give it a spin;
+- Check out the [source code](https://github.com/documenso/documenso) on GitHub and look it over;
+- Spin up the new version locally and try it out.
+
+## How to get the bounties
+
+- Report bugs by creating an issue here: [documen.so/issues](https://documen.so/issues);
+- Fix bugs by creating a Pull Request (PR);
+- Look over and add missing documentation/ Quickstarts and other useful resources.
+
+We don't have a specific end date for Malfunction Mania. We plan to move the staging version into the production environment by the end of the month once we're happy with the results. Bug reports and fixes are, of course, always welcome going forward.
+
+Best from Hamburg
+Timur
+
+**[Follow Documenso on Twitter / X](https://documen.so/tw) and [join the Discord server](https://documen.so/discord) to get the latest about Malfunction Mania.**

apps/marketing/content/blog/next.mdx

@@ -0,0 +1,56 @@
+---
+title: Preview the next Documenso
+description: We're redesigning Documenso by making it more elegant and appropriately playful. Here's a sneak peek.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-08-21
+tags:
+  - Design
+  - Preview
+---
+
+Since we launched [Documenso 0.9 on Product Hunt](https://producthunt.com/products/documenso#documenso) last May, the team's been hard at work behind the scenes to ramp up development and design to deliver an excellent next version.
+
+Last week, Lucas shared the reasoning on [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
+
+Today, I'm pleased to share with you a preview of the next Documenso.
+
+## Preview the next Documenso
+
+We redesigned the whole signing flow to make it more appealing and more convenient.
+
+We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it.
+
+**We call it happy minimalism.**
+
+We paid particular attention to the moment of signing, which should be celebrated.
+
+The image below is the final bloom of the completion celebration we added:
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-fig-preview-documenso.webp"
+    width="2000"
+    height="1268"
+    alt="Figure 1"
+  />
+
+  <figcaption className="text-center">"You've signed a new document."</figcaption>
+</figure>
+
+## Kicking off a new phase of collaboration
+
+This preview also is the kickoff for a new phase of how we collaborate with the community.
+
+We recently [switched to Discord](https://documenso.com/blog/switching-from-slack-to-discord) to set up a more developer-friendly, community-driven environment, and we just released the [public roadmap](https://documen.so/launches).
+
+As always, if you have any questions or feedback, please reach out. We love to hear from you.
+
+Best from Hamburg,
+
+Timur
+
+Make sure to [star the GitHub repository](https://documen.so/github), [follow us on X](http://documen.so/twitter) and [join the Discord server](https://documen.so/discord) to keep up to date with all things Documenso.
+
+We're building a beautiful, open-source alternative to DocuSign.

apps/marketing/content/blog/shop.mdx

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

apps/marketing/content/blog/why-were-doing-a-rewrite.mdx

@@ -0,0 +1,113 @@
+---
+title: Why we're doing a rewrite
+description: As we move beyond MVP and onto creating the open signing infrastructure we all deserve we need to take a quick pit-stop.
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2023-08-05
+tags:
+  - Community
+  - Development
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-rewrite.png"
+    width="1260"
+    height="630"
+    alt="Next generation documenso"
+  />
+
+  <figcaption className="text-center">
+    The next generation of Documenso and signing infrastructure.
+  </figcaption>
+</figure>
+
+> TLDR; We're rewriting Documenso to move on from our MVP foundations and create an even better base for the project. This rewrite will provide us the opportunity to fix a few things within the project while enabling a faster development process moving forward.
+
+# Introduction
+
+At Documenso, we're building the next generation of signing infrastructure with a focus on making it inclusive and accessible for all. To do this we need to ensure that the software we write is also inclusive and accessible and for this reason we’ve decided to take a step back and perform a _quick_ rewrite.
+
+Although we've achieved validated MVP status and gained paying customers, we're still quite far from our goal of creating a trusted, open signing experience. To move closer to that future, we need to step back and focus on the project's foundations to ensure we can solve all the items we set out to on our current homepage.
+
+Fortunately, this wasn't a case of someone joining the team and proposing a rewrite due to a lack of understanding of the codebase and context surrounding it. Prior to joining Documenso as a co-founder, I had spent an extensive amount of time within the Documenso codebase and had a fairly intimate understanding of what was happening for the most part. This knowledge allowed me to make the fair and simultaneously hard call to take a quick pause so we can rebuild our current foundations to enable accessibility and a faster delivery time in the future.
+
+# The Reasoning: TypeScript
+
+Our primary reason for the rewrite is to better leverage the tools and technologies we've already chosen, namely TypeScript. While Documenso currently uses TypeScript, it's not fully taking advantage of its safety features, such as generics and type guards.
+
+The codebase currently has several instances of `any` types, which is expected when working in an unknown domain where object models aren't fully understood before exploration and experimentation. These `any`s initially sped up development, but have since become a hindrance due to the lack of type information, combined with prop drilling. As a result, it's necessary to go through a lot of context to understand the root of any given issue.
+
+The rewrite is using TypeScript to its full potential, ensuring that every interaction is strongly typed, both through general TypeScript tooling and the introduction of [Zod](https://github.com/colinhacks/zod), a validation library with excellent TypeScript support. With these choices, we can ensure that the codebase is robust to various inputs and states, as most issues will be caught during compile time and flagged within a developer's IDE.
+
+# The Reasoning: Stronger API contracts
+
+In line with our pattern of creating strongly typed contracts, we've decided to use [tRPC](https://github.com/trpc/trpc) for our internal API. This enables us to share types between our frontend and backend and establish a solid contract for interactions between the two. This is in contrast to the currently untyped API endpoints in Documenso, which are accessed using the `fetch` API that is itself untyped.
+
+Using tRPC drastically reduces the chance of failures resulting from mundane things like argument or response shape changes during updates and upgrades. We made this decision easily because tRPC is a mature technology with no signs of losing momentum any time soon.
+
+Additionally, many of our open-source friends have made the same choice for similar reasons.
+
+# The Reasoning: Choosing exciting technologies
+
+Although we already work with what I consider to be a fun stack that includes Next.js, Prisma, Tailwind, and more, it's no secret that contributors enjoy working with new technologies that benefit them in their own careers and projects.
+
+To take advantage of this, we have decided to use Next.js 13 and React's new server component and actions architecture. Server components are currently popular among developers, with many loving and hating them at the same time.
+
+I have personally worked with server components and actions since they were first released in October 2022 and have dealt with most of the hiccups and limitations along the way. Now, in July 2023, I believe they are in a much more stable place and are ready to be adopted, with their benefits being recognised by many.
+
+By choosing to use server components and actions, we hope to encourage the community to participate more than they otherwise might. However, we are only choosing this because it has become more mature and stable. We will not choose things that are less likely to become the de-facto solution in the future, as we do not wish to inherit a pile of tech debt later on.
+
+# The Reasoning: Allowing concurrent work
+
+Another compelling reason for the rewrite was to effectively modularise code so we can work on features concurrently and without issue. This means extracting as much as possible out of components, API handlers and more and into a set of methods and functions that attempt to focus on just one thing.
+
+In performing this work we should be able to easily make refactors and other changes to various parts of the code without stepping on each others feet, this also grants us the ability to upgrade or deprecate items as required by sticking to the contract of the previous method.
+
+Additionally, this makes testing a much easier task as we can focus more on units of work rather than extensive end to end testing although we aim to have both, just not straight away.
+
+# The Reasoning: Licensing of work
+
+Another major reasoning for the rewrite is to ensure that all work performed on the project by both our internal team and external contributors is licensed in a way that benefits the project long-term. Prior to the rewrite contributors would create pull requests that would be merged in without any further process outside of the common code-review and testing cycles.
+
+This was fine for the most part since we were simply working on the MVP but now as we move towards an infrastructure focus we intend on taking on enterprise clients who will have a need for a non-GPLv3 license since interpretations of it can be quite harmful to private hosting, to facilitate this we will require contributors to sign a contributor license agreement (CLA) prior to their changes being merged which will assign a perpetual license for us to use their code and relicense it as required such as for the use-case above.
+
+While some might cringe at the idea of signing a CLA, we want to offer a compelling enterprise offering through means of dual-licensing. Great enterprise adoption is one of the cornerstones of our strategy and will be key to funding community and product development long-term.
+
+_Do note that the above does not mean that we will ever go closed-source, it’s a point in our investor agreements that [https://github.com/documenso/documenso](https://github.com/documenso/documenso) will always remain available and open-source._
+
+# Goals and Non-Goals
+
+Rewriting an application is a monumental task that I have taken on and rejected many times in my career. As I get older, I become more hesitant to perform these rewrites because I understand that systems carry a lot of context and history. This makes them better suited for piecemeal refactoring instead, which avoids learning the lessons of the past all over again during the launch of the rewrite.
+
+To ensure that we aren't just jumping off the deep end, I have set out a list of goals and non-goals to keep this rewrite lean and affordable.
+
+### Goals
+
+- Provide a clean design and interface for the newly rewritten application that creates a sense of trust and security at first glance.
+- Create a stable foundation and architecture that will allow for growth into our future roadmap items (teams, automation, workflows, etc.).
+- Create a robust system that requires minimal context through strong contracts and typing.
+
+### Non-Goals
+
+- Change the database schema (we don't want to make migration harder than it needs to be, thus all changes must be additive).
+- Add too many features that weren't in the system prior to the rewrite.
+- Remove any features that were in the older version of Documenso, such as free signatures (signatures that have no corresponding field).
+
+# Rollout Plan
+
+Thanks to the constraints listed above our rollout will hopefully be fairly painless, still to be safe we plan on doing the following.
+
+1.  In the current [testing environment](https://test.documenso.com), create and sign a number of documents leaving many in varying states of completion.
+2.  Deploy the rewrite to the testing environment and verify that all existing documents and information is retrievable and modifiable without any issue.
+3.  Create another set of documents using the new rewrite and verify that all interactions between authoring and signing work as expected.
+4.  Repeat this until we reach a general confidence level (expectation of two weeks).
+
+Once we’ve reached the desired confidence level with our testing environment we will look to deploy the rewrite to the production environment ensuring that we’ve performed all the required backups in the event of a catastrophic failure.
+
+# Want to help out?
+
+We’re currently working on the **[feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh)** branch on GitHub, we aim to have a CLA available to sign in the coming days so we can start accepting external contributions asap. While we’re nearing the end-stage of the rewrite we will be throwing up a couple of bounties shortly for things like [Husky](https://github.com/typicode/husky) and [Changesets](https://github.com/changesets/changesets).
+
+Keep an eye on our [GitHub issues](https://github.com/documenso/documenso/issues) to stay up to date!

apps/marketing/next.config.js

@@ -2,15 +2,68 @@
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
 
-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
 });
 
 /** @type {import('next').NextConfig} */
 const config = {
+  experimental: {
+    serverActions: true,
+    serverActionsBodySizeLimit: '10mb',
+  },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
-  env,
+  env: {
+    NEXT_PUBLIC_PROJECT: 'marketing',
+  },
+  modularizeImports: {
+    'lucide-react': {
+      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
+    },
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-dns-prefetch-control',
+            value: 'on',
+          },
+          {
+            key: 'strict-transport-security',
+            value: 'max-age=31536000; includeSubDomains; preload',
+          },
+          {
+            key: 'x-frame-options',
+            value: 'SAMEORIGIN',
+          },
+          {
+            key: 'x-content-type-options',
+            value: 'nosniff',
+          },
+          {
+            key: 'referrer-policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+          {
+            key: 'permissions-policy',
+            value:
+              'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()',
+          },
+        ],
+      },
+    ];
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.posthog.com/:path*',
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -4,10 +4,12 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "PORT=3001 next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/lib": "*",
@@ -17,18 +19,21 @@
     "@hookform/resolvers": "^3.1.0",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.279.0",
     "micro": "^10.0.1",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",
+    "posthog-js": "^1.77.3",
     "react": "18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "recharts": "^2.7.2",
+    "sharp": "0.32.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },

apps/marketing/process-env.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_SITE_URL?: string;
+    NEXT_PUBLIC_WEBAPP_URL?: string;
+    NEXT_PUBLIC_MARKETING_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

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

@@ -5,7 +5,7 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = async () =>
+export const generateStaticParams = () =>
   allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {
@@ -39,7 +39,7 @@ export default function ContentPage({ params }: { params: { content: string } })
   const MDXContent = useMDXComponent(post.body.code);
 
   return (
-    <article className="prose prose-slate mx-auto">
+    <article className="prose dark:prose-invert mx-auto">
       <MDXContent components={mdxComponents} />
     </article>
   );

apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx

@@ -0,0 +1,76 @@
+import { ImageResponse } from 'next/server';
+
+import { allBlogPosts } from 'contentlayer/generated';
+
+export const runtime = 'edge';
+
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+type BlogPostOpenGraphImageProps = {
+  params: { post: string };
+};
+
+export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!blogPost) {
+    return null;
+  }
+
+  // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
+  // to a constant will break og image generation.
+  const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
+    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+  ]);
+
+  return new ImageResponse(
+    (
+      <div tw="relative h-full w-full flex flex-col items-center justify-center text-center">
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={backgroundImage} alt="og-background" tw="absolute inset-0 w-full h-full" />
+
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={logoImage} alt="logo" tw="h-8" />
+
+        <h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
+          {blogPost.title}
+        </h1>
+
+        <p tw="font-normal">Written by {blogPost.authorName}</p>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: interRegular,
+          style: 'normal',
+          weight: 400,
+        },
+        {
+          name: 'Inter',
+          data: interBold,
+          style: 'normal',
+          weight: 700,
+        },
+      ],
+    },
+  );
+}

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

@@ -7,7 +7,7 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = async () =>
+export const generateStaticParams = () =>
   allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -17,7 +17,10 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     notFound();
   }
 
-  return { title: `Documenso - ${blogPost.title}` };
+  return {
+    title: `Documenso - ${blogPost.title}`,
+    description: blogPost.description,
+  };
 };
 
 const mdxComponents: MDXComponents = {
@@ -36,21 +39,21 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
   const MDXContent = useMDXComponent(post.body.code);
 
   return (
-    <article className="prose prose-slate mx-auto py-8">
+    <article className="prose dark:prose-invert mx-auto py-8">
       <div className="mb-6 text-center">
-        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
+        <time dateTime={post.date} className="text-muted-foreground mb-1 text-xs">
           {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">
+          <div className="bg-foreground h-10 w-10 rounded-full">
             {post.authorImage && (
               <img
                 src={post.authorImage}
                 alt={`Image of ${post.authorName}`}
-                className="h-10 w-10 rounded-full bg-gray-50"
+                className="bg-foreground/10 h-10 w-10 rounded-full"
               />
             )}
           </div>

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

@@ -13,13 +13,13 @@ export default function BlogPage() {
       <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]">
+        <p className="text-muted-foreground mx-auto mt-4 max-w-xl text-center text-lg leading-normal">
           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 ">
+      <div className="divide-muted-foreground/20 border-muted-foreground/20 mt-10 divide-y border-t">
         {blogPosts.map((post, i) => (
           <article
             key={`blog-${i}`}
@@ -57,12 +57,12 @@ export default function BlogPage() {
             </div>
 
             <div className="relative mt-4 flex items-center gap-x-4">
-              <div className="h-10 w-10 rounded-full bg-slate-50">
+              <div className="bg-foreground/5 h-10 w-10 rounded-full">
                 {post.authorImage && (
                   <img
                     src={post.authorImage}
                     alt={`Image of ${post.authorName}`}
-                    className="h-10 w-10 rounded-full bg-slate-50"
+                    className="bg-foreground/5 h-10 w-10 rounded-full"
                   />
                 )}
               </div>

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

@@ -27,7 +27,11 @@ export type ClaimedPlanPageProps = {
 export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlanPageProps) {
   const { sessionId } = searchParams;
 
-  const session = await stripe.checkout.sessions.retrieve(sessionId as string);
+  if (typeof sessionId !== 'string') {
+    redirect('/');
+  }
+
+  const session = await stripe.checkout.sessions.retrieve(sessionId);
 
   const user = await prisma.user.findFirst({
     where: {
@@ -54,40 +58,40 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
 
   return (
     <div className="mt-12">
-      <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">
+      <h1 className="text-foreground text-3xl font-bold 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">
+      <p className="text-muted-foreground mt-4 max-w-prose text-base 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">
+      <p className="text-muted-foreground mt-4 max-w-prose text-base 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">
+      <p className="text-muted-foreground mt-4 max-w-prose text-base 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>
+        <h2 className="text-foreground text-2xl font-bold">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',
+                'text-foreground text-4xl font-semibold md:text-5xl',
                 fontCaveat.className,
               )}
             >
               Timur
             </p>
 
-            <p className="text-sm text-slate-500 md:text-lg">
+            <p className="text-muted-foreground text-sm md:text-lg">
               Timur Ercan
               <span className="block lg:hidden" />
               <span className="hidden lg:inline"> - </span>
@@ -98,14 +102,14 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
           <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',
+                'text-foreground text-4xl font-semibold md:text-5xl',
                 fontCaveat.className,
               )}
             >
               Lucas
             </p>
 
-            <p className="text-sm text-slate-500 md:text-lg">
+            <p className="text-muted-foreground text-sm md:text-lg">
               Lucas Smith
               <span className="block lg:hidden" />
               <span className="hidden lg:inline"> - </span>
@@ -115,12 +119,16 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
 
           <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]" />
+              <img
+                src={signatureDataUrl}
+                alt="your-signature"
+                className="max-w-[172px] dark:invert"
+              />
             )}
             {!signatureDataUrl && (
               <p
                 className={cn(
-                  'text-4xl font-semibold text-slate-900 md:text-5xl',
+                  'text-foreground text-4xl font-semibold md:text-5xl',
                   fontCaveat.className,
                 )}
               >
@@ -128,7 +136,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
               </p>
             )}
 
-            <p className="text-sm text-slate-500 md:text-lg">
+            <p className="text-muted-foreground text-sm md:text-lg">
               {user.name}
               <span className="block lg:hidden" />
               <span className="hidden lg:inline"> - </span>
@@ -139,26 +147,25 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
       </div>
 
       <div className="mt-12">
-        <h2 className="text-2xl font-bold text-slate-900">Your sign in details</h2>
+        <h2 className="text-foreground text-2xl font-bold">Your sign in details</h2>
 
         <div className="mt-4">
-          <p className="text-lg text-slate-500">
+          <p className="text-muted-foreground text-lg">
             <span className="font-bold">Email:</span> {user.email}
           </p>
 
-          <p className="mt-2 text-lg text-slate-500">
+          <p className="text-muted-foreground mt-2 text-lg">
             <span className="font-bold">Password:</span>{' '}
             <PasswordReveal password={password ?? 'password'} />
           </p>
         </div>
 
-        <p className="mt-4 text-sm italic text-slate-500">
+        <p className="text-muted-foreground mt-4 text-sm italic">
           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`}
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`}
           target="_blank"
           className="mt-4 block"
         >

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

@@ -1,4 +1,8 @@
-import React from 'react';
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
 
 import { Footer } from '~/components/(marketing)/footer';
 import { Header } from '~/components/(marketing)/header';
@@ -8,15 +12,31 @@ export type MarketingLayoutProps = {
 };
 
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   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">
+      <div
+        className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
+          'bg-background/50 backdrop-blur-md': scrollY > 5,
+        })}
+      >
         <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]" />
+      <Footer className="bg-background border-muted mt-24 border-t" />
     </div>
   );
 }

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

@@ -7,26 +7,25 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 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;
+export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
+  data: T;
+  metricKey: keyof T[string];
   title: string;
   label: string;
   chartHeight?: number;
+  extraInfo?: JSX.Element;
 };
 
-export const GithubMetric = ({
+export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
   className,
   data,
   metricKey,
   title,
   label,
   chartHeight = 400,
+  extraInfo,
   ...props
-}: GithubMetricProps) => {
+}: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
@@ -36,7 +35,10 @@ export const GithubMetric = ({
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <span>{extraInfo}</span>
+      </div>
 
       <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}>
@@ -50,7 +52,7 @@ export const GithubMetric = ({
               formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+            <Bar dataKey={metricKey as string} fill="hsl(var(--primary))" label={label} />{' '}
           </BarChart>
         </ResponsiveContainer>
       </div>

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

@@ -7,14 +7,14 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 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> & {
+  data: Record<string, string | number>[];
+};
 
-export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
-
-export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
-  const formattedData = FUNDING_RAISED.map((item) => ({
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
+  const formattedData = data.map((item) => ({
     amount: Number(item.amount),
-    date: formatMonth(item.date),
+    date: formatMonth(item.date as string),
   }));
 
   return (

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

@@ -1,14 +1,16 @@
 import { z } from 'zod';
 
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
+import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
-import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
+import { OpenPageTooltip } from './tooltip';
 
-export const revalidate = 86400;
+export const revalidate = 3600;
 
 const ZGithubStatsResponse = z.object({
   stargazers_count: z.number(),
@@ -29,9 +31,16 @@ const ZStargazersLiveResponse = z.record(
   }),
 );
 
-export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+const ZEarlyAdoptersResponse = z.record(
+  z.object({
+    id: z.number(),
+    time: z.string().datetime(),
+    earlyAdopters: z.number(),
+  }),
+);
 
-// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
+export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
 export default async function OpenPage() {
   const {
@@ -43,7 +52,7 @@ export default async function OpenPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZGithubStatsResponse.parse(res));
 
   const { total_count: mergedPullRequests } = await fetch(
@@ -54,7 +63,7 @@ export default async function OpenPage() {
       },
     },
   )
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZMergedPullRequestsResponse.parse(res));
 
   const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
@@ -62,11 +71,19 @@ export default async function OpenPage() {
       accept: 'application/json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
 
+  const EARLY_ADOPTERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then(async (res) => res.json())
+    .then((res) => ZEarlyAdoptersResponse.parse(res));
+
   return (
-    <div className="mx-auto mt-12 max-w-screen-lg">
+    <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
       <div className="flex flex-col items-center justify-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
 
@@ -107,10 +124,20 @@ export default async function OpenPage() {
 
         <SalaryBands className="col-span-12 lg:col-span-6" />
 
-        <FundingRaised className="col-span-12 lg:col-span-6" />
+        <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
-        <GithubMetric
+
+        <BarMetric<EarlyAdoptersType>
+          data={EARLY_ADOPTERS_DATA}
+          metricKey="earlyAdopters"
+          title="Early Adopters"
+          label="Early Adopters"
+          className="col-span-12 lg:col-span-6"
+          extraInfo={<OpenPageTooltip />}
+        />
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="stars"
           title="Github: Total Stars"
@@ -118,29 +145,31 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
           title="Github: Total Merged PRs"
           label="Merged PRs"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="forks"
           title="Github: Total Forks"
           label="Forks"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="openIssues"
           title="Github: Total Open Issues"
           label="Open Issues"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+export function OpenPageTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            className="ml-2 mt-2.5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            August and earlier: Active subscribers. September and beyond: Numbers of active
+            subscriptions.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

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

@@ -0,0 +1,84 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+
+import { TOSSFriendsSchema } from './schema';
+
+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 type OSSFriendsContainerProps = {
+  className?: string;
+  ossFriends: TOSSFriendsSchema;
+};
+
+export const OSSFriendsContainer = ({ className, ossFriends }: OSSFriendsContainerProps) => {
+  return (
+    <motion.div
+      className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3', className)}
+      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="text-foreground mt-4 flex-1 text-sm">{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>
+  );
+};

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

@@ -1,152 +1,23 @@
-'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 { z } from 'zod';
 
 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',
-  },
-];
+import { OSSFriendsContainer } from './container';
+import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';
 
-const ContainerVariants: Variants = {
-  initial: {
-    opacity: 0,
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.075,
+export default async function OSSFriendsPage() {
+  const ossFriends: TOSSFriendsSchema = await fetch('https://formbricks.com/api/oss-friends', {
+    next: {
+      revalidate: 3600,
     },
-  },
-};
+  })
+    .then(async (res) => res.json())
+    .then(async (data) => z.object({ data: ZOSSFriendsSchema }).parseAsync(data))
+    .then(({ data }) => data)
+    .catch(() => []);
 
-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">
@@ -154,49 +25,19 @@ export default function OSSFriendsPage() {
           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]">
+        <p className="text-foreground mx-auto mt-4 max-w-[55ch] text-lg leading-normal">
           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>
+      <OSSFriendsContainer className="mt-12" ossFriends={ossFriends} />
 
       <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%]"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
         />
       </div>
     </div>

apps/marketing/src/app/(marketing)/oss-friends/schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const ZOSSFriendsSchema = z.array(
+  z.object({
+    name: z.string(),
+    href: z.string().url(),
+    description: z.string(),
+  }),
+);
+
+export type TOSSFriendsSchema = z.infer<typeof ZOSSFriendsSchema>;

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

@@ -24,7 +24,7 @@ export default async function IndexPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
     .catch(() => undefined);
 

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

@@ -20,14 +20,14 @@ export type PricingPageProps = {
 
 export default function PricingPage() {
   return (
-    <div className="mt-12">
+    <div className="mt-6 sm: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]">
+        <p className="text-foreground mt-4 text-lg leading-normal">
           Designed for every stage of your journey.
         </p>
-        <p className="text-lg leading-normal text-[#31373D]">Get started today.</p>
+        <p className="text-foreground text-lg leading-normal">Get started today.</p>
       </div>
 
       <div className="mt-12">
@@ -45,12 +45,12 @@ export default function PricingPage() {
               What is the difference between the plans?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               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.
+              adopters 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>
 
@@ -59,7 +59,7 @@ export default function PricingPage() {
               How do you handle my data?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               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.
@@ -71,7 +71,7 @@ export default function PricingPage() {
               Why should I use your hosting service?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               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
@@ -84,7 +84,7 @@ export default function PricingPage() {
               How can I contribute?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               That's awesome. You can take a look at the current{' '}
               <Link
                 className="text-documenso-700 font-bold"
@@ -111,7 +111,7 @@ export default function PricingPage() {
               Can I use Documenso commercially?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               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.
@@ -123,7 +123,7 @@ export default function PricingPage() {
               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">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               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.
@@ -135,7 +135,7 @@ export default function PricingPage() {
               Where can I get support?
             </AccordionTrigger>
 
-            <AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
+            <AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
               We are happy to assist you at{' '}
               <Link
                 className="text-documenso-700 font-bold"

apps/marketing/src/app/(marketing)/single-player-mode/[token]/success/page.tsx

@@ -0,0 +1,30 @@
+import { notFound } from 'next/navigation';
+
+import { getDocumentAndRecipientByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { DocumentStatus } from '@documenso/prisma/client';
+
+import { SinglePlayerModeSuccess } from '~/components/(marketing)/single-player-mode/single-player-mode-success';
+
+export type SinglePlayerModeSuccessPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function SinglePlayerModeSuccessPage({
+  params: { token },
+}: SinglePlayerModeSuccessPageProps) {
+  if (!token) {
+    return notFound();
+  }
+
+  const document = await getDocumentAndRecipientByToken({
+    token,
+  }).catch(() => null);
+
+  if (!document || document.status !== DocumentStatus.COMPLETED) {
+    return notFound();
+  }
+
+  return <SinglePlayerModeSuccess document={document} />;
+}

apps/marketing/src/app/(marketing)/single-player-mode/page.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { base64 } from '@documenso/lib/universal/base64';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { Field, Prisma, Recipient } from '@documenso/prisma/client';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
+import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
+
+type SinglePlayerModeStep = 'fields' | 'sign';
+
+export default function SinglePlayerModePage() {
+  const analytics = useAnalytics();
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
+
+  const [step, setStep] = useState<SinglePlayerModeStep>('fields');
+  const [fields, setFields] = useState<Field[]>([]);
+
+  const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
+    fields: {
+      title: 'Add document',
+      description: 'Upload a document and add fields.',
+      stepIndex: 1,
+      onBackStep: uploadedFile
+        ? () => {
+            setUploadedFile(null);
+            setFields([]);
+          }
+        : undefined,
+      onNextStep: () => setStep('sign'),
+    },
+    sign: {
+      title: 'Sign',
+      description: 'Enter your details.',
+      stepIndex: 2,
+      onBackStep: () => setStep('fields'),
+    },
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  useEffect(() => {
+    analytics.startSessionRecording('marketing_session_recording_spm');
+
+    return () => {
+      analytics.stopSessionRecording();
+    };
+  }, [analytics]);
+
+  /**
+   * Insert the selected fields into the local state.
+   */
+  const onFieldsSubmit = (data: TAddFieldsFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    setFields(
+      data.fields.map((field, i) => ({
+        id: i,
+        documentId: -1,
+        recipientId: -1,
+        type: field.type,
+        page: field.pageNumber,
+        positionX: new Prisma.Decimal(field.pageX),
+        positionY: new Prisma.Decimal(field.pageY),
+        width: new Prisma.Decimal(field.pageWidth),
+        height: new Prisma.Decimal(field.pageHeight),
+        customText: '',
+        inserted: false,
+      })),
+    );
+
+    analytics.capture('Marketing: SPM - Fields added');
+
+    documentFlow.fields.onNextStep?.();
+  };
+
+  /**
+   * Upload, create, sign and send the document.
+   */
+  const onSignSubmit = async (data: TAddSignatureFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    try {
+      const putFileData = await putFile(uploadedFile.file);
+
+      const documentToken = await createSinglePlayerDocument({
+        documentData: {
+          type: putFileData.type,
+          data: putFileData.data,
+        },
+        documentName: uploadedFile.file.name,
+        signer: data,
+        fields: fields.map((field) => ({
+          page: field.page,
+          type: field.type,
+          positionX: field.positionX.toNumber(),
+          positionY: field.positionY.toNumber(),
+          width: field.width.toNumber(),
+          height: field.height.toNumber(),
+        })),
+      });
+
+      analytics.capture('Marketing: SPM - Document signed', {
+        signer: data.email,
+      });
+
+      router.push(`/single-player-mode/${documentToken}/success`);
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const placeholderRecipient: Recipient = {
+    id: -1,
+    documentId: -1,
+    email: '',
+    name: '',
+    token: '',
+    expired: null,
+    signedAt: null,
+    readStatus: 'OPENED',
+    signingStatus: 'NOT_SIGNED',
+    sendStatus: 'NOT_SENT',
+  };
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const base64String = base64.encode(new Uint8Array(arrayBuffer));
+
+      setUploadedFile({
+        file,
+        fileBase64: `data:application/pdf;base64,${base64String}`,
+      });
+
+      analytics.capture('Marketing: SPM - Document uploaded');
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
+
+        <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
+          View our{' '}
+          <Link
+            href={'/pricing'}
+            target="_blank"
+            className="hover:text-foreground/80 font-semibold transition-colors"
+          >
+            community plan
+          </Link>{' '}
+          for exclusive features, including the ability to collaborate with multiple signers.
+        </p>
+      </div>
+
+      <div className="mt-12 grid w-full grid-cols-12 gap-8">
+        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
+          {uploadedFile ? (
+            <Card gradient>
+              <CardContent className="p-2">
+                <LazyPDFViewer document={uploadedFile.fileBase64} />
+              </CardContent>
+            </Card>
+          ) : (
+            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
+          )}
+        </div>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
+            <DocumentFlowFormContainerHeader
+              title={currentDocumentFlow.title}
+              description={currentDocumentFlow.description}
+            />
+
+            {/* Add fields to PDF page. */}
+            {step === 'fields' && (
+              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
+                <AddFieldsFormPartial
+                  documentFlow={documentFlow.fields}
+                  hideRecipients={true}
+                  recipients={uploadedFile ? [placeholderRecipient] : []}
+                  numberOfSteps={Object.keys(documentFlow).length}
+                  fields={fields}
+                  onSubmit={onFieldsSubmit}
+                />
+              </fieldset>
+            )}
+
+            {/* Enter user details and signature. */}
+            {step === 'sign' && (
+              <AddSignatureFormPartial
+                documentFlow={documentFlow.sign}
+                numberOfSteps={Object.keys(documentFlow).length}
+                fields={fields}
+                onSubmit={onSignSubmit}
+                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
+              />
+            )}
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/layout.tsx

@@ -1,12 +1,20 @@
-import { Inter } from 'next/font/google';
+import { Suspense } from 'react';
 
+import { Caveat, Inter } from 'next/font/google';
+
+import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
+import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
+import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 
+import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
+import { PostHogPageview } from '~/providers/posthog';
 
 import './globals.css';
 
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
 export const metadata = {
   title: 'Documenso - The Open Source DocuSign Alternative',
@@ -21,20 +29,26 @@ export const metadata = {
     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`],
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
   },
   twitter: {
     site: '@documenso',
     card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_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 }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const flags = await getAllAnonymousFlags();
+
   return (
-    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={cn(fontInter.variable, fontCaveat.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" />
@@ -42,8 +56,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="manifest" href="/site.webmanifest" />
       </head>
 
+      <Suspense>
+        <PostHogPageview />
+      </Suspense>
+
       <body>
-        <PlausibleProvider>{children}</PlausibleProvider>
+        <FeatureFlagProvider initialFlags={flags}>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <PlausibleProvider>{children}</PlausibleProvider>
+          </ThemeProvider>
+        </FeatureFlagProvider>
+
         <Toaster />
       </body>
     </html>

apps/marketing/src/app/not-found.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            <Button className="w-32" asChild>
+              <Link href="/">Home</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/robots.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next';
+
+import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+      },
+    ],
+    sitemap: `${getBaseUrl()}/sitemap.xml`,
+  };
+}

apps/marketing/src/app/sitemap.ts

@@ -0,0 +1,41 @@
+import { MetadataRoute } from 'next';
+
+import { allBlogPosts, allGenericPages } from 'contentlayer/generated';
+
+import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = getBaseUrl();
+  const lastModified = new Date();
+
+  return [
+    {
+      url: baseUrl,
+      lastModified,
+    },
+    ...allGenericPages.map((doc) => ({
+      url: `${baseUrl}/${doc._raw.flattenedPath}`,
+      lastModified,
+    })),
+    {
+      url: `${baseUrl}/blog`,
+      lastModified,
+    },
+    ...allBlogPosts.map((doc) => ({
+      url: `${baseUrl}/${doc._raw.flattenedPath}`,
+      lastModified,
+    })),
+    {
+      url: `${baseUrl}/open`,
+      lastModified,
+    },
+    {
+      url: `${baseUrl}/oss-friends`,
+      lastModified,
+    },
+    {
+      url: `${baseUrl}/pricing`,
+      lastModified,
+    },
+  ];
+}

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

@@ -40,8 +40,8 @@ export const Callout = ({ starCount }: CalloutProps) => {
         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">
+        Get the Early Adopters Plan
+        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
           $30/mo. forever!
         </span>
       </Button>
@@ -55,7 +55,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
           <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">
+            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}
             </span>
           )}

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

@@ -5,11 +5,12 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Info, Loader } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -43,9 +44,11 @@ export type ClaimPlanDialogProps = {
 
 export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
   const params = useSearchParams();
-  const { toast } = useToast();
+  const analytics = useAnalytics();
   const event = usePlausible();
 
+  const { toast } = useToast();
+
   const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
 
   const {
@@ -63,7 +66,9 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
 
   const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
 
       const [redirectUrl] = await Promise.all([
         claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
@@ -71,10 +76,12 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
       ]);
 
       event('claim-plan-pricing');
+      analytics.capture('Marketing: Claim plan', { planId, email });
 
       window.location.href = redirectUrl;
     } catch (error) {
       event('claim-plan-failed');
+      analytics.capture('Marketing: Claim plan failure', { planId, email });
 
       toast({
         title: 'Something went wrong',
@@ -85,7 +92,7 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>{children}</DialogTrigger>
 
       <DialogContent>
@@ -97,50 +104,49 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
           </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>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <fieldset disabled={isSubmitting} className={cn('flex flex-col gap-y-4', className)}>
+            {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-muted-foreground">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">Name</Label>
+            <div>
+              <Label className="text-muted-foreground">Email</Label>
 
-            <Input type="text" className="mt-2" {...register('name')} autoFocus />
+              <Input type="email" className="mt-2" {...register('email')} />
 
-            <FormErrorMessage className="mt-1" error={errors.name} />
-          </div>
+              <FormErrorMessage className="mt-1" error={errors.email} />
+            </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>
+            <Button type="submit" size="lg" loading={isSubmitting}>
+              Claim the early adopters Plan (
+              {/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
+              {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
+                ? 'Monthly'
+                : 'Yearly'}
+              )
+            </Button>
+          </fieldset>
         </form>
       </DialogContent>
     </Dialog>

apps/marketing/src/components/(marketing)/confetti-screen.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Confetti from 'react-confetti';
+import { createPortal } from 'react-dom';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';
+
+export default function ConfettiScreen({
+  numberOfPieces: numberOfPiecesProp = 200,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) {
+  const isMounted = useIsMounted();
+  const { width, height } = useWindowSize();
+
+  const [numberOfPieces, setNumberOfPieces] = useState(numberOfPiecesProp);
+
+  useEffect(() => {
+    if (!props.duration) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setNumberOfPieces(0);
+    }, props.duration);
+
+    return () => clearTimeout(timer);
+  }, [props.duration]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return createPortal(
+    <Confetti
+      {...props}
+      className="w-full"
+      numberOfPieces={numberOfPieces}
+      width={width}
+      height={height}
+    />,
+    document.body,
+  );
+}

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

@@ -22,7 +22,7 @@ export const FasterSmarterBeautifulBento = ({
         <Image
           src={backgroundPattern}
           alt="background pattern"
-          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
@@ -33,41 +33,53 @@ export const FasterSmarterBeautifulBento = ({
       <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">
+            <p className="text-foreground/80 col-span-12 leading-relaxed 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" />
+              <Image
+                src={cardFastFigure}
+                alt="its fast"
+                className="max-w-[80%] dark:contrast-[70%] dark:hue-rotate-180 dark:invert 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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardBeautifulFigure}
+                alt="its fast"
+                className="w-full max-w-xs dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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]" />
+              <Image
+                src={cardSmartFigure}
+                alt="its fast"
+                className="w-full max-w-[16rem] dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </div>
           </CardContent>
         </Card>

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

@@ -1,93 +1,94 @@
+'use client';
+
 import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Github, Slack, Twitter } from 'lucide-react';
+import { Github, MessagesSquare, Moon, Sun, Twitter } from 'lucide-react';
+import { useTheme } from 'next-themes';
 
 import { cn } from '@documenso/ui/lib/utils';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
+const SOCIAL_LINKS = [
+  { href: 'https://twitter.com/documenso', icon: <Twitter className="h-6 w-6" /> },
+  { href: 'https://github.com/documenso/documenso', icon: <Github className="h-6 w-6" /> },
+  { href: 'https://documen.so/discord', icon: <MessagesSquare className="h-6 w-6" /> },
+];
+
+const FOOTER_LINKS = [
+  { href: '/pricing', text: 'Pricing' },
+  { href: '/single-player-mode', text: 'Single Player Mode' },
+  { href: '/blog', text: 'Blog' },
+  { href: '/open', text: 'Open' },
+  { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
+  { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
+  { href: 'mailto:support@documenso.com', text: 'Support' },
+  { href: '/privacy', text: 'Privacy' },
+];
+
 export const Footer = ({ className, ...props }: FooterProps) => {
+  const { setTheme } = useTheme();
+
   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>
+            <Image
+              src="/logo.png"
+              alt="Documenso Logo"
+              className="dark:invert"
+              width={170}
+              height={0}
+            />
           </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 className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4">
+            {SOCIAL_LINKS.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                target="_blank"
+                className="text-muted-foreground hover:text-muted-foreground/80"
+              >
+                {link.icon}
+              </Link>
+            ))}
           </div>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
-          <Link
-            href="/pricing"
-            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            Pricing
-          </Link>
-
-          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
-            Blog
-          </Link>
-
-          <Link href="/open" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
-            Open
-          </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>
+          {FOOTER_LINKS.map((link, index) => (
+            <Link
+              key={index}
+              href={link.href}
+              target={link.target}
+              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 text-sm"
+            >
+              {link.text}
+            </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]">
+      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap justify-between gap-4 px-8 md:mt-12 lg:mt-24">
+        <p className="text-muted-foreground text-sm">
           © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
         </p>
+
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+          <button type="button" className="text-muted-foreground" onClick={() => setTheme('light')}>
+            <Sun className="h-5 w-5" />
+            <span className="sr-only">Light</span>
+          </button>
+
+          <button type="button" className="text-muted-foreground" onClick={() => setTheme('dark')}>
+            <Moon className="h-5 w-5" />
+            <span className="sr-only">Dark</span>
+          </button>
+        </div>
       </div>
     </div>
   );

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

@@ -1,40 +1,87 @@
-import { HTMLAttributes } from 'react';
+'use client';
+
+import { HTMLAttributes, useState } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
+import { HamburgerMenu } from './mobile-hamburger';
+import { MobileNavigation } from './mobile-navigation';
+
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
+
+  const { getFlag } = useFeatureFlags();
+
+  const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');
+
   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 space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image
+            src="/logo.png"
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
 
-      <div className="flex items-center gap-x-6">
-        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+        {isSinglePlayerModeMarketingEnabled && (
+          <Link
+            href="/single-player-mode"
+            className="bg-primary dark:text-background rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Try now!
+          </Link>
+        )}
+      </div>
+
+      <div className="hidden items-center gap-x-6 md:flex">
+        <Link
+          href="/pricing"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
           Pricing
         </Link>
 
-        <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+        <Link
+          href="/blog"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
           Blog
         </Link>
 
-        <Link href="/open" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+        <Link
+          href="/open"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
           Open
         </Link>
 
         <Link
           href="https://app.documenso.com/login"
           target="_blank"
-          className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
         >
           Sign in
         </Link>
       </div>
+
+      <HamburgerMenu
+        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
+        isMenuOpen={isHamburgerMenuOpen}
+      />
+      <MobileNavigation
+        isMenuOpen={isHamburgerMenuOpen}
+        onMenuOpenChange={setIsHamburgerMenuOpen}
+      />
     </header>
   );
 };

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

@@ -6,7 +6,9 @@ import Link from 'next/link';
 import { Variants, motion } from 'framer-motion';
 import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { match } from 'ts-pattern';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -51,6 +53,10 @@ const HeroTitleVariants: Variants = {
 export const Hero = ({ className, ...props }: HeroProps) => {
   const event = usePlausible();
 
+  const { getFlag } = useFeatureFlags();
+
+  const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
+
   const onSignUpClick = () => {
     const el = document.getElementById('email');
 
@@ -80,7 +86,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Image
             src={backgroundPattern}
             alt="background pattern"
-            className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
           />
         </motion.div>
       </div>
@@ -108,8 +114,8 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             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">
+            Get the Early Adopters Plan
+            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               $30/mo. forever!
             </span>
           </Button>
@@ -122,23 +128,45 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           </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>
+        {match(heroMarketingCTA)
+          .with('spm', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
+            >
+              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+                <h2 className="text-muted-foreground text-xs font-semibold">
+                  Introducing Single Player Mode
+                </h2>
+
+                <h1 className="text-foreground mt-1.5 font-medium leading-5">
+                  Self sign for free!
+                </h1>
+              </Link>
+            </motion.div>
+          ))
+          .with('productHunt', () => (
+            <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>
+          ))
+          .otherwise(() => null)}
 
         <motion.div
           className="mt-12"

apps/marketing/src/components/(marketing)/mobile-hamburger.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export interface HamburgerMenuProps {
+  isMenuOpen: boolean;
+  onToggleMenuOpen?: () => void;
+}
+
+export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
+  return (
+    <div className="flex md:hidden">
+      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
+        {isMenuOpen ? <X /> : <Menu />}
+      </Button>
+    </div>
+  );
+};

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { Github, MessagesSquare, Twitter } from 'lucide-react';
+
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MENU_NAVIGATION_LINKS = [
+  {
+    href: '/single-player-mode',
+    text: 'Single Player Mode',
+  },
+  {
+    href: '/blog',
+    text: 'Blog',
+  },
+  {
+    href: '/pricing',
+    text: 'Pricing',
+  },
+  {
+    href: '/open',
+    text: 'Open',
+  },
+  {
+    href: 'https://status.documenso.com',
+    text: 'Status',
+  },
+  {
+    href: 'mailto:support@documenso.com',
+    text: 'Support',
+  },
+  {
+    href: '/privacy',
+    text: 'Privacy',
+  },
+  {
+    href: 'https://app.documenso.com/login',
+    text: 'Sign in',
+  },
+];
+
+export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const shouldReduceMotion = useReducedMotion();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="w-full max-w-[400px]">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src="/logo.png"
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <motion.div
+          className="mt-12 flex w-full flex-col items-start gap-y-4"
+          initial="initial"
+          animate="animate"
+          transition={{
+            staggerChildren: 0.03,
+          }}
+        >
+          {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
+            <motion.div
+              key={href}
+              variants={{
+                initial: {
+                  opacity: 0,
+                  x: shouldReduceMotion ? 0 : 100,
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  transition: {
+                    duration: 0.5,
+                    ease: 'backInOut',
+                  },
+                },
+              }}
+            >
+              <Link
+                className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+                href={href}
+                onClick={() => handleMenuItemClick()}
+              >
+                {text}
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
+          <Link
+            href="https://twitter.com/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <Twitter className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://github.com/documenso/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <Github className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://documen.so/discord"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <MessagesSquare className="h-6 w-6" />
+          </Link>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

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

@@ -19,7 +19,7 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
         <Image
           src={backgroundPattern}
           alt="background pattern"
-          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
@@ -30,41 +30,53 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
       <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">
+            <p className="text-foreground/80 col-span-12 leading-relaxed 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" />
+              <Image
+                src={cardOpenFigure}
+                alt="its fast"
+                className="max-w-[80%] dark:contrast-[70%] dark:hue-rotate-180 dark:invert 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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardBuildFigure}
+                alt="its fast"
+                className="w-full max-w-xs dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardTemplateFigure}
+                alt="its fast"
+                className="w-full max-w-sm dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </div>
           </CardContent>
         </Card>

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

@@ -13,7 +13,7 @@ export const PasswordReveal = ({ password }: PasswordRevealProps) => {
   const [, copy] = useCopyToClipboard();
 
   const onCopyClick = () => {
-    copy(password).then(() => {
+    void copy(password).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'Your password has been copied to your clipboard.',

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

@@ -22,7 +22,6 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
   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',
@@ -30,11 +29,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   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]);
 
@@ -44,10 +41,13 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
         <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',
-            })}
+            className={cn(
+              'text-muted-foreground relative flex items-center gap-x-2.5 px-1 py-2.5',
+              {
+                'text-foreground': period === 'MONTHLY',
+                'hover:text-foreground/80': period !== 'MONTHLY',
+              },
+            )}
             onClick={() => setPeriod('MONTHLY')}
           >
             Monthly
@@ -61,14 +61,17 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
           <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',
-            })}
+            className={cn(
+              'text-muted-foreground relative flex items-center gap-x-2.5 px-1 py-2.5',
+              {
+                'text-foreground': period === 'YEARLY',
+                'hover:text-foreground/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">
+            <div className="bg-muted text-foreground block rounded-full px-2 py-0.5 text-xs">
               Save $60
             </div>
             {period === 'YEARLY' && (
@@ -84,12 +87,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
       <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"
+          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-4xl font-medium text-slate-900">Self Hosted</p>
+          <p className="text-foreground text-4xl font-medium">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">
+          <p className="text-foreground mt-4 max-w-[30ch] text-center">
             For small teams and individuals who need a simple solution
           </p>
 
@@ -103,20 +106,20 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </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>
+            <p className="text-foreground py-4 font-medium">Host your own instance</p>
+            <p className="text-foreground py-4">Full Control</p>
+            <p className="text-foreground py-4">Customizability</p>
+            <p className="text-foreground py-4">Docker Ready</p>
+            <p className="text-foreground py-4">Community Support</p>
+            <p className="text-foreground py-4">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"
+          className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border-2 px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380]"
         >
-          <p className="text-4xl font-medium text-slate-900">Community</p>
+          <p className="text-foreground text-4xl font-medium">Early Adopters</p>
           <div className="text-primary mt-2.5 text-xl font-medium">
             <AnimatePresence mode="wait">
               {period === 'MONTHLY' && <motion.div layoutId="pricing">$30</motion.div>}
@@ -124,7 +127,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             </AnimatePresence>
           </div>
 
-          <p className="mt-4 max-w-[30ch] text-center text-slate-900">
+          <p className="text-foreground mt-4 max-w-[30ch] text-center">
             For fast-growing companies that aim to scale across multiple teams.
           </p>
 
@@ -133,25 +136,35 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </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 className="text-foreground py-4 font-medium">
+              {' '}
+              <a href="https://documenso.com/blog/early-adopters" target="_blank">
+                The Early Adopter Deal:
+              </a>
             </p>
-            <p className="py-4 text-slate-900">Fixed, straightforward pricing</p>
+            <p className="text-foreground py-4">Join the movement</p>
+            <p className="text-foreground py-4">Simple signing solution</p>
+            <p className="text-foreground py-4">Email, Discord and Slack assistance</p>
+            <p className="text-foreground py-4">
+              <strong>
+                {' '}
+                <a href="https://documenso.com/blog/early-adopters" target="_blank">
+                  Includes all upcoming features
+                </a>
+              </strong>
+            </p>
+            <p className="text-foreground py-4">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"
+          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-4xl font-medium text-slate-900">Enterprise</p>
+          <p className="text-foreground text-4xl font-medium">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">
+          <p className="text-foreground mt-4 max-w-[30ch] text-center">
             For large organizations that need extra flexibility and control.
           </p>
 
@@ -165,12 +178,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </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>
+            <p className="text-foreground py-4 font-medium">Everything in Early Adopters, plus:</p>
+            <p className="text-foreground py-4">Custom Subdomain</p>
+            <p className="text-foreground py-4">Compliance Check</p>
+            <p className="text-foreground py-4">Guaranteed Uptime</p>
+            <p className="text-foreground py-4">Reporting & Analysis</p>
+            <p className="text-foreground py-4">24/7 Support</p>
           </div>
         </div>
       </div>

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

@@ -23,7 +23,7 @@ export const ShareConnectPaidWidgetBento = ({
         <Image
           src={backgroundPattern}
           alt="background pattern"
-          className="h-full scale-125 object-cover md:scale-150 lg:scale-[175%]"
+          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
@@ -34,54 +34,70 @@ export const ShareConnectPaidWidgetBento = ({
       <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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardSharingFigure}
+                alt="its fast"
+                className="w-full max-w-xs dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardConnectionsFigure}
+                alt="its fast"
+                className="w-full max-w-sm dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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]" />
+              <Image
+                src={cardPaidFigure}
+                alt="its fast"
+                className="w-full max-w-[14rem] dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </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]">
+            <p className="text-foreground/80 leading-relaxed">
               <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" />
+              <Image
+                src={cardWidgetFigure}
+                alt="its fast"
+                className="w-full max-w-xs dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
+              />
             </div>
           </CardContent>
         </Card>

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

@@ -0,0 +1,233 @@
+'use server';
+
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { PDFDocument } from 'pdf-lib';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentSelfSignedEmailTemplate } from '@documenso/email/templates/document-self-signed';
+import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/constants/email';
+import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
+import { alphaid } from '@documenso/lib/universal/id';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+const ZCreateSinglePlayerDocumentSchema = z.object({
+  documentData: z.object({
+    data: z.string(),
+    type: z.nativeEnum(DocumentDataType),
+  }),
+  documentName: z.string(),
+  signer: z.object({
+    email: z.string().email().min(1),
+    name: z.string(),
+    signature: z.string(),
+  }),
+  fields: z.array(
+    z.object({
+      page: z.number(),
+      type: z.nativeEnum(FieldType),
+      positionX: z.number(),
+      positionY: z.number(),
+      width: z.number(),
+      height: z.number(),
+    }),
+  ),
+});
+
+export type TCreateSinglePlayerDocumentSchema = z.infer<typeof ZCreateSinglePlayerDocumentSchema>;
+
+/**
+ * Create and self signs a document.
+ *
+ * Returns the document token.
+ */
+export const createSinglePlayerDocument = async (
+  value: TCreateSinglePlayerDocumentSchema,
+): Promise<string> => {
+  const { signer, fields, documentData, documentName } =
+    ZCreateSinglePlayerDocumentSchema.parse(value);
+
+  const document = await getFile({
+    data: documentData.data,
+    type: documentData.type,
+  });
+
+  const doc = await PDFDocument.load(document);
+  const createdAt = new Date();
+
+  const isBase64 = signer.signature.startsWith('data:image/png;base64,');
+  const signatureImageAsBase64 = isBase64 ? signer.signature : null;
+  const typedSignature = !isBase64 ? signer.signature : null;
+
+  // Update the document with the fields inserted.
+  for (const field of fields) {
+    const isSignatureField = field.type === FieldType.SIGNATURE;
+
+    await insertFieldInPDF(doc, {
+      ...mapField(field, signer),
+      Signature: isSignatureField
+        ? {
+            created: createdAt,
+            signatureImageAsBase64,
+            typedSignature,
+            // Dummy data.
+            id: -1,
+            recipientId: -1,
+            fieldId: -1,
+          }
+        : null,
+      // Dummy data.
+      id: -1,
+      documentId: -1,
+      recipientId: -1,
+    });
+  }
+
+  const pdfBytes = await doc.save();
+
+  const documentToken = await prisma.$transaction(
+    async (tx) => {
+      const documentToken = alphaid();
+
+      // Fetch service user who will be the owner of the document.
+      const serviceUser = await tx.user.findFirstOrThrow({
+        where: {
+          email: SERVICE_USER_EMAIL,
+        },
+      });
+
+      const documentDataBytes = Buffer.from(pdfBytes).toString('base64');
+
+      const { id: documentDataId } = await tx.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: documentDataBytes,
+          initialData: documentDataBytes,
+        },
+      });
+
+      // Create document.
+      const document = await tx.document.create({
+        data: {
+          title: documentName,
+          status: DocumentStatus.COMPLETED,
+          documentDataId,
+          userId: serviceUser.id,
+          createdAt,
+        },
+      });
+
+      // Create recipient.
+      const recipient = await tx.recipient.create({
+        data: {
+          documentId: document.id,
+          name: signer.name,
+          email: signer.email,
+          token: documentToken,
+          signedAt: createdAt,
+          readStatus: ReadStatus.OPENED,
+          signingStatus: SigningStatus.SIGNED,
+          sendStatus: SendStatus.SENT,
+        },
+      });
+
+      // Create fields and signatures.
+      await Promise.all(
+        fields.map(async (field) => {
+          const insertedField = await tx.field.create({
+            data: {
+              documentId: document.id,
+              recipientId: recipient.id,
+              ...mapField(field, signer),
+            },
+          });
+
+          if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
+            await tx.signature.create({
+              data: {
+                fieldId: insertedField.id,
+                signatureImageAsBase64,
+                typedSignature,
+                recipientId: recipient.id,
+              },
+            });
+          }
+        }),
+      );
+
+      return documentToken;
+    },
+    {
+      maxWait: 5000,
+      timeout: 30000,
+    },
+  );
+
+  const template = createElement(DocumentSelfSignedEmailTemplate, {
+    documentName: documentName,
+    assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
+  });
+
+  // Send email to signer.
+  await mailer.sendMail({
+    to: {
+      address: signer.email,
+      name: signer.name,
+    },
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: 'Document signed',
+    html: render(template),
+    text: render(template, { plainText: true }),
+    attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
+  });
+
+  return documentToken;
+};
+
+/**
+ * Map the fields provided by the user to fields compatible with Prisma.
+ *
+ * Signature fields are handled separately.
+ *
+ * @param field The field passed in by the user.
+ * @param signer The details of the person who is signing this document.
+ * @returns A field compatible with Prisma.
+ */
+const mapField = (
+  field: TCreateSinglePlayerDocumentSchema['fields'][number],
+  signer: TCreateSinglePlayerDocumentSchema['signer'],
+) => {
+  const customText = match(field.type)
+    .with(FieldType.DATE, () => DateTime.now().toFormat('yyyy-MM-dd hh:mm a'))
+    .with(FieldType.EMAIL, () => signer.email)
+    .with(FieldType.NAME, () => signer.name)
+    .otherwise(() => '');
+
+  return {
+    type: field.type,
+    page: field.page,
+    positionX: new Prisma.Decimal(field.positionX),
+    positionY: new Prisma.Decimal(field.positionY),
+    width: new Prisma.Decimal(field.width),
+    height: new Prisma.Decimal(field.height),
+    customText,
+    inserted: true,
+  };
+};

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

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { Share } from 'lucide-react';
+
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { base64 } from '@documenso/lib/universal/base64';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import signingCelebration from '~/assets/signing-celebration.png';
+import ConfettiScreen from '~/components/(marketing)/confetti-screen';
+
+import { DocumentStatus } from '.prisma/client';
+
+interface SinglePlayerModeSuccessProps {
+  className?: string;
+  document: DocumentWithRecipient;
+}
+
+export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerModeSuccessProps) => {
+  const { getFlag } = useFeatureFlags();
+
+  const isConfettiEnabled = getFlag('marketing_spm_confetti');
+
+  const [showDocumentDialog, setShowDocumentDialog] = useState(false);
+  const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
+  const [documentFile, setDocumentFile] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const onShowDocumentClick = async () => {
+    if (isFetchingDocumentFile) {
+      return;
+    }
+
+    setIsFetchingDocumentFile(true);
+
+    try {
+      const data = await getFile(document.documentData);
+
+      setDocumentFile(base64.encode(data));
+
+      setShowDocumentDialog(true);
+    } catch {
+      toast({
+        title: 'Something went wrong.',
+        description: 'We were unable to retrieve the document at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+
+    setIsFetchingDocumentFile(false);
+  };
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  return (
+    <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
+      {isConfettiEnabled && (
+        <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+      )}
+
+      <h2 className="relative z-10 text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
+        You have signed
+        <span className="mt-2 block">{document.title}</span>
+      </h2>
+
+      <SigningCard3D
+        className="mt-8"
+        name={document.Recipient.name || document.Recipient.email}
+        signingCelebrationImage={signingCelebration}
+      />
+
+      <div className="relative mt-8 w-full">
+        <div className={cn('flex flex-col items-center', className)}>
+          <div className="grid w-full max-w-sm grid-cols-2 gap-4">
+            {/* TODO: Hook this up */}
+            <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
+              <Share className="mr-2 h-5 w-5" />
+              Share
+            </Button>
+
+            <DocumentDownloadButton
+              className="flex-1 bg-transparent backdrop-blur-sm"
+              fileName={document.title}
+              documentData={document.documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+
+            <Button
+              onClick={async () => onShowDocumentClick()}
+              loading={isFetchingDocumentFile}
+              className="col-span-2"
+            >
+              Show document
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-muted-foreground/60 mt-16 text-center text-sm">
+        Create a{' '}
+        <Link
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+          target="_blank"
+          className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+        >
+          free account
+        </Link>{' '}
+        to access your signed documents at any time
+      </p>
+
+      <DocumentDialog
+        document={documentFile ?? ''}
+        open={showDocumentDialog}
+        onOpenChange={setShowDocumentDialog}
+      />
+    </div>
+  );
+};

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

@@ -21,12 +21,12 @@ import {
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 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({
@@ -124,7 +124,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     setValue('signatureDataUrl', draftSignatureDataUrl);
     setValue('signatureText', '');
 
-    trigger('signatureDataUrl');
+    void trigger('signatureDataUrl');
     setShowSigningDialog(false);
   };
 
@@ -135,9 +135,10 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     signatureText,
   }: TWidgetFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      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
@@ -145,7 +146,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             name,
             email,
             planId,
-            signatureDataUrl: signatureDataUrl!,
+            signatureDataUrl: signatureDataUrl,
             signatureText: null,
           }
         : {
@@ -153,7 +154,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             email,
             planId,
             signatureDataUrl: null,
-            signatureText: signatureText!,
+            signatureText: signatureText ?? '',
           };
 
       const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);
@@ -180,16 +181,16 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
         {...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">
+          <div className="text-muted-foreground col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed lg:col-span-7">
             {children}
           </div>
 
           <form
-            className="col-span-12 flex flex-col rounded-2xl bg-[#F7F7F7] p-6 lg:col-span-5"
+            className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl 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]">
+            <h3 className="text-2xl font-semibold">Sign up for the early adopters plan</h3>
+            <p className="text-muted-foreground mt-2 text-xs">
               with Timur Ercan & Lucas Smith from Documenso
             </p>
 
@@ -197,7 +198,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
             <AnimatePresence>
               <motion.div key="email">
-                <label htmlFor="email" className="text-lg font-semibold text-slate-900 lg:text-xl">
+                <label htmlFor="email" className="text-foreground text-lg font-semibold lg:text-xl">
                   What’s your email?
                 </label>
 
@@ -210,7 +211,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                         id="email"
                         type="email"
                         placeholder=""
-                        className="w-full bg-white pr-16"
+                        className="bg-background w-full pr-16"
                         disabled={isSubmitting}
                         onKeyDown={(e) =>
                           field.value !== '' &&
@@ -254,7 +255,10 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                     transform: 'translateX(25%)',
                   }}
                 >
-                  <label htmlFor="name" className="text-lg font-semibold text-slate-900 lg:text-xl">
+                  <label
+                    htmlFor="name"
+                    className="text-foreground text-lg font-semibold lg:text-xl"
+                  >
                     and your name?
                   </label>
 
@@ -267,7 +271,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                           id="name"
                           type="text"
                           placeholder=""
-                          className="w-full bg-white pr-16"
+                          className="bg-background w-full pr-16"
                           disabled={isSubmitting}
                           onKeyDown={(e) =>
                             field.value !== '' &&
@@ -299,11 +303,11 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             <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>
+              <p className="text-muted-foreground text-xs">{stepsRemaining} step(s) until signed</p>
+              <p className="text-muted-foreground block text-xs md:hidden">Minimise contract</p>
             </div>
 
-            <div className="relative mt-2.5 h-[2px] w-full bg-[#E9E9E9]">
+            <div className="bg-background relative mt-2.5 h-[2px] w-full">
               <div
                 className={cn('bg-primary/60 absolute inset-y-0 left-0 duration-200', {
                   'w-1/3': stepsRemaining === 3,
@@ -321,13 +325,17 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
               >
                 <div className="flex h-28 items-center justify-center pb-6">
                   {!signatureText && signatureDataUrl && (
-                    <img src={signatureDataUrl} alt="user signature" className="h-full" />
+                    <img
+                      src={signatureDataUrl}
+                      alt="user signature"
+                      className="h-full dark:invert"
+                    />
                   )}
 
                   {signatureText && (
                     <p
                       className={cn(
-                        'text-4xl font-semibold text-slate-900 [font-family:var(--font-caveat)]',
+                        'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
                       )}
                     >
                       {signatureText}
@@ -341,7 +349,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 >
                   <Input
                     id="signatureText"
-                    className="border-none p-0 text-sm text-slate-700 placeholder:text-[#D6D6D6] focus-visible:ring-0"
+                    className="text-foreground placeholder:text-muted-foreground border-none p-0 text-sm focus-visible:ring-0"
                     placeholder="Draw or type name here"
                     disabled={isSubmitting}
                     {...register('signatureText', {
@@ -355,7 +363,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
                   <Button
                     type="submit"
-                    className="h-8 disabled:bg-[#ECEEED] disabled:text-[#C6C6C6] disabled:hover:bg-[#ECEEED]"
+                    className="disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted h-8"
                     disabled={!isValid || isSubmitting}
                   >
                     {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}

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

@@ -1,212 +0,0 @@
-'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/pages/api/claim-plan/index.ts

@@ -43,8 +43,7 @@ export default async function handler(
 
     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`,
+        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
       });
     }
 
@@ -104,9 +103,8 @@ export default async function handler(
       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(
+      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
         email,
       )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
     });

apps/marketing/src/pages/api/feature-flag/all.ts

@@ -0,0 +1,7 @@
+import handlerFeatureFlagAll from '@documenso/lib/server-only/feature-flags/all';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagAll;

apps/marketing/src/pages/api/feature-flag/get.ts

@@ -0,0 +1,7 @@
+import handlerFeatureFlagGet from '@documenso/lib/server-only/feature-flags/get';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagGet;

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

@@ -8,8 +8,11 @@ import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in
 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 { getFile } from '@documenso/lib/universal/upload/get-file';
+import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentDataType,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -17,14 +20,13 @@ import {
   SigningStatus,
 } from '@documenso/prisma/client';
 
-const log = (...args: any[]) => console.log('[stripe]', ...args);
+const log = (...args: unknown[]) => 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,
@@ -55,6 +57,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   log('event-type:', event.type);
 
   if (event.type === 'checkout.session.completed') {
+    // This typecast is required since we don't want to create a guard for every event type
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const session = event.data.object as Stripe.Checkout.Session;
 
     if (session.metadata?.source === 'landing') {
@@ -84,16 +88,34 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
+      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+
+      const { id: documentDataId } = await prisma.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: bytes64,
+          initialData: bytes64,
+        },
+      });
+
       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,
+          documentDataId,
+        },
+        include: {
+          documentData: true,
         },
       });
 
+      const { documentData } = document;
+
+      if (!documentData) {
+        throw new Error(`Document ${document.id} has no document data`);
+      }
+
       const recipient = await prisma.recipient.create({
         data: {
           name: user.name ?? '',
@@ -120,17 +142,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
       });
 
+      let pdfData = await getFile(documentData).then((data) =>
+        Buffer.from(data).toString('base64'),
+      );
+
       if (signatureDataUrl) {
-        document.document = await insertImageInPDF(
-          document.document,
+        pdfData = await insertImageInPDF(
+          pdfData,
           signatureDataUrl,
           Number(field.positionX),
           Number(field.positionY),
           field.page,
         );
       } else {
-        document.document = await insertTextInPDF(
-          document.document,
+        pdfData = await insertTextInPDF(
+          pdfData,
           signatureText ?? '',
           Number(field.positionX),
           Number(field.positionY),
@@ -138,6 +164,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         );
       }
 
+      const { data: newData } = await updateFile({
+        type: documentData.type,
+        oldData: documentData.initialData,
+        newData: Buffer.from(pdfData, 'base64').toString('binary'),
+      });
+
       await Promise.all([
         prisma.signature.create({
           data: {
@@ -147,12 +179,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             typedSignature: signatureDataUrl ? '' : signatureText,
           },
         }),
-        prisma.document.update({
+        prisma.documentData.update({
           where: {
-            id: document.id,
+            id: documentData.id,
           },
           data: {
-            document: document.document,
+            data: newData,
           },
         }),
       ]);

apps/marketing/src/providers/next-theme.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { ThemeProviderProps } from 'next-themes/dist/types';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

apps/marketing/src/providers/posthog.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+import posthog from 'posthog-js';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export function PostHogPageview() {
+  const postHogConfig = extractPostHogConfig();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  if (typeof window !== 'undefined' && postHogConfig) {
+    posthog.init(postHogConfig.key, {
+      api_host: postHogConfig.host,
+      disable_session_recording: true,
+    });
+  }
+
+  useEffect(() => {
+    if (!postHogConfig || !pathname) {
+      return;
+    }
+
+    let url = window.origin + pathname;
+    if (searchParams && searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture('$pageview', {
+      $current_url: url,
+    });
+  }, [pathname, searchParams, postHogConfig]);
+
+  return null;
+}

apps/marketing/tsconfig.json

@@ -9,16 +9,10 @@
       }
     ],
     "paths": {
-      "~/*": [
-        "./src/*"
-      ],
-      "contentlayer/generated": [
-        "./.contentlayer/generated"
-      ]
+      "~/*": ["./src/*"],
+      "contentlayer/generated": ["./.contentlayer/generated"]
     },
-    "types": [
-      "@documenso/lib/types/next-auth.d.ts"
-    ],
+    "types": ["@documenso/lib/types/next-auth.d.ts"],
     "strictNullChecks": true,
     "incremental": false
   },
@@ -29,7 +23,5 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

apps/web/next.config.js

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
+const { version } = require('./package.json');
 
-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
 });
 
@@ -9,6 +10,7 @@ const { parsed: env } = require('dotenv').config({
 const config = {
   experimental: {
     serverActions: true,
+    serverActionsBodySizeLimit: '50mb',
   },
   reactStrictMode: true,
   transpilePackages: [
@@ -18,12 +20,23 @@ const config = {
     '@documenso/ui',
     '@documenso/email',
   ],
-  env,
+  env: {
+    APP_VERSION: version,
+    NEXT_PUBLIC_PROJECT: 'web',
+  },
   modularizeImports: {
     'lucide-react': {
       transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
     },
   },
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.posthog.com/:path*',
+      },
+    ];
+  },
 };
 
 module.exports = config;

apps/web/package.json

@@ -4,12 +4,15 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "PORT=3000 next dev",
+    "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/ee": "*",
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@documenso/tailwind-config": "*",
@@ -19,10 +22,10 @@
     "@tanstack/react-query": "^4.29.5",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.279.0",
+    "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "nanoid": "^4.0.2",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
@@ -34,14 +37,15 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
-    "react-pdf": "^7.1.1",
     "react-rnd": "^10.4.1",
+    "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/formidable": "^2.0.6",
+    "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"

apps/web/process-env.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_SITE_URL?: string;
+    NEXT_PUBLIC_WEBAPP_URL?: string;
+    NEXT_PUBLIC_MARKETING_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

apps/web/public/next.svg

@@ -1 +0,0 @@
-<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/web/public/vercel.svg

@@ -1 +0,0 @@
-<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/web/src/api/document/create/fetcher.ts

@@ -1,34 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { TCreateDocumentRequestSchema, ZCreateDocumentResponseSchema } from './types';
-
-export const useCreateDocument = () => {
-  return useMutation(async ({ file }: TCreateDocumentRequestSchema) => {
-    const formData = new FormData();
-
-    formData.set('file', file);
-
-    const response = await fetch('/api/document/create', {
-      method: 'POST',
-      body: formData,
-    });
-
-    const body = await response.json();
-
-    if (response.status !== 200) {
-      throw new Error('Failed to create document');
-    }
-
-    const safeBody = ZCreateDocumentResponseSchema.safeParse(body);
-
-    if (!safeBody.success) {
-      throw new Error('Failed to create document');
-    }
-
-    if ('error' in safeBody.data) {
-      throw new Error(safeBody.data.error);
-    }
-
-    return safeBody.data;
-  });
-};

apps/web/src/api/document/create/types.ts

@@ -1,19 +0,0 @@
-import { z } from 'zod';
-
-export const ZCreateDocumentRequestSchema = z.object({
-  file: z.instanceof(File),
-});
-
-export type TCreateDocumentRequestSchema = z.infer<typeof ZCreateDocumentRequestSchema>;
-
-export const ZCreateDocumentResponseSchema = z
-  .object({
-    id: z.number(),
-  })
-  .or(
-    z.object({
-      error: z.string(),
-    }),
-  );
-
-export type TCreateDocumentResponseSchema = z.infer<typeof ZCreateDocumentResponseSchema>;

apps/web/src/app/(dashboard)/admin/layout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+
+import { AdminNav } from './nav';
+
+export type AdminSectionLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
+  const { user } = await getRequiredServerComponentSession();
+
+  if (!isAdmin(user)) {
+    redirect('/documents');
+  }
+
+  return (
+    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
+      <div className="grid grid-cols-12 gap-x-8 md:mt-8">
+        <AdminNav className="col-span-12 md:col-span-3 md:flex" />
+
+        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">{children}</div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { BarChart3, User2 } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type AdminNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const AdminNav = ({ className, ...props }: AdminNavProps) => {
+  const pathname = usePathname();
+
+  return (
+    <div className={cn('flex gap-x-2.5 gap-y-2 md:flex-col', className)} {...props}>
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/stats') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/stats">
+          <BarChart3 className="mr-2 h-5 w-5" />
+          Stats
+        </Link>
+      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/users') && 'bg-secondary',
+        )}
+        disabled
+      >
+        <User2 className="mr-2 h-5 w-5" />
+        Users (Coming Soon)
+      </Button>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/admin/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Admin() {
+  redirect('/admin/stats');
+}