461 lines
17 KiB
Twig
Executable File
461 lines
17 KiB
Twig
Executable File
{% extends "@index/layout.twig" %}
|
|
|
|
{% block title %}{{ platformName }} - Fluxo de Caixa Pro com Inteligência Artificial{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
:root {
|
|
--primary-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
|
|
--ai-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
|
|
--dark-bg: #0f172a;
|
|
--success-color: #22c55e;
|
|
--danger-color: #ef4444;
|
|
--info-color: #06b6d4;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
overflow-x: hidden;
|
|
background: #f8fafc !important;
|
|
}
|
|
|
|
.hero-section {
|
|
background: var(--dark-bg);
|
|
background-image:
|
|
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
|
|
color: white;
|
|
padding: 120px 0 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-badge {
|
|
background: rgba(139, 92, 246, 0.1);
|
|
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
color: #a78bfa;
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-bottom: 25px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 25px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.text-gradient {
|
|
background: var(--primary-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.text-ai-gradient {
|
|
background: var(--ai-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.25rem;
|
|
color: #94a3b8;
|
|
margin-bottom: 40px;
|
|
max-width: 600px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.btn-glow {
|
|
position: relative;
|
|
padding: 16px 35px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
}
|
|
|
|
.btn-success-glow {
|
|
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
|
|
color: white;
|
|
box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
|
|
}
|
|
|
|
.btn-success-glow:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0 30px rgba(37, 211, 102, 0.6);
|
|
color: white;
|
|
}
|
|
|
|
.btn-whatsapp-cta {
|
|
background: white;
|
|
color: #128c7e !important;
|
|
padding: 18px 45px;
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
border-radius: 15px;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
border: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-whatsapp-cta:hover {
|
|
transform: scale(1.05) translateY(-5px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.btn-whatsapp-cta i {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Dashboard Mockup from Imagem3 */
|
|
.mockup-wrapper {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.mockup-container {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 25px;
|
|
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.mockup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.mockup-title {
|
|
color: #1e293b;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.mockup-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mockup-btn {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 1px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: white;
|
|
color: #64748b;
|
|
}
|
|
|
|
.btn-ai-action {
|
|
background: #06b6d4;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.mockup-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.mockup-card {
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border-left: 4px solid #cbd5e1;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.card-receitas { border-left-color: var(--success-color); }
|
|
.card-despesas { border-left-color: var(--danger-color); }
|
|
.card-saldo { border-left-color: var(--info-color); }
|
|
.card-pendentes { border-left-color: #eab308; }
|
|
|
|
.card-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.ai-floating-badge {
|
|
position: absolute;
|
|
top: -20px;
|
|
right: -20px;
|
|
background: var(--ai-gradient);
|
|
color: white;
|
|
padding: 15px 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
z-index: 2;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(2deg); }
|
|
}
|
|
|
|
.ai-pulse {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.ai-pulse::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); opacity: 0.8; }
|
|
100% { transform: scale(3); opacity: 0; }
|
|
}
|
|
|
|
/* Features Section */
|
|
.features-section {
|
|
padding: 100px 0;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 24px;
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.icon-box {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
height: 200px;
|
|
background: linear-gradient(to top, #f1f5f9 0%, transparent 100%);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.chart-bar {
|
|
flex: 1;
|
|
background: #e2e8f0;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 1s ease;
|
|
}
|
|
|
|
.chart-bar.active { background: #3b82f6; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block layout_body %}
|
|
{# Hero Section #}
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="hero-badge">
|
|
<i class="bi bi-stars"></i> Nova Era da Gestão Financeira
|
|
</div>
|
|
<h1 class="hero-title">
|
|
Seu Fluxo de Caixa <br>
|
|
<span class="text-ai-gradient">Potencializado por IA</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
O Fluxo de Caixa Pro utiliza IA para analisar a saúde financeira do seu negócio, alertando sobre misturas de contas pessoais, sugerindo reservas de emergência e prevendo o saldo futuro.
|
|
</p>
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<a href="https://wa.me/5535992261684?text=Olá! Gostaria de saber mais sobre o Fluxo de Caixa Pro." target="_blank" class="btn btn-glow btn-success-glow">
|
|
<i class="bi bi-whatsapp"></i> Falar com Especialista
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="mockup-wrapper">
|
|
<div class="ai-floating-badge">
|
|
<div class="ai-pulse"></div>
|
|
<div>
|
|
<div class="fw-bold" style="font-size: 0.85rem;">IA Ativa</div>
|
|
<div style="font-size: 0.75rem; opacity: 0.9;">Otimizando projeções...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup-container">
|
|
<div class="mockup-header">
|
|
<h3 class="mockup-title">Dashboard Pro</h3>
|
|
<div class="mockup-actions">
|
|
<div class="mockup-btn"><i class="bi bi-bank"></i> Conciliação</div>
|
|
<div class="mockup-btn btn-ai-action"><i class="bi bi-cpu"></i> Análise IA</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup-cards">
|
|
<div class="mockup-card card-receitas">
|
|
<div class="card-label">Receitas</div>
|
|
<div class="card-value">R$ 45.200,00</div>
|
|
</div>
|
|
<div class="mockup-card card-despesas">
|
|
<div class="card-label">Despesas</div>
|
|
<div class="card-value">R$ 28.150,00</div>
|
|
</div>
|
|
<div class="mockup-card card-saldo">
|
|
<div class="card-label">Saldo</div>
|
|
<div class="card-value text-info">R$ 17.050,00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="fw-bold m-0" style="color: #1e293b;">Projeção de Saldo (12 meses)</h6>
|
|
<span class="badge bg-success-subtle text-success">Cenário Otimista +24%</span>
|
|
</div>
|
|
<div class="chart-placeholder">
|
|
<div class="chart-bar" style="height: 30%;"></div>
|
|
<div class="chart-bar" style="height: 45%;"></div>
|
|
<div class="chart-bar" style="height: 40%;"></div>
|
|
<div class="chart-bar active" style="height: 65%;"></div>
|
|
<div class="chart-bar" style="height: 55%;"></div>
|
|
<div class="chart-bar" style="height: 80%;"></div>
|
|
<div class="chart-bar active" style="height: 95%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# Features Section #}
|
|
<section class="features-section">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<span class="text-primary fw-bold text-uppercase tracking-wider">Recursos Premium</span>
|
|
<h2 class="display-5 fw-bold mt-2" style="color: #0f172a;">Por que escolher o Pro?</h2>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-3">
|
|
<div class="feature-card">
|
|
<div class="icon-box bg-blue-subtle text-primary">
|
|
<i class="bi bi-lightning-charge-fill"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3">Análise Preditiva</h4>
|
|
<p class="text-muted small">Previsões baseadas em dados históricos reais para os próximos 12 meses, identificando tendências de crescimento.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="feature-card">
|
|
<div class="icon-box bg-purple-subtle text-purple" style="color: #8b5cf6;">
|
|
<i class="bi bi-robot"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3">IA Consultiva</h4>
|
|
<p class="text-muted small">Receba recomendações automáticas sobre reserva de emergência e separação entre contas pessoais e empresariais.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="feature-card">
|
|
<div class="icon-box bg-info-subtle text-info">
|
|
<i class="bi bi-graph-up-arrow"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3">Gestão de Riscos</h4>
|
|
<p class="text-muted small">Identificação imediata de déficit operacional e gaps de caixa (contas a pagar vs receber).</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="feature-card">
|
|
<div class="icon-box bg-green-subtle text-success">
|
|
<i class="bi bi-file-earmark-excel"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3">Exportação Pro</h4>
|
|
<p class="text-muted small">Gere relatórios detalhados em Excel com um clique para contabilidade ou reuniões de diretoria.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# CTA Section #}
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="bg-primary rounded-5 p-5 text-center text-white" style="background: var(--primary-gradient) !important;">
|
|
<h2 class="display-6 fw-bold mb-4">Pronto para transformar sua gestão?</h2>
|
|
<p class="lead mb-4 opacity-75">Fale agora mesmo conosco e descubra como a IA pode dominar suas finanças.</p>
|
|
<a href="https://wa.me/5535992261684?text=Olá! Gostaria de uma demonstração do Fluxo de Caixa Pro." target="_blank" class="btn-whatsapp-cta">
|
|
<i class="bi bi-whatsapp"></i> Solicitar Demonstração Grátis
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Simulação de animação das barras do gráfico
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const bars = document.querySelectorAll('.chart-bar');
|
|
bars.forEach((bar, index) => {
|
|
const finalHeight = bar.style.height;
|
|
bar.style.height = '0';
|
|
setTimeout(() => {
|
|
bar.style.height = finalHeight;
|
|
}, index * 100);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|