chore: UI changes and revamp components for authentication

space/components/views/auth.tsx

@@ -50,7 +50,7 @@ export const AuthView = observer(() => {
               <div className="absolute inset-0 z-0">
                 <Image
                   src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-                  className="w-screen min-h-screen object-cover"
+                  className="w-full h-full object-cover"
                   alt="Plane background pattern"
                 />
               </div>

space/pages/accounts/forgot-password.tsx

@@ -81,7 +81,7 @@ const ForgotPasswordPage: NextPage = () => {
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>
@@ -159,5 +159,4 @@ const ForgotPasswordPage: NextPage = () => {
   );
 };
 
-
 export default ForgotPasswordPage;

space/pages/accounts/reset-password.tsx

@@ -79,7 +79,7 @@ const ResetPasswordPage: NextPage = () => {
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>

web/components/account/auth-forms/auth-banner.tsx

@@ -13,7 +13,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative inline-flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
         <Info size={16} className="text-custom-primary-100" />
       </div>

web/components/account/auth-forms/email.tsx

@@ -38,7 +38,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
   return (
-    <form onSubmit={handleFormSubmit} className="mx-auto mt-8 space-y-4 w-5/6 sm:w-96">
+    <form onSubmit={handleFormSubmit} className="mt-8 space-y-4">
       <div className="space-y-1">
         <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
           Email
@@ -69,13 +69,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
           </p>
         )}
       </div>
-      <Button
-        type="submit"
-        variant="primary"
-        className="w-full"
-        size="lg"
-        disabled={isButtonDisabled}
-      >
+      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
         {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
       </Button>
     </form>

web/components/account/auth-forms/password.tsx

@@ -98,7 +98,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
 
   return (
     <form
-      className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
+      className="mt-5 space-y-4"
       method="POST"
       action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
       onSubmit={() => setIsSubmitting(true)}

web/components/account/auth-forms/sign-in-root.tsx

@@ -11,7 +11,7 @@ import {
   AuthPasswordForm,
   OAuthOptions,
   TermsAndConditions,
-  UniqueCodeForm,
+  AuthUniqueCodeForm,
 } from "@/components/account";
 // helpers
 import {
@@ -82,8 +82,7 @@ export const SignInAuthRoot = observer(() => {
     );
 
   return (
-    <>
-      <div className="relative max-w-lg mx-auto flex flex-col space-y-6">
+    <div className="relative flex flex-col space-y-6">
       <AuthHeader
         workspaceSlug={workspaceSlug?.toString() || undefined}
         invitationId={invitation_id?.toString() || undefined}
@@ -97,7 +96,7 @@ export const SignInAuthRoot = observer(() => {
       )}
       {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
       {authStep === EAuthSteps.UNIQUE_CODE && (
-          <UniqueCodeForm
+        <AuthUniqueCodeForm
           email={email}
           handleEmailClear={() => {
             setEmail("");
@@ -121,6 +120,5 @@ export const SignInAuthRoot = observer(() => {
       {isOAuthEnabled && <OAuthOptions />}
       <TermsAndConditions isSignUp={false} />
     </div>
-    </>
   );
 });

web/components/account/auth-forms/sign-up-root.tsx

@@ -91,7 +91,7 @@ export const SignUpAuthRoot: FC = observer(() => {
     );
 
   return (
-    <div className="relative max-w-lg px-5 mx-auto flex flex-col space-y-6">
+    <div className="relative flex flex-col space-y-6">
       <AuthHeader
         workspaceSlug={workspaceSlug?.toString() || undefined}
         invitationId={invitation_id?.toString() || undefined}

web/components/account/auth-forms/unique-code.tsx

@@ -93,7 +93,7 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
 
   return (
     <form
-      className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
+      className="mt-5 space-y-4"
       method="POST"
       action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
       onSubmit={() => setIsSubmitting(true)}

web/components/account/oauth/github-sign-in.tsx

@@ -1,62 +0,0 @@
-// react
-import { useEffect, useState, FC } from "react";
-// next
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-// images
-import githubLightModeImage from "/public/logos/github-black.png";
-import githubDarkModeImage from "/public/logos/github-dark.svg";
-
-type Props = {
-  handleSignIn: React.Dispatch<string>;
-  clientId: string;
-  type: "sign_in" | "sign_up";
-};
-
-export const GitHubSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId, type } = props;
-  // states
-  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
-  const [gitCode, setGitCode] = useState<null | string>(null);
-  // router
-  const {
-    query: { code },
-  } = useRouter();
-  // theme
-  const { resolvedTheme } = useTheme();
-
-  useEffect(() => {
-    if (code && !gitCode) {
-      setGitCode(code.toString());
-      handleSignIn(code.toString());
-    }
-  }, [code, gitCode, handleSignIn]);
-
-  useEffect(() => {
-    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    setLoginCallBackURL(`${origin}/` as any);
-  }, []);
-  return (
-    <div className="w-full">
-      <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
-      >
-        <button
-          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-            resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
-          }`}
-        >
-          <Image
-            src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
-            height={18}
-            width={18}
-            alt="GitHub Logo"
-          />
-          <span className="text-onboarding-text-200">{type === "sign_in" ? "Sign-in" : "Sign-up"} with GitHub</span>
-        </button>
-      </Link>
-    </div>
-  );
-};

web/components/account/oauth/google-sign-in.tsx

@@ -1,60 +0,0 @@
-import { FC, useEffect, useRef, useCallback, useState } from "react";
-import Script from "next/script";
-
-type Props = {
-  handleSignIn: React.Dispatch<any>;
-  clientId: string;
-  type: "sign_in" | "sign_up";
-};
-
-export const GoogleSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId, type } = props;
-  // refs
-  const googleSignInButton = useRef<HTMLDivElement>(null);
-  // states
-  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
-
-  const loadScript = useCallback(() => {
-    if (!googleSignInButton.current || gsiScriptLoaded) return;
-
-    window?.google?.accounts.id.initialize({
-      client_id: clientId,
-      callback: handleSignIn,
-    });
-
-    try {
-      window?.google?.accounts.id.renderButton(
-        googleSignInButton.current,
-        {
-          type: "standard",
-          theme: "outline",
-          size: "large",
-          logo_alignment: "center",
-          text: type === "sign_in" ? "signin_with" : "signup_with",
-        } as GsiButtonConfiguration // customization attributes
-      );
-    } catch (err) {
-      console.log(err);
-    }
-
-    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
-
-    setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded, clientId, type]);
-
-  useEffect(() => {
-    if (window?.google?.accounts?.id) {
-      loadScript();
-    }
-    return () => {
-      window?.google?.accounts.id.cancel();
-    };
-  }, [loadScript]);
-
-  return (
-    <>
-      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
-    </>
-  );
-};

web/components/account/oauth/index.ts

@@ -1,5 +1,3 @@
-export * from "./github-sign-in";
-export * from "./google-sign-in";
 export * from "./oauth-options";
 export * from "./google-button";
 export * from "./github-button";

web/components/account/oauth/oauth-options.tsx

@@ -10,12 +10,12 @@ export const OAuthOptions: React.FC = observer(() => {
 
   return (
     <>
-      <div className="mx-auto mt-4 flex items-center sm:w-96">
+      <div className="mt-4 flex items-center">
         <hr className="w-full border-onboarding-border-100" />
         <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
         <hr className="w-full border-onboarding-border-100" />
       </div>
-      <div className={`mx-auto mt-7 grid gap-4 overflow-hidden sm:w-96`}>
+      <div className={`mt-7 grid gap-4 overflow-hidden`}>
         {instance?.config?.is_google_enabled && (
           <div className="flex h-[42px] items-center !overflow-hidden">
             <GoogleOAuthButton text="SignIn with Google" />

web/components/page-views/index.ts

@@ -1,2 +1 @@
-export * from "./signup";
 export * from "./workspace-dashboard";

web/components/page-views/signup.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import Link from "next/link";
-// ui
-import { useTheme } from "next-themes";
-// components
-import { SignUpAuthRoot } from "@/components/account";
-import { PageHead } from "@/components/core";
-// constants
-import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
-// hooks
-import { useEventTracker } from "@/hooks/store";
-// assets
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-
-export const SignUpView = observer(() => {
-  // store hooks
-  const { captureEvent } = useEventTracker();
-  // hooks
-  const { resolvedTheme } = useTheme();
-  // login redirection hook
-
-  return (
-    <div className="relative">
-      <PageHead title="Sign Up" />
-      <div className="absolute inset-0 z-0">
-        <Image
-          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
-          alt="Plane background pattern"
-        />
-      </div>
-      <div className="relative z-10">
-        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
-          <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
-            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-          </div>
-          <div className="text-center text-sm font-medium text-onboarding-text-300">
-            Already have an account?{" "}
-            <Link
-              href="/accounts/sign-in"
-              onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
-              className="font-semibold text-custom-primary-100 hover:underline"
-            >
-              Sign In
-            </Link>
-          </div>
-        </div>
-        <div className="mx-auto h-full">
-          <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-            <SignUpAuthRoot />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});

web/pages/accounts/forgot-password.tsx

@@ -96,25 +96,25 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative w-screen h-screen overflow-hidden">
       <PageHead title="Forgot Password" />
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>
-      <div className="relative z-10">
-        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
           <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
             <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
           <div className="text-center text-sm font-medium text-onboarding-text-300">
             New to Plane?{" "}
             <Link
-              href="/accounts/sign-up"
+              href="/"
               onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
               className="font-semibold text-custom-primary-100 hover:underline"
             >
@@ -122,10 +122,9 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
             </Link>
           </div>
         </div>
-        <div className="mx-auto h-full">
-          <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-            <div className="mx-auto flex flex-col">
-              <div className="text-center space-y-1 py-4 mx-auto sm:w-96">
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
+          <div className="relative flex flex-col space-y-6">
+            <div className="text-center space-y-1 py-4">
               <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
                 Reset your password
               </h3>
@@ -133,7 +132,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
                 Enter your user account{"'"}s verified email address and we will send you a password reset link.
               </p>
             </div>
-              <form onSubmit={handleSubmit(handleForgotPassword)} className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96">
+            <form onSubmit={handleSubmit(handleForgotPassword)} className="mt-5 space-y-4">
               <div className="space-y-1">
                 <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
                   Email
@@ -185,7 +184,6 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

web/pages/accounts/reset-password.tsx

@@ -74,33 +74,32 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   );
 
   return (
-    <div className="relative">
+    <div className="relative w-screen h-screen overflow-hidden">
       <PageHead title="Reset Password" />
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>
-      <div className="relative z-10">
-        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
           <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
             <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
         </div>
-        <div className="mx-auto h-full">
-          <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-            <div className="mx-auto flex flex-col">
-              <div className="text-center space-y-1 py-4 mx-auto sm:w-96">
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
+          <div className="relative flex flex-col space-y-6">
+            <div className="text-center space-y-1 py-4">
               <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
                 Set new password
               </h3>
               <p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
             </div>
             <form
-                className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
+              className="mt-5 space-y-4"
               method="POST"
               action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
             >
@@ -191,7 +190,6 @@ const ResetPasswordPage: NextPageWithLayout = () => {
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

web/pages/accounts/set-password.tsx

@@ -15,10 +15,11 @@ import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
 import { useUser } from "@/hooks/store";
 // layouts
-import { UserAuthWrapper } from "@/layouts/auth-layout";
 import DefaultLayout from "@/layouts/default-layout";
 // lib
 import { NextPageWithLayout } from "@/lib/types";
+// wrappers
+import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
 import { AuthService } from "@/services/auth.service";
 // images
@@ -94,32 +95,31 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative w-screen h-screen overflow-hidden">
       <PageHead title="Reset Password" />
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>
-      <div className="relative z-10">
-        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
           <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
             <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
         </div>
-        <div className="mx-auto h-full">
-          <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-            <div className="mx-auto flex flex-col">
-              <div className="text-center space-y-1 py-4 mx-auto sm:w-96">
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
+          <div className="relative flex flex-col space-y-6">
+            <div className="text-center space-y-1 py-4">
               <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
                 Secure your account
               </h3>
               <p className="font-medium text-onboarding-text-400">Setting password helps you login securely</p>
             </div>
-              <form className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96" onSubmit={(e) => handleSubmit(e)}>
+            <form className="mt-5 space-y-4" onSubmit={(e) => handleSubmit(e)}>
               <div className="space-y-1">
                 <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
                   Email
@@ -207,15 +207,14 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
         </div>
       </div>
     </div>
-    </div>
   );
 });
 
 SetPasswordPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <UserAuthWrapper>
+    <AuthenticationWrapper>
       <DefaultLayout>{page}</DefaultLayout>
-    </UserAuthWrapper>
+    </AuthenticationWrapper>
   );
 };
 

web/pages/accounts/sign-in.tsx

@@ -32,19 +32,19 @@ const SignInPage: NextPageWithLayout = observer(() => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div className="relative">
+    <div className="relative w-screen h-screen overflow-hidden">
       <PageHead title="Sign In" />
       <div className="absolute inset-0 z-0">
         <Image
           src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-screen min-h-screen object-cover"
+          className="w-full h-full object-cover"
           alt="Plane background pattern"
         />
       </div>
-      <div className="relative z-10">
-        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
           <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
             <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
           <div className="text-center text-sm font-medium text-onboarding-text-300">
@@ -58,13 +58,11 @@ const SignInPage: NextPageWithLayout = observer(() => {
             </Link>
           </div>
         </div>
-        <div className="mx-auto h-full">
-          <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
           <SignInAuthRoot />
         </div>
       </div>
     </div>
-    </div>
   );
 });
 

web/pages/index.tsx

@@ -1,16 +1,68 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import Link from "next/link";
+// ui
+import { useTheme } from "next-themes";
 // components
-import { SignUpView } from "@/components/page-views";
+import { SignUpAuthRoot } from "@/components/account";
+import { PageHead } from "@/components/core";
+// constants
+import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
+// hooks
+import { useEventTracker } from "@/hooks/store";
 // layouts
 import DefaultLayout from "@/layouts/default-layout";
-// type
+// types
 import { NextPageWithLayout } from "@/lib/types";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
+// assets
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
-const HomePage: NextPageWithLayout = () => <SignUpView />;
+const HomePage: NextPageWithLayout = observer(() => {
+  const { resolvedTheme } = useTheme();
+  // hooks
+  const { captureEvent } = useEventTracker();
+
+  return (
+    <div className="relative w-screen h-screen overflow-hidden">
+      <PageHead title="Sign Up" />
+      <div className="absolute inset-0 z-0">
+        <Image
+          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+          className="w-full h-full object-cover"
+          alt="Plane background pattern"
+        />
+      </div>
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
+          <div className="flex items-center gap-x-2 py-10">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+          </div>
+          <div className="text-center text-sm font-medium text-onboarding-text-300">
+            Already have an account?{" "}
+            <Link
+              href="/accounts/sign-in"
+              onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
+              className="font-semibold text-custom-primary-100 hover:underline"
+            >
+              Sign In
+            </Link>
+          </div>
+        </div>
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
+          <SignUpAuthRoot />
+        </div>
+      </div>
+    </div>
+  );
+});
 
 HomePage.getLayout = function getLayout(page: ReactElement) {
   return (