1204 lines
31 KiB
Svelte
1204 lines
31 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
|
|
import basspagoPagementos from '$lib/assets/basspago-pagamentos.png';
|
|
import planoPf from '$lib/assets/plano-pf.svg';
|
|
import planoPj from '$lib/assets/plano-pj.svg';
|
|
import planoPro from '$lib/assets/plano-pro.svg';
|
|
|
|
const beneficios = [
|
|
{
|
|
title: 'Segurança',
|
|
description: 'Antifraude nativo em todas as transações, protegendo seu negócio automaticamente.'
|
|
},
|
|
{
|
|
title: 'Mais economia',
|
|
description: 'Economize tempo, aumente a produtividade e reduza custos de integração em múltiplas plataformas.'
|
|
},
|
|
{
|
|
title: 'Alta escalabilidade',
|
|
description: 'Cresça de 100 a 1.000.000 com nossa plataforma, projetada para escalar sem fricção'
|
|
},
|
|
{
|
|
title: 'Suporte de verdade',
|
|
description: 'Nosso time garante atendimento rápido e eficiente, sem filas de espera e SLA demorado.'
|
|
}
|
|
];
|
|
|
|
const planos = [
|
|
{
|
|
id: 'pf',
|
|
icon: planoPf,
|
|
title: 'Plano PF',
|
|
description: 'Para autônomos e profissionais que precisam receber, pagar valores com agilidade. ',
|
|
price: 'R$ 9,90',
|
|
priceLabel: 'Mensalidade',
|
|
recursos: [
|
|
'Pix',
|
|
'Pix saque',
|
|
'Pagamento de contas',
|
|
'Extrato',
|
|
'Pix Automático',
|
|
'Link de Pagamento',
|
|
'Agendamentos',
|
|
'PDV'
|
|
],
|
|
isPro: false
|
|
},
|
|
{
|
|
id: 'pj',
|
|
icon: planoPj,
|
|
title: 'Plano PJ',
|
|
description: 'Tudo que sua empresa precisa para pagar, receber e escalar.',
|
|
price: 'R$ 29,90',
|
|
priceLabel: 'Mensalidade',
|
|
recursos: [
|
|
'Pix',
|
|
'Emissão de cobrança',
|
|
'Pagamento',
|
|
'Fluxo de aprovação',
|
|
'Agendamentos',
|
|
'Pagamento em lote',
|
|
'Controle de acessos',
|
|
'Link de Pagamento',
|
|
'PDV',
|
|
'Pix Automático'
|
|
],
|
|
isPro: false
|
|
},
|
|
{
|
|
id: 'pro',
|
|
icon: planoPro,
|
|
title: 'Plano PRO',
|
|
description: 'Para empresas que precisam de soluções de pagamento personalizadas.',
|
|
info: 'Tenha uma solução segura e flexível, com APIs completas e integração simples para automatizar toda a jornada financeira da sua empresa.',
|
|
recursos: [
|
|
'APIs Pix (cash in e cash out)',
|
|
'API de pagamento',
|
|
'Webhooks',
|
|
'Conta Escrow'
|
|
],
|
|
isPro: true
|
|
}
|
|
];
|
|
|
|
let formData = {
|
|
nome: '',
|
|
celular: '',
|
|
email: '',
|
|
empresa: '',
|
|
setor: '',
|
|
funcionarios: '',
|
|
faturamento: '',
|
|
detalhes: ''
|
|
};
|
|
|
|
let errors = {};
|
|
let loading = false;
|
|
let success = false;
|
|
let message = '';
|
|
|
|
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbxwB7e3k4_RXX5HaX0Y77AMtTjxTUPWRjFttaFagQ5QXYOxrB4finzgvAlcmOxPxPheNw/exec';
|
|
|
|
function validateField(field) {
|
|
const newErrors = { ...errors };
|
|
|
|
switch (field) {
|
|
case 'nome':
|
|
if (!formData.nome) {
|
|
newErrors.nome = 'Nome é obrigatório';
|
|
} else {
|
|
delete newErrors.nome;
|
|
}
|
|
break;
|
|
case 'celular':
|
|
const celularDigits = formData.celular.replace(/\D/g, '');
|
|
if (!formData.celular) {
|
|
newErrors.celular = 'Celular é obrigatório';
|
|
} else if (celularDigits.length < 10 || celularDigits.length > 11) {
|
|
newErrors.celular = 'Celular inválido';
|
|
} else {
|
|
delete newErrors.celular;
|
|
}
|
|
break;
|
|
case 'email':
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!formData.email) {
|
|
newErrors.email = 'E-mail é obrigatório';
|
|
} else if (!emailRegex.test(formData.email)) {
|
|
newErrors.email = 'E-mail inválido';
|
|
} else {
|
|
delete newErrors.email;
|
|
}
|
|
break;
|
|
case 'empresa':
|
|
if (!formData.empresa) {
|
|
newErrors.empresa = 'Nome da empresa é obrigatório';
|
|
} else {
|
|
delete newErrors.empresa;
|
|
}
|
|
break;
|
|
case 'setor':
|
|
if (!formData.setor) {
|
|
newErrors.setor = 'Setor de atuação é obrigatório';
|
|
} else {
|
|
delete newErrors.setor;
|
|
}
|
|
break;
|
|
case 'funcionarios':
|
|
if (!formData.funcionarios) {
|
|
newErrors.funcionarios = 'Número de funcionários é obrigatório';
|
|
} else {
|
|
delete newErrors.funcionarios;
|
|
}
|
|
break;
|
|
case 'faturamento':
|
|
if (!formData.faturamento) {
|
|
newErrors.faturamento = 'Faturamento anual é obrigatório';
|
|
} else {
|
|
delete newErrors.faturamento;
|
|
}
|
|
break;
|
|
}
|
|
|
|
errors = newErrors;
|
|
}
|
|
|
|
function validateAll() {
|
|
Object.keys(formData).forEach(field => {
|
|
if (field !== 'detalhes') {
|
|
validateField(field);
|
|
}
|
|
});
|
|
return Object.keys(errors).length === 0;
|
|
}
|
|
|
|
async function submitForm(e) {
|
|
e.preventDefault();
|
|
|
|
if (!validateAll()) {
|
|
return;
|
|
}
|
|
|
|
loading = true;
|
|
message = '';
|
|
|
|
try {
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = GOOGLE_SCRIPT_URL;
|
|
form.style.display = 'none';
|
|
|
|
Object.keys(formData).forEach(key => {
|
|
if (formData[key]) {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = key;
|
|
input.value = formData[key];
|
|
form.appendChild(input);
|
|
}
|
|
});
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.name = 'response_frame';
|
|
iframe.style.display = 'none';
|
|
|
|
document.body.appendChild(iframe);
|
|
document.body.appendChild(form);
|
|
form.target = 'response_frame';
|
|
form.submit();
|
|
|
|
setTimeout(() => {
|
|
success = true;
|
|
message = 'Solicitação enviada com sucesso! Nossa equipe entrará em contato.';
|
|
|
|
formData = {
|
|
nome: '', celular: '', email: '', empresa: '',
|
|
setor: '', funcionarios: '', faturamento: '', detalhes: ''
|
|
};
|
|
errors = {};
|
|
|
|
if (document.body.contains(form)) document.body.removeChild(form);
|
|
if (document.body.contains(iframe)) document.body.removeChild(iframe);
|
|
|
|
setTimeout(() => {
|
|
success = false;
|
|
message = '';
|
|
}, 8000);
|
|
}, 2000);
|
|
|
|
} catch (error) {
|
|
console.error(' Erro:', error);
|
|
success = false;
|
|
message = 'Erro ao enviar. Tente o botão "Enviar via Email".';
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('.fade-up');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Preços - BassPago</title>
|
|
<meta name="description" content="Preços flexíveis. De startups em crescimento a empresas em expansão, a Bass Pago oferece tudo que seu negócio precisa." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<!-- Preços Flexíveis Section -->
|
|
<section class="precos-flexiveis">
|
|
<div class="precos-conteudo">
|
|
<div class="desktop">
|
|
<div class="precos-icones fade-up">
|
|
<img src={basspagoPagementos} alt="Bass Pago Pagamentos" class="precos-icon" />
|
|
</div>
|
|
</div>
|
|
<div class="precos-texto">
|
|
<h1 class="fade-up">Preços flexíveis</h1>
|
|
<div class="mobile">
|
|
<div class="precos-icones fade-up">
|
|
<img src={basspagoPagementos} alt="Bass Pago Pagamentos" class="precos-icon" />
|
|
</div>
|
|
</div>
|
|
<p class="fade-up">
|
|
De startups em crescimento a empresas em expansão, a Bass Pago oferece tudo que seu negócio precisa.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Benefícios Section -->
|
|
<section class="beneficios">
|
|
<div class="beneficios-container">
|
|
<div class="beneficios-header">
|
|
<h2 class="fade-up">Benefícios exclusivos<br />que vão além do preço</h2>
|
|
<p class="fade-up">
|
|
Mais do que tarifas competitivas, oferecemos tecnologia, segurança e suporte dedicados para
|
|
potencializar o seu negócio.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="beneficios-grid">
|
|
{#each beneficios as beneficio}
|
|
<div class="beneficio-card fade-up">
|
|
<h3>{beneficio.title}</h3>
|
|
<p>{beneficio.description}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="planos-basspago" class="planos-basspago">
|
|
<div class="planos-basspago-inner">
|
|
<header class="section-header text-center text-black">
|
|
<h2 class="fade-up">Cresça sem limites com uma solução feita para acompanhar seu negócio</h2>
|
|
<p class="fade-up">Flexível, escalável e alinhada ao seu ritmo.</p>
|
|
</header>
|
|
<div class="planos-grid">
|
|
{#each planos as plano}
|
|
<article class="plano-card fade-up {plano.isPro ? 'pro' : ''}">
|
|
<div class="plano-card-header">
|
|
<span class="plano-icon {plano.id}">
|
|
<img src={plano.icon} alt={plano.title} />
|
|
</span>
|
|
<span class="plano-title">{plano.title}</span>
|
|
</div>
|
|
{#if plano.isPro}
|
|
<div class="plano-pro-label">Personalizado para suas necessidades!</div>
|
|
{/if}
|
|
<p class="plano-desc">{plano.description}</p>
|
|
|
|
{#if !plano.isPro}
|
|
<div class="plano-preco">
|
|
<span>{plano.priceLabel}</span>
|
|
<strong>{plano.price}</strong>
|
|
</div>
|
|
{:else}
|
|
<a href="#form-negociacao-basspago" class="link-cta full">
|
|
<span>Solicitar negociação →</span>
|
|
</a>
|
|
<p class="plano-info">{plano.info}</p>
|
|
{/if}
|
|
|
|
<div class="plano-recursos">
|
|
<span>Recursos disponíveis{plano.isPro ? ':' : ''}</span>
|
|
<ul>
|
|
{#each plano.recursos as recurso}
|
|
<li>
|
|
<span class="checkmark"></span>
|
|
{recurso}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="form-negociacao-basspago" class="form-negociacao-basspago">
|
|
<div class="form-negociacao-container">
|
|
<div class="form-negociacao-info">
|
|
<div class="negociacao-chip fade-up">
|
|
<span>Vamos juntos?</span>
|
|
</div>
|
|
<h2 class="fade-up">Alto volume de pagamentos ou modelo de negócios exclusivo?</h2>
|
|
<p class="fade-up">
|
|
Ainda com dúvidas sobre o seu modelo? Nossa
|
|
equipe pode ajudá-lo a escolher a solução ideal,
|
|
considerando volume de transações, melhores
|
|
preços e total flexibilidade.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Usar submitForm para Google Apps Script -->
|
|
<form class="negociacao-form fade-up" on:submit={submitForm}>
|
|
{#if success}
|
|
<div class="form-message success-message">
|
|
{message}
|
|
</div>
|
|
{/if}
|
|
{#if message && !success}
|
|
<div class="form-message error-message">
|
|
{message}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="nome">Nome completo</label>
|
|
<input
|
|
type="text"
|
|
id="nome"
|
|
name="nome"
|
|
placeholder="Digite seu nome aqui"
|
|
bind:value={formData.nome}
|
|
on:blur={() => validateField('nome')}
|
|
class:error={errors.nome}
|
|
/>
|
|
{#if errors.nome}
|
|
<div class="error-message">{errors.nome}</div>
|
|
{/if}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="celular">DDD + Celular</label>
|
|
<input
|
|
type="tel"
|
|
id="celular"
|
|
name="celular"
|
|
placeholder="Digite seu número aqui"
|
|
bind:value={formData.celular}
|
|
on:blur={() => validateField('celular')}
|
|
class:error={errors.celular}
|
|
/>
|
|
{#if errors.celular}
|
|
<div class="error-message">{errors.celular}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="email">E-mail corporativo</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Digite seu e-mail"
|
|
bind:value={formData.email}
|
|
on:blur={() => validateField('email')}
|
|
class:error={errors.email}
|
|
/>
|
|
{#if errors.email}
|
|
<div class="error-message">{errors.email}</div>
|
|
{/if}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="empresa">Nome da empresa</label>
|
|
<input
|
|
type="text"
|
|
id="empresa"
|
|
name="empresa"
|
|
placeholder="Digite aqui"
|
|
bind:value={formData.empresa}
|
|
on:blur={() => validateField('empresa')}
|
|
class:error={errors.empresa}
|
|
/>
|
|
{#if errors.empresa}
|
|
<div class="error-message">{errors.empresa}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="setor">Setor de atuação</label>
|
|
<select
|
|
id="setor"
|
|
name="setor"
|
|
bind:value={formData.setor}
|
|
on:change={() => validateField('setor')}
|
|
class:error={errors.setor}
|
|
>
|
|
<option value="" disabled>Selecione</option>
|
|
<option value="fintech">Fintech</option>
|
|
<option value="ecommerce">E-commerce</option>
|
|
<option value="servicos">Serviços</option>
|
|
<option value="industria">Indústria</option>
|
|
<option value="outro">Outro</option>
|
|
</select>
|
|
{#if errors.setor}
|
|
<div class="error-message">{errors.setor}</div>
|
|
{/if}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="funcionarios">Número de funcionários</label>
|
|
<select
|
|
id="funcionarios"
|
|
name="funcionarios"
|
|
bind:value={formData.funcionarios}
|
|
on:change={() => validateField('funcionarios')}
|
|
class:error={errors.funcionarios}
|
|
>
|
|
<option value="" disabled>Selecione</option>
|
|
<option value="1-10">1 à 10</option>
|
|
<option value="11-50">11 à 50</option>
|
|
<option value="50+">+50</option>
|
|
</select>
|
|
{#if errors.funcionarios}
|
|
<div class="error-message">{errors.funcionarios}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row row-full">
|
|
<div class="form-group">
|
|
<label for="faturamento">Faturamento anual estimado</label>
|
|
<input
|
|
type="text"
|
|
id="faturamento"
|
|
name="faturamento"
|
|
placeholder="R$"
|
|
bind:value={formData.faturamento}
|
|
on:blur={() => validateField('faturamento')}
|
|
class:error={errors.faturamento}
|
|
/>
|
|
{#if errors.faturamento}
|
|
<div class="error-message">{errors.faturamento}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row row-full">
|
|
<div class="form-group">
|
|
<label for="detalhes">Se desejar, explique em mais detalhes sobre a sua necessidade</label>
|
|
<textarea
|
|
id="detalhes"
|
|
name="detalhes"
|
|
rows="3"
|
|
placeholder="Sua mensagem"
|
|
bind:value={formData.detalhes}
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-buttons">
|
|
<button type="submit" class="link-cta white" disabled={loading}>
|
|
<span>{loading ? 'Enviando...' : 'Enviar →'}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
PREÇOS PAGE STYLES
|
|
========================= */
|
|
|
|
.no-destak {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Preços Flexíveis Section */
|
|
.precos-flexiveis {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 180px 20px 60px;
|
|
background: transparent;
|
|
}
|
|
|
|
.precos-conteudo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.precos-texto {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
max-width: 750px;
|
|
text-align: center;
|
|
}
|
|
|
|
.precos-texto h1 {
|
|
font-weight: 400;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: white;
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.precos-texto p {
|
|
font-size: 23px;
|
|
font-weight: 400;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
margin: 0;
|
|
max-width: 706px;
|
|
}
|
|
|
|
.precos-icones img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
|
|
/* Benefícios Section */
|
|
.beneficios {
|
|
width: 100%;
|
|
background: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
.beneficios-container {
|
|
max-width: 1280px;
|
|
width: 100%;
|
|
display: flex;
|
|
gap: clamp(30px, 6vw, 61px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.beneficios-header {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 439px;
|
|
min-height: auto;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
gap: clamp(20px, 3vw, 30px);
|
|
text-align: left;
|
|
}
|
|
|
|
.beneficios-header h2 {
|
|
color: #000;
|
|
font-weight: 400;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
margin: 0;
|
|
}
|
|
|
|
.beneficios-header p {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-size: 1.1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.beneficios-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
gap: clamp(20px, 3vw, 30px);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.beneficio-card {
|
|
background: rgba(0, 0, 255, 0.03);
|
|
border-radius: clamp(15px, 2vw, 20px);
|
|
padding: clamp(20px, 3vw, 25px);
|
|
text-align: left;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.beneficio-card h3 {
|
|
font-size: 16px;
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-weight: 600;
|
|
color: black;
|
|
margin-bottom: clamp(10px, 2vw, 15px);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.beneficio-card p {
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Planos Section */
|
|
#planos-basspago {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
.planos-basspago-inner {
|
|
max-width: 1280px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 48px;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
color: #000;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.25rem;
|
|
color: rgba(0, 0, 0, 0.75);
|
|
margin: 0;
|
|
}
|
|
|
|
.planos-grid {
|
|
display: flex;
|
|
gap: 32px;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
padding: 10px;
|
|
}
|
|
|
|
.plano-card {
|
|
background: rgba(65, 254, 149, 0.08);
|
|
border-radius: 15px;
|
|
min-width: 340px;
|
|
max-width: 380px;
|
|
flex: 1 1 340px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 25px;
|
|
gap: 25px;
|
|
box-shadow: 0 0 0 1px rgba(65, 254, 149, 0.1);
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
transition: box-shadow .3s, transform .3s;
|
|
position: relative;
|
|
}
|
|
|
|
.plano-card.pro {
|
|
background: rgba(65, 254, 149, 0.16);
|
|
}
|
|
|
|
.plano-card:hover {
|
|
box-shadow: 0 4px 32px 0 rgba(65, 254, 149, 0.2), 0 0 0 2px #41fe95;
|
|
transform: translateY(-4px) scale(1.03);
|
|
}
|
|
|
|
.plano-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.plano-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
background: rgba(65, 254, 149, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.plano-icon img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.plano-title {
|
|
font-weight: 500;
|
|
color: #111;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.plano-desc {
|
|
font-size: 1rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
margin: 0 0 10px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.plano-preco {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.plano-preco span {
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.plano-preco strong {
|
|
font-size: 30px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-weight: 700;
|
|
letter-spacing: -0.8px;
|
|
}
|
|
|
|
.plano-recursos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.plano-recursos span {
|
|
font-size: 16px;
|
|
color: #111;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.plano-recursos ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.plano-recursos li {
|
|
font-size: 16px;
|
|
color: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0;
|
|
}
|
|
|
|
.checkmark {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.checkmark:after {
|
|
content: '✓';
|
|
display: block;
|
|
position: absolute;
|
|
color: #41FE95;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
left: 2px;
|
|
top: -2px;
|
|
}
|
|
|
|
.plano-pro-label {
|
|
font-size: 1rem;
|
|
color: #111;
|
|
font-weight: 500;
|
|
background: rgba(65, 254, 149, 0.2);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
margin: -10px 0 10px 0;
|
|
}
|
|
|
|
.plano-info {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-size: 1rem;
|
|
margin: 0 0 10px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
color: #fff;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link-cta.white {
|
|
background: #fff;
|
|
color: #000;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.link-cta.white:hover {
|
|
background: #41FE95;
|
|
color: #000;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.link-cta.full {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Form Negociação Section */
|
|
#form-negociacao-basspago {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 64px 0;
|
|
color: #fff;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
background: #000;
|
|
}
|
|
|
|
.form-negociacao-container {
|
|
max-width: 1250px;
|
|
width: 95%;
|
|
background: transparent;
|
|
display: flex;
|
|
gap: 80px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
border-radius: 32px;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.form-negociacao-info {
|
|
max-width: 360px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.negociacao-chip span {
|
|
display: inline-block;
|
|
background: rgba(255, 255, 255, 0.09);
|
|
border-radius: 87px;
|
|
border: 0.5px solid rgba(255, 255, 255, 0.4);
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
padding: 10px 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-negociacao-info h2 {
|
|
color: #fff;
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-negociacao-info p {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.negociacao-form {
|
|
background: rgba(255, 255, 255, 0.13);
|
|
border-radius: 25px;
|
|
padding: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
min-width: 420px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 22px 0 rgba(10, 20, 60, 0.08);
|
|
width: 100%;
|
|
max-width: 560px;
|
|
position: relative;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 24px;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-row.row-full {
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
flex: 1;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.form-group label {
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
background: rgba(239, 239, 239, 0.05);
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
padding: 10px 20px;
|
|
font-family: inherit;
|
|
font-weight: 400;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
transition: background 0.2s, border 0.2s;
|
|
}
|
|
|
|
.form-group input.error,
|
|
.form-group select.error,
|
|
.form-group textarea.error {
|
|
border-color: #ff4d4d;
|
|
background: rgba(255, 77, 77, 0.05);
|
|
}
|
|
|
|
.form-group input::placeholder,
|
|
.form-group textarea::placeholder {
|
|
color: rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
.form-group select {
|
|
color: #fff;
|
|
background: rgba(239, 239, 239, 0.07);
|
|
}
|
|
|
|
.form-group select:invalid {
|
|
color: rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
.form-group textarea {
|
|
min-height: 70px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ff4d4d;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-message {
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-message {
|
|
background: rgba(65, 254, 149, 0.1);
|
|
color: #41FE95;
|
|
border: 1px solid rgba(65, 254, 149, 0.3);
|
|
}
|
|
|
|
.form-message.error-message {
|
|
background: rgba(255, 77, 77, 0.1);
|
|
color: #ff4d4d;
|
|
border: 1px solid rgba(255, 77, 77, 0.3);
|
|
}
|
|
|
|
/* Utility classes */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-black {
|
|
color: #000;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Fade animations */
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1100px) {
|
|
.form-negociacao-container {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
padding: 48px 4vw;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-negociacao-info {
|
|
max-width: 95vw;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.negociacao-form {
|
|
min-width: 0;
|
|
max-width: 97vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
#form-negociacao-basspago {
|
|
padding: 32px 10px;
|
|
}
|
|
|
|
.form-negociacao-container {
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.form-row {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.form-negociacao-info h2 {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.precos-texto h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
.precos-texto p {
|
|
font-size: 18px;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.beneficios-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.beneficios-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.planos-grid {
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.plano-card {
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 22px 20px;
|
|
}
|
|
|
|
.section-header {
|
|
padding: 0 4vw;
|
|
}
|
|
|
|
.mobile {
|
|
display: block;
|
|
}
|
|
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
}
|
|
</style> |