163 lines
9.4 KiB
TypeScript
163 lines
9.4 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|