feat: update signin signup pages

Signed-off-by: Adithya Krishna <adithya@documenso.com>

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();

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,
+              Our mission is to create an open signing infrastructure that empowers the world. We
-              enabling businesses to embrace openness, cooperation, and transparency. We believe
+              believe openness and cooperation are the way every business should be conducted.
-              that signing, as a fundamental act, should embody these values. By offering an
-              open-source signing solution, we aim to make document signing accessible, transparent,
-              and trustworthy.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              Through our platform, called Documenso, we strive to earn your trust by allowing
+              By creating an open source signing solution we want to bring these values to
-              self-hosting and providing complete visibility into its inner workings. We value
+              businesses' most fundamental act: signing. Document Signing should be open and
-              inclusivity and foster an environment where diverse perspectives and contributions are
+              transparent, as should all trust based products.
-              welcomed, even though we may not implement them all.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              At Documenso, we envision a web-enabled future for business and contracts, and we are
+              We aim to earn this trust by enabling everyone to self-host Documenso and inspect it’s
-              committed to being the leading provider of open signing infrastructure. By combining
+              inner workings. We openly share our source, knowledge, and progress while creating
-              exceptional product design with open-source principles, we aim to deliver a robust and
+              Documenso.
-              well-designed application that exceeds your expectations.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              We understand that exceptional products are born from exceptional communities, and we
+              Exceptional products are the results of exceptional communities and we strive to
-              invite you to join our open-source community. Your contributions, whether technical or
+              create an inclusive, creative environment, open to all who choose to support our
-              non-technical, will help shape the future of signing. Together, we can create a better
+              mission. We value the inputs, contributions, and perspectives of everyone in our
-              future for everyone.
+              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
+              We are building the next generation of trust software and community the way it’s meant
-              signal your support of Documenso's mission{' '}
+              to be: Beautifully designed and open for all to join.
-              <span className="bg-primary text-black">
-                (in a non-legally binding, but heartfelt way)
-              </span>{' '}
-              and lock in the early supporter plan for forever, including everything we build this
-              year.
             </p>
 
             <div className="flex h-24 items-center">

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();

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

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" />

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>
+    </>
+  );
+}

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

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>
+    </>
+  );
+}

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

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>
+    </>
+  );
+}

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" />

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>
+    </>
+  );
+}

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();