.

apps/blogai/app/[locale]/auth/sign-up/[[...sign-up]]/page.tsx

@@ -23,18 +23,9 @@ export default function AuthenticationPage() {
   return (
     <div className="flex flex-col justify-center space-y-6 ">
       {error ? <ErrorBanner>{error}</ErrorBanner> : null}
-
+      <>
-      {!verify ? (
-        <>
           <div className="flex flex-col ">
-            {/* <h1 className="text-4xl text-white">Create new account</h1> */}
             <h1 className="text-4xl text-black">{t("auth.sign_up")}</h1>
-            {/* <p className="mt-4 text-sm text-md text-white/50">
-              Sign up to Unkey or?
-              <Link href="/auth/sign-in" className="ml-2 text-white hover:underline">
-                Sign in
-              </Link>
-            </p> */}
           </div>
 
           <div className="grid gap-10 mt-4">
@@ -52,26 +43,8 @@ export default function AuthenticationPage() {
 
             />
           </div>
-
-          <OAuthSignUp />
-          {/* <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <span className="w-full border-t border-black/20" />
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-4 bg-white text-black/50">OR</span>
-            </div>
-          </div> */}
         </>
-      ) : (
+
-        <FadeIn>
-          <EmailCode
-            setError={(e: string) => setError(e)}
-            emailValue={email}
-            passwordValue={password}
-          />
-        </FadeIn>
-      )}
     </div>
   );
 }

apps/blogai/app/[locale]/auth/sign-up/[[...sign-up]]/page_with_email_verify.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { FadeIn } from "@/components/landing/fade-in";
+import * as React from "react";
+import { ErrorBanner } from "../../banners";
+import { EmailCode } from "../email-code";
+import { EmailSignUp } from "../email-signup";
+import { MixSignUp } from "../mix-signup";
+import { OAuthSignUp } from "../oauth-signup";
+
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+
+export default function AuthenticationPage() {
+  const [error, setError] = React.useState<string | null>(null);
+  const [verify, setVerify] = React.useState(false);
+
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col justify-center space-y-6 ">
+      {error ? <ErrorBanner>{error}</ErrorBanner> : null}
+
+      {!verify ? (
+        <>
+          <div className="flex flex-col ">
+            {/* <h1 className="text-4xl text-white">Create new account</h1> */}
+            <h1 className="text-4xl text-black">{t("auth.sign_up")}</h1>
+            {/* <p className="mt-4 text-sm text-md text-white/50">
+              Sign up to Unkey or?
+              <Link href="/auth/sign-in" className="ml-2 text-white hover:underline">
+                Sign in
+              </Link>
+            </p> */}
+          </div>
+
+          <div className="grid gap-10 mt-4">
+            <div className="relative">
+
+            </div>
+            <MixSignUp
+              setError={setError}
+              setVerification={setVerify}
+
+              email={setEmail}
+              password={setPassword}
+              emailValue={email}
+              passwordValue={password}
+
+            />
+          </div>
+
+          <OAuthSignUp />
+          {/* <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t border-black/20" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-white text-black/50">OR</span>
+            </div>
+          </div> */}
+        </>
+      ) : (
+        <FadeIn>
+          <EmailCode
+            setError={(e: string) => setError(e)}
+            emailValue={email}
+            passwordValue={password}
+          />
+        </FadeIn>
+      )}
+    </div>
+  );
+}

apps/blogai/app/[locale]/auth/sign-up/email-code.tsx

@@ -64,6 +64,7 @@ export const EmailCode: React.FC<Props> = ({ setError, emailValue, passwordValue
     });
   };
 
+  
   const resendCode = async () => {
     console.log("resendCode", emailValue)
     try {
@@ -93,9 +94,7 @@ export const EmailCode: React.FC<Props> = ({ setError, emailValue, passwordValue
       console.error(error);
     }
   };
-
   const [otp, setOtp] = React.useState("");
-
   return (
     <div className="flex flex-col max-w-sm mx-auto text-left">
       <h1 className="text-4xl text-transparent bg-clip-text bg-gradient-to-r from-black to-black mb-10">