MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: register page and register success page

Browse Source
This commit is contained in:
boboiazumi
2025-04-07 11:36:44 +07:00
parent c70e5706bc
commit 1e391a2932
3 changed files with 72 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dimentorin/src/app/auth/register/page.tsx
+27 -2
View File
@@ -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>