erik/aggios.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs

Browse Source
This commit is contained in:
Erik Silva
2025-12-11 23:39:54 -03:00
parent 053e180321
commit dc98d5dccc
129 changed files with 20730 additions and 1611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
frontend-aggios.app/app/solucoes/projetos/page.tsx Normal file
View File

@@ -0,0 +1,210 @@
import Link from "next/link";
import Header from "@/components/Header";
export const metadata = {
title: "Gestão de Projetos - Aggios",
description: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos.",
};
export default function ProjetosPage() {
return (
<>
<Header />
<main className="pt-20 bg-white dark:bg-zinc-950 transition-colors">
{/* Hero Section */}
<section className="py-20 bg-gradient-to-br from-purple-50 to-white dark:from-zinc-900 dark:to-zinc-950 transition-colors">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
<i className="ri-trello-line"></i>
<span>Gestão de Projetos</span>
</div>
<h1 className="font-heading font-bold text-5xl lg:text-6xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
Entregue projetos no <span className="bg-gradient-to-r from-purple-500 to-pink-600 bg-clip-text text-transparent">prazo</span>
</h1>
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
Organize sprints, distribua tarefas e acompanhe o progresso de cada projeto com boards visuais e relatórios em tempo real.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-purple-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
Começar Grátis
</Link>
<Link href="/#pricing" className="px-8 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-xl hover:border-transparent hover:bg-purple-600 hover:text-white transition-all">
Ver Planos
</Link>
</div>
</div>
<div className="relative">
<div className="absolute inset-0 blur-3xl bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-900/20 dark:to-pink-900/20 rounded-[40px]"></div>
<div className="relative bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
<div className="mb-4">
<div className="flex items-center justify-between mb-4">
<h3 className="font-semibold text-zinc-900 dark:text-white">Sprint Atual</h3>
<span className="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 rounded-full font-semibold">8 dias restantes</span>
</div>
<div className="space-y-3">
{[
{ title: "Landing page redesign", status: "done", color: "bg-emerald-500" },
{ title: "API integration", status: "progress", color: "bg-blue-500" },
{ title: "User testing", status: "todo", color: "bg-zinc-300" },
].map((task, index) => (
<div key={index} className="flex items-center gap-3 p-3 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
<div className={`w-3 h-3 rounded-full ${task.color}`}></div>
<p className="text-sm text-zinc-900 dark:text-white flex-1">{task.title}</p>
<i className={`ri-${task.status === 'done' ? 'check' : task.status === 'progress' ? 'loader' : 'time'}-line text-zinc-400`}></i>
</div>
))}
</div>
</div>
<div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
<div className="flex items-center justify-between text-sm">
<span className="text-zinc-600 dark:text-zinc-400">Progresso geral</span>
<span className="font-semibold text-purple-600">67%</span>
</div>
<div className="mt-2 h-2 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
<div className="h-full bg-purple-600 rounded-full" style={{ width: '67%' }}></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Features */}
<section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
Gestão <span className="bg-gradient-to-r from-purple-500 to-pink-600 bg-clip-text text-transparent">ágil</span>
</h2>
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
Metodologias ágeis e ferramentas visuais para equipes de alta performance.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{ icon: "ri-kanban-view", title: "Boards Kanban", desc: "Visualize o fluxo de trabalho com colunas customizáveis e drag-and-drop." },
{ icon: "ri-calendar-2-line", title: "Sprint Planning", desc: "Planeje sprints, defina metas e acompanhe velocity da equipe." },
{ icon: "ri-time-line", title: "Timesheet Integrado", desc: "Rastreie horas trabalhadas e calcule custos de projeto automaticamente." },
{ icon: "ri-git-branch-line", title: "Dependências", desc: "Gerencie dependências entre tarefas e evite bloqueios no fluxo." },
{ icon: "ri-file-list-line", title: "Backlog Priorizado", desc: "Organize e priorize tarefas futuras com sistema de pontos de esforço." },
{ icon: "ri-line-chart-line", title: "Burndown Charts", desc: "Acompanhe o progresso do sprint com gráficos de burndown em tempo real." },
].map((feature, index) => (
<div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-purple-500 hover:shadow-lg transition-all">
<div className="w-14 h-14 bg-purple-600 rounded-2xl flex items-center justify-center text-white text-2xl mb-6">
<i className={feature.icon}></i>
</div>
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">
{feature.title}
</h3>
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">
{feature.desc}
</p>
</div>
))}
</div>
</div>
</section>
{/* Benefits */}
<section className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
<div className="grid grid-cols-3 gap-4 mb-6">
{[
{ label: "A Fazer", count: 12, color: "bg-zinc-300" },
{ label: "Em Progresso", count: 5, color: "bg-blue-500" },
{ label: "Concluído", count: 28, color: "bg-emerald-500" },
].map((col, index) => (
<div key={index} className="text-center">
<div className={`${col.color} text-white font-bold text-2xl rounded-xl p-4 mb-2`}>
{col.count}
</div>
<p className="text-xs text-zinc-600 dark:text-zinc-400">{col.label}</p>
</div>
))}
</div>
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-6 space-y-4">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center text-white">
<i className="ri-user-line"></i>
</div>
<div className="flex-1">
<p className="text-sm font-semibold text-zinc-900 dark:text-white">Design System v2.0</p>
<p className="text-xs text-zinc-500 dark:text-zinc-400">Atribuído a Maria Silva</p>
</div>
<span className="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-full">Alta</span>
</div>
</div>
</div>
<div>
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
Entregue mais rápido
</h2>
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
Reduza atrasos e aumente a produtividade com visibilidade total do pipeline.
</p>
<div className="space-y-6">
{[
{ title: "50% menos atrasos", desc: "Identifique gargalos antes que virem problemas críticos." },
{ title: "Colaboração em tempo real", desc: "Comentários, anexos e notificações mantêm todos sincronizados." },
{ title: "Integração com Git", desc: "Conecte commits e pull requests diretamente às tarefas." },
].map((benefit, index) => (
<div key={index} className="flex gap-4">
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-600 text-white shadow-sm shrink-0 mt-1">
<i className="ri-check-line text-sm"></i>
</span>
<div>
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white mb-1 transition-colors">
{benefit.title}
</h4>
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">
{benefit.desc}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* CTA */}
<section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
Transforme <span className="bg-gradient-to-r from-purple-500 to-pink-600 bg-clip-text text-transparent">caos em clareza</span>
</h2>
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
Organize seus projetos e veja a diferença na produtividade da equipe.
</p>
<Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-purple-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
<i className="ri-rocket-line mr-2"></i>
Começar Grátis Agora
</Link>
</div>
</section>
</main>
<footer className="bg-zinc-900 dark:bg-black text-white py-12 transition-colors">
<div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
<p className="text-zinc-400 text-sm">
© 2025 Aggios. Todos os direitos reservados.
</p>
</div>
</footer>
</>
);
}