From 1e391a2932028ca12bc57b3fa1fc9d84f2176c9a Mon Sep 17 00:00:00 2001
From: boboiazumi <boboi0704@gmail.com>
Date: Mon, 7 Apr 2025 11:36:44 +0700
Subject: [PATCH] feat: register page and register success page

---
 .../dimentorin/src/app/auth/register/page.tsx | 29 ++++++++++++++--
 .../src/app/auth/register/success/layout.tsx  | 12 +++++++
 .../src/app/auth/register/success/page.tsx    | 33 +++++++++++++++++++
 3 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 apps/dimentorin/src/app/auth/register/success/layout.tsx
 create mode 100644 apps/dimentorin/src/app/auth/register/success/page.tsx

diff --git a/apps/dimentorin/src/app/auth/register/page.tsx b/apps/dimentorin/src/app/auth/register/page.tsx
index 45b335c..a58d433 100644
--- a/apps/dimentorin/src/app/auth/register/page.tsx
+++ b/apps/dimentorin/src/app/auth/register/page.tsx
@@ -1,14 +1,39 @@
 import { FC, ReactElement } from 'react';
 import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
       <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
         <RegisterResetBanner />
-        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
-          <div className='w-[404px]'>
+        <div className='border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center'>
+          <div className='w-[704px]'>
+            <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Register</h3>
+            <h5 className='text-primary-500 font-medium'>Yosha~! Saatnya Bergabung dengan Dimentorin</h5>
+            <div className='grid grid-flow-row-dense my-7 grid-cols-2 gap-2'>
+              <InputForm label='First Name' size='lg' placeholder='Nama Depan'/>
+              <InputForm label='Last Name' size='lg' className='w-full' placeholder='Nama Belakang'/>
+              <InputForm label='Email' size='lg' placeholder='Contoh : yourname@mail.com'/>
+              <div className='flex gap-2'>
+                <div className='flex flex-col gap-2'>
+                  <h4 className='font-medium'>OTP Code</h4>
+                  <Input widthform='custom' className='w-full' size='lg' placeholder='Kode OTP'/>
+                </div>
+                <div className='flex flex-col'>
+                  <Button size='sm' className='mt-[30px]'>Kirim OTP</Button>
+                </div>
+              </div>
+            </div>
+            <InputForm label='Password' className='w-full' size='lg' type='password' placeholder='Buat password sekeren jurus ultimate-mu!'/>
+            <h6 className='text-sm text-gray-500 mt-1'>"Senpai~! Pastikan password-mu sekuat pertahanan kastil!"</h6>
+            <h6 className='text-sm text-gray-500 mt-2'>Tips membuat password yang OP:</h6>
+            <h6 className='text-sm text-gray-500'>- Minimal 8 karakter (semakin panjang, semakin power-up! <span role='img' aria-label='emoji'>⚡</span>)</h6>
+            <h6 className='text-sm text-gray-500'>- Campur huruf besar, kecil, angka, dan simbol untuk kombinasi ultimate!<span role='img' aria-label='emoji'>🔥</span></h6>
+            <h6 className='text-sm text-gray-500 mb-2'>- Jangan pakai password yang gampang ditebak, nanti ketahuan musuh!<span role='img' aria-label='emoji'>🚨</span></h6>
+            <InputForm label='Repeat Password' className='w-full' size='lg' type='password' placeholder='Ulangi password-mu, Senpai~!'/>
+            <Button className='w-full mt-2'>Linked Start !!!</Button>
           </div> 
         </div>
       </div>
diff --git a/apps/dimentorin/src/app/auth/register/success/layout.tsx b/apps/dimentorin/src/app/auth/register/success/layout.tsx
new file mode 100644
index 0000000..2d8a74d
--- /dev/null
+++ b/apps/dimentorin/src/app/auth/register/success/layout.tsx
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register/success/page.tsx b/apps/dimentorin/src/app/auth/register/success/page.tsx
new file mode 100644
index 0000000..a2d1652
--- /dev/null
+++ b/apps/dimentorin/src/app/auth/register/success/page.tsx
@@ -0,0 +1,33 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+import { ArrowRightOutlined } from '@ant-design/icons';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50'>
+          <div className='w-[704px] flex flex-col justify-center items-center'>
+            <h2 className='text-4xl text-primary-500 font-semibold'>Register Successfull</h2>
+            <h4 className='mt-3 text-primary-500 font-medium text-xl'>Yosha~! Saatnya Bergabung dengan Dimentorin!</h4>
+            <svg width="198" height="198" viewBox="0 0 198 198" fill="none" xmlns="http://www.w3.org/2000/svg" className='mt-10'>
+              <circle cx="99" cy="99" r="99" fill="#BCF8B0"/>
+              <rect x="31.1152" y="32.9141" width="133.971" height="133.971" rx="66.9857" fill="#35BA43"/>
+              <path d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z" fill="#E0FBD8"/>
+            </svg>
+            <h4 className='mt-10 text-primary-500 font-medium text-xl'>Kamu akan memasuki isekai dalam 10 dtk</h4>
+            <Button className='gap-3 mt-10' size='lg'>
+              Masuk Isekai
+              <ArrowRightOutlined />
+            </Button>
+          </div> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
\ No newline at end of file