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

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

@@ -0,0 +1,228 @@
+import Link from "next/link";
+import Header from "@/components/Header";
+
+export const metadata = {
+  title: "Integrações API - Aggios",
+  description: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura.",
+};
+
+export default function IntegracoesPage() {
+  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-indigo-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-indigo-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
+                  <i className="ri-share-forward-line"></i>
+                  <span>Integrações API</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">
+                  Conecte tudo em um <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">ecossistema</span>
+                </h1>
+
+                <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
+                  API REST completa para integrar com BI, contabilidade, ERPs externos e automatizar workflows com webhooks.
+                </p>
+
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-indigo-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-indigo-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-indigo-200 to-purple-200 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-[40px]"></div>
+                <div className="relative bg-zinc-900 dark:bg-zinc-950 rounded-3xl border border-zinc-700 dark:border-zinc-800 p-6 shadow-2xl font-mono text-sm">
+                  <div className="flex items-center gap-2 mb-4">
+                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
+                    <span className="ml-auto text-zinc-500 text-xs">api.aggios.app</span>
+                  </div>
+                  <div className="space-y-2 text-zinc-300">
+                    <div><span className="text-purple-400">POST</span> <span className="text-zinc-500">/api/v1/customers</span></div>
+                    <div className="pl-4 text-zinc-500">{"{"}</div>
+                    <div className="pl-8"><span className="text-blue-400">"name"</span>: <span className="text-emerald-400">"João Silva"</span>,</div>
+                    <div className="pl-8"><span className="text-blue-400">"email"</span>: <span className="text-emerald-400">"joao@empresa.com"</span></div>
+                    <div className="pl-4 text-zinc-500">{"}"}</div>
+                    <div className="pt-2 border-t border-zinc-700">
+                      <span className="text-emerald-400">✓ 201 Created</span>
+                    </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">
+                API <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">completa</span>
+              </h2>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
+                Integre com qualquer sistema e automatize processos complexos.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {[
+                { icon: "ri-code-s-slash-line", title: "RESTful API", desc: "Endpoints padronizados com JSON, autenticação OAuth 2.0 e rate limiting." },
+                { icon: "ri-webhook-line", title: "Webhooks em Tempo Real", desc: "Receba notificações instantâneas de eventos como novos clientes ou pagamentos." },
+                { icon: "ri-file-text-line", title: "Documentação Completa", desc: "OpenAPI/Swagger com exemplos em múltiplas linguagens e sandbox." },
+                { icon: "ri-lock-line", title: "Segurança Enterprise", desc: "Criptografia TLS 1.3, tokens JWT e logs de auditoria completos." },
+                { icon: "ri-database-2-line", title: "SDKs Oficiais", desc: "Bibliotecas nativas para Python, Node.js, PHP, Ruby e .NET." },
+                { icon: "ri-bar-chart-box-line", title: "Analytics de Uso", desc: "Dashboard com chamadas, latência, erros e consumo de quota." },
+              ].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-indigo-500 hover:shadow-lg transition-all">
+                  <div className="w-14 h-14 bg-indigo-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>
+
+        {/* Use Cases */}
+        <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="text-center mb-16">
+              <h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
+                Casos de uso
+              </h2>
+              <p className="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto transition-colors">
+                Veja como empresas usam nossas APIs para criar soluções personalizadas.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {[
+                {
+                  title: "Dashboards BI Customizados",
+                  desc: "Conecte Power BI, Tableau ou Metabase para visualizar dados em tempo real.",
+                  icon: "ri-dashboard-line",
+                  tags: ["Power BI", "Tableau", "Looker"],
+                },
+                {
+                  title: "Sincronização Contábil",
+                  desc: "Exporte lançamentos automaticamente para Conta Azul, Omie ou sistemas próprios.",
+                  icon: "ri-calculator-line",
+                  tags: ["Conta Azul", "Omie", "SAP"],
+                },
+                {
+                  title: "Automação de Marketing",
+                  desc: "Integre com RD Station, HubSpot e Active Campaign via webhooks.",
+                  icon: "ri-mail-send-line",
+                  tags: ["RD Station", "HubSpot", "Mailchimp"],
+                },
+                {
+                  title: "Apps Internos",
+                  desc: "Construa ferramentas customizadas usando nossa API como backend.",
+                  icon: "ri-apps-line",
+                  tags: ["React", "Vue", "Mobile"],
+                },
+              ].map((useCase, index) => (
+                <div key={index} className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-indigo-500 hover:shadow-lg transition-all">
+                  <div className="flex items-start gap-4 mb-4">
+                    <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-xl flex items-center justify-center text-indigo-600 text-2xl shrink-0">
+                      <i className={useCase.icon}></i>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">
+                        {useCase.title}
+                      </h3>
+                      <p className="text-zinc-600 dark:text-zinc-400 mb-4 transition-colors">
+                        {useCase.desc}
+                      </p>
+                      <div className="flex flex-wrap gap-2">
+                        {useCase.tags.map((tag, tagIndex) => (
+                          <span key={tagIndex} className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 text-xs font-semibold rounded-full">
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Developer Resources */}
+        <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-12">
+              <h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
+                Recursos para desenvolvedores
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[
+                { icon: "ri-book-open-line", title: "Documentação", desc: "Guias completos e referência da API", link: "#" },
+                { icon: "ri-code-box-line", title: "Sandbox", desc: "Ambiente de testes sem custos", link: "#" },
+                { icon: "ri-chat-4-line", title: "Suporte Dev", desc: "Comunidade no Discord e Slack", link: "#" },
+              ].map((resource, index) => (
+                <a key={index} href={resource.link} className="group bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-indigo-500 hover:shadow-lg transition-all">
+                  <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-xl flex items-center justify-center text-indigo-600 text-2xl mb-4 group-hover:scale-110 transition-transform">
+                    <i className={resource.icon}></i>
+                  </div>
+                  <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-2 transition-colors">
+                    {resource.title}
+                  </h3>
+                  <p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">
+                    {resource.desc}
+                  </p>
+                </a>
+              ))}
+            </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">
+              Construa <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">sem limites</span>
+            </h2>
+            <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
+              Comece a integrar hoje mesmo com nossa API RESTful.
+            </p>
+            <Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-indigo-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>
+    </>
+  );
+}