From b1261510d2188e899b34f70ffbba491b8709bcd2 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adithya@documenso.com>
Date: Thu, 22 Feb 2024 22:59:36 +0530
Subject: [PATCH] feat: update signin signup pages

Signed-off-by: Adithya Krishna <adithya@documenso.com>
---
 apps/marketing/src/app/not-found.tsx          |  2 +-
 .../src/components/(marketing)/hero.tsx       | 38 +++++++------------
 .../web/src/app/(teams)/t/[teamUrl]/error.tsx |  2 +-
 .../src/app/(teams)/t/[teamUrl]/not-found.tsx |  2 +-
 .../{ => check-email}/layout.tsx              |  6 +--
 .../forgot-password/layout.tsx                | 34 +++++++++++++++++
 .../forgot-password/page.tsx                  |  2 +-
 .../reset-password/layout.tsx                 | 34 +++++++++++++++++
 .../(unauthenticated)/reset-password/page.tsx |  2 +-
 .../app/(unauthenticated)/signin/layout.tsx   | 34 +++++++++++++++++
 .../{signup-layout.tsx => team/layout.tsx}    |  6 +--
 .../(unauthenticated)/verify-email/layout.tsx | 34 +++++++++++++++++
 .../web/src/components/partials/not-found.tsx |  2 +-
 13 files changed, 162 insertions(+), 36 deletions(-)
 rename apps/web/src/app/(unauthenticated)/{ => check-email}/layout.tsx (83%)
 create mode 100644 apps/web/src/app/(unauthenticated)/forgot-password/layout.tsx
 create mode 100644 apps/web/src/app/(unauthenticated)/reset-password/layout.tsx
 create mode 100644 apps/web/src/app/(unauthenticated)/signin/layout.tsx
 rename apps/web/src/app/(unauthenticated)/{signup-layout.tsx => team/layout.tsx} (85%)
 create mode 100644 apps/web/src/app/(unauthenticated)/verify-email/layout.tsx

