feat: inisialisasi project kit v2
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
import { Link, Head, usePage } from '@inertiajs/react';
|
||||
import { PageProps } from '@/types';
|
||||
import React from 'react';
|
||||
|
||||
export default function Welcome({ auth }: PageProps) {
|
||||
const { system_settings } = usePage<PageProps>().props as any;
|
||||
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 bg-[#E3EBE8] text-[#3D4E4B] selection:bg-[#D4A017] selection:text-white font-sans">
|
||||
<Head title={`${appName} — Premium Enterprise Identity`} />
|
||||
|
||||
{/* Navigation - Flat & Professional */}
|
||||
<nav className="fixed w-full z-50 px-6 py-6 anim-down">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between bg-white/80 backdrop-blur-md rounded-[2rem] px-8 py-4 border border-white/20 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center text-xl font-bold overflow-hidden border border-gray-100 ${!appLogo ? 'bg-[#3D4E4B] text-[#D4A017]' : 'bg-white'}`}>
|
||||
{appLogo ? <img src={appLogo} className="w-full h-full object-contain" /> : appLogoText}
|
||||
</div>
|
||||
<span className="text-sm font-bold tracking-tight">{appName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
{['Solutions', 'Ecosystem', 'Xxx', 'Governance', 'Intelligence'].map(item => (
|
||||
<Link
|
||||
key={item}
|
||||
href={item === 'Xxx' ? route('xxx') : '#'}
|
||||
className="text-sm font-bold tracking-tight hover:text-[#D4A017] transition-colors"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="h-6 w-[1px] bg-gray-100 mx-2" />
|
||||
{auth.user ? (
|
||||
<Link href={route('dashboard')} className="px-6 py-2.5 bg-[#3D4E4B] text-white text-sm font-bold tracking-tight rounded-xl hover:bg-[#2D3A38] transition-all">Command Center</Link>
|
||||
) : (
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href={route('login')} className="text-sm font-bold tracking-tight hover:text-[#D4A017] transition-colors">Access</Link>
|
||||
<Link href={route('register')} className="px-6 py-2.5 bg-[#D4A017] text-white text-sm font-bold tracking-tight rounded-xl hover:bg-[#B88B14] transition-all">Initialize Identity</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-40 pb-20 px-6 overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="relative z-10 anim-left">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white rounded-full border border-gray-100 mb-8">
|
||||
<span className="flex h-2 w-2 rounded-full bg-[#D4A017]" />
|
||||
<span className="text-xs font-bold tracking-tight text-[#D4A017]">Enterprise V4.0 Live</span>
|
||||
</div>
|
||||
<h1 className="text-6xl lg:text-8xl font-bold text-[#3D4E4B] tracking-tighter leading-[0.9] mb-8">
|
||||
Precision <br />
|
||||
<span className="text-transparent" style={{ WebkitTextStroke: '1px #3D4E4B' }}>Identity</span> <br />
|
||||
Architecture.
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 font-medium max-w-md leading-relaxed mb-10">
|
||||
The ultimate governance framework for airline-grade digital ecosystems. Secure, modular, and uncompromisingly professional.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-8">
|
||||
<Link
|
||||
href={auth.user ? route('dashboard') : route('register')}
|
||||
className="px-10 py-5 bg-[#3D4E4B] text-white text-sm font-bold tracking-tight rounded-2xl hover:bg-[#2D3A38] transition-all shadow-2xl shadow-[#3D4E4B]/20 hover:shadow-[#D4A017]/10 flex items-center gap-3 group border border-[#3D4E4B]"
|
||||
>
|
||||
{auth.user ? 'Access Command' : 'Initialize Session'}
|
||||
<svg className="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</Link>
|
||||
<div className="flex items-center">
|
||||
<div className="flex -space-x-3">
|
||||
{[1,2,3].map(i => (
|
||||
<div key={i} className="w-10 h-10 rounded-full border-4 border-[#E3EBE8] bg-[#3D4E4B] flex items-center justify-center text-sm font-bold text-white ring-1 ring-white/10">
|
||||
{String.fromCharCode(64 + i)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pl-6 flex flex-col justify-center">
|
||||
<span className="text-sm font-bold tracking-tight text-[#3D4E4B]">2,400+ Entities</span>
|
||||
<span className="text-sm font-semibold tracking-tight text-gray-400 mt-0.5">Authenticated Weekly</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative anim-right">
|
||||
<div className="aspect-square bg-white rounded-[3rem] border border-gray-100 shadow-2xl relative overflow-hidden p-8 group">
|
||||
<div className="absolute inset-0 bg-[#3D4E4B] opacity-0 group-hover:opacity-[0.02] transition-opacity" />
|
||||
<div className="w-full h-full border-2 border-dashed border-gray-100 rounded-[2rem] flex flex-col items-center justify-center relative">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-[#D4A017]/10 rounded-full blur-[80px]" />
|
||||
<div className="text-[120px] font-bold text-[#3D4E4B] opacity-5 select-none tracking-tight">SYSTEM</div>
|
||||
<div className="absolute inset-x-8 bottom-8 h-32 bg-gray-50 rounded-2xl border border-gray-100 p-6 flex items-end justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="w-24 h-2 bg-gray-200 rounded-full" />
|
||||
<div className="w-16 h-2 bg-gray-200 rounded-full opacity-50" />
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-[#3D4E4B] rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Grid */}
|
||||
<section className="py-20 px-6 bg-white border-y border-gray-100">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-20 anim-up">
|
||||
<h2 className="text-sm font-bold tracking-tight text-[#D4A017] mb-4">Core Ecosystem</h2>
|
||||
<h3 className="text-4xl font-bold text-[#3D4E4B] tracking-tight">Governance Intelligence.</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ t: 'Secure Matrix', d: 'Advanced role-based access control with granular permission governance.', c: '#3D4E4B' },
|
||||
{ t: 'Live Telemetry', d: 'Real-time activity monitoring and audit logging for complete transparency.', c: '#D4A017' },
|
||||
{ t: 'Global Identity', d: 'Multi-provider authentication and identity verification systems.', c: '#21A59F' }
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-10 rounded-[2.5rem] bg-[#E3EBE8]/30 border border-gray-100 hover:bg-white hover:shadow-xl hover:-translate-y-2 transition-all duration-500 group anim-up" style={{ animationDelay: `${i * 0.1}s` }}>
|
||||
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center text-white mb-8 group-hover:scale-110 transition-transform`} style={{ backgroundColor: f.c }}>
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||||
</div>
|
||||
<h4 className="text-sm font-bold tracking-tight text-[#3D4E4B] mb-4">{f.t}</h4>
|
||||
<p className="text-sm font-medium text-gray-400 leading-relaxed tracking-tight">{f.d}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-12 px-6 border-t border-gray-100">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-3 anim-left">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold border border-gray-100 ${!appLogo ? 'bg-[#3D4E4B] text-[#D4A017]' : 'bg-white'}`}>
|
||||
{appLogo ? <img src={appLogo} className="w-full h-full object-contain" /> : appLogoText}
|
||||
</div>
|
||||
<span className="text-sm font-bold tracking-tight">{appName} © 2024</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-8 text-xs font-bold tracking-tight text-gray-400 anim-right">
|
||||
<a href="#" className="hover:text-[#3D4E4B]">Term of Service</a>
|
||||
<a href="#" className="hover:text-[#3D4E4B]">Privacy Protocol</a>
|
||||
<a href="#" className="hover:text-[#3D4E4B]">Compliance</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user