dyzulk/nihonbuzz-academy
1
0
Fork 0
mirror of https://github.com/nihonbuzz/nihonbuzz-academy.git synced 2026-01-26 05:25:37 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize auth frontend with premium glassmorphism and AuthLayout

Browse Source
This commit is contained in:
Nihonbuzz
2026-01-23 19:39:21 +07:00
parent 69d187be66
commit 762746859c
3 changed files with 247 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/js/Layouts/AuthLayout.tsx Normal file
View File

@@ -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 (
<ThemeProvider defaultTheme="dark" storageKey="nihonbuzz-theme">
<div className="min-h-screen bg-background relative overflow-hidden flex items-center justify-center p-4">
{/* Background Decorations - Pure CSS */}
<div className="absolute inset-0 z-0">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-nihonbuzz-red/5 rounded-full blur-[100px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-nihonbuzz-red/10 rounded-full blur-[100px]" />
{/* Minimalist Japanese Pattern Overlay (CSS-based) */}
<div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
style={{
backgroundImage: `radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0)`,
backgroundSize: '40px 40px'
}}
/>
</div>
<div className="w-full max-w-[440px] z-10 space-y-8 animate-in fade-in zoom-in duration-700">
<div className="flex flex-col items-center text-center space-y-2">
<Link href="/" className="mb-4">
<div className="w-16 h-16 bg-nihonbuzz-red rounded-[2rem] flex items-center justify-center shadow-2xl shadow-nihonbuzz-red/20 rotate-12 hover:rotate-0 transition-transform duration-500">
<span className="text-white font-black text-2xl tracking-tighter">NB</span>
</div>
</Link>
<h2 className="text-sm font-black text-nihonbuzz-red uppercase tracking-[0.3em]">LPK NihonBuzz</h2>
<p className="text-xs text-muted-foreground font-medium uppercase tracking-widest">Kurasu Academy Digital Platform</p>
</div>
{children}
<div className="text-center">
<p className="text-[10px] text-muted-foreground/50 font-bold uppercase tracking-widest">
&copy; {new Date().getFullYear()} LPK NihonBuzz Academy. All Rights Reserved.
</p>
</div>
</div>
</div>
</ThemeProvider>
);
}