311 lines
21 KiB
JavaScript
311 lines
21 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Truck, Users, Building2, ChevronRight, Zap, FileSpreadsheet } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
export const PortalHome = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#050914] flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
|
{/* Background Animated Elements */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px] animate-pulse" />
|
|
<div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-emerald-600/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150" />
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="max-w-6xl w-full text-center space-y-12 relative z-10"
|
|
>
|
|
<div className="space-y-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs font-medium backdrop-blur-md mb-4"
|
|
>
|
|
<Zap size={14} className="text-yellow-400 fill-yellow-400" />
|
|
<span>Ecossistema Corporativo Inteligente</span>
|
|
</motion.div>
|
|
|
|
<div className="flex flex-col items-center gap-6">
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-20 h-20 bg-blue-600 rounded-3xl flex items-center justify-center shadow-2xl shadow-blue-600/20"
|
|
>
|
|
<Zap size={40} className="text-white" strokeWidth={2.5} />
|
|
</motion.div>
|
|
|
|
<h1 className="text-5xl md:text-7xl font-black tracking-tight text-white flex flex-col items-center">
|
|
Pralog <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-500">Sistemas</span>
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed">
|
|
Gestão estratégica unificada: frotas, capital humano e inteligência financeira em uma única experiência premium.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
|
|
{/* Workspace Financeiro Premium Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-[#22c0a3]/30 bg-[#22c0a3]/[0.03] hover:bg-[#22c0a3]/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(34,192,163,0.1)]"
|
|
onClick={() => navigate('/plataforma/workspace')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#22bb6c] via-[#22c0a3] to-[#26b1c7]" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-[#22c0a3] text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-[#22c0a3]/20 border border-white/10">NOVO AMBIENTE</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(34,192,163,0.4)] relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20" />
|
|
<Zap size={32} className="relative z-10" />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-[#22c0a3] transition-colors">Workspace Financeiro</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Experiência modernizada com gestão de entradas, saídas e conciliação bancária inteligente.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-[#22c0a3] hover:bg-[#22bb6c] text-white font-bold shadow-lg shadow-[#22c0a3]/20 border-none group">
|
|
Acessar Workspace <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
{/* Fleet Management Card (Legacy/V1) */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-white/5 bg-white/[0.02] hover:bg-white/[0.04] backdrop-blur-xl overflow-hidden relative h-full"
|
|
onClick={() => navigate('/plataforma/fleet/login')}
|
|
>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-blue-500/10 text-blue-400 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform ring-1 ring-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.15)]">
|
|
<Truck size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">Frota V1</h2>
|
|
<p className="text-slate-500 text-sm leading-relaxed">
|
|
Sistema central de logística e monitoramento operacional legado.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-white/5 hover:bg-white/10 text-white border-white/10 font-bold group" variant="outline">
|
|
Acessar <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Fleet V2 Premium Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-blue-500/30 bg-blue-500/[0.03] hover:bg-blue-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(59,130,246,0.1)]"
|
|
onClick={() => navigate('/plataforma/fleet-v2')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600" />
|
|
<div className="absolute top-4 right-4 focus-within:">
|
|
<span className="bg-blue-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-blue-500/20 border border-blue-400/30">V2 PRÊMIO</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-blue-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(59,130,246,0.4)]">
|
|
<Truck size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">Pralog Frota</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Telemetria avançada, Dashboards 2.0 e BI integrado em tempo real.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold shadow-lg shadow-blue-600/20 border-none group">
|
|
Iniciar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* HR Management Premium Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-emerald-500/30 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,185,129,0.1)]"
|
|
onClick={() => navigate('/plataforma/rh/login')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-600 via-teal-400 to-emerald-600" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">V2 PRÊMIO</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
|
|
<Users size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">Integra RH</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Gestão de Colaboradores, Ponto Eletrônico e Departamento Pessoal Inteligente.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
|
|
Acessar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Financeiro V2 Premium Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-emerald-500/30 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,185,129,0.1)]"
|
|
onClick={() => navigate('/plataforma/financeiro-v2')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-600 via-emerald-400 to-emerald-600" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">V2 PRÊMIO</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
|
|
<Building2 size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors text-nowrap">Gestão Financeira</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Fluxo de caixa inteligente, auditoria avançada e controle total.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
|
|
Iniciar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-yellow-500/30 bg-yellow-500/[0.03] hover:bg-yellow-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(234,179,8,0.1)]"
|
|
onClick={() => navigate('/plataforma/prafrot/login')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-600 via-yellow-400 to-yellow-600" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-yellow-500 text-[#1c1c1c] text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-yellow-500/20 border border-yellow-400/30">MONITORAMENTO</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-yellow-500 text-[#1c1c1c] rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(234,179,8,0.4)]">
|
|
<Truck size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-yellow-400 transition-colors text-nowrap">Prafrot Monitor</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Gestão de Frotas, motoristas e manutenção com visualização em tempo real.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-yellow-500 hover:bg-yellow-400 text-[#1c1c1c] font-bold shadow-lg shadow-yellow-500/20 border-none group">
|
|
Acessar Ambiente <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* CNAB 240 Premium Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-emerald-400/30 bg-emerald-400/[0.03] hover:bg-emerald-400/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(52,211,153,0.1)]"
|
|
onClick={() => navigate('/plataforma/financeiro-cnab')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 via-emerald-400 to-emerald-500" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">BETA</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
|
|
<FileSpreadsheet size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors text-nowrap">Financeiro CNAB</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Geração de remessas CNAB 240, gestão de favorecidos e dashboards.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
|
|
Entrar <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* GR - Gestão de Risco Card */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-[#105018]/30 bg-[#105018]/[0.05] hover:bg-[#105018]/[0.1] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,80,24,0.1)]"
|
|
onClick={() => navigate('/plataforma/gr/login')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#285d2a] via-[#105018] to-[#285d2a]" />
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-[#105018] text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-[#105018]/20 border border-[#285d2a]/30">COCKPIT</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-[#105018] text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,80,24,0.4)]">
|
|
<Building2 size={32} />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-[#285d2a] transition-colors text-nowrap">Cockpit GR</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Gestão de risco de motoristas e gerenciamento contratual.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-[#105018] hover:bg-[#285d2a] text-white font-bold shadow-lg shadow-[#105018]/20 border-none group">
|
|
Acessar Cockpit <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* CNAB Test Direct Link (Temporary/Local) */}
|
|
<motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
|
|
<Card
|
|
className="group cursor-pointer transition-all border border-rose-500/30 bg-rose-500/[0.03] hover:bg-rose-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(244,63,94,0.1)]"
|
|
onClick={() => navigate('/plataforma/cnab-login')}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-rose-600 via-rose-400 to-rose-600" />
|
|
<div className="absolute top-4 right-4 focus-within:">
|
|
<span className="bg-rose-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-rose-500/20 border border-rose-400/30">ACESSO RÁPIDO</span>
|
|
</div>
|
|
<CardContent className="p-8 space-y-8 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-rose-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(244,63,94,0.4)] relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20" />
|
|
<FileSpreadsheet size={32} className="relative z-10" />
|
|
</div>
|
|
<div className="space-y-3 flex-grow">
|
|
<h2 className="text-xl font-bold text-white group-hover:text-rose-400 transition-colors text-nowrap">Login Direto CNAB</h2>
|
|
<p className="text-slate-400 text-sm leading-relaxed font-medium">
|
|
Ambiente de homologação direta para validação de fluxos financeiros.
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-rose-600 hover:bg-rose-500 text-white font-bold shadow-lg shadow-rose-600/20 border-none group">
|
|
Entrar via Homologação <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 0.4 }}
|
|
transition={{ delay: 1 }}
|
|
className="text-[10px] text-white pt-8 uppercase tracking-[0.3em] font-medium"
|
|
>
|
|
© 2026 PRALOG • TECNOLOGIA PARA LOGÍSTICA DE ALTO IMPACTO
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|