Auto-deploy: 2026-01-13 13:40:50 | 3 arquivo(s) alterado(s)
This commit is contained in:
parent
4c81fc79d0
commit
357e07063c
|
|
@ -52,28 +52,28 @@ export const WorkspaceLayout = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="workspace-theme flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato">
|
||||
<div className="workspace-theme flex h-screen w-full bg-white dark:bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato">
|
||||
|
||||
{/* Sidebar REPRODUCED (Design Angular de Alta Fidelidade) */}
|
||||
<WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 flex flex-col relative overflow-hidden bg-[#0a0a0a]">
|
||||
<main className="flex-1 flex flex-col relative overflow-hidden bg-white dark:bg-[var(--workspace-sec-5-dark)]">
|
||||
|
||||
{/* Dynamic Background Effect */}
|
||||
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#22bb6c]/5 blur-[120px] rounded-full -mr-64 -mt-64 pointer-events-none z-0" />
|
||||
|
||||
{/* Header Superior Premium */}
|
||||
<header className="h-20 bg-zinc-950/80 backdrop-blur-xl border-b border-white/5 flex items-center justify-between px-10 z-30">
|
||||
<header className="h-20 bg-white/80 dark:bg-[var(--workspace-sec-5-dark)]/80 backdrop-blur-xl border-b border-slate-200 dark:border-white/5 flex items-center justify-between px-10 z-30">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* breadcrumb conceitual */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center border border-white/5">
|
||||
<div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-zinc-900 flex items-center justify-center border border-slate-200 dark:border-white/5">
|
||||
<Zap size={16} className="text-[#f1c232]" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
|
||||
<h2 className="text-sm font-black text-white uppercase tracking-[0.1em] leading-none">
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
|
||||
<h2 className="text-sm font-black text-slate-600 dark:text-white uppercase tracking-[0.1em] leading-none">
|
||||
Workspace / <span className="text-[#f1c232]">{activeScreen}</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -82,29 +82,29 @@ export const WorkspaceLayout = () => {
|
|||
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Search Global Minimalista */}
|
||||
<div className="hidden lg:flex items-center bg-white/[0.03] px-4 py-2.5 rounded-xl border border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
|
||||
<Search size={16} className="text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
|
||||
<div className="hidden lg:flex items-center bg-slate-50 dark:bg-white/[0.03] px-4 py-2.5 rounded-xl border border-slate-200 dark:border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
|
||||
<Search size={16} className="text-slate-400 dark:text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Comando rápido (ctrl + k)"
|
||||
className="bg-transparent border-none text-xs focus:ring-0 w-full text-zinc-300 placeholder:text-zinc-600 ml-2"
|
||||
className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-zinc-300 placeholder:text-slate-400 dark:placeholder:text-zinc-600 ml-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="relative p-2.5 hover:bg-white/5 rounded-xl transition-colors text-zinc-500 hover:text-[#f1c232]">
|
||||
<button className="relative p-2.5 bg-slate-50 dark:bg-zinc-900/50 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 dark:text-zinc-500 hover:text-[#f1c232]">
|
||||
<Bell size={20} />
|
||||
<span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-zinc-950 shadow-[0_0_10px_#f1c232]" />
|
||||
<span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-white dark:border-zinc-950 shadow-[0_0_10px_#f1c232]" />
|
||||
</button>
|
||||
|
||||
<div className="h-8 w-[1px] bg-white/5" />
|
||||
<div className="h-8 w-[1px] bg-slate-200 dark:bg-white/5" />
|
||||
|
||||
<div className="flex items-center gap-3 pl-2">
|
||||
<div className="flex flex-col items-end hidden md:flex">
|
||||
<span className="text-xs font-black text-white tracking-tight">Daivid Alves</span>
|
||||
<span className="text-xs font-black text-slate-700 dark:text-white tracking-tight">Daivid Alves</span>
|
||||
<span className="text-[9px] font-bold text-[#22bb6c] uppercase tracking-widest">Master Admin</span>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-zinc-800 to-zinc-950 border border-white/10 flex items-center justify-center text-sm font-black text-white shadow-xl">
|
||||
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-zinc-800 dark:to-zinc-950 border border-slate-200 dark:border-white/10 flex items-center justify-center text-sm font-black text-slate-700 dark:text-white shadow-xl">
|
||||
DA
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,14 +116,14 @@ export const WorkspaceLayout = () => {
|
|||
<div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
|
||||
<div className="max-w-[1600px] mx-auto p-8 animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
||||
{/* Efeito de Vidro no Container de Conteúdo */}
|
||||
<div className="bg-zinc-900/40 rounded-[32px] border border-white/5 backdrop-blur-sm min-h-full">
|
||||
<div className="bg-white/50 dark:bg-zinc-900/40 rounded-[32px] border border-slate-200 dark:border-white/5 backdrop-blur-sm min-h-full">
|
||||
{renderScreen()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Minimalista */}
|
||||
<footer className="h-10 border-t border-white/5 bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
|
||||
<footer className="h-10 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-500 dark:text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>© 2026 iTGUYS Core Systems</span>
|
||||
<span className="text-[#22bb6c]/40">•</span>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
|||
|
||||
return (
|
||||
<aside
|
||||
className={cn("sb-container relative h-full top-auto left-auto border-none rounded-none bg-zinc-950", isCollapsed && "collapsed")}
|
||||
className={cn("sb-container relative h-full top-auto left-auto border-none rounded-none bg-white dark:bg-[var(--workspace-sec-5-dark)]", isCollapsed && "collapsed")}
|
||||
style={{ boxShadow: '10px 0 30px rgba(0,0,0,0.5)' }}
|
||||
>
|
||||
{/* Subtle Top Glow (Angular Style) */}
|
||||
|
|
@ -146,7 +146,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
|||
|
||||
{/* Header com Toggle */}
|
||||
<div className="sb-toggle-container">
|
||||
<button className="sb-toggle-btn" onClick={toggleSidebar}>
|
||||
<button className="sb-toggle-btn bg-slate-100 dark:bg-zinc-800 border-slate-200 dark:border-zinc-700" onClick={toggleSidebar}>
|
||||
{isCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -171,12 +171,12 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
|||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
className="sb-search-input"
|
||||
className="sb-search-input bg-slate-50 dark:bg-white/[0.05] border-slate-200 dark:border-white/10"
|
||||
placeholder="Buscar..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Search size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-600" />
|
||||
<Search size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-zinc-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -188,7 +188,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
|||
</nav>
|
||||
|
||||
{/* Footer / User Profile */}
|
||||
<footer className="sb-footer border-t border-white/5 bg-zinc-900/50">
|
||||
<footer className="sb-footer border-t border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-zinc-900/50">
|
||||
<div className={cn("sb-brand", isCollapsed && "justify-center mb-0")}>
|
||||
<div className="sb-brand-logo bg-[#f1c232]">
|
||||
<Zap size={20} className="text-[#1a1a1a]" />
|
||||
|
|
@ -196,22 +196,22 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
|||
{!isCollapsed && (
|
||||
<div className="sb-brand-info">
|
||||
<span className="sb-brand-name" style={{ color: '#f1c232' }}>iTGUYS</span>
|
||||
<span className="sb-app-name text-zinc-500">Master Core v4</span>
|
||||
<span className="sb-app-name text-slate-400 dark:text-zinc-500">Master Core v4</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && (
|
||||
<div className="sb-legal border-zinc-800">
|
||||
<div className="sb-legal border-slate-200 dark:border-zinc-800">
|
||||
<div className="sb-legal-item">
|
||||
<ShieldCheck size={12} className="text-[#f1c232]" />
|
||||
<span className="text-zinc-600 font-bold uppercase tracking-tighter">Conexão Segura</span>
|
||||
<span className="text-slate-400 dark:text-zinc-600 font-bold uppercase tracking-tighter">Conexão Segura</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={cn("sb-version text-zinc-700", isCollapsed && "justify-center")}>
|
||||
<Lock size={12} className="text-zinc-800" />
|
||||
<div className={cn("sb-version text-slate-300 dark:text-zinc-700", isCollapsed && "justify-center")}>
|
||||
<Lock size={12} className="text-slate-300 dark:text-zinc-800" />
|
||||
{!isCollapsed && <span>Licença Corporativa</span>}
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@ export const LoginView = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato select-none text-white">
|
||||
<div className="workspace-theme flex h-screen w-full bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato select-none text-white">
|
||||
{/* Left Panel - Brand & Identity */}
|
||||
<div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[#050505]">
|
||||
<div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[var(--workspace-sec-5-dark)]">
|
||||
{/* Background Effects */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#003153]/40 to-transparent mix-blend-overlay" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue