229 lines
13 KiB
TypeScript
229 lines
13 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|