diff --git a/resources/js/Layouts/AuthLayout.tsx b/resources/js/Layouts/AuthLayout.tsx new file mode 100644 index 0000000..8d24db1 --- /dev/null +++ b/resources/js/Layouts/AuthLayout.tsx @@ -0,0 +1,45 @@ +import { ThemeProvider } from "@/Components/ThemeProvider"; +import { Link } from "@inertiajs/react"; +import React from "react"; + +export default function AuthLayout({ children }: { children: React.ReactNode }) { + return ( + +
+ {/* Background Decorations - Pure CSS */} +
+
+
+ + {/* Minimalist Japanese Pattern Overlay (CSS-based) */} +
+
+ +
+
+ +
+ NB +
+ +

LPK NihonBuzz

+

Kurasu Academy Digital Platform

+
+ + {children} + +
+

+ © {new Date().getFullYear()} LPK NihonBuzz Academy. All Rights Reserved. +

+
+
+
+ + ); +} diff --git a/resources/js/Pages/Auth/Login.tsx b/resources/js/Pages/Auth/Login.tsx index f6cdc13..3b729af 100644 --- a/resources/js/Pages/Auth/Login.tsx +++ b/resources/js/Pages/Auth/Login.tsx @@ -1,4 +1,4 @@ -import GuestLayout from '@/Layouts/GuestLayout'; +import AuthLayout from '@/Layouts/AuthLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { FormEventHandler } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; @@ -7,6 +7,7 @@ import { Input } from '@/Components/ui/input'; import { Button } from '@/Components/ui/button'; import { Checkbox } from '@/Components/ui/checkbox'; import InputError from '@/Components/InputError'; +import { LogIn, ArrowRight } from 'lucide-react'; export default function Login({ status, @@ -30,133 +31,136 @@ export default function Login({ }; return ( - - + + -
- - - Selamat Datang Kembali - - Masuk ke akun NihonBuzz Academy anda - - - - {status && ( -
- {status} -
- )} + + + + Okaeri! 👋 + + + Masuk ke portal siswa LPK NihonBuzz + + + + {status && ( +
+ {status} +
+ )} -
-
- - setData('email', e.target.value)} - /> - + +
+ + setData('email', e.target.value)} + /> + +
+ +
+
+ + {canResetPassword && ( + + Lupa sandi? + + )}
-
-
- - {canResetPassword && ( - - Lupa password? - - )} -
+ setData('password', e.target.value)} + /> + +
- setData('password', e.target.value)} - /> - -
+
+ setData('remember', checked as boolean)} + className="rounded-md border-white/30" + /> + +
-
- setData('remember', checked as boolean)} - /> - -
+
+ +
-
- +
+
+
+
+ Atau gunakan +
+
-
-
- -
-
- Atau masuk dengan -
-
- -
- -
- -
- Belum punya akun?{' '} +
+ +
+ +
+

+ Belum menjadi peserta didik?{' '} - Daftar Gratis + Daftar Sekarang -

- - - -
- +

+
+ + + + ); } diff --git a/resources/js/Pages/Auth/Register.tsx b/resources/js/Pages/Auth/Register.tsx index 0053dec..ff02877 100644 --- a/resources/js/Pages/Auth/Register.tsx +++ b/resources/js/Pages/Auth/Register.tsx @@ -1,11 +1,12 @@ import InputError from '@/Components/InputError'; -import GuestLayout from '@/Layouts/GuestLayout'; +import AuthLayout from '@/Layouts/AuthLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { FormEventHandler } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { Label } from '@/Components/ui/label'; import { Input } from '@/Components/ui/input'; import { Button } from '@/Components/ui/button'; +import { UserPlus, ArrowLeft } from 'lucide-react'; export default function Register() { const { data, setData, post, processing, errors, reset } = useForm({ @@ -24,101 +25,103 @@ export default function Register() { }; return ( - - + + -
- - - Buat Akun Baru - - Mulai petualangan belajarmu hari ini - - - -
+ + + + Hajimemashou! ✨ + + + Pendaftaran Peserta Didik LPK NihonBuzz + + + + +
+ + setData('name', e.target.value)} + required + /> + +
+ +
+ + setData('email', e.target.value)} + required + /> + +
+ +
- + setData('name', e.target.value)} + id="password" + type="password" + name="password" + value={data.password} + className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all" + autoComplete="new-password" + onChange={(e) => setData('password', e.target.value)} required /> - +
- + setData('email', e.target.value)} + id="password_confirmation" + type="password" + name="password_confirmation" + value={data.password_confirmation} + className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all" + autoComplete="new-password" + onChange={(e) => setData('password_confirmation', e.target.value)} required /> - +
+
-
-
- - setData('password', e.target.value)} - required - /> - -
+
+ +
-
- - setData('password_confirmation', e.target.value)} - required - /> - -
-
- -
- -
- -
- Sudah punya akun?{' '} +
+

+ Sudah memiliki akun LPK?{' '} - Masuk Saja + Kembali Masuk -

- - - -
- +

+
+ + + + ); }