437 lines
12 KiB
Svelte
437 lines
12 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { fly } from 'svelte/transition';
|
|
import {
|
|
ArrowRight,
|
|
Zap,
|
|
Shield,
|
|
Clock,
|
|
Star,
|
|
CheckCircle
|
|
} from 'lucide-svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
import checkIcon from '$lib/assets/check.svg';
|
|
import noneIcon from '$lib/assets/none.svg';
|
|
|
|
let mounted = false;
|
|
let visibleElements = {};
|
|
|
|
onMount(() => {
|
|
mounted = true;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
visibleElements[entry.target.id] = true;
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('[data-animate]');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
|
|
const basspagoFeatures = [
|
|
'Suporte ágil e direto, sem depender de múltiplos intermediários',
|
|
'Integração rápida e simples via APIs prontas para uso',
|
|
'Controle centralizado com ferramentas intuitivas',
|
|
'Operação completa no mundo físico e digital com app de conta e PDV integrados',
|
|
'Crescimento flexível, sem exigência de volumetrias elevadas',
|
|
'Atualização constante com as últimas evoluções do Pix e do mercado'
|
|
];
|
|
|
|
const competitorFeatures = [
|
|
'SLA via tickets demorados e suporte fragmentado deixa a operação parada',
|
|
'Integrações complexas e demoradas exigem equipes especializadas',
|
|
'Processos internos frágeis, sem visibilidade e difíceis de operar',
|
|
'Sem suporte ao ponto de venda físico, soluções fragmentadas',
|
|
'Barreiras altas com requisitos de volume e custos iniciais',
|
|
'Atualizações lentas, deixando a operação defasada'
|
|
];
|
|
|
|
// Dados para seção CTA
|
|
const benefits = [
|
|
{ icon: Zap, title: 'Setup rápido', description: 'Ative em poucos minutos' },
|
|
{ icon: Shield, title: 'Segurança bancária', description: 'Padrões PCI DSS' },
|
|
{ icon: Clock, title: 'Suporte contínuo', description: 'Especialistas disponíveis' },
|
|
{ icon: Star, title: 'Sem fidelidade', description: 'Cancele quando quiser' }
|
|
];
|
|
|
|
const guarantees = [
|
|
'Sem taxa de setup',
|
|
'Sem taxa de cancelamento',
|
|
'Sem fidelidade',
|
|
'Suporte incluso',
|
|
'Migração assistida',
|
|
'Treinamento completo'
|
|
];
|
|
</script>
|
|
|
|
<section class="compare-section">
|
|
<div class="compare-container">
|
|
<div
|
|
class="compare-text fade-up"
|
|
data-animate
|
|
id="compare-text"
|
|
>
|
|
{#if mounted && visibleElements['compare-text']}
|
|
<h2
|
|
in:fly={{ y: 20, duration: 500 }}
|
|
>
|
|
Por que escolher a Bass Pago?
|
|
</h2>
|
|
<p
|
|
in:fly={{ y: 20, duration: 500, delay: 100 }}
|
|
>
|
|
Analise os diferenciais da Bass Pago frente a outras soluções de pagamento.
|
|
Dados e performance falam mais alto que promessas.
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="compare-table">
|
|
<div
|
|
class="compare-columns"
|
|
data-animate
|
|
id="compare-table"
|
|
>
|
|
{#if mounted && visibleElements['compare-table']}
|
|
<div
|
|
class="compare-column fade-up"
|
|
in:fly={{ y: 30, duration: 600, delay: 200 }}
|
|
>
|
|
<div class="compare-header">
|
|
<span><b>Bass Pago</b></span>
|
|
</div>
|
|
{#each basspagoFeatures as feature, index}
|
|
<div
|
|
class="item"
|
|
in:fly={{ x: -20, duration: 400, delay: 300 + index * 100 }}
|
|
>
|
|
<img src={checkIcon} alt="Check" />
|
|
{feature}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<div
|
|
class="compare-column fade-up"
|
|
in:fly={{ y: 30, duration: 600, delay: 250 }}
|
|
>
|
|
<div class="compare-header">
|
|
<span>Outros provedores</span>
|
|
</div>
|
|
{#each competitorFeatures as feature, index}
|
|
<div
|
|
class="item"
|
|
in:fly={{ x: 20, duration: 400, delay: 300 + index * 100 }}
|
|
>
|
|
<img src={noneIcon} alt="None" />
|
|
{feature}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="relative overflow-hidden bg-black py-32">
|
|
<div class="container-basspago relative z-10 text-center text-white">
|
|
<div
|
|
data-animate
|
|
id="cta-title"
|
|
>
|
|
{#if mounted && visibleElements['cta-title']}
|
|
<h2
|
|
class="mx-auto max-w-4xl
|
|
text-3xl md:text-4xl lg:text-5xl
|
|
font-semibold
|
|
leading-tight
|
|
mb-6"
|
|
in:fly={{ y: 20, duration: 500 }}
|
|
>
|
|
Pronto para simplificar
|
|
<br />
|
|
<span class="text-gradient">seus pagamentos?</span>
|
|
</h2>
|
|
{/if}
|
|
</div>
|
|
|
|
<div
|
|
data-animate
|
|
id="cta-subtitle"
|
|
>
|
|
{#if mounted && visibleElements['cta-subtitle']}
|
|
<p
|
|
class="mx-auto max-w-3xl
|
|
text-base md:text-lg
|
|
text-white/75
|
|
mb-16"
|
|
in:fly={{ y: 20, duration: 500, delay: 100 }}
|
|
>
|
|
Solução completa para pagamentos online, incluindo gateway, antifraude e gestão de risco.
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Benefits -->
|
|
<div
|
|
class="mx-auto mb-20
|
|
grid max-w-4xl
|
|
grid-cols-2 md:grid-cols-4
|
|
gap-10"
|
|
data-animate
|
|
id="cta-benefits"
|
|
>
|
|
{#if mounted && visibleElements['cta-benefits']}
|
|
{#each benefits as benefit, index}
|
|
<div
|
|
class="text-center"
|
|
in:fly={{ y: 20, duration: 500, delay: 200 + index * 50 }}
|
|
>
|
|
<div
|
|
class="mx-auto mb-3
|
|
flex h-12 w-12
|
|
items-center justify-center
|
|
rounded-xl
|
|
bg-white/10"
|
|
>
|
|
<svelte:component this={benefit.icon} size={22} class="text-green-400" />
|
|
</div>
|
|
<h4 class="text-sm font-medium">{benefit.title}</h4>
|
|
<p class="text-xs text-white/60">{benefit.description}</p>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
|
|
<div
|
|
class="mb-20
|
|
flex flex-col sm:flex-row
|
|
items-center justify-center
|
|
gap-5"
|
|
data-animate
|
|
id="cta-buttons"
|
|
>
|
|
{#if mounted && visibleElements['cta-buttons']}
|
|
<div
|
|
class="flex flex-col sm:flex-row gap-5"
|
|
in:fly={{ y: 20, duration: 500, delay: 300 }}
|
|
>
|
|
<button class="btn-primary group" on:click={() => goto('/precos#form-negociacao-basspago')}>
|
|
Criar conta grátis
|
|
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
|
|
.compare-section {
|
|
background-color: #000;
|
|
color: white;
|
|
padding: 60px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.compare-container {
|
|
max-width: 1280px;
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 40px;
|
|
align-items: center;
|
|
}
|
|
|
|
.compare-text {
|
|
padding-right: 79px;
|
|
}
|
|
|
|
.compare-text h2 {
|
|
font-weight: 600;
|
|
font-size: clamp(2.4rem, 2.6vw, 2.6rem);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.compare-text p {
|
|
color: #ccc;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.compare-table {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.compare-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 32px;
|
|
}
|
|
|
|
.compare-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.compare-header {
|
|
font-weight: 400;
|
|
color: #aaa;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.compare-header b {
|
|
color: #fff;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: #1f1f1f;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-weight: 400;
|
|
min-height: 66px;
|
|
}
|
|
|
|
.item img {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
@media (max-width: 1024px) {
|
|
.compare-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.compare-text {
|
|
padding-right: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.compare-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
|
|
/* Gradient text animation */
|
|
.text-gradient {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-brand-blue),
|
|
var(--color-brand-emerald),
|
|
var(--color-brand-blue)
|
|
);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradientMove 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes gradientMove {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/* Button hover effects */
|
|
.btn-primary {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(45deg, var(--color-brand-blue), var(--color-brand-emerald));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
/* Benefits icon hover animation */
|
|
.h-12:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
transition: transform 0.3s ease;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Arrow hover effect */
|
|
.group:hover .group-hover\:translate-x-1 {
|
|
transform: translateX(0.25rem);
|
|
}
|
|
|
|
/* Secondary button hover effect */
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Guarantee items hover effect */
|
|
.gap-2:hover {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.grid-cols-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.gap-10 {
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Pulse animation for the badge star */
|
|
.text-\[var\(--color-brand-emerald\)\] {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
</style> |