Prepara versao dev 1.0
This commit is contained in:
Erik Silva
28
frontend-aggios.app/Dockerfile
Normal file
28
frontend-aggios.app/Dockerfile
Normal file
@@ -0,0 +1,28 @@
|
||||
# Build stage
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# Runtime stage
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
COPY --from=builder /app/.next ./.next
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
|
||||
CMD node -e "require('http').get('http://localhost:3000', (res) => { if (res.statusCode !== 200) { throw new Error('Status ' + res.statusCode); } }).on('error', (err) => { throw err; });"
|
||||
|
||||
CMD ["npm", "start"]
|
||||
@@ -1,49 +1,37 @@
|
||||
@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');
|
||||
/* @config "../tailwind.config.js"; */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
/* Configuração global */
|
||||
* {
|
||||
@apply border-zinc-200 dark:border-zinc-800;
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply antialiased;
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@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;
|
||||
}
|
||||
@layer base {
|
||||
body {
|
||||
background-color: var(--color-surface-muted);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
.font-heading {
|
||||
font-family: 'Open Sans', system-ui, sans-serif;
|
||||
}
|
||||
::selection {
|
||||
background-color: var(--color-brand-500);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: 'Fira Code', ui-monospace, monospace;
|
||||
}
|
||||
.surface-card {
|
||||
background-color: var(--color-surface-card);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
/* Classes do design system - gradientes sempre visíveis */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #FF3A05, #FF0080);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.bg-linear-to-r {
|
||||
background: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
}
|
||||
|
||||
.bg-linear-to-br {
|
||||
background: linear-gradient(to bottom right, #FF3A05, #FF0080);
|
||||
}
|
||||
|
||||
/* Estados de foco */
|
||||
*:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-orange-500;
|
||||
.glass-panel {
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,26 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const openSans = Open_Sans({
|
||||
variable: "--font-open-sans",
|
||||
subsets: ["latin"],
|
||||
weight: ["600", "700"],
|
||||
});
|
||||
|
||||
const firaCode = Fira_Code({
|
||||
variable: "--font-fira-code",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
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.",
|
||||
@@ -20,7 +39,10 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="pt-BR" suppressHydrationWarning>
|
||||
<body className="antialiased">
|
||||
<head>
|
||||
<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}>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -1,72 +1,145 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import ThemeToggle from "@/components/ThemeToggle";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<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 dark:text-white transition-colors">aggios</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<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">
|
||||
<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">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Header />
|
||||
|
||||
<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">
|
||||
<section className="py-28 bg-white dark:bg-zinc-900 transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center">
|
||||
<div>
|
||||
<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-8">
|
||||
<i className="ri-rocket-line text-base"></i>
|
||||
<span>
|
||||
Plataforma de Gestão Financeira
|
||||
</span>
|
||||
<span>Plataforma de Gestão Financeira</span>
|
||||
</div>
|
||||
|
||||
<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 className="font-heading font-bold text-5xl lg:text-6xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
|
||||
Transforme sua <span className="gradient-text">gestão financeira</span> em uma única interface.
|
||||
</h1>
|
||||
|
||||
<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 className="text-lg text-zinc-600 dark:text-zinc-400 mb-10 leading-relaxed transition-colors">
|
||||
Conecte CRM, ERP, projetos, pagamentos e suporte com dashboards inteligentes, automações e insights em tempo real para sua agência.
|
||||
</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">
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-[#FF3A05]/30">
|
||||
<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">
|
||||
<Link href="#demo" className="px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold 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 className="mt-8 flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-shield-check-line text-lg gradient-text"></i>
|
||||
Segurança bancária
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-flashlight-line text-lg gradient-text"></i>
|
||||
Automatizações inteligentes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 blur-3xl bg-linear-to-r from-[#FF3A05]/20 to-[#FF0080]/20 rounded-[40px]"></div>
|
||||
<div className="relative rounded-4xl border border-white/30 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl shadow-2xl overflow-hidden">
|
||||
<div className="flex items-center justify-between px-8 py-6 border-b border-zinc-100 dark:border-zinc-800">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Painel ao vivo</p>
|
||||
<h3 className="text-xl font-semibold text-zinc-900 dark:text-white">Aggios Dashboard</h3>
|
||||
</div>
|
||||
<span className="px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-semibold">Online</span>
|
||||
</div>
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{ label: 'MRR', value: 'R$ 128K' },
|
||||
{ label: 'Clientes ativos', value: '312' },
|
||||
{ label: 'NPS', value: '92' },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="rounded-2xl border border-zinc-100 dark:border-zinc-800 p-4">
|
||||
<p className="text-xs uppercase tracking-wide text-zinc-400">{stat.label}</p>
|
||||
<p className="text-2xl font-semibold text-zinc-900 dark:text-white mt-1">{stat.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="rounded-2xl border border-zinc-100 dark:border-zinc-800 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="font-semibold text-zinc-900 dark:text-white">Fluxo de caixa</p>
|
||||
<span className="text-sm text-emerald-500">+18% este mês</span>
|
||||
</div>
|
||||
<div className="h-40 bg-linear-to-r from-[#FF3A05]/20 via-transparent to-[#FF0080]/20 rounded-xl relative">
|
||||
<div className="absolute inset-4 rounded-xl border border-dashed border-zinc-200 dark:border-zinc-800"></div>
|
||||
<div className="absolute inset-0 flex items-end gap-2 p-6">
|
||||
{[40, 60, 80, 50, 90, 70].map((height, index) => (
|
||||
<span key={index} className="w-4 rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080]" style={{ height: `${height}%` }}></span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Solutions Section */}
|
||||
<section id="solutions" className="py-24 bg-zinc-50/60 dark:bg-zinc-900/40 border-y border-zinc-200 dark:border-zinc-800">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="mb-16 text-center max-w-3xl mx-auto space-y-6">
|
||||
<div>
|
||||
<p className="text-sm uppercase tracking-[0.3em] text-zinc-500">Soluções</p>
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mt-4 leading-tight">
|
||||
Suite completa para gerir <span className="gradient-text">todo o ciclo financeiro.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400">
|
||||
Escolha o módulo ideal ou combine todos para criar um ecossistema integrado com CRM, ERP, projetos, pagamentos e helpdesk em um só lugar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ id: "crm", icon: "ri-customer-service-2-line", title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
|
||||
{ id: "erp", icon: "ri-database-2-line", title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
|
||||
{ id: "gestao-projetos", icon: "ri-trello-line", title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
|
||||
{ id: "gestao-pagamentos", icon: "ri-secure-payment-line", title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
|
||||
{ id: "helpdesk", icon: "ri-customer-service-line", title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
|
||||
{ id: "integra", icon: "ri-share-forward-line", title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
|
||||
].map((item) => (
|
||||
<div id={item.id} key={item.id} className="relative rounded-4xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950/80 backdrop-blur-xl p-8 shadow-lg overflow-hidden">
|
||||
<div className="absolute -top-20 -right-10 h-40 w-40 rounded-full bg-linear-to-r from-[#FF3A05]/10 to-[#FF0080]/10 blur-3xl" aria-hidden="true"></div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative z-10">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-3 mb-4 px-4 py-2 rounded-full border border-zinc-200 dark:border-zinc-800 text-xs uppercase tracking-[0.2em] text-zinc-500">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white text-lg">
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
{item.title}
|
||||
</div>
|
||||
<p className="text-lg text-zinc-700 dark:text-zinc-300 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-48 h-36 rounded-2xl border border-dashed border-zinc-200 dark:border-zinc-800 p-4 text-sm text-zinc-500 dark:text-zinc-400 bg-white/60 dark:bg-zinc-900/60">
|
||||
<p className="font-semibold text-zinc-900 dark:text-white mb-2">Módulo em ação</p>
|
||||
<div className="space-y-2">
|
||||
<div className="h-2 rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080]/70"></div>
|
||||
<div className="h-2 rounded-full bg-linear-to-r from-[#FF0080] to-[#FF3A05]/70 w-3/4"></div>
|
||||
<div className="h-2 rounded-full bg-zinc-200 dark:bg-zinc-800 w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -161,24 +234,32 @@ export default function Home() {
|
||||
|
||||
<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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
</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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
<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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
</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">
|
||||
<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-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
@@ -221,7 +302,7 @@ export default function Home() {
|
||||
</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">
|
||||
<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">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
@@ -239,23 +320,33 @@ export default function Home() {
|
||||
|
||||
<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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
</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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
<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="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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">
|
||||
<i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
</ul>
|
||||
@@ -280,7 +371,7 @@ export default function Home() {
|
||||
</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">
|
||||
<Link href="http://dash.localhost/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>
|
||||
|
||||
67
frontend-aggios.app/app/tokens.css
Normal file
67
frontend-aggios.app/app/tokens.css
Normal file
@@ -0,0 +1,67 @@
|
||||
@layer theme {
|
||||
:root {
|
||||
/* Paleta de cores principais */
|
||||
--color-brand-50: #f0f9ff;
|
||||
--color-brand-100: #e0f2fe;
|
||||
--color-brand-200: #bae6fd;
|
||||
--color-brand-300: #7dd3fc;
|
||||
--color-brand-400: #38bdf8;
|
||||
--color-brand-500: #0ea5e9;
|
||||
--color-brand-600: #0284c7;
|
||||
--color-brand-700: #0369a1;
|
||||
--color-brand-800: #075985;
|
||||
--color-brand-900: #0c4a6e;
|
||||
--color-brand-950: #082f49;
|
||||
|
||||
/* Superfícies e tipografia */
|
||||
--color-surface-light: #ffffff;
|
||||
--color-surface-dark: #0a0a0a;
|
||||
--color-surface-muted: #f5f7fb;
|
||||
--color-surface-card: #ffffff;
|
||||
--color-border-strong: rgba(15, 23, 42, 0.08);
|
||||
--color-text-primary: #0f172a;
|
||||
--color-text-secondary: #475569;
|
||||
--color-text-inverse: #f8fafc;
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
--color-gray-950: #030712;
|
||||
|
||||
/* Espaçamento */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
|
||||
/* Gradientes */
|
||||
--gradient-primary: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
|
||||
--gradient-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
||||
|
||||
/* Focus ring */
|
||||
--focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.3);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Invertendo superfícies e texto para dark mode */
|
||||
--color-surface-light: #020617;
|
||||
--color-surface-dark: #f8fafc;
|
||||
--color-surface-muted: #0b1220;
|
||||
--color-surface-card: #0f172a;
|
||||
--color-border-strong: rgba(148, 163, 184, 0.25);
|
||||
--color-text-primary: #f8fafc;
|
||||
--color-text-secondary: #cbd5f5;
|
||||
--color-text-inverse: #0f172a;
|
||||
|
||||
/* Ajustando gradientes para dark */
|
||||
--gradient-primary: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-brand-800) 100%);
|
||||
}
|
||||
}
|
||||
148
frontend-aggios.app/components/Header.tsx
Normal file
148
frontend-aggios.app/components/Header.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import ThemeToggle from "@/components/ThemeToggle";
|
||||
|
||||
const navItems = [
|
||||
{ href: "#features", label: "Recursos" },
|
||||
{ href: "#pricing", label: "Preços" },
|
||||
{ href: "#contact", label: "Contato" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
||||
|
||||
const toggleMobileMenu = () => setIsMobileOpen((prev) => !prev);
|
||||
const closeMobileMenu = () => setIsMobileOpen(false);
|
||||
|
||||
return (
|
||||
<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">
|
||||
<Link href="#" className="flex items-center gap-2" onClick={closeMobileMenu}>
|
||||
<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 dark:text-white transition-colors">aggios</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium relative">
|
||||
{navItems.map((item) => (
|
||||
<a key={item.href} href={item.href} 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">
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="relative group">
|
||||
<button className="flex items-center gap-1 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">
|
||||
Soluções
|
||||
<i className="ri-arrow-down-s-line text-sm" />
|
||||
</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-linear-to-r from-[#FF3A05] to-[#FF0080] 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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<ThemeToggle />
|
||||
<Link href="http://dash.localhost/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="http://dash.localhost/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">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden flex items-center gap-4">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={toggleMobileMenu}
|
||||
aria-label="Abrir menu"
|
||||
className="w-11 h-11 rounded-2xl border border-zinc-200 dark:border-zinc-800 flex items-center justify-center text-2xl text-zinc-700 dark:text-zinc-200"
|
||||
>
|
||||
<i className={isMobileOpen ? "ri-close-line" : "ri-menu-line"}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`md:hidden fixed inset-x-4 top-20 rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl p-6 transition-all duration-200 ${isMobileOpen ? "opacity-100 visible translate-y-0" : "opacity-0 invisible -translate-y-2"
|
||||
}`}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="flex items-center justify-between text-lg font-semibold text-zinc-900 dark:text-white"
|
||||
>
|
||||
{item.label}
|
||||
<i className="ri-arrow-right-up-line text-xl text-zinc-400"></i>
|
||||
</a>
|
||||
))}
|
||||
<div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<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' },
|
||||
].map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="flex items-center justify-between rounded-2xl border border-zinc-200 dark:border-zinc-800 px-4 py-3 text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
{item.title}
|
||||
<i className="ri-arrow-right-line"></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 space-y-3">
|
||||
<Link
|
||||
href="http://dash.localhost/login"
|
||||
onClick={closeMobileMenu}
|
||||
className="w-full px-5 py-3 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center font-semibold text-zinc-700 dark:text-zinc-200"
|
||||
>
|
||||
Entrar
|
||||
</Link>
|
||||
<Link
|
||||
href="http://dash.localhost/cadastro"
|
||||
onClick={closeMobileMenu}
|
||||
className="w-full px-5 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold shadow-lg"
|
||||
>
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
experimental: {
|
||||
externalDir: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
15
frontend-aggios.app/package-lock.json
generated
15
frontend-aggios.app/package-lock.json
generated
@@ -11,7 +11,8 @@
|
||||
"next": "16.0.7",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0"
|
||||
"react-dom": "19.2.0",
|
||||
"remixicon": "^4.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.0.0-alpha.25",
|
||||
@@ -25,6 +26,12 @@
|
||||
"typescript": "^5"
|
||||
}
|
||||
},
|
||||
"../design-system": {
|
||||
"name": "@aggios/design-system",
|
||||
"version": "0.0.1",
|
||||
"extraneous": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
|
||||
@@ -5401,6 +5408,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/remixicon": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.7.0.tgz",
|
||||
"integrity": "sha512-g2pHOofQWARWpxdbrQu5+K3C8ZbqguQFzE54HIMWFCpFa63pumaAltIgZmFMRQpKKBScRWQASQfWxS9asNCcHQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
"next": "16.0.7",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0"
|
||||
"react-dom": "19.2.0",
|
||||
"remixicon": "^4.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.0.0-alpha.25",
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
const sharedPreset = require("./tailwind.preset.js");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
presets: [sharedPreset],
|
||||
content: [
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
darkMode: "class",
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
35
frontend-aggios.app/tailwind.preset.js
Normal file
35
frontend-aggios.app/tailwind.preset.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
|
||||
heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
950: '#082f49',
|
||||
},
|
||||
surface: {
|
||||
light: '#ffffff',
|
||||
dark: '#0a0a0a',
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
glow: '0 0 20px rgba(14, 165, 233, 0.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user