feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -17,6 +17,11 @@ html.dark {
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background-color: #0f172a;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-brand-500);
|
||||
color: var(--color-text-inverse);
|
||||
@@ -68,4 +73,275 @@ html.dark {
|
||||
.shadow-brand-20 {
|
||||
box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Animations ========== */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeInUp {
|
||||
animation: fadeInUp 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ========== Dark Mode Override ========== */
|
||||
/* Force dark mode styles outside Tailwind layers to ensure they work */
|
||||
|
||||
/* Base colors */
|
||||
html.dark body {
|
||||
background-color: #09090b !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark main {
|
||||
background-color: #09090b !important;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
html.dark section {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark section.bg-white,
|
||||
html.dark section[class*="bg-white"] {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark section.bg-zinc-50,
|
||||
html.dark section[class*="bg-zinc-50"] {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
/* Preserve gradient text by not applying color to elements with bg-clip-text */
|
||||
html.dark h1:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h2:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h3:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h4:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h5:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h6:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark p:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Gradient text should remain transparent */
|
||||
html.dark .text-transparent {
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure gradients work in dark mode */
|
||||
html.dark .bg-clip-text {
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
}
|
||||
|
||||
/* Force gradient backgrounds to be visible */
|
||||
html.dark [class*="from-emerald"],
|
||||
html.dark [class*="from-blue"],
|
||||
html.dark [class*="from-purple"],
|
||||
html.dark [class*="from-orange"],
|
||||
html.dark [class*="from-indigo"],
|
||||
html.dark [class*="from-pink"],
|
||||
html.dark [class*="to-teal"],
|
||||
html.dark [class*="to-cyan"],
|
||||
html.dark [class*="to-rose"] {
|
||||
/* Preserve gradient colors */
|
||||
}
|
||||
|
||||
html.dark .text-zinc-900:not(.text-transparent) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-600:not(.text-transparent),
|
||||
html.dark .text-zinc-700:not(.text-transparent) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-500:not(.text-transparent) {
|
||||
color: #a1a1aa !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-400:not(.text-transparent) {
|
||||
color: #a1a1aa !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-300:not(.text-transparent) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-200:not(.text-transparent) {
|
||||
color: #e4e4e7 !important;
|
||||
}
|
||||
|
||||
/* Cards & containers */
|
||||
html.dark .bg-white {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-50 {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white\/80 {
|
||||
background-color: rgba(24, 24, 27, 0.8) !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white\/60 {
|
||||
background-color: rgba(24, 24, 27, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
html.dark .border-zinc-100 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-300 {
|
||||
border-color: #52525b !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-800 {
|
||||
border-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
html.dark button.border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
background-color: #18181b !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark a.border-zinc-200,
|
||||
html.dark a.border-2.border-zinc-200 {
|
||||
border-color: #52525b !important;
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark a.border-zinc-300 {
|
||||
border-color: #52525b !important;
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
html.dark header {
|
||||
background-color: rgba(9, 9, 11, 0.8) !important;
|
||||
border-color: rgba(63, 63, 70, 0.7) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-white\/90 {
|
||||
background-color: rgba(9, 9, 11, 0.9) !important;
|
||||
}
|
||||
|
||||
html.dark header button.border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark header .text-zinc-600,
|
||||
html.dark header .text-zinc-700 {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Mega menu - full width dropdown */
|
||||
html.dark header .group:hover .fixed {
|
||||
background-color: rgba(9, 9, 11, 0.95) !important;
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
html.dark header .bg-white\/95 {
|
||||
background-color: rgba(9, 9, 11, 0.95) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-zinc-100\/70 {
|
||||
background-color: rgba(39, 39, 42, 0.7) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-zinc-900\/95 {
|
||||
background-color: rgba(24, 24, 27, 0.95) !important;
|
||||
}
|
||||
|
||||
/* Footer - sempre escuro mas ajusta no dark */
|
||||
html.dark footer.bg-zinc-900 {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
|
||||
html.dark footer .bg-zinc-800 {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark footer .border-zinc-800 {
|
||||
border-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Solution pages specific fixes */
|
||||
html.dark .bg-zinc-800 {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-900 {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-950 {
|
||||
background-color: #09090b !important;
|
||||
}
|
||||
|
||||
/* Ensure colored backgrounds remain visible in dark mode */
|
||||
html.dark .bg-emerald-50,
|
||||
html.dark .bg-blue-50,
|
||||
html.dark .bg-purple-50,
|
||||
html.dark .bg-orange-50,
|
||||
html.dark .bg-indigo-50,
|
||||
html.dark .bg-pink-50,
|
||||
html.dark .bg-red-50 {
|
||||
background-color: rgba(var(--tw-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
/* Keep gradient backgrounds intact */
|
||||
html.dark [class*="bg-gradient-to"] {
|
||||
background-image: var(--tw-gradient-stops) !important;
|
||||
}
|
||||
|
||||
/* Preserve brand colors */
|
||||
html.dark .bg-brand,
|
||||
html.dark .bg-emerald-600,
|
||||
html.dark .bg-blue-600,
|
||||
html.dark .bg-purple-600,
|
||||
html.dark .bg-orange-600,
|
||||
html.dark .bg-indigo-600,
|
||||
html.dark .bg-pink-600,
|
||||
html.dark .bg-emerald-500,
|
||||
html.dark .bg-blue-500,
|
||||
html.dark .bg-purple-500,
|
||||
html.dark .bg-orange-500,
|
||||
html.dark .bg-indigo-500,
|
||||
html.dark .bg-pink-500,
|
||||
html.dark .bg-red-500,
|
||||
html.dark .bg-red-600,
|
||||
html.dark .bg-yellow-500,
|
||||
html.dark .bg-zinc-900 {
|
||||
/* Don't override brand colors */
|
||||
}
|
||||
|
||||
/* Text on colored backgrounds should remain white */
|
||||
html.dark .bg-emerald-600 *,
|
||||
html.dark .bg-blue-600 *,
|
||||
html.dark .bg-purple-600 *,
|
||||
html.dark .bg-orange-600 *,
|
||||
html.dark .bg-indigo-600 *,
|
||||
html.dark .bg-pink-600 * {
|
||||
/* Preserve text colors on colored backgrounds */
|
||||
}
|
||||
@@ -40,10 +40,20 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="pt-BR" suppressHydrationWarning>
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
try {
|
||||
const theme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.classList.toggle('dark', theme === 'dark');
|
||||
} catch (e) {}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
|
||||
</head>
|
||||
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} storageKey="theme">
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import Image from "next/image";
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export default function Home() {
|
||||
const [isAnnual, setIsAnnual] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
@@ -213,149 +217,252 @@ export default function Home() {
|
||||
<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">
|
||||
Planos para todos os <span className="gradient-text">tamanhos</span>
|
||||
Planos que <span className="gradient-text">crescem</span> com você
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
|
||||
Todos os módulos inclusos em todos os planos. Escolha o ideal para o tamanho da sua equipe.
|
||||
</p>
|
||||
|
||||
{/* Toggle Mensal/Anual */}
|
||||
<div className="flex items-center justify-center gap-4 mt-8">
|
||||
<span className={`text-sm font-medium transition-colors ${!isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
||||
Mensal
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsAnnual(!isAnnual)}
|
||||
className="relative inline-flex h-8 w-14 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 bg-zinc-200 dark:bg-zinc-700"
|
||||
style={{ backgroundColor: isAnnual ? '#ff0080' : '' }}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform ${
|
||||
isAnnual ? 'translate-x-7' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className={`text-sm font-medium transition-colors ${isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
||||
Anual
|
||||
<span className="ml-2 inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 dark:text-emerald-400">
|
||||
20% OFF
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{/* Plano Básico */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Básico</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 29</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
|
||||
{/* Plano Ignição */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Ignição</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">1 a 30 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-zinc-500">R$</span>
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
|
||||
{isAnnual ? '159,99' : '199,99'}
|
||||
</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400">/mês</span>
|
||||
</div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">Perfeito para começar</p>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
|
||||
R$ 1.919,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Até 10 clientes</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard básico</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios mensais</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte por email</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center">
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Pro */}
|
||||
<div className="bg-brand p-8 rounded-2xl text-white shadow-2xl transform scale-105">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-brand text-sm font-semibold tracking-tight text-white shadow-lg shadow-black/20">
|
||||
<i className="ri-star-line text-xs"></i>
|
||||
<span>Mais Popular</span>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl mb-2">Pro</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold">R$ 79</span>
|
||||
{/* Plano Órbita */}
|
||||
<div className="bg-brand p-6 rounded-2xl text-white shadow-2xl transform lg:scale-105 relative">
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-white text-xs font-bold rounded-full shadow-lg" style={{ color: '#ff0080' }}>
|
||||
MAIS POPULAR
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl mb-1">Órbita</h3>
|
||||
<p className="text-sm text-white/80 mb-4">31 a 100 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-white/80">R$</span>
|
||||
<span className="text-4xl font-bold">
|
||||
{isAnnual ? '319,99' : '399,99'}
|
||||
</span>
|
||||
<span className="text-white/80">/mês</span>
|
||||
</div>
|
||||
<p className="text-white/80">Para agências em crescimento</p>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-white/80 mt-1">
|
||||
R$ 3.839,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Até 100 clientes</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Dashboard completo</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Relatórios ilimitados</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>API integrations</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-6 py-3 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center">
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 bg-white font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center text-sm" style={{ color: '#ff0080' }}>
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Cosmos */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Cosmos</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">101 a 300 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-zinc-500">R$</span>
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
|
||||
{isAnnual ? '639,99' : '799,99'}
|
||||
</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400">/mês</span>
|
||||
</div>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
|
||||
R$ 7.679,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">API para integrações</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Enterprise */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Enterprise</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 199</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
|
||||
<div className="bg-gradient-to-br from-zinc-900 to-zinc-800 dark:from-zinc-950 dark:to-zinc-900 p-6 rounded-2xl border border-zinc-700 dark:border-zinc-800 text-white shadow-xl transition-all">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-heading font-bold text-2xl">Enterprise</h3>
|
||||
<i className="ri-vip-crown-line text-xl text-yellow-400"></i>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold">Sob consulta</span>
|
||||
</div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">Para grandes agências</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Clientes ilimitados</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-300">Tudo do plano Cosmos +</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard personalizado</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-300">Armazenamento customizado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios avançados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">White label</span>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-white">Treinamento personalizado</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center">
|
||||
<Link href="#contact" className="w-full px-4 py-2.5 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity block text-center text-sm">
|
||||
Falar com Vendas
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nota sobre desconto */}
|
||||
<div className="text-center mt-8">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
|
||||
{isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Add-ons Section */}
|
||||
<div className="mt-16 pt-16 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<div className="text-center mb-10">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-3 transition-colors">
|
||||
Expanda sem limites
|
||||
</h3>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 transition-colors">
|
||||
Add-ons disponíveis para todos os planos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-group-line text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 9,90<span className="text-sm font-normal text-zinc-500">/usuário/mês</span></p>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Adicione quantos usuários precisar, sem limite máximo</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-hard-drive-line text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 10,00<span className="text-sm font-normal text-zinc-500">/5GB/mês</span></p>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Expanda seu armazenamento conforme sua necessidade</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -36,28 +36,38 @@ export default function Header() {
|
||||
<div className="relative group">
|
||||
<button className="flex items-center gap-1 text-zinc-600 dark:text-zinc-400 hover:text-brand-gradient transition-all">
|
||||
Soluções
|
||||
<i className="ri-arrow-down-s-line text-sm" />
|
||||
<i className="ri-arrow-down-s-line text-sm group-hover:rotate-180 transition-transform duration-300" />
|
||||
</button>
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-200 absolute left-1/2 -translate-x-1/2 top-full mt-6 w-screen max-w-6xl rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-2xl shadow-2xl p-8">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{[
|
||||
{ href: '#crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
|
||||
{ href: '#erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
|
||||
{ href: '#gestao-projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
|
||||
{ href: '#gestao-pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
|
||||
{ href: '#helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
|
||||
{ href: '#integra', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
|
||||
].map((item) => (
|
||||
<a key={item.href} href={item.href} className="flex items-start gap-3 rounded-2xl px-4 py-3 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-colors">
|
||||
<span className="mt-1 flex h-10 w-10 items-center justify-center rounded-2xl bg-brand text-white text-xl">
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span className="block font-semibold text-base text-zinc-900 dark:text-white">{item.title}</span>
|
||||
<span className="block text-sm text-zinc-500 dark:text-zinc-400">{item.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Full-width mega menu */}
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 ease-out fixed left-0 right-0 top-full mt-0 border-t border-zinc-200/70 dark:border-zinc-800/70 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-6 animate-fadeInUp">
|
||||
{[
|
||||
{ href: '/solucoes/crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
|
||||
{ href: '/solucoes/erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
|
||||
{ href: '/solucoes/projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
|
||||
{ href: '/solucoes/pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
|
||||
{ href: '/solucoes/helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
|
||||
{ href: '/solucoes/integracoes', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
|
||||
{ href: '/solucoes/redes-sociais', icon: 'ri-share-line', title: 'Gestão de Redes Sociais', desc: 'Agende posts e gerencie múltiplas contas. 🚀 Em Breve', badge: true },
|
||||
].map((item, index) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="group/item flex items-start gap-4 rounded-2xl p-5 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<span className="mt-1 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand text-white text-xl group-hover/item:scale-110 group-hover/item:rotate-3 transition-transform duration-200">
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<span className="block font-semibold text-lg text-zinc-900 dark:text-white mb-1 group-hover/item:text-brand-gradient transition-colors">{item.title}</span>
|
||||
<span className="block text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{item.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,12 +116,13 @@ export default function Header() {
|
||||
<p className="text-sm uppercase tracking-[0.3em] text-zinc-500 mb-4">Soluções</p>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ href: '#crm', title: 'CRM Inteligente' },
|
||||
{ href: '#erp', title: 'ERP Financeiro' },
|
||||
{ href: '#gestao-projetos', title: 'Gestão de Projetos' },
|
||||
{ href: '#gestao-pagamentos', title: 'Gestão de Pagamentos' },
|
||||
{ href: '#helpdesk', title: 'Helpdesk 360°' },
|
||||
{ href: '#integra', title: 'Integrações API' },
|
||||
{ href: '/solucoes/crm', title: 'CRM Inteligente' },
|
||||
{ href: '/solucoes/erp', title: 'ERP Financeiro' },
|
||||
{ href: '/solucoes/projetos', title: 'Gestão de Projetos' },
|
||||
{ href: '/solucoes/pagamentos', title: 'Gestão de Pagamentos' },
|
||||
{ href: '/solucoes/helpdesk', title: 'Helpdesk 360°' },
|
||||
{ href: '/solucoes/integracoes', title: 'Integrações API' },
|
||||
{ href: '/solucoes/redes-sociais', title: 'Gestão de Redes Sociais 🚀' },
|
||||
].map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
|
||||
@@ -22,7 +22,16 @@ export default function ThemeToggle() {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||||
onClick={() => {
|
||||
const newTheme = isDark ? 'light' : 'dark';
|
||||
console.log('[ThemeToggle] Current theme:', resolvedTheme);
|
||||
console.log('[ThemeToggle] Changing to:', newTheme);
|
||||
setTheme(newTheme);
|
||||
setTimeout(() => {
|
||||
console.log('[ThemeToggle] HTML class:', document.documentElement.className);
|
||||
console.log('[ThemeToggle] LocalStorage:', localStorage.getItem('theme'));
|
||||
}, 100);
|
||||
}}
|
||||
className="flex h-11 w-11 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-700 shadow-sm transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
|
||||
aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
|
||||
title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
|
||||
|
||||
Reference in New Issue
Block a user