Fix: new adjustments and new preloading
This commit is contained in:
Pedro Chueiri
parent
d93961c3be
commit
f4bc0396fa
25
src/app.html
25
src/app.html
|
|
@ -5,11 +5,9 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
|
||||
<!-- Meta tags padrão -->
|
||||
<meta name="description"
|
||||
content="Conectamos sua empresa ao futuro dos pagamentos com APIs rápidas e seguras. Pix, cartões e integrações completas para escalar seus negócios." />
|
||||
<meta name="keywords"
|
||||
|
|
@ -17,32 +15,26 @@
|
|||
<meta name="author" content="Bass Pago" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
|
||||
<!-- Open Graph padrão -->
|
||||
<meta property="og:locale" content="pt_BR" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Bass Pago" />
|
||||
|
||||
<!-- Theme -->
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<!-- Preload do vídeo de loading -->
|
||||
<link rel="preload" as="video" href="/preloading.mp4" type="video/mp4" />
|
||||
|
||||
<!-- Preload de recursos críticos -->
|
||||
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQQVjrQBjbgLWXFyfnJQ.woff2"
|
||||
type="font/woff2" crossorigin />
|
||||
<link rel="preload" as="image" href="/src/lib/assets/backgroundSection2.png" />
|
||||
|
||||
<!-- DNS prefetch para recursos externos -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="dns-prefetch" href="https://devs.basspago.com.br" />
|
||||
|
||||
<!-- Fontes otimizadas -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"
|
||||
media="print" onload="this.media='all'" />
|
||||
|
||||
<!-- CSS minimalista - só o vídeo MUITO MAIOR -->
|
||||
<script src="//code.jivosite.com/widget/8fspsVOybp" async></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -52,7 +44,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Preloader - só vídeo centralizado */
|
||||
#video-preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -72,7 +63,6 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Container do vídeo - MUITO MAIOR */
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 800px;
|
||||
|
|
@ -81,7 +71,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Vídeo limpo */
|
||||
.preloader-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -89,7 +78,6 @@
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Fallback simples */
|
||||
.video-fallback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -117,7 +105,6 @@
|
|||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* App container */
|
||||
#app {
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease;
|
||||
|
|
@ -141,7 +128,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Responsive - proporcionalmente maior */
|
||||
@media (max-width: 900px) {
|
||||
.video-container {
|
||||
width: 700px;
|
||||
|
|
@ -196,25 +182,20 @@
|
|||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<!-- Preloader - só o vídeo -->
|
||||
<div id="video-preloader">
|
||||
<div class="video-container">
|
||||
<!-- Vídeo sem loop - vai acabar -->
|
||||
<video id="preloader-video" class="preloader-video" autoplay muted playsinline preload="auto">
|
||||
<source src="/preloading.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<!-- Fallback simples -->
|
||||
<div class="video-fallback" id="video-fallback">
|
||||
<div class="fallback-logo">BP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App container -->
|
||||
<div id="app" style="display: contents">%sveltekit.body%</div>
|
||||
|
||||
<!-- Script - só vai para site quando vídeo acabar -->
|
||||
<script>
|
||||
(function () {
|
||||
const preloader = document.getElementById('video-preloader');
|
||||
|
|
@ -225,7 +206,6 @@
|
|||
let videoEnded = false;
|
||||
let pageLoaded = false;
|
||||
|
||||
// Função para esconder o preloader
|
||||
function hidePreloader() {
|
||||
if (preloader) {
|
||||
preloader.classList.add('hidden');
|
||||
|
|
@ -240,7 +220,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Verifica se pode esconder (vídeo acabou E página carregou)
|
||||
function checkIfCanHide() {
|
||||
if (videoEnded && pageLoaded) {
|
||||
hidePreloader();
|
||||
|
|
@ -259,9 +238,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Event listeners para o vídeo
|
||||
if (video) {
|
||||
// Quando o vídeo acabar
|
||||
video.addEventListener('ended', () => {
|
||||
console.log('[Preloader] Vídeo terminou');
|
||||
videoEnded = true;
|
||||
|
|
|
|||
|
|
@ -10,12 +10,22 @@
|
|||
CheckCircle
|
||||
} from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
import checkIcon from '$lib/assets/check.svg';
|
||||
import noneIcon from '$lib/assets/none.svg';
|
||||
|
||||
let mounted = false;
|
||||
let visibleElements = {};
|
||||
let showModal = false;
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
mounted = true;
|
||||
|
|
@ -226,7 +236,7 @@
|
|||
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')}>
|
||||
<button class="btn-primary group" on:click={openCreateAccountModal}>
|
||||
Criar conta grátis
|
||||
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
|
|
@ -238,8 +248,92 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-button.primary {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-button.primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #000;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
|
||||
}
|
||||
.compare-section {
|
||||
background-color: #000;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { Menu, X, ChevronDown } from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
import bassLogo from '$lib/assets/bass_assinatura02@2x (1).png';
|
||||
|
||||
|
|
@ -9,6 +10,7 @@
|
|||
let scrolled = false;
|
||||
let dropdownOpen = {};
|
||||
let dropdownTimeout = {};
|
||||
let showModal = false;
|
||||
|
||||
onMount(() => {
|
||||
const handleScroll = () => {
|
||||
|
|
@ -30,7 +32,6 @@
|
|||
href: '#solucoes',
|
||||
hasDropdown: true,
|
||||
submenu: [
|
||||
// { name: 'Banking', href: '/banking' },
|
||||
{ name: 'PIX', href: '/pix' },
|
||||
{ name: 'PDV', href: '/pdv' }
|
||||
]
|
||||
|
|
@ -44,7 +45,7 @@
|
|||
{ name: 'Sobre', href: '/sobre' },
|
||||
{ name: 'Centro de Suporte', href: '/centro-suporte' },
|
||||
{ name: 'Preços', href: '/precos' },
|
||||
{ name: 'Políticas', href: '/politicas-e-termos' }
|
||||
{ name: 'Políticas', href: 'https://finance.basspago.com.br/terms/policyTerms' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
@ -79,6 +80,12 @@
|
|||
function handleNavigation(href, event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (href.startsWith('http')) {
|
||||
window.open(href, '_blank');
|
||||
isOpen = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/')) {
|
||||
goto(href);
|
||||
} else {
|
||||
|
|
@ -96,9 +103,27 @@
|
|||
}
|
||||
|
||||
function handleAccess() {
|
||||
// Adicione aqui a lógica para acessar conta existente
|
||||
// Por exemplo: goto('/login') ou abrir modal de login
|
||||
console.log('Acessar conta');
|
||||
try {
|
||||
window.location.href = 'https://finance.basspago.com.br/login';
|
||||
|
||||
} catch (error) {
|
||||
window.open('https://finance.basspago.com.br/login', '_blank');
|
||||
}
|
||||
|
||||
isOpen = false;
|
||||
}
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
isOpen = false;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
function handleCreateAccountFallback() {
|
||||
goto('/precos#form-negociacao-basspago');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -155,20 +180,22 @@
|
|||
|
||||
<div class="hidden lg:flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full border border-white/20 px-6 py-3 text-sm font-medium text-white hover:bg-white/10 transition-colors"
|
||||
on:click={handleAccess}
|
||||
on:click|preventDefault={handleAccess}
|
||||
>
|
||||
Acessar
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
|
||||
on:click={() => goto('/precos#form-negociacao-basspago')}
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button class="lg:hidden p-2 text-white" on:click={toggleMenu}>
|
||||
{#if isOpen}
|
||||
<X size={22} />
|
||||
|
|
@ -178,7 +205,6 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
{#if isOpen}
|
||||
<nav class="mt-3 rounded-2xl bg-slate-950/95 backdrop-blur-xl border border-white/10">
|
||||
{#each menuItems as item}
|
||||
|
|
@ -221,14 +247,17 @@
|
|||
|
||||
<div class="border-t border-white/10 p-4 space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded-full border border-white/20 px-6 py-3 text-base font-medium text-white hover:bg-white/10 transition-colors"
|
||||
on:click={handleAccess}
|
||||
on:click|preventDefault={handleAccess}
|
||||
>
|
||||
Acessar
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded-full bg-white px-6 py-3 text-base font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
|
||||
on:click={() => goto('/precos#form-negociacao-basspago')}
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta
|
||||
</button>
|
||||
|
|
@ -238,6 +267,13 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Modal Component -->
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
|
|
@ -262,4 +298,75 @@
|
|||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.app-preview {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #41FE95, #0000FF);
|
||||
border-radius: 20px;
|
||||
padding: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.benefits-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
padding: 6px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
margin: 0 0 16px 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.web-cta-button {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-cta-button:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { fly, fade } from 'svelte/transition';
|
||||
import { ArrowRight } from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { goto } from '$app/navigation';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
import backgroundSection1 from '$lib/assets/backgroundSection2.png';
|
||||
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
let heroSection;
|
||||
let currentWordIndex = 0;
|
||||
let isTransitioning = false;
|
||||
let showModal = false;
|
||||
|
||||
const words = ['Escalar', 'Evoluir', 'Empresas'];
|
||||
|
||||
|
|
@ -53,6 +55,14 @@
|
|||
clearInterval(wordInterval);
|
||||
};
|
||||
});
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
|
|
@ -90,24 +100,24 @@
|
|||
>
|
||||
{#if mounted}
|
||||
<h1
|
||||
class="text-white
|
||||
text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl
|
||||
font-black
|
||||
leading-tight
|
||||
mb-6 sm:mb-8"
|
||||
in:fly={{ y: 30, duration: 800 }}
|
||||
>
|
||||
<div class="block">
|
||||
Infraestrutura de
|
||||
</div>
|
||||
<div class="block">
|
||||
pagamento para
|
||||
</div>
|
||||
class="text-white
|
||||
text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl
|
||||
font-black
|
||||
leading-tight
|
||||
mb-6 sm:mb-8"
|
||||
in:fly={{ y: 30, duration: 800 }}
|
||||
>
|
||||
<div class="block">
|
||||
Infraestrutura de
|
||||
</div>
|
||||
<div class="block">
|
||||
pagamento para
|
||||
</div>
|
||||
|
||||
<div class="block text-emerald-400">
|
||||
expandir seus negócios
|
||||
</div>
|
||||
</h1>
|
||||
<div class="block text-emerald-400">
|
||||
expandir seus negócios
|
||||
</div>
|
||||
</h1>
|
||||
{/if}
|
||||
|
||||
<!-- Subtitle -->
|
||||
|
|
@ -125,71 +135,72 @@
|
|||
</p>
|
||||
{/if}
|
||||
|
||||
{#if mounted}
|
||||
{#if mounted}
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"
|
||||
in:fly={{ y: 20, duration: 800, delay: 250 }}
|
||||
>
|
||||
<!-- Primary Button -->
|
||||
<button
|
||||
on:click={() => goto('/precos#form-negociacao-basspago')}
|
||||
class="relative group
|
||||
inline-flex items-center justify-center gap-3
|
||||
rounded-2xl
|
||||
px-8 py-3 sm:px-12 sm:py-4
|
||||
bg-white text-black
|
||||
text-sm sm:text-base
|
||||
font-semibold
|
||||
overflow-hidden
|
||||
transition-all duration-300
|
||||
hover:shadow-2xl hover:scale-105
|
||||
w-full sm:w-auto"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0
|
||||
bg-gradient-to-r from-blue-600 to-emerald-400
|
||||
-translate-x-full
|
||||
group-hover:translate-x-0
|
||||
transition-transform duration-500 ease-out"
|
||||
/>
|
||||
<span class="relative z-10 flex items-center gap-3 group-hover:text-white">
|
||||
Abrir conta
|
||||
<ArrowRight size={18} />
|
||||
</span>
|
||||
</button>
|
||||
on:click={openCreateAccountModal}
|
||||
class="relative group
|
||||
inline-flex items-center justify-center gap-3
|
||||
rounded-2xl
|
||||
px-8 py-3 sm:px-12 sm:py-4
|
||||
bg-white text-black
|
||||
text-sm sm:text-base
|
||||
font-semibold
|
||||
overflow-hidden
|
||||
transition-all duration-300
|
||||
hover:shadow-2xl hover:scale-105
|
||||
w-full sm:w-auto"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0
|
||||
bg-gradient-to-r from-blue-600 to-emerald-400
|
||||
-translate-x-full
|
||||
group-hover:translate-x-0
|
||||
transition-transform duration-500 ease-out"
|
||||
/>
|
||||
<span class="relative z-10 flex items-center gap-3 group-hover:text-white">
|
||||
Abrir conta
|
||||
<ArrowRight size={18} />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if mounted}
|
||||
<div
|
||||
class="hero-logos-section relative z-10 w-full pb-12 sm:pb-16"
|
||||
in:fly={{ y: 20, duration: 800, delay: 250 }}
|
||||
>
|
||||
<div class="hero-logos-wrapper">
|
||||
<div class="hero-logos-track">
|
||||
<!-- Primeira sequência de logos -->
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
<div
|
||||
class="hero-logos-section relative z-10 w-full pb-12 sm:pb-16"
|
||||
in:fly={{ y: 20, duration: 800, delay: 250 }}
|
||||
>
|
||||
<div class="hero-logos-wrapper">
|
||||
<div class="hero-logos-track">
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
|
||||
<!-- Segunda sequência (duplicação) -->
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
|
||||
<!-- Terceira sequência (garantia de continuidade) -->
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
{#each logos as logo}
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
/* Container para as transições de palavras */
|
||||
.word-transition {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -198,25 +209,22 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
/* Seção dos logos - posicionada na parte inferior */
|
||||
.hero-logos-section {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Logos Parceiros - Wrapper */
|
||||
.hero-logos-wrapper {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
||||
.hero-logos-wrapper {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
||||
|
||||
/* Logos Parceiros - Track */
|
||||
.hero-logos-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
|
|
@ -237,7 +245,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Animação de scroll infinito */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
|
@ -247,12 +254,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Floating animation já está definida no CSS global */
|
||||
.floating-animation {
|
||||
animation: floating 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Responsividade para logos */
|
||||
.modal-debug {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-debug h3 {
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-debug p {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-logos-track {
|
||||
gap: 30px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,18 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { fly, fade } from 'svelte/transition';
|
||||
import { UserPlus, Settings, Zap, TrendingUp, ArrowRight, CheckCircle } from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { goto } from '$app/navigation';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
let showModal = false;
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
let mounted = false;
|
||||
let visibleElements = {};
|
||||
|
|
@ -53,7 +64,6 @@
|
|||
|
||||
<section id="como-funciona" class="section-padding bg-white">
|
||||
<div class="container-basspago">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="text-center mb-20 max-w-3xl mx-auto"
|
||||
data-animate
|
||||
|
|
@ -85,7 +95,6 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="relative grid md:grid-cols-4 gap-10 mb-20">
|
||||
{#each steps as step, index}
|
||||
<div
|
||||
|
|
@ -98,24 +107,20 @@
|
|||
in:fly={{ y: 30, duration: 400, delay: index * 80 }}
|
||||
class="relative"
|
||||
>
|
||||
<!-- Step Icon -->
|
||||
<div
|
||||
class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 step-icon group-hover:bg-blue-100 transition-colors duration-300"
|
||||
>
|
||||
<svelte:component this={step.icon} size={22} class="text-blue-600" />
|
||||
</div>
|
||||
|
||||
<!-- Step Number & Title -->
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-1">
|
||||
{index + 1}. {step.title}
|
||||
</h3>
|
||||
|
||||
<!-- Step Description -->
|
||||
<p class="text-sm text-gray-600">
|
||||
{step.description}
|
||||
</p>
|
||||
|
||||
<!-- Connecting Line (não no último item) -->
|
||||
{#if index < steps.length - 1}
|
||||
<div
|
||||
class="hidden md:block absolute top-7 left-full w-full h-0.5 bg-gradient-to-r from-blue-200 to-transparent -z-10"
|
||||
|
|
@ -128,7 +133,6 @@
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div
|
||||
class="text-center"
|
||||
data-animate
|
||||
|
|
@ -137,7 +141,7 @@
|
|||
{#if mounted && visibleElements['howitworks-cta']}
|
||||
<div in:fly={{ y: 24, duration: 500 }}>
|
||||
<button
|
||||
on:click={() => goto('/precos#form-negociacao-basspago')}
|
||||
on:click={openCreateAccountModal}
|
||||
class="btn-primary px-14 py-4 text-base inline-flex items-center gap-2 group"
|
||||
>
|
||||
Criar conta grátis
|
||||
|
|
@ -150,8 +154,241 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
/* Animações para os passos */
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-button.primary {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-button.primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.container-basspago {
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.font-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.text-blue-600 {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.gap-10 {
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.h-14 {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.w-14 {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.px-14 {
|
||||
padding-left: 3.5rem;
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.step-item {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -165,11 +402,10 @@
|
|||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Linha conectora animada */
|
||||
.step-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.75rem; /* 28px */
|
||||
top: 1.75rem;
|
||||
left: calc(100% - 0.5rem);
|
||||
width: calc(100% - 2rem);
|
||||
height: 2px;
|
||||
|
|
@ -179,12 +415,10 @@
|
|||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
/* Não mostrar linha no último item */
|
||||
.step-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Esconder linha em mobile */
|
||||
@media (max-width: 768px) {
|
||||
.step-item::after {
|
||||
display: none;
|
||||
|
|
@ -202,12 +436,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Hover effect para o botão CTA */
|
||||
.group:hover .group-hover\:translate-x-1 {
|
||||
transform: translateX(0.25rem);
|
||||
}
|
||||
|
||||
/* Animação de pulso para os ícones */
|
||||
.step-icon:hover {
|
||||
animation: iconPulse 0.6s ease-in-out;
|
||||
}
|
||||
|
|
@ -221,7 +453,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Gradient para o texto */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||
-webkit-background-clip: text;
|
||||
|
|
|
|||
376
src/lib/components/Modal.svelte
Normal file
376
src/lib/components/Modal.svelte
Normal file
|
|
@ -0,0 +1,376 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
export let isOpen = false;
|
||||
export let title = 'Baixe o APP';
|
||||
export let subtitle = 'Venda mais. Receba na hora \n\n Abra sua conta PF e habilite o pix para vender em sites, apps e lojas físicas, com recebimento rápido e gestão simplificada.';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function closeModal() {
|
||||
isOpen = false;
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && isOpen) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropClick(event: MouseEvent) {
|
||||
if (event.target === event.currentTarget) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
});
|
||||
|
||||
function formatSubtitle(text: string) {
|
||||
return text.replace(/\n/g, '<br>');
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
on:click={handleBackdropClick}
|
||||
on:keydown={handleKeydown}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title-section">
|
||||
{#if title}
|
||||
<h2 id="modal-title" class="modal-title">{title}</h2>
|
||||
{/if}
|
||||
{#if subtitle}
|
||||
<div class="modal-subtitle">
|
||||
{@html formatSubtitle(subtitle)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="close-button"
|
||||
on:click={closeModal}
|
||||
aria-label="Fechar modal"
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="store-buttons">
|
||||
<a href="#" class="store-button apple-store">
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5 1c-1.1 0-2.1.4-2.8 1.1-.8.8-1.2 1.9-1.1 3 1.2.1 2.4-.6 3.2-1.4.7-.8 1.1-1.9.7-2.7zm-3.6 3.3c-1.3-.1-2.4.7-3 .7-.7 0-1.7-.7-2.8-.7-1.4.1-2.7.8-3.4 2.1-1.5 2.6-.4 6.4 1 8.5.7 1 1.5 2.2 2.6 2.1 1-.1 1.4-.6 2.6-.6 1.2 0 1.5.6 2.6.6 1.1-.1 1.8-1 2.5-2 .8-1.1 1.1-2.2 1.1-2.3-.1 0-2.1-.8-2.1-3.2 0-2.1 1.7-3.1 1.8-3.2-1-1.5-2.6-1.7-3.2-1.7l.3-.5z"/>
|
||||
</svg>
|
||||
<div class="store-text">
|
||||
<span class="store-label">Baixar na</span>
|
||||
<span class="store-name">App Store</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="store-button google-play">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.5 12l2.198-2.491zM5.864 2.658L16.802 8.99l-2.303 2.302-8.635-8.634z"/>
|
||||
</svg>
|
||||
<div class="store-text">
|
||||
<span class="store-label">Disponível no</span>
|
||||
<span class="store-name">Google Play</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 24px 24px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-title-section {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: #e5e5e5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-button svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 24px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.store-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.store-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: #000;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.store-button:hover {
|
||||
background: #333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.store-button.apple-store {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.store-button.google-play {
|
||||
background: #01875f;
|
||||
}
|
||||
|
||||
.store-button.google-play:hover {
|
||||
background: #016b4a;
|
||||
}
|
||||
|
||||
.store-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.store-label {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.modal-backdrop {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 20px 20px;
|
||||
}
|
||||
|
||||
.store-buttons {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.store-button {
|
||||
padding: 10px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.store-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.modal-title-section {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 18px 18px 14px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.store-buttons {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.store-button {
|
||||
padding: 8px 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.store-label {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.store-button {
|
||||
padding: 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.store-label {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal-container {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,25 +18,27 @@
|
|||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||
contact: 'Chat on-line',
|
||||
href: 'mailto:suporte@basspago.com',
|
||||
ariaLabel: 'Enviar email para suporte@basspago.com'
|
||||
ariaLabel: 'Chat Online Bass Pago',
|
||||
isChat: true
|
||||
},
|
||||
{
|
||||
title: 'Ouvidoria',
|
||||
description: 'Não teve solução no atendimento? Registre sua reclamação ou denúncia aqui:',
|
||||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||
contact: 'ouvidoria@basspago.com',
|
||||
href: 'mailto:ouvidoria@basspago.com',
|
||||
ariaLabel: 'Chat Online Bass Pago'
|
||||
href: 'mailto:ouvidoria@basspago.com',
|
||||
ariaLabel: 'Enviar email para ouvidoria@basspago.com'
|
||||
},
|
||||
{
|
||||
title: 'Vendas',
|
||||
description: 'Quer contratar nossos produtos e serviços? Fale com a gente.',
|
||||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||
contact: 'Chat on-line ou',
|
||||
contactEmail: 'comercial@basspago.com',
|
||||
href: 'mailto:comercial@basspago.com',
|
||||
ariaLabel: 'Enviar email para comercial@basspago.com'
|
||||
}
|
||||
title: 'Vendas',
|
||||
description: 'Quer contratar nossos produtos e serviços? Fale com a gente.',
|
||||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||
contact: 'Chat on-line ou',
|
||||
contactEmail: 'comercial@basspago.com',
|
||||
href: 'mailto:comercial@basspago.com',
|
||||
ariaLabel: 'Enviar email para comercial@basspago.com',
|
||||
hasChatAndEmail: true
|
||||
}
|
||||
];
|
||||
|
||||
const socialMedia = [
|
||||
|
|
@ -105,6 +107,12 @@
|
|||
openFaq = openFaq === index ? null : index;
|
||||
}
|
||||
|
||||
function openJivoChat() {
|
||||
if (typeof window !== 'undefined' && window.jivo_api) {
|
||||
window.jivo_api.open();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
|
|
@ -132,9 +140,7 @@
|
|||
|
||||
<Header />
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="contact-section">
|
||||
<!-- Contact Hero Section -->
|
||||
<div class="contact-hero">
|
||||
<div class="contact-hero__content">
|
||||
<h1 class="contact-hero__title fade-up">Precisa de ajuda?</h1>
|
||||
|
|
@ -155,47 +161,61 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Cards Section -->
|
||||
<div class="contact-cards">
|
||||
<!-- First Row - SAC, Ouvidoria, Venda -->
|
||||
<div class="contact-cards__row">
|
||||
{#each contactCards as card}
|
||||
<div class="contact-card fade-right">
|
||||
<div class="contact-card__content">
|
||||
<p class="contact-card__title">{card.title}</p>
|
||||
<p class="contact-card__description">{card.description}</p>
|
||||
<p class="contact-card__schedule">{card.schedule}</p>
|
||||
<div class="contact-card fade-right">
|
||||
<div class="contact-card__content">
|
||||
<p class="contact-card__title">{card.title}</p>
|
||||
<p class="contact-card__description">{card.description}</p>
|
||||
<p class="contact-card__schedule">{card.schedule}</p>
|
||||
|
||||
{#if card.contactEmail}
|
||||
<!-- Para o card de Vendas com email separado -->
|
||||
<div class="contact-card__contact-group">
|
||||
<span class="contact-card__contact-text">{card.contact}</span>
|
||||
<a
|
||||
href={card.href}
|
||||
class="contact-card__contact"
|
||||
tabindex="0"
|
||||
aria-label={card.ariaLabel}
|
||||
>
|
||||
{card.contactEmail}
|
||||
</a>
|
||||
{#if card.hasChatAndEmail}
|
||||
<div class="contact-card__contact-group">
|
||||
<div class="contact-card__dual-options">
|
||||
<button
|
||||
on:click={openJivoChat}
|
||||
class="contact-card__chat-button"
|
||||
tabindex="0"
|
||||
aria-label="Abrir chat para vendas"
|
||||
>
|
||||
Chat on-line
|
||||
</button>
|
||||
<span class="contact-card__separator">ou</span>
|
||||
<a
|
||||
href={card.href}
|
||||
class="contact-card__contact"
|
||||
tabindex="0"
|
||||
aria-label={card.ariaLabel}
|
||||
>
|
||||
{card.contactEmail}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{:else if card.isChat}
|
||||
<button
|
||||
on:click={openJivoChat}
|
||||
class="contact-card__contact contact-card__chat-button"
|
||||
tabindex="0"
|
||||
aria-label={card.ariaLabel}
|
||||
>
|
||||
{card.contact}
|
||||
</button>
|
||||
{:else}
|
||||
<a
|
||||
href={card.href}
|
||||
class="contact-card__contact"
|
||||
tabindex="0"
|
||||
aria-label={card.ariaLabel}
|
||||
>
|
||||
{card.contact}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Para os outros cards -->
|
||||
<a
|
||||
href={card.href}
|
||||
class="contact-card__contact"
|
||||
tabindex="0"
|
||||
aria-label={card.ariaLabel}
|
||||
>
|
||||
{card.contact}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Second Row - Social Media -->
|
||||
<div class="contact-cards__row">
|
||||
<div class="contact-card contact-card--social fade-up">
|
||||
<div class="contact-card__content">
|
||||
|
|
@ -223,7 +243,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="faq-section">
|
||||
<div class="faq-container">
|
||||
<h2 class="faq-title fade-up">Perguntas frequentes</h2>
|
||||
|
|
@ -264,7 +283,43 @@
|
|||
--p-minus: 16px;
|
||||
}
|
||||
|
||||
/* Contact Section - Main Container */
|
||||
.contact-card__dual-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.contact-card__separator {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.contact-card__dual-options .contact-card__chat-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
letter-spacing: -0.12px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-card__dual-options .contact-card__chat-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 60px 20px 60px;
|
||||
background-color: var(--color-dark);
|
||||
|
|
@ -275,7 +330,6 @@
|
|||
gap: 45px;
|
||||
}
|
||||
|
||||
/* Contact Hero Section */
|
||||
.contact-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -287,7 +341,6 @@
|
|||
padding-top: 100px;
|
||||
}
|
||||
|
||||
/* Contact Hero Content */
|
||||
.contact-hero__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -298,7 +351,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* Contact Hero Title */
|
||||
.contact-hero__title {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
|
|
@ -309,7 +361,6 @@
|
|||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
}
|
||||
|
||||
/* Contact Hero Subtitle */
|
||||
.contact-hero__subtitle {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
|
|
@ -321,7 +372,6 @@
|
|||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Contact Hero Background */
|
||||
.contact-hero__background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -346,7 +396,6 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Contact Cards Container */
|
||||
.contact-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -356,14 +405,12 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Contact Cards Row */
|
||||
.contact-cards__row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Contact Card */
|
||||
.contact-card {
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--border-radius-md);
|
||||
|
|
@ -375,7 +422,6 @@
|
|||
min-height: 222px;
|
||||
}
|
||||
|
||||
/* Contact Card Content */
|
||||
.contact-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -388,7 +434,6 @@
|
|||
font-size: var(--p-minus);
|
||||
}
|
||||
|
||||
/* Contact Card Title */
|
||||
.contact-card__title {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 500;
|
||||
|
|
@ -399,7 +444,6 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Contact Card Description */
|
||||
.contact-card__description {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
|
|
@ -409,7 +453,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contact Card Schedule */
|
||||
.contact-card__schedule {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
|
|
@ -428,18 +471,16 @@
|
|||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Texto de contato (não clicável) */
|
||||
.contact-card__contact-text {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
letter-spacing: -0.12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contact Card Contact Info */
|
||||
.contact-card__contact {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 600;
|
||||
|
|
@ -457,14 +498,34 @@
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Social Media Card */
|
||||
.contact-card__chat-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
letter-spacing: -0.12px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-card__chat-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.contact-card--social {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
/* Social Media Icons */
|
||||
.contact-card__social-icons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
|
@ -484,7 +545,6 @@
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* FAQ Section */
|
||||
.faq-section {
|
||||
background-color: var(--color-dark);
|
||||
padding: 80px 20px;
|
||||
|
|
@ -524,12 +584,12 @@
|
|||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
padding: 24px 25px; /* Aumentado de 20px para 24px */
|
||||
padding: 24px 25px;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-size: 16px; /* Padronizado em 16px */
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-white);
|
||||
cursor: pointer;
|
||||
|
|
@ -557,20 +617,19 @@
|
|||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 20px 25px 24px; /* Mudança: adicionado padding-top de 20px */
|
||||
padding: 20px 25px 24px;
|
||||
overflow: hidden;
|
||||
animation: slideDown 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
font-family: var(--font-family-space-grotesk);
|
||||
font-size: 16px; /* Padronizado: de 14px para 16px */
|
||||
line-height: 1.6; /* Aumentado de 1.5 para 1.6 */
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Atualização da animação para melhor espaçamento */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -579,29 +638,11 @@
|
|||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 400px; /* Aumentado de 300px para 400px */
|
||||
max-height: 400px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments - agora padronizado */
|
||||
@media (max-width: 768px) {
|
||||
.faq-question {
|
||||
padding: 20px; /* Padronizado */
|
||||
font-size: 16px; /* Mantém 16px no mobile também */
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 16px 20px 20px; /* Espaçamento proporcional no mobile */
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
font-size: 15px; /* Ligeiramente menor no mobile, mas ainda legível */
|
||||
line-height: 1.6; /* Mantém o line-height consistente */
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.xs\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -618,7 +659,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* Fade animations */
|
||||
.fade-up, .fade-right, .fade-left {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
|
|
@ -633,20 +673,6 @@
|
|||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 300px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (min-width: 1025px) {
|
||||
.contact-hero {
|
||||
padding-top: 200px;
|
||||
|
|
@ -674,7 +700,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
.contact-hero {
|
||||
max-width: 100%;
|
||||
|
|
@ -698,7 +723,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.contact-hero {
|
||||
gap: 30px;
|
||||
|
|
@ -754,15 +778,25 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* FAQ specific mobile adjustments */
|
||||
.faq-question {
|
||||
padding: 15px 20px;
|
||||
font-size: 15px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 20px 15px;
|
||||
padding: 16px 20px 20px;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contact-card__dual-options {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.contact-card__separator {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { onMount } from 'svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
import phoneCard from '$lib/assets/phone-card.png';
|
||||
import pixETedAzul from '$lib/assets/pix-e-ted-azul.svg';
|
||||
|
|
@ -18,6 +19,8 @@
|
|||
import approvalFlowMockup from '$lib/assets/lock-icon.svg';
|
||||
import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg';
|
||||
|
||||
let showModal = false;
|
||||
|
||||
const features = [
|
||||
{ icon: pixETedAzul, label: 'Pix' },
|
||||
{ icon: pagamentosAzul, label: 'Pagamentos' },
|
||||
|
|
@ -29,6 +32,14 @@
|
|||
{ icon: gestaoUsuarios, label: 'Gestão de\nusuários' }
|
||||
];
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
const pixFeatures = [
|
||||
'Transferência Pix',
|
||||
'Pix saque',
|
||||
|
|
@ -77,16 +88,17 @@
|
|||
|
||||
<Header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="conta-digital-hero">
|
||||
<div class="conta-digital-hero__container">
|
||||
<!-- Desktop Layout: Content first, then image -->
|
||||
<div class="conta-digital-hero__content fade-up lg:flex xs:hidden">
|
||||
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
|
||||
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
||||
<span>Abrir conta →</span>
|
||||
</a>
|
||||
<button
|
||||
class="link-cta"
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta →
|
||||
</button>
|
||||
</div>
|
||||
<div class="conta-digital-hero__image fade-up lg:flex xs:hidden">
|
||||
<div class="conta-digital-visual-bg">
|
||||
|
|
@ -95,27 +107,27 @@
|
|||
</div>
|
||||
<div class="conta-digital-hero__content fade-up lg:hidden">
|
||||
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
|
||||
<!-- Mobile Layout: Image first, then content -->
|
||||
<div class="conta-digital-hero__image fade-up lg:hidden">
|
||||
<div class="conta-digital-visual-bg">
|
||||
<img src={phoneCard} alt="Celular com cartão" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
||||
<span>Abrir conta →</span>
|
||||
</a>
|
||||
<button
|
||||
class="link-cta"
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="conta-digital-features section">
|
||||
<div class="container">
|
||||
<div class="conta-digital-features__header fade-up">
|
||||
<h2 class="text-black">Tudo que você precisa de uma conta digital.</h2>
|
||||
</div>
|
||||
<!-- Ícones de métodos de pagamento -->
|
||||
<div class="conta-digital-features__grid">
|
||||
<div class="conta-digital-features__row">
|
||||
{#each features.slice(0, 4) as feature}
|
||||
|
|
@ -141,10 +153,8 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PIX Section -->
|
||||
<section class="conta-digital-pix section">
|
||||
<div class="conta-digital-pix__container">
|
||||
<!-- Mobile Layout -->
|
||||
<div class="conta-digital-pix__mobile">
|
||||
<div class="conta-digital-pix__content fade-up">
|
||||
<h2 class="conta-digital-pix__title">Todos os tipos de Pix em um só lugar.</h2>
|
||||
|
|
@ -320,6 +330,12 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
|
|
@ -335,6 +351,65 @@
|
|||
--conta-digital-text-secondary: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-button.primary {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-button.primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.conta-digital-visual-bg {
|
||||
background: radial-gradient(ellipse 89% 85% at -68% -3%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
||||
radial-gradient(ellipse 153% 147% at 191% 148%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
||||
|
|
@ -455,6 +530,10 @@
|
|||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 40px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.link-cta:hover {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
import cubesPlus from '$lib/assets/cubes-plus.svg';
|
||||
import case1 from '$lib/assets/case-1.webp';
|
||||
|
|
@ -26,6 +27,16 @@
|
|||
import cartoesCinza from '$lib/assets/cartoes-cinza.svg';
|
||||
import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
|
||||
|
||||
let showModal = false;
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 'Passo 1',
|
||||
|
|
@ -140,9 +151,12 @@
|
|||
|
||||
<p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
|
||||
|
||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
||||
<span>Abrir conta →</span>
|
||||
</a>
|
||||
<button
|
||||
class="link-cta"
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="desktop">
|
||||
|
|
@ -249,7 +263,7 @@
|
|||
</div>
|
||||
|
||||
<div class="integration-buttons fade-up">
|
||||
<a href="centro-de-suporte" class="link-cta white">
|
||||
<a href="centro-suporte" class="link-cta white">
|
||||
<span>Acesse a documentação →</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -261,6 +275,12 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
|
|
@ -268,6 +288,65 @@
|
|||
DEVELOPERS PAGE STYLES
|
||||
========================= */
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-button.primary {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-button.primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Build With Section */
|
||||
.build-with {
|
||||
position: relative;
|
||||
|
|
@ -330,6 +409,10 @@
|
|||
border: none;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.build-with .content .link-cta:hover {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
Settings
|
||||
} from 'lucide-svelte';
|
||||
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
|
||||
|
|
@ -30,6 +31,15 @@
|
|||
let mounted = false;
|
||||
let visibleElements = {};
|
||||
let activeCase = 'fintech';
|
||||
let showModal = false;
|
||||
|
||||
function openCreateAccountModal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
const steps = [
|
||||
{
|
||||
|
|
@ -195,9 +205,12 @@ func main ( ) {
|
|||
|
||||
<p class="subtitle">Tecnologia que garante velocidade, segurança e escala nos seus pagamentos.</p>
|
||||
|
||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
||||
<button
|
||||
class="link-cta"
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Abrir conta <ArrowRight size={16} class="icon" />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pix-instant__visual fade-up">
|
||||
|
|
@ -451,13 +464,13 @@ func main ( ) {
|
|||
>
|
||||
{#if mounted && visibleElements['howitworks-cta']}
|
||||
<div in:fly={{ y: 24, duration: 500 }}>
|
||||
<a
|
||||
href="/precos#form-negociacao-basspago"
|
||||
<button
|
||||
class="cta-btn-white px-14 py-4 text-base inline-flex items-center gap-2 group"
|
||||
on:click={openCreateAccountModal}
|
||||
>
|
||||
Criar conta grátis
|
||||
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -465,10 +478,75 @@ func main ( ) {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<Modal
|
||||
bind:isOpen={showModal}
|
||||
on:close={closeModal}
|
||||
>
|
||||
</Modal>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
/* PIX Instant Styles */
|
||||
|
||||
.modal-content-custom {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
margin: 0 0 20px 0;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-button.primary {
|
||||
background: #41FE95;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-button.primary:hover {
|
||||
background: #35e085;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.pix-instant {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
|
@ -527,6 +605,8 @@ func main ( ) {
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 260px;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
|
|
@ -550,6 +630,8 @@ func main ( ) {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cta-btn-white:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user