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