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

frontend-aggios.app/app/solucoes/pagamentos/page.tsx

@@ -0,0 +1,195 @@
+import Link from "next/link";
+import Header from "@/components/Header";
+
+export const metadata = {
+  title: "Gestão de Pagamentos - Aggios",
+  description: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes.",
+};
+
+export default function PagamentosPage() {
+  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-blue-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-blue-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
+                  <i className="ri-secure-payment-line"></i>
+                  <span>Gestão de Pagamentos</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">
+                  Receba pagamentos <span className="bg-gradient-to-r from-blue-500 to-cyan-600 bg-clip-text text-transparent">sem fricção</span>
+                </h1>
+
+                <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
+                  Aceite cartões, PIX, boleto e gerencie split de receitas com integrações nativas dos principais gateways.
+                </p>
+
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-blue-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-blue-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-blue-200 to-cyan-200 dark:from-blue-900/20 dark:to-cyan-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="space-y-4">
+                    <div className="flex items-center justify-between p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-2xl">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center text-white">
+                          <i className="ri-money-dollar-circle-line"></i>
+                        </div>
+                        <div>
+                          <p className="text-sm text-emerald-700 dark:text-emerald-400">Recebido</p>
+                          <p className="text-xl font-bold text-emerald-600 dark:text-emerald-500">R$ 12.450,00</p>
+                        </div>
+                      </div>
+                      <span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 rounded-full font-semibold">Hoje</span>
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-3">
+                      {[
+                        { icon: "ri-bank-card-line", label: "Cartão", value: "45%" },
+                        { icon: "ri-qr-code-line", label: "PIX", value: "38%" },
+                        { icon: "ri-file-text-line", label: "Boleto", value: "17%" },
+                      ].map((method, index) => (
+                        <div key={index} className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-xl text-center">
+                          <i className={`${method.icon} text-2xl text-blue-600 mb-2`}></i>
+                          <p className="text-xs text-zinc-600 dark:text-zinc-400 mb-1">{method.label}</p>
+                          <p className="text-sm font-bold text-zinc-900 dark:text-white">{method.value}</p>
+                        </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">
+                Pagamentos <span className="bg-gradient-to-r from-blue-500 to-cyan-600 bg-clip-text text-transparent">inteligentes</span>
+              </h2>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
+                Aceite todos os meios de pagamento e automatize toda a gestão financeira.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {[
+                { icon: "ri-shield-check-line", title: "Checkout Seguro", desc: "Páginas de pagamento com certificado SSL e conformidade PCI-DSS." },
+                { icon: "ri-pie-chart-line", title: "Split de Receita", desc: "Divida pagamentos automaticamente entre múltiplas contas e parceiros." },
+                { icon: "ri-repeat-line", title: "Cobranças Recorrentes", desc: "Assinaturas e cobranças mensais totalmente automatizadas." },
+                { icon: "ri-arrow-left-right-line", title: "Conciliação Automática", desc: "Match automático entre pagamentos recebidos e vendas do CRM." },
+                { icon: "ri-refund-2-line", title: "Gestão de Chargebacks", desc: "Monitore estornos e disputas com alertas em tempo real." },
+                { icon: "ri-links-line", title: "Link de Pagamento", desc: "Gere links personalizados para cobrar por WhatsApp, e-mail ou SMS." },
+              ].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-blue-500 hover:shadow-lg transition-all">
+                  <div className="w-14 h-14 bg-blue-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>
+
+        {/* Integrations */}
+        <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 text-center">
+            <h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
+              Integrações nativas
+            </h2>
+            <p className="text-lg text-zinc-600 dark:text-zinc-400 mb-12 max-w-2xl mx-auto transition-colors">
+              Conecte com os principais gateways de pagamento do Brasil sem configurações complexas.
+            </p>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              {[
+                { name: "Stripe", desc: "Pagamentos globais" },
+                { name: "Mercado Pago", desc: "Líder na América Latina" },
+                { name: "PagSeguro", desc: "Cartões e PIX" },
+                { name: "Asaas", desc: "Boleto e cobranças" },
+              ].map((gateway, index) => (
+                <div key={index} className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-blue-500 hover:shadow-lg transition-all">
+                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-xl flex items-center justify-center text-blue-600 text-2xl mx-auto mb-4">
+                    <i className="ri-bank-line"></i>
+                  </div>
+                  <p className="font-semibold text-zinc-900 dark:text-white mb-1">{gateway.name}</p>
+                  <p className="text-xs text-zinc-500 dark:text-zinc-400">{gateway.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <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="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {[
+                { value: "99.9%", label: "Uptime garantido", icon: "ri-shield-check-line" },
+                { value: "< 2s", label: "Tempo de aprovação", icon: "ri-speed-line" },
+                { value: "R$ 0", label: "Taxa de setup", icon: "ri-money-dollar-circle-line" },
+              ].map((stat, index) => (
+                <div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center transition-colors">
+                  <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center text-blue-600 text-3xl mx-auto mb-4">
+                    <i className={stat.icon}></i>
+                  </div>
+                  <p className="text-5xl font-bold bg-gradient-to-r from-blue-500 to-cyan-600 bg-clip-text text-transparent mb-2">
+                    {stat.value}
+                  </p>
+                  <p className="text-zinc-600 dark:text-zinc-400 transition-colors">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className="py-20 bg-zinc-50 dark:bg-zinc-800 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">
+              Receba mais <span className="bg-gradient-to-r from-blue-500 to-cyan-600 bg-clip-text text-transparent">rápido e seguro</span>
+            </h2>
+            <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
+              Configure em minutos e comece a aceitar pagamentos hoje mesmo.
+            </p>
+            <Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-blue-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>
+    </>
+  );
+}