diff --git a/apps/marketing/src/app/not-found.tsx b/apps/marketing/src/app/not-found.tsx
index d85cdb62f..a54f8ea34 100644
--- a/apps/marketing/src/app/not-found.tsx
+++ b/apps/marketing/src/app/not-found.tsx
@@ -43,7 +43,7 @@ export default function NotFound() {
 
           <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             <Button
-              variant="ghost"
+              variant="secondary"
               className="w-32"
               onClick={() => {
                 void router.back();
diff --git a/apps/marketing/src/components/(marketing)/hero.tsx b/apps/marketing/src/components/(marketing)/hero.tsx
index 476f29e97..05e4c8e4e 100644
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@@ -191,42 +191,32 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Widget className="mt-12">
             <strong>Documenso Supporter Pledge</strong>
             <p className="w-full max-w-[70ch]">
-              Our mission is to create an open signing infrastructure that empowers the world,
-              enabling businesses to embrace openness, cooperation, and transparency. We believe
-              that signing, as a fundamental act, should embody these values. By offering an
-              open-source signing solution, we aim to make document signing accessible, transparent,
-              and trustworthy.
+              Our mission is to create an open signing infrastructure that empowers the world. We
+              believe openness and cooperation are the way every business should be conducted.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              Through our platform, called Documenso, we strive to earn your trust by allowing
-              self-hosting and providing complete visibility into its inner workings. We value
-              inclusivity and foster an environment where diverse perspectives and contributions are
-              welcomed, even though we may not implement them all.
+              By creating an open source signing solution we want to bring these values to
+              businesses' most fundamental act: signing. Document Signing should be open and
+              transparent, as should all trust based products.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              At Documenso, we envision a web-enabled future for business and contracts, and we are
-              committed to being the leading provider of open signing infrastructure. By combining
-              exceptional product design with open-source principles, we aim to deliver a robust and
-              well-designed application that exceeds your expectations.
+              We aim to earn this trust by enabling everyone to self-host Documenso and inspect it’s
+              inner workings. We openly share our source, knowledge, and progress while creating
+              Documenso.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              We understand that exceptional products are born from exceptional communities, and we
-              invite you to join our open-source community. Your contributions, whether technical or
-              non-technical, will help shape the future of signing. Together, we can create a better
-              future for everyone.
+              Exceptional products are the results of exceptional communities and we strive to
+              create an inclusive, creative environment, open to all who choose to support our
+              mission. We value the inputs, contributions, and perspectives of everyone in our
+              community, even though we can't apply them all.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              Today we invite you to join us on this journey: By signing this mission statement you
-              signal your support of Documenso's mission{' '}
-              <span className="bg-primary text-black">
-                (in a non-legally binding, but heartfelt way)
-              </span>{' '}
-              and lock in the early supporter plan for forever, including everything we build this
-              year.
+              We are building the next generation of trust software and community the way it’s meant
+              to be: Beautifully designed and open for all to join.
             </p>
 
             <div className="flex h-24 items-center">
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
index 1e1eb9921..2c31195f9 100644
--- a/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
@@ -34,7 +34,7 @@ export default function ErrorPage({ error }: ErrorProps) {
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
           <Button
-            variant="ghost"
+            variant="secondary"
             className="w-32"
             onClick={() => {
               void router.back();
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
index 35962e264..6d172f090 100644
--- a/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
@@ -19,7 +19,7 @@ export default function NotFound() {
         </p>
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-          <Button asChild className="w-32">
+          <Button variant="secondary" asChild className="w-32">
             <Link href="/settings/teams">
               <ChevronLeft className="mr-2 h-4 w-4" />
               Go Back
diff --git a/apps/web/src/app/(unauthenticated)/layout.tsx b/apps/web/src/app/(unauthenticated)/check-email/layout.tsx
similarity index 83%
rename from apps/web/src/app/(unauthenticated)/layout.tsx
rename to apps/web/src/app/(unauthenticated)/check-email/layout.tsx
index 784135c44..de063b6d2 100644
--- a/apps/web/src/app/(unauthenticated)/layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/check-email/layout.tsx
@@ -5,13 +5,13 @@ import Image from 'next/image';
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { Card } from '@documenso/ui/primitives/card';
 
-import { NewHeader } from '../../components/(dashboard)/layout/new/new-header';
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
 
-type UnauthenticatedLayoutProps = {
+type CheckEmailLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
+export default function CheckEmailLayout({ children }: CheckEmailLayoutProps) {
   return (
     <>
       <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
diff --git a/apps/web/src/app/(unauthenticated)/forgot-password/layout.tsx b/apps/web/src/app/(unauthenticated)/forgot-password/layout.tsx
new file mode 100644
index 000000000..0bee1ccbf
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/forgot-password/layout.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type ForgotPasswordLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function ForgotPasswordLayout({ children }: ForgotPasswordLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-44">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx b/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx
index 36c023027..174f5714d 100644
--- a/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ForgotPasswordPage() {
   return (
     <div>
-      <h1 className="text-4xl font-semibold">Forgot your password?</h1>
+      <h1 className="text-3xl font-semibold">Forgot your password?</h1>
 
       <p className="text-muted-foreground mt-2 text-sm">
         No worries, it happens! Enter your email and we'll email you a special link to reset your
diff --git a/apps/web/src/app/(unauthenticated)/reset-password/layout.tsx b/apps/web/src/app/(unauthenticated)/reset-password/layout.tsx
new file mode 100644
index 000000000..087ef4168
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/reset-password/layout.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type ResetPasswordLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function ResetPasswordLayout({ children }: ResetPasswordLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-56">
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+            <Image
+              src={backgroundPattern}
+              alt="background pattern"
+              className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/src/app/(unauthenticated)/reset-password/page.tsx b/apps/web/src/app/(unauthenticated)/reset-password/page.tsx
index 93cd41ebb..dc1a11089 100644
--- a/apps/web/src/app/(unauthenticated)/reset-password/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/reset-password/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ResetPasswordPage() {
   return (
     <div>
-      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
+      <h1 className="text-3xl font-semibold">Unable to reset password</h1>
 
       <p className="text-muted-foreground mt-2 text-sm">
         The token you have used to reset your password is either expired or it never existed. If you
diff --git a/apps/web/src/app/(unauthenticated)/signin/layout.tsx b/apps/web/src/app/(unauthenticated)/signin/layout.tsx
new file mode 100644
index 000000000..2524e7b5d
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/signin/layout.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type SignInLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SignInLayout({ children }: SignInLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-[7.2rem]">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="flex flex-col overflow-hidden dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/src/app/(unauthenticated)/signup-layout.tsx b/apps/web/src/app/(unauthenticated)/team/layout.tsx
similarity index 85%
rename from apps/web/src/app/(unauthenticated)/signup-layout.tsx
rename to apps/web/src/app/(unauthenticated)/team/layout.tsx
index 61c390d13..a6b2ddc62 100644
--- a/apps/web/src/app/(unauthenticated)/signup-layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/team/layout.tsx
@@ -5,13 +5,13 @@ import Image from 'next/image';
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { Card } from '@documenso/ui/primitives/card';
 
-import { NewHeader } from '../../components/(dashboard)/layout/new/new-header';
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
 
-type SignUpLayoutProps = {
+type TeamLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function SignUpLayout({ children }: SignUpLayoutProps) {
+export default function TeamLayout({ children }: TeamLayoutProps) {
   return (
     <>
       <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
diff --git a/apps/web/src/app/(unauthenticated)/verify-email/layout.tsx b/apps/web/src/app/(unauthenticated)/verify-email/layout.tsx
new file mode 100644
index 000000000..e1013720f
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/verify-email/layout.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type VerifyEmailLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function VerifyEmailLayout({ children }: VerifyEmailLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-[11.2rem]">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/src/components/partials/not-found.tsx b/apps/web/src/components/partials/not-found.tsx
index b80c6fea8..dc059a324 100644
--- a/apps/web/src/components/partials/not-found.tsx
+++ b/apps/web/src/components/partials/not-found.tsx
@@ -46,7 +46,7 @@ export default function NotFoundPartial({ children }: NotFoundPartialProps) {
 
           <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             <Button
-              variant="ghost"
+              variant="secondary"
               className="w-32"
               onClick={() => {
                 void router.back();