feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -36,28 +36,38 @@ export default function Header() {
|
||||
<div className="relative group">
|
||||
<button className="flex items-center gap-1 text-zinc-600 dark:text-zinc-400 hover:text-brand-gradient transition-all">
|
||||
Soluções
|
||||
<i className="ri-arrow-down-s-line text-sm" />
|
||||
<i className="ri-arrow-down-s-line text-sm group-hover:rotate-180 transition-transform duration-300" />
|
||||
</button>
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-200 absolute left-1/2 -translate-x-1/2 top-full mt-6 w-screen max-w-6xl rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-2xl shadow-2xl p-8">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{[
|
||||
{ href: '#crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
|
||||
{ href: '#erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
|
||||
{ href: '#gestao-projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
|
||||
{ href: '#gestao-pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
|
||||
{ href: '#helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
|
||||
{ href: '#integra', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
|
||||
].map((item) => (
|
||||
<a key={item.href} href={item.href} className="flex items-start gap-3 rounded-2xl px-4 py-3 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-colors">
|
||||
<span className="mt-1 flex h-10 w-10 items-center justify-center rounded-2xl bg-brand text-white text-xl">
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span className="block font-semibold text-base text-zinc-900 dark:text-white">{item.title}</span>
|
||||
<span className="block text-sm text-zinc-500 dark:text-zinc-400">{item.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Full-width mega menu */}
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 ease-out fixed left-0 right-0 top-full mt-0 border-t border-zinc-200/70 dark:border-zinc-800/70 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-6 animate-fadeInUp">
|
||||
{[
|
||||
{ href: '/solucoes/crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
|
||||
{ href: '/solucoes/erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
|
||||
{ href: '/solucoes/projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
|
||||
{ href: '/solucoes/pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
|
||||
{ href: '/solucoes/helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
|
||||
{ href: '/solucoes/integracoes', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
|
||||
{ href: '/solucoes/redes-sociais', icon: 'ri-share-line', title: 'Gestão de Redes Sociais', desc: 'Agende posts e gerencie múltiplas contas. 🚀 Em Breve', badge: true },
|
||||
].map((item, index) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="group/item flex items-start gap-4 rounded-2xl p-5 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<span className="mt-1 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand text-white text-xl group-hover/item:scale-110 group-hover/item:rotate-3 transition-transform duration-200">
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<span className="block font-semibold text-lg text-zinc-900 dark:text-white mb-1 group-hover/item:text-brand-gradient transition-colors">{item.title}</span>
|
||||
<span className="block text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{item.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,12 +116,13 @@ export default function Header() {
|
||||
<p className="text-sm uppercase tracking-[0.3em] text-zinc-500 mb-4">Soluções</p>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ href: '#crm', title: 'CRM Inteligente' },
|
||||
{ href: '#erp', title: 'ERP Financeiro' },
|
||||
{ href: '#gestao-projetos', title: 'Gestão de Projetos' },
|
||||
{ href: '#gestao-pagamentos', title: 'Gestão de Pagamentos' },
|
||||
{ href: '#helpdesk', title: 'Helpdesk 360°' },
|
||||
{ href: '#integra', title: 'Integrações API' },
|
||||
{ href: '/solucoes/crm', title: 'CRM Inteligente' },
|
||||
{ href: '/solucoes/erp', title: 'ERP Financeiro' },
|
||||
{ href: '/solucoes/projetos', title: 'Gestão de Projetos' },
|
||||
{ href: '/solucoes/pagamentos', title: 'Gestão de Pagamentos' },
|
||||
{ href: '/solucoes/helpdesk', title: 'Helpdesk 360°' },
|
||||
{ href: '/solucoes/integracoes', title: 'Integrações API' },
|
||||
{ href: '/solucoes/redes-sociais', title: 'Gestão de Redes Sociais 🚀' },
|
||||
].map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
|
||||
@@ -22,7 +22,16 @@ export default function ThemeToggle() {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||||
onClick={() => {
|
||||
const newTheme = isDark ? 'light' : 'dark';
|
||||
console.log('[ThemeToggle] Current theme:', resolvedTheme);
|
||||
console.log('[ThemeToggle] Changing to:', newTheme);
|
||||
setTheme(newTheme);
|
||||
setTimeout(() => {
|
||||
console.log('[ThemeToggle] HTML class:', document.documentElement.className);
|
||||
console.log('[ThemeToggle] LocalStorage:', localStorage.getItem('theme'));
|
||||
}, 100);
|
||||
}}
|
||||
className="flex h-11 w-11 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-700 shadow-sm transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
|
||||
aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
|
||||
title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
|
||||
|
||||
Reference in New Issue
Block a user