feat: institutional site dark mode
This commit is contained in:
Erik Silva
@@ -1,57 +1,49 @@
|
||||
@config "../tailwind.config.js";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Fira+Code:wght@400&display=swap');
|
||||
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* Configuração global */
|
||||
* {
|
||||
@apply border-zinc-200 dark:border-zinc-800;
|
||||
}
|
||||
|
||||
/* Design System Colors - Somente Gradientes */
|
||||
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
||||
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
--gradient-hover: linear-gradient(135deg, #FF3A05, #FF0080);
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #171717;
|
||||
--text-secondary: #7D7D7D;
|
||||
--text-light: #A3A3A3;
|
||||
|
||||
/* UI Colors */
|
||||
--border: #E5E5E5;
|
||||
--surface: #FAFAFA;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
html {
|
||||
@apply antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
@apply bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Gradient text utility */
|
||||
.font-heading {
|
||||
font-family: 'Open Sans', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: 'Fira Code', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* Classes do design system - gradientes sempre visíveis */
|
||||
.gradient-text {
|
||||
background: var(--gradient-text);
|
||||
background: linear-gradient(135deg, #FF3A05, #FF0080);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Gradient utilities */
|
||||
.gradient-bg {
|
||||
background: var(--gradient);
|
||||
.bg-linear-to-r {
|
||||
background: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
}
|
||||
|
||||
.gradient-hover-bg {
|
||||
background: var(--gradient-hover);
|
||||
.bg-linear-to-br {
|
||||
background: linear-gradient(to bottom right, #FF3A05, #FF0080);
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
/* Estados de foco */
|
||||
*:focus-visible {
|
||||
outline: 2px solid #FF3A05;
|
||||
outline-offset: 2px;
|
||||
@apply outline-2 outline-offset-2 outline-orange-500;
|
||||
}
|
||||
@@ -1,20 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Aggios - Plataforma de Gestão Financeira",
|
||||
description: "A plataforma completa para gestão de agências e clientes. Controle financeiro, relatórios inteligentes e muito mais.",
|
||||
keywords: "gestão financeira, agências, relatórios, dashboard, controle financeiro",
|
||||
openGraph: {
|
||||
title: "Aggios - Transforme sua gestão financeira",
|
||||
description: "A plataforma completa para gestão de agências e clientes.",
|
||||
type: "website",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,11 +19,11 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<html lang="pt-BR" suppressHydrationWarning>
|
||||
<body className="antialiased">
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import ThemeToggle from "@/components/ThemeToggle";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-zinc-200">
|
||||
<header className="fixed inset-x-0 top-0 z-50 border-b border-zinc-200/70 dark:border-zinc-800/70 bg-white/90 dark:bg-zinc-950/80 backdrop-blur-xl shadow-sm transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">A</span>
|
||||
</div>
|
||||
<span className="font-heading font-bold text-xl text-zinc-900">aggios</span>
|
||||
<span className="font-heading font-bold text-xl text-zinc-900 dark:text-white transition-colors">aggios</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a href="#features" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a>
|
||||
<a href="#pricing" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a>
|
||||
<a href="#contact" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Contato</a>
|
||||
<a href="#features" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a>
|
||||
<a href="#pricing" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a>
|
||||
<a href="#contact" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Contato</a>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="https://dash.aggios.app/login" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
|
||||
<ThemeToggle />
|
||||
<Link href="https://dash.aggios.app/login" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
|
||||
Entrar
|
||||
</Link>
|
||||
<Link href="https://dash.aggios.app/cadastro" className="px-6 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
@@ -33,265 +35,267 @@ export default function Home() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-[#FF3A05]/10 to-[#FF0080]/10 rounded-full text-sm font-medium mb-6">
|
||||
<i className="ri-rocket-line text-base bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent">
|
||||
Plataforma de Gestão Financeira
|
||||
</span>
|
||||
</div>
|
||||
<main className="pt-28 bg-white dark:bg-zinc-950 transition-colors">
|
||||
{/* Hero 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">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-full text-sm font-semibold text-white shadow-lg shadow-[#FF3A05]/25 mb-6">
|
||||
<i className="ri-rocket-line text-base"></i>
|
||||
<span>
|
||||
Plataforma de Gestão Financeira
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-heading font-bold text-5xl lg:text-7xl text-zinc-900 mb-6 leading-tight">
|
||||
Transforme sua <br />
|
||||
<span className="gradient-text">gestão financeira</span>
|
||||
</h1>
|
||||
<h1 className="font-heading font-bold text-5xl lg:text-7xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
|
||||
Transforme sua <br />
|
||||
<span className="gradient-text">gestão financeira</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
A plataforma completa para gestão de agências e clientes.
|
||||
Controle financeiro, relatórios inteligentes e muito mais.
|
||||
</p>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-3xl mx-auto leading-relaxed transition-colors">
|
||||
A plataforma completa para gestão de agências e clientes.
|
||||
Controle financeiro, relatórios inteligentes e muito mais.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-arrow-right-line mr-2"></i>
|
||||
Começar Grátis
|
||||
</Link>
|
||||
<Link href="#demo" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
|
||||
<i className="ri-play-circle-line mr-2"></i>
|
||||
Ver Demo
|
||||
</Link>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-arrow-right-line mr-2"></i>
|
||||
Começar Grátis
|
||||
</Link>
|
||||
<Link href="#demo" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
|
||||
<i className="ri-play-circle-line mr-2"></i>
|
||||
Ver Demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 bg-zinc-50">
|
||||
<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 mb-6">
|
||||
Recursos que fazem a <span className="gradient-text">diferença</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 max-w-3xl mx-auto">
|
||||
Ferramentas poderosas para simplificar sua gestão e impulsionar seus resultados.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-dashboard-3-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Dashboard Inteligente</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors scroll-mt-32">
|
||||
<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 que fazem a <span className="gradient-text">diferença</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Ferramentas poderosas para simplificar sua gestão e impulsionar seus resultados.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-team-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Gestão de Clientes</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-file-chart-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Relatórios Avançados</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-secure-payment-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Segurança Total</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-smartphone-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Acesso Mobile</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-customer-service-2-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Suporte 24/7</h3>
|
||||
<p className="text-zinc-600 leading-relaxed">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="py-20 bg-white">
|
||||
<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 mb-6">
|
||||
Planos para todos os <span className="gradient-text">tamanhos</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 max-w-3xl mx-auto">
|
||||
Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
|
||||
</p>
|
||||
</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 p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Básico</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900">R$ 29</span>
|
||||
<span className="text-zinc-600">/mês</span>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-dashboard-3-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<p className="text-zinc-600">Perfeito para começar</p>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Até 10 clientes</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Dashboard básico</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Relatórios mensais</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Suporte por email</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Pro */}
|
||||
<div className="bg-linear-to-br from-[#FF3A05] to-[#FF0080] 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 bg-white/20 rounded-full text-sm font-medium mb-4">
|
||||
<i className="ri-star-line"></i>
|
||||
Mais Popular
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-team-line text-2xl text-white"></i>
|
||||
</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>
|
||||
<span className="text-white/80">/mês</span>
|
||||
</div>
|
||||
<p className="text-white/80">Para agências em crescimento</p>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-white text-lg"></i>
|
||||
<span>Até 100 clientes</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-white text-lg"></i>
|
||||
<span>Dashboard completo</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-white text-lg"></i>
|
||||
<span>Relatórios ilimitados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-white text-lg"></i>
|
||||
<span>Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-white text-lg"></i>
|
||||
<span>API integrations</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="https://dash.aggios.app/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">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Enterprise */}
|
||||
<div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Enterprise</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900">R$ 199</span>
|
||||
<span className="text-zinc-600">/mês</span>
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-file-chart-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<p className="text-zinc-600">Para grandes agências</p>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Clientes ilimitados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Dashboard personalizado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Relatórios avançados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">Suporte dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600">White label</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-secure-payment-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
|
||||
</div>
|
||||
|
||||
<Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
|
||||
Falar com Vendas
|
||||
</Link>
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-smartphone-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-customer-service-2-line text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-zinc-50">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 mb-6">
|
||||
Pronto para <span className="gradient-text">começar?</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto">
|
||||
Junte-se a centenas de agências que já transformaram sua gestão com a Aggios.
|
||||
</p>
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="py-20 bg-white dark:bg-zinc-900 transition-colors scroll-mt-32">
|
||||
<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>
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
Começar Grátis Agora
|
||||
</Link>
|
||||
<Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
|
||||
<i className="ri-phone-line mr-2"></i>
|
||||
Falar com Especialista
|
||||
</Link>
|
||||
<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-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 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>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">Perfeito para começar</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Até 10 clientes</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard básico</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios mensais</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte por email</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="https://dash.aggios.app/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-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Pro */}
|
||||
<div className="bg-linear-to-br from-[#FF3A05] to-[#FF0080] 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-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
<span className="text-white/80">/mês</span>
|
||||
</div>
|
||||
<p className="text-white/80">Para agências em crescimento</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>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Dashboard completo</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>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></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="https://dash.aggios.app/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">
|
||||
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-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 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>
|
||||
<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">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Clientes ilimitados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard personalizado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios avançados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">White label</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-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
|
||||
Falar com Vendas
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* CTA 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">
|
||||
<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">começar?</span>
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-3xl mx-auto transition-colors">
|
||||
Junte-se a centenas de agências que já transformaram sua gestão com a Aggios.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
Começar Grátis Agora
|
||||
</Link>
|
||||
<Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
|
||||
<i className="ri-phone-line mr-2"></i>
|
||||
Falar com Especialista
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer id="contact" className="bg-zinc-900 text-white py-16">
|
||||
<footer id="contact" className="bg-zinc-900 dark:bg-black text-white py-16 transition-colors scroll-mt-32">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="md:col-span-2">
|
||||
@@ -306,13 +310,13 @@ export default function Home() {
|
||||
Transforme sua gestão e impulsione seus resultados.
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<i className="ri-linkedin-line text-lg group-hover:text-white"></i>
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<i className="ri-twitter-line text-lg group-hover:text-white"></i>
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
|
||||
<i className="ri-instagram-line text-lg group-hover:text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -339,7 +343,7 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-zinc-800 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between">
|
||||
<div className="border-t border-zinc-800 dark:border-zinc-700 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between transition-colors">
|
||||
<p className="text-zinc-400 text-sm">
|
||||
© 2025 Aggios. Todos os direitos reservados.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user