111 lines
6.1 KiB
TypeScript
111 lines
6.1 KiB
TypeScript
import React from 'react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
|
|
export default function GuestLayout({ children }: { children: React.ReactNode }) {
|
|
const props = usePage().props as any;
|
|
const { system_settings } = props;
|
|
const appName = system_settings?.app_name || 'biiproject kit v2';
|
|
const appLogo = system_settings?.app_logo;
|
|
const appLogoText = system_settings?.app_logo_text || 'BK';
|
|
|
|
return (
|
|
<div className="min-h-screen flex font-sans">
|
|
|
|
{/* ── Left brand panel ─────────────────────────────────────────── */}
|
|
<div className="hidden lg:flex lg:w-[44%] bg-[#3D4E4B] flex-col justify-between p-14 relative overflow-hidden shrink-0">
|
|
|
|
{/* Dot-grid texture */}
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="dots" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
|
|
<circle cx="1.5" cy="1.5" r="1.5" fill="white" fillOpacity="0.07" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#dots)" />
|
|
</svg>
|
|
|
|
{/* Decorative rings */}
|
|
<div className="absolute -bottom-40 -right-40 w-[480px] h-[480px] rounded-full border border-white/[0.06] pointer-events-none" />
|
|
<div className="absolute -bottom-64 -right-64 w-[700px] h-[700px] rounded-full border border-white/[0.04] pointer-events-none" />
|
|
<div className="absolute top-[-60px] left-[-60px] w-[300px] h-[300px] rounded-full border border-white/[0.04] pointer-events-none" />
|
|
|
|
{/* Logo */}
|
|
<div className="relative z-10 anim-fade">
|
|
<Link href="/" className="inline-flex items-center gap-3 group">
|
|
<div className={`w-10 h-10 rounded-[0.75rem] flex items-center justify-center overflow-hidden text-sm font-bold text-white shrink-0 ${!appLogo ? 'bg-[#D4A017]' : 'bg-white/10'}`}>
|
|
{appLogo
|
|
? <img src={appLogo} alt={appName} className="w-full h-full object-contain" />
|
|
: appLogoText
|
|
}
|
|
</div>
|
|
<span className="text-white font-bold text-base tracking-tight">{appName}</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Main copy */}
|
|
<div className="relative z-10 anim-up" style={{ animationDelay: '0.1s' }}>
|
|
<p className="text-[#D4A017] text-xs font-bold uppercase tracking-[0.18em] mb-5">Enterprise Platform</p>
|
|
<h2 className="text-white text-[2rem] font-bold leading-[1.2] tracking-tight">
|
|
Manage your<br />organization<br />with precision.
|
|
</h2>
|
|
<p className="mt-5 text-[#E3EBE8]/45 text-sm leading-relaxed max-w-xs">
|
|
Access control, user management, and system configuration — unified in one secure interface.
|
|
</p>
|
|
|
|
{/* Feature pills */}
|
|
<div className="mt-9 flex flex-col gap-3">
|
|
{[
|
|
'Role-based access control',
|
|
'Real-time audit logs',
|
|
'Multi-level permissions',
|
|
].map((feat) => (
|
|
<div key={feat} className="flex items-center gap-3">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-[#D4A017] shrink-0" />
|
|
<span className="text-[#E3EBE8]/55 text-sm font-medium">{feat}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="relative z-10 anim-fade" style={{ animationDelay: '0.2s' }}>
|
|
<p className="text-[#E3EBE8]/25 text-xs">© {new Date().getFullYear()} {appName}. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Right form panel ─────────────────────────────────────────── */}
|
|
<div className="flex-1 flex flex-col items-center justify-center bg-white px-8 py-12 min-h-screen">
|
|
|
|
{/* Mobile-only logo */}
|
|
<div className="lg:hidden mb-10 flex items-center gap-3 anim-down">
|
|
<div className={`w-9 h-9 rounded-[0.6rem] flex items-center justify-center text-sm font-bold overflow-hidden ${!appLogo ? 'bg-[#3D4E4B] text-white' : ''}`}>
|
|
{appLogo
|
|
? <img src={appLogo} alt={appName} className="w-full h-full object-contain" />
|
|
: appLogoText
|
|
}
|
|
</div>
|
|
<span className="text-[#3D4E4B] font-bold text-base tracking-tight">{appName}</span>
|
|
</div>
|
|
|
|
{/* Form slot */}
|
|
<div className="w-full max-w-[360px]">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Back link */}
|
|
<div className="mt-10 anim-fade" style={{ animationDelay: '0.35s' }}>
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-300 hover:text-[#3D4E4B] transition-colors duration-200 tracking-tight"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|