feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
222
frontend-aggios.app/app/solucoes/crm/page.tsx
Normal file
222
frontend-aggios.app/app/solucoes/crm/page.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export const metadata = {
|
||||
title: "CRM Inteligente - Aggios",
|
||||
description: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real.",
|
||||
};
|
||||
|
||||
export default function CRMPage() {
|
||||
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-brand-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-brand rounded-full text-sm font-semibold text-white shadow-lg shadow-brand-20 mb-6">
|
||||
<i className="ri-customer-service-2-line"></i>
|
||||
<span>CRM Inteligente</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">
|
||||
Gerencie clientes com <span className="gradient-text">inteligência</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
|
||||
Automatize seu funil de vendas, acompanhe negociações em tempo real e tenha uma visão 360° completa de cada cliente.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-brand 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-brand hover:text-white transition-all">
|
||||
Ver Planos
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 blur-3xl bg-brand-horizontal-soft 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 gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center text-white text-2xl">
|
||||
<i className="ri-user-line"></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-zinc-900 dark:text-white">João Silva</p>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">Negociação em andamento</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 text-xs font-semibold rounded-full">Quente</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center text-white text-2xl">
|
||||
<i className="ri-building-line"></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-zinc-900 dark:text-white">Tech Corp LTDA</p>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">Proposta enviada</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs font-semibold rounded-full">Morno</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<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">
|
||||
Recursos <span className="gradient-text">poderosos</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Tudo que você precisa para gerenciar relacionamentos com clientes de forma profissional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: "ri-funnel-line", title: "Funil de Vendas Visual", desc: "Arraste e solte negócios entre etapas. Visualize todo o pipeline em um dashboard intuitivo." },
|
||||
{ icon: "ri-contacts-book-line", title: "Gestão de Contatos", desc: "Centralize informações, histórico e interações de cada cliente em um só lugar." },
|
||||
{ icon: "ri-calendar-check-line", title: "Agendamento Automático", desc: "Agende reuniões, follow-ups e lembretes automáticos para nunca perder oportunidades." },
|
||||
{ icon: "ri-line-chart-line", title: "Relatórios de Performance", desc: "Acompanhe métricas de vendas, conversão e desempenho da equipe em tempo real." },
|
||||
{ icon: "ri-mail-send-line", title: "E-mail Marketing", desc: "Crie campanhas segmentadas e acompanhe taxas de abertura e cliques." },
|
||||
{ icon: "ri-team-line", title: "Gestão de Equipe", desc: "Distribua leads, acompanhe produtividade e gerencie metas de vendedores." },
|
||||
].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-brand hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-14 h-14 bg-brand 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 */}
|
||||
<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>
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
||||
Por que escolher nosso CRM?
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Desenvolvido especificamente para agências que precisam de agilidade e resultados concretos.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ title: "Aumento de 40% nas conversões", desc: "Automatize follow-ups e nunca perca uma oportunidade por esquecimento." },
|
||||
{ title: "Redução de 60% no tempo administrativo", desc: "Menos planilhas, mais vendas. Foque no que realmente importa." },
|
||||
{ title: "Visão 360° do cliente", desc: "Histórico completo de interações, propostas, pagamentos e tickets de suporte." },
|
||||
{ title: "Integrações nativas", desc: "Conecte com ERP, Helpdesk, Projetos e Pagamentos sem esforço." },
|
||||
].map((benefit, index) => (
|
||||
<div key={index} className="flex gap-4">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-brand 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 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="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-zinc-900 dark:text-white">Pipeline de Vendas</h3>
|
||||
<span className="text-sm text-emerald-500">+32% este mês</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[
|
||||
{ label: "Lead", value: 45, color: "bg-zinc-300" },
|
||||
{ label: "Contato", value: 32, color: "bg-blue-500" },
|
||||
{ label: "Proposta", value: 18, color: "bg-yellow-500" },
|
||||
{ label: "Fechado", value: 12, color: "bg-emerald-500" },
|
||||
].map((stage, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className={`h-24 ${stage.color} rounded-lg mb-2 flex items-end justify-center pb-2 text-white font-bold`}>
|
||||
{stage.value}
|
||||
</div>
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400">{stage.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-6">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Atividades Recentes</p>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ icon: "ri-mail-line", text: "E-mail enviado para João Silva", time: "2h atrás" },
|
||||
{ icon: "ri-phone-line", text: "Ligação agendada com Tech Corp", time: "4h atrás" },
|
||||
{ icon: "ri-file-text-line", text: "Proposta gerada para XYZ LTDA", time: "1d atrás" },
|
||||
].map((activity, index) => (
|
||||
<div key={index} className="flex items-center gap-3 text-sm">
|
||||
<div className="w-8 h-8 bg-brand rounded-lg flex items-center justify-center text-white shrink-0">
|
||||
<i className={activity.icon}></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-zinc-900 dark:text-white">{activity.text}</p>
|
||||
</div>
|
||||
<span className="text-zinc-500 dark:text-zinc-400 text-xs">{activity.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<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">
|
||||
Pronto para <span className="gradient-text">vender mais</span>?
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Junte-se a centenas de agências que aumentaram suas vendas com nosso CRM.
|
||||
</p>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
Começar Grátis Agora
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
162
frontend-aggios.app/app/solucoes/erp/page.tsx
Normal file
162
frontend-aggios.app/app/solucoes/erp/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export const metadata = {
|
||||
title: "ERP Financeiro - Aggios",
|
||||
description: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas.",
|
||||
};
|
||||
|
||||
export default function ERPPage() {
|
||||
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-emerald-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-emerald-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
|
||||
<i className="ri-database-2-line"></i>
|
||||
<span>ERP Financeiro</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">
|
||||
Controle financeiro <span className="bg-gradient-to-r from-emerald-500 to-teal-600 bg-clip-text text-transparent">completo</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
|
||||
Gerencie todo o fluxo de caixa, contas a pagar e receber com integrações bancárias automáticas. Sem planilhas.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-emerald-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-emerald-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-emerald-200 to-teal-200 dark:from-emerald-900/20 dark:to-teal-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="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-2xl">
|
||||
<p className="text-xs text-emerald-700 dark:text-emerald-400 mb-1">A Receber</p>
|
||||
<p className="text-2xl font-bold text-emerald-600 dark:text-emerald-500">R$ 48.5K</p>
|
||||
</div>
|
||||
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-2xl">
|
||||
<p className="text-xs text-red-700 dark:text-red-400 mb-1">A Pagar</p>
|
||||
<p className="text-2xl font-bold text-red-600 dark:text-red-500">R$ 22.3K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 bg-zinc-50 dark:bg-zinc-800 rounded-2xl">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Fluxo de Caixa (30 dias)</p>
|
||||
<div className="h-32 flex items-end gap-2">
|
||||
{[60, 45, 80, 55, 90, 70, 85, 65, 95, 75].map((height, index) => (
|
||||
<div key={index} className="flex-1 bg-emerald-500 rounded-t" style={{ height: `${height}%` }}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<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 financeira <span className="bg-gradient-to-r from-emerald-500 to-teal-600 bg-clip-text text-transparent">inteligente</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Todas as ferramentas que você precisa para manter suas finanças organizadas e saudáveis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: "ri-exchange-dollar-line", title: "Contas a Pagar/Receber", desc: "Controle todas as contas em um dashboard centralizado com alertas de vencimento." },
|
||||
{ icon: "ri-line-chart-line", title: "Fluxo de Caixa Projetado", desc: "Visualize entradas e saídas futuras e tome decisões com antecedência." },
|
||||
{ icon: "ri-bank-line", title: "Integração Bancária", desc: "Conecte suas contas e reconcilie lançamentos automaticamente via OFX." },
|
||||
{ icon: "ri-file-list-3-line", title: "Notas Fiscais", desc: "Emita NFe e NFSe diretamente pela plataforma integrada com a Receita." },
|
||||
{ icon: "ri-calculator-line", title: "Conciliação Automática", desc: "Match automático entre pagamentos recebidos e vendas realizadas." },
|
||||
{ icon: "ri-pie-chart-line", title: "DRE e Balanço", desc: "Relatórios gerenciais completos: DRE, DFC, Balanço Patrimonial." },
|
||||
].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-emerald-500 hover:shadow-lg transition-all">
|
||||
<div className="w-14 h-14 bg-emerald-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>
|
||||
|
||||
{/* Stats Section */}
|
||||
<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-12">
|
||||
<h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-4 transition-colors">
|
||||
Resultados comprovados
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ value: "87%", label: "Redução em erros de lançamento", icon: "ri-error-warning-line" },
|
||||
{ value: "5h/dia", label: "Economizadas em tarefas manuais", icon: "ri-time-line" },
|
||||
{ value: "100%", label: "Visibilidade do fluxo de caixa", icon: "ri-eye-line" },
|
||||
].map((stat, index) => (
|
||||
<div key={index} className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center transition-colors">
|
||||
<div className="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/20 rounded-2xl flex items-center justify-center text-emerald-600 text-3xl mx-auto mb-4">
|
||||
<i className={stat.icon}></i>
|
||||
</div>
|
||||
<p className="text-5xl font-bold bg-gradient-to-r from-emerald-500 to-teal-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-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">
|
||||
Livre-se das <span className="bg-gradient-to-r from-emerald-500 to-teal-600 bg-clip-text text-transparent">planilhas</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Comece hoje e tenha controle total das suas finanças em minutos.
|
||||
</p>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-emerald-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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
205
frontend-aggios.app/app/solucoes/helpdesk/page.tsx
Normal file
205
frontend-aggios.app/app/solucoes/helpdesk/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export const metadata = {
|
||||
title: "Helpdesk 360° - Aggios",
|
||||
description: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium.",
|
||||
};
|
||||
|
||||
export default function HelpdeskPage() {
|
||||
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-orange-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-orange-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
|
||||
<i className="ri-customer-service-line"></i>
|
||||
<span>Helpdesk 360°</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">
|
||||
Suporte que <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">encanta</span> clientes
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
|
||||
Gerencie tickets, controle SLAs e construa uma base de conhecimento completa. Tudo integrado ao CRM.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-orange-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-orange-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-orange-200 to-red-200 dark:from-orange-900/20 dark:to-red-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-3">
|
||||
{[
|
||||
{ id: "#1284", title: "Bug no checkout", priority: "urgent", status: "aberto", color: "bg-red-500" },
|
||||
{ id: "#1283", title: "Dúvida sobre plano", priority: "normal", status: "respondido", color: "bg-blue-500" },
|
||||
{ id: "#1282", title: "Solicitação de feature", priority: "baixa", status: "fechado", color: "bg-emerald-500" },
|
||||
].map((ticket, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
|
||||
<div className={`w-3 h-3 rounded-full ${ticket.color}`}></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono text-zinc-500">{ticket.id}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${ticket.priority === 'urgent' ? 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400' : 'bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400'} font-semibold`}>
|
||||
{ticket.priority === 'urgent' ? 'Urgente' : ticket.priority === 'normal' ? 'Normal' : 'Baixa'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white">{ticket.title}</p>
|
||||
</div>
|
||||
<i className={`ri-${ticket.status === 'fechado' ? 'check' : ticket.status === 'respondido' ? 'reply' : 'time'}-line text-zinc-400`}></i>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between text-sm">
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Tempo médio de resposta</span>
|
||||
<span className="font-semibold text-orange-600">1.2h</span>
|
||||
</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">
|
||||
Atendimento <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">profissional</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Ferramentas completas para oferecer suporte de alta qualidade aos seus clientes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: "ri-ticket-2-line", title: "Sistema de Tickets", desc: "Organize solicitações por prioridade, categoria e status automaticamente." },
|
||||
{ icon: "ri-time-line", title: "SLA Automático", desc: "Defina tempos de resposta e resolução com alertas quando próximo do limite." },
|
||||
{ icon: "ri-book-open-line", title: "Base de Conhecimento", desc: "Crie artigos, FAQs e tutoriais para reduzir tickets recorrentes." },
|
||||
{ icon: "ri-chat-3-line", title: "Chat em Tempo Real", desc: "Converse com clientes diretamente no site com widget personalizável." },
|
||||
{ icon: "ri-mail-line", title: "E-mail Integrado", desc: "Receba e responda tickets direto do e-mail sem sair da plataforma." },
|
||||
{ icon: "ri-bar-chart-line", title: "Métricas de Atendimento", desc: "CSAT, NPS, tempo de primeira resposta e tempo de resolução." },
|
||||
].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-orange-500 hover:shadow-lg transition-all">
|
||||
<div className="w-14 h-14 bg-orange-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>
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
||||
Por que usar nosso Helpdesk?
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Integração total com CRM significa contexto completo em cada atendimento.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ title: "Visão 360° do cliente", desc: "Acesse histórico de compras, tickets anteriores e contratos na mesma tela." },
|
||||
{ title: "Redução de 70% em tickets", desc: "Base de conhecimento self-service diminui demanda de suporte." },
|
||||
{ title: "Aumento do NPS", desc: "Atendimento rápido e contextualizado eleva satisfação dos clientes." },
|
||||
{ title: "Automações inteligentes", desc: "Distribua tickets automaticamente com base em assunto e prioridade." },
|
||||
].map((benefit, index) => (
|
||||
<div key={index} className="flex gap-4">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-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 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-2 gap-4 mb-6">
|
||||
{[
|
||||
{ label: "Tickets Abertos", value: "24", icon: "ri-inbox-line", color: "text-orange-600" },
|
||||
{ label: "Resolvidos Hoje", value: "89", icon: "ri-check-double-line", color: "text-emerald-600" },
|
||||
].map((stat, index) => (
|
||||
<div key={index} className="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl text-center">
|
||||
<i className={`${stat.icon} text-3xl ${stat.color} mb-2`}></i>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white">{stat.value}</p>
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-6">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Satisfação do Cliente</p>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="flex-1 h-3 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-orange-600 rounded-full" style={{ width: '94%' }}></div>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-orange-600">94%</span>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">Baseado em 342 avaliações</p>
|
||||
</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">
|
||||
Eleve seu <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">suporte</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Transforme cada atendimento em uma oportunidade de encantar clientes.
|
||||
</p>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-orange-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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
228
frontend-aggios.app/app/solucoes/integracoes/page.tsx
Normal file
228
frontend-aggios.app/app/solucoes/integracoes/page.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
195
frontend-aggios.app/app/solucoes/pagamentos/page.tsx
Normal file
195
frontend-aggios.app/app/solucoes/pagamentos/page.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
210
frontend-aggios.app/app/solucoes/projetos/page.tsx
Normal file
210
frontend-aggios.app/app/solucoes/projetos/page.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
252
frontend-aggios.app/app/solucoes/redes-sociais/page.tsx
Normal file
252
frontend-aggios.app/app/solucoes/redes-sociais/page.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export const metadata = {
|
||||
title: "Gestão de Redes Sociais - Aggios",
|
||||
description: "Agende posts, analise métricas e gerencie múltiplas contas em uma única plataforma.",
|
||||
};
|
||||
|
||||
export default function RedesSociaisPage() {
|
||||
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-pink-50 to-white dark:from-zinc-900 dark:to-zinc-950 transition-colors relative overflow-hidden">
|
||||
{/* Em Breve Badge - Floating */}
|
||||
<div className="absolute top-8 right-8 z-20">
|
||||
<div className="bg-gradient-to-r from-pink-500 to-rose-600 text-white px-6 py-3 rounded-full font-bold text-lg shadow-2xl animate-pulse">
|
||||
🚀 Em Breve
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-pink-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
|
||||
<i className="ri-share-line"></i>
|
||||
<span>Gestão de Redes Sociais</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">
|
||||
Domine suas <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">redes sociais</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
|
||||
Agende posts, gerencie múltiplas contas, analise métricas e interaja com seu público — tudo em um só lugar.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button disabled className="px-8 py-3 bg-pink-600 text-white font-semibold rounded-xl opacity-60 cursor-not-allowed shadow-lg">
|
||||
Em Breve
|
||||
</button>
|
||||
<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-pink-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-pink-200 to-rose-200 dark:from-pink-900/20 dark:to-rose-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">
|
||||
{[
|
||||
{ platform: "Instagram", icon: "ri-instagram-line", scheduled: 12, color: "bg-pink-500" },
|
||||
{ platform: "Facebook", icon: "ri-facebook-circle-line", scheduled: 8, color: "bg-blue-600" },
|
||||
{ platform: "LinkedIn", icon: "ri-linkedin-box-line", scheduled: 5, color: "bg-blue-700" },
|
||||
{ platform: "Twitter/X", icon: "ri-twitter-x-line", scheduled: 15, color: "bg-zinc-900" },
|
||||
].map((social, index) => (
|
||||
<div key={index} className="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
|
||||
<div className={`w-10 h-10 ${social.color} rounded-xl flex items-center justify-center text-white`}>
|
||||
<i className={social.icon}></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white">{social.platform}</p>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">{social.scheduled} posts agendados</p>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 rounded-full font-semibold">
|
||||
Ativo
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between text-sm">
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Alcance total (30 dias)</span>
|
||||
<span className="font-semibold text-pink-600">248.5K</span>
|
||||
</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">
|
||||
Marketing <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">automatizado</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Ferramentas profissionais para ampliar sua presença digital e engajamento.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: "ri-calendar-schedule-line", title: "Agendamento Inteligente", desc: "Agende posts para múltiplas redes com horários otimizados por IA." },
|
||||
{ icon: "ri-dashboard-line", title: "Painel Unificado", desc: "Gerencie Instagram, Facebook, LinkedIn, Twitter e TikTok em um só lugar." },
|
||||
{ icon: "ri-bar-chart-box-line", title: "Analytics Completo", desc: "Acompanhe alcance, engajamento, cliques e conversões em tempo real." },
|
||||
{ icon: "ri-message-3-line", title: "Caixa de Entrada Social", desc: "Responda comentários e mensagens de todas as redes em uma única caixa." },
|
||||
{ icon: "ri-image-edit-line", title: "Editor de Imagens", desc: "Edite fotos, adicione textos e filtros sem sair da plataforma." },
|
||||
{ icon: "ri-team-line", title: "Colaboração em Equipe", desc: "Aprove posts, delegue tarefas e gerencie permissões de usuários." },
|
||||
].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-pink-500 hover:shadow-lg transition-all">
|
||||
<div className="w-14 h-14 bg-pink-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>
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
||||
Por que usar nossa plataforma?
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Economize tempo, aumente engajamento e tome decisões baseadas em dados reais.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ title: "Economize 10h por semana", desc: "Agende um mês de conteúdo em menos de 1 hora." },
|
||||
{ title: "Aumente engajamento em 3x", desc: "Publique nos melhores horários identificados por IA." },
|
||||
{ title: "Relatórios automáticos", desc: "Envie reports semanais para clientes com um clique." },
|
||||
{ title: "Integração com CRM", desc: "Conecte leads das redes sociais direto no funil de vendas." },
|
||||
].map((benefit, index) => (
|
||||
<div key={index} className="flex gap-4">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-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 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-2 gap-4 mb-6">
|
||||
{[
|
||||
{ label: "Posts Agendados", value: "147", icon: "ri-calendar-check-line", color: "text-pink-600" },
|
||||
{ label: "Engajamento", value: "+284%", icon: "ri-heart-line", color: "text-rose-600" },
|
||||
].map((stat, index) => (
|
||||
<div key={index} className="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl text-center">
|
||||
<i className={`${stat.icon} text-3xl ${stat.color} mb-2`}></i>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white">{stat.value}</p>
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-6">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Alcance Mensal</p>
|
||||
<div className="h-32 flex items-end gap-2">
|
||||
{[40, 65, 55, 80, 70, 90, 75, 95, 85, 100].map((height, index) => (
|
||||
<div key={index} className="flex-1 bg-pink-500 rounded-t" style={{ height: `${height}%` }}></div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span className="text-xs text-zinc-500 dark:text-zinc-400">Jan - Out 2025</span>
|
||||
<span className="text-sm font-bold text-pink-600">248.5K alcance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Supported Platforms */}
|
||||
<section className="py-20 bg-white dark:bg-zinc-900 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">
|
||||
Plataformas suportadas
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-12 max-w-2xl mx-auto transition-colors">
|
||||
Gerencie todas as principais redes sociais do Brasil e do mundo.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ name: "Instagram", icon: "ri-instagram-line", color: "bg-pink-500" },
|
||||
{ name: "Facebook", icon: "ri-facebook-circle-line", color: "bg-blue-600" },
|
||||
{ name: "LinkedIn", icon: "ri-linkedin-box-line", color: "bg-blue-700" },
|
||||
{ name: "Twitter/X", icon: "ri-twitter-x-line", color: "bg-zinc-900 dark:bg-white" },
|
||||
{ name: "TikTok", icon: "ri-tiktok-line", color: "bg-zinc-900 dark:bg-white" },
|
||||
{ name: "YouTube", icon: "ri-youtube-line", color: "bg-red-600" },
|
||||
{ name: "Pinterest", icon: "ri-pinterest-line", color: "bg-red-700" },
|
||||
{ name: "WhatsApp", icon: "ri-whatsapp-line", color: "bg-emerald-600" },
|
||||
].map((platform, index) => (
|
||||
<div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-pink-500 hover:shadow-lg transition-all">
|
||||
<div className={`w-12 h-12 ${platform.color} rounded-xl flex items-center justify-center text-white text-2xl mx-auto mb-4`}>
|
||||
<i className={platform.icon}></i>
|
||||
</div>
|
||||
<p className="font-semibold text-zinc-900 dark:text-white">{platform.name}</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">
|
||||
Amplifique sua <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">presença digital</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
||||
Mantenha-se informado! Em breve você poderá gerenciar todas as suas redes sociais em um só lugar.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button disabled className="inline-block px-8 py-4 bg-pink-600 text-white font-semibold rounded-xl opacity-60 cursor-not-allowed shadow-lg">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
Em Breve
|
||||
</button>
|
||||
<Link href="/#pricing" className="inline-block px-8 py-4 border-2 border-pink-600 text-pink-600 font-semibold rounded-xl hover:bg-pink-600 hover:text-white transition-all shadow-lg">
|
||||
<i className="ri-notification-line mr-2"></i>
|
||||
Me Avise Quando Lançar
|
||||
</Link>
|
||||
</div>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user