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 charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<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="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
|
|
||||||
<!-- Meta tags padrão -->
|
|
||||||
<meta name="description"
|
<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." />
|
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"
|
<meta name="keywords"
|
||||||
|
|
@ -17,32 +15,26 @@
|
||||||
<meta name="author" content="Bass Pago" />
|
<meta name="author" content="Bass Pago" />
|
||||||
<meta name="robots" content="index, follow" />
|
<meta name="robots" content="index, follow" />
|
||||||
|
|
||||||
<!-- Open Graph padrão -->
|
|
||||||
<meta property="og:locale" content="pt_BR" />
|
<meta property="og:locale" content="pt_BR" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:site_name" content="Bass Pago" />
|
<meta property="og:site_name" content="Bass Pago" />
|
||||||
|
|
||||||
<!-- Theme -->
|
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
|
|
||||||
<!-- Preload do vídeo de loading -->
|
|
||||||
<link rel="preload" as="video" href="/preloading.mp4" type="video/mp4" />
|
<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"
|
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQQVjrQBjbgLWXFyfnJQ.woff2"
|
||||||
type="font/woff2" crossorigin />
|
type="font/woff2" crossorigin />
|
||||||
<link rel="preload" as="image" href="/src/lib/assets/backgroundSection2.png" />
|
<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.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link rel="dns-prefetch" href="https://devs.basspago.com.br" />
|
<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"
|
<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'" />
|
media="print" onload="this.media='all'" />
|
||||||
|
|
||||||
<!-- CSS minimalista - só o vídeo MUITO MAIOR -->
|
<script src="//code.jivosite.com/widget/8fspsVOybp" async></script>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -52,7 +44,6 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Preloader - só vídeo centralizado */
|
|
||||||
#video-preloader {
|
#video-preloader {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -72,7 +63,6 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container do vídeo - MUITO MAIOR */
|
|
||||||
.video-container {
|
.video-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
|
|
@ -81,7 +71,6 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Vídeo limpo */
|
|
||||||
.preloader-video {
|
.preloader-video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -89,7 +78,6 @@
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fallback simples */
|
|
||||||
.video-fallback {
|
.video-fallback {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -117,7 +105,6 @@
|
||||||
animation: pulse 2s infinite;
|
animation: pulse 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* App container */
|
|
||||||
#app {
|
#app {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.8s ease;
|
transition: opacity 0.8s ease;
|
||||||
|
|
@ -141,7 +128,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive - proporcionalmente maior */
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.video-container {
|
.video-container {
|
||||||
width: 700px;
|
width: 700px;
|
||||||
|
|
@ -196,25 +182,20 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<!-- Preloader - só o vídeo -->
|
|
||||||
<div id="video-preloader">
|
<div id="video-preloader">
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<!-- Vídeo sem loop - vai acabar -->
|
|
||||||
<video id="preloader-video" class="preloader-video" autoplay muted playsinline preload="auto">
|
<video id="preloader-video" class="preloader-video" autoplay muted playsinline preload="auto">
|
||||||
<source src="/preloading.mp4" type="video/mp4">
|
<source src="/preloading.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<!-- Fallback simples -->
|
|
||||||
<div class="video-fallback" id="video-fallback">
|
<div class="video-fallback" id="video-fallback">
|
||||||
<div class="fallback-logo">BP</div>
|
<div class="fallback-logo">BP</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- App container -->
|
|
||||||
<div id="app" style="display: contents">%sveltekit.body%</div>
|
<div id="app" style="display: contents">%sveltekit.body%</div>
|
||||||
|
|
||||||
<!-- Script - só vai para site quando vídeo acabar -->
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
const preloader = document.getElementById('video-preloader');
|
const preloader = document.getElementById('video-preloader');
|
||||||
|
|
@ -225,7 +206,6 @@
|
||||||
let videoEnded = false;
|
let videoEnded = false;
|
||||||
let pageLoaded = false;
|
let pageLoaded = false;
|
||||||
|
|
||||||
// Função para esconder o preloader
|
|
||||||
function hidePreloader() {
|
function hidePreloader() {
|
||||||
if (preloader) {
|
if (preloader) {
|
||||||
preloader.classList.add('hidden');
|
preloader.classList.add('hidden');
|
||||||
|
|
@ -240,7 +220,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Verifica se pode esconder (vídeo acabou E página carregou)
|
|
||||||
function checkIfCanHide() {
|
function checkIfCanHide() {
|
||||||
if (videoEnded && pageLoaded) {
|
if (videoEnded && pageLoaded) {
|
||||||
hidePreloader();
|
hidePreloader();
|
||||||
|
|
@ -259,9 +238,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event listeners para o vídeo
|
|
||||||
if (video) {
|
if (video) {
|
||||||
// Quando o vídeo acabar
|
|
||||||
video.addEventListener('ended', () => {
|
video.addEventListener('ended', () => {
|
||||||
console.log('[Preloader] Vídeo terminou');
|
console.log('[Preloader] Vídeo terminou');
|
||||||
videoEnded = true;
|
videoEnded = true;
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,22 @@
|
||||||
CheckCircle
|
CheckCircle
|
||||||
} from 'lucide-svelte';
|
} from 'lucide-svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
|
|
||||||
import checkIcon from '$lib/assets/check.svg';
|
import checkIcon from '$lib/assets/check.svg';
|
||||||
import noneIcon from '$lib/assets/none.svg';
|
import noneIcon from '$lib/assets/none.svg';
|
||||||
|
|
||||||
let mounted = false;
|
let mounted = false;
|
||||||
let visibleElements = {};
|
let visibleElements = {};
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
|
function openCreateAccountModal() {
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
mounted = true;
|
mounted = true;
|
||||||
|
|
@ -226,7 +236,7 @@
|
||||||
class="flex flex-col sm:flex-row gap-5"
|
class="flex flex-col sm:flex-row gap-5"
|
||||||
in:fly={{ y: 20, duration: 500, delay: 300 }}
|
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
|
Criar conta grátis
|
||||||
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
|
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -238,8 +248,92 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.compare-section {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { Menu, X, ChevronDown } from 'lucide-svelte';
|
import { Menu, X, ChevronDown } from 'lucide-svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
|
|
||||||
import bassLogo from '$lib/assets/bass_assinatura02@2x (1).png';
|
import bassLogo from '$lib/assets/bass_assinatura02@2x (1).png';
|
||||||
|
|
||||||
|
|
@ -9,6 +10,7 @@
|
||||||
let scrolled = false;
|
let scrolled = false;
|
||||||
let dropdownOpen = {};
|
let dropdownOpen = {};
|
||||||
let dropdownTimeout = {};
|
let dropdownTimeout = {};
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
|
|
@ -30,7 +32,6 @@
|
||||||
href: '#solucoes',
|
href: '#solucoes',
|
||||||
hasDropdown: true,
|
hasDropdown: true,
|
||||||
submenu: [
|
submenu: [
|
||||||
// { name: 'Banking', href: '/banking' },
|
|
||||||
{ name: 'PIX', href: '/pix' },
|
{ name: 'PIX', href: '/pix' },
|
||||||
{ name: 'PDV', href: '/pdv' }
|
{ name: 'PDV', href: '/pdv' }
|
||||||
]
|
]
|
||||||
|
|
@ -44,7 +45,7 @@
|
||||||
{ name: 'Sobre', href: '/sobre' },
|
{ name: 'Sobre', href: '/sobre' },
|
||||||
{ name: 'Centro de Suporte', href: '/centro-suporte' },
|
{ name: 'Centro de Suporte', href: '/centro-suporte' },
|
||||||
{ name: 'Preços', href: '/precos' },
|
{ 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) {
|
function handleNavigation(href, event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (href.startsWith('http')) {
|
||||||
|
window.open(href, '_blank');
|
||||||
|
isOpen = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (href.startsWith('/')) {
|
if (href.startsWith('/')) {
|
||||||
goto(href);
|
goto(href);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -96,9 +103,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAccess() {
|
function handleAccess() {
|
||||||
// Adicione aqui a lógica para acessar conta existente
|
try {
|
||||||
// Por exemplo: goto('/login') ou abrir modal de login
|
window.location.href = 'https://finance.basspago.com.br/login';
|
||||||
console.log('Acessar conta');
|
|
||||||
|
} 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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -155,20 +180,22 @@
|
||||||
|
|
||||||
<div class="hidden lg:flex items-center gap-3">
|
<div class="hidden lg:flex items-center gap-3">
|
||||||
<button
|
<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"
|
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
|
Acessar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<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"
|
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
|
Abrir conta
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu Button -->
|
|
||||||
<button class="lg:hidden p-2 text-white" on:click={toggleMenu}>
|
<button class="lg:hidden p-2 text-white" on:click={toggleMenu}>
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<X size={22} />
|
<X size={22} />
|
||||||
|
|
@ -178,7 +205,6 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Navigation -->
|
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<nav class="mt-3 rounded-2xl bg-slate-950/95 backdrop-blur-xl border border-white/10">
|
<nav class="mt-3 rounded-2xl bg-slate-950/95 backdrop-blur-xl border border-white/10">
|
||||||
{#each menuItems as item}
|
{#each menuItems as item}
|
||||||
|
|
@ -221,14 +247,17 @@
|
||||||
|
|
||||||
<div class="border-t border-white/10 p-4 space-y-3">
|
<div class="border-t border-white/10 p-4 space-y-3">
|
||||||
<button
|
<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"
|
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
|
Acessar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<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"
|
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
|
Abrir conta
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -238,6 +267,13 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!-- Modal Component -->
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
nav {
|
nav {
|
||||||
animation: slideDown 0.3s ease-out;
|
animation: slideDown 0.3s ease-out;
|
||||||
|
|
@ -262,4 +298,75 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
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>
|
</style>
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import { fly, fade } from 'svelte/transition';
|
import { fly, fade } from 'svelte/transition';
|
||||||
import { ArrowRight } from 'lucide-svelte';
|
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';
|
import backgroundSection1 from '$lib/assets/backgroundSection2.png';
|
||||||
|
|
||||||
|
|
@ -21,6 +22,7 @@
|
||||||
let heroSection;
|
let heroSection;
|
||||||
let currentWordIndex = 0;
|
let currentWordIndex = 0;
|
||||||
let isTransitioning = false;
|
let isTransitioning = false;
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
const words = ['Escalar', 'Evoluir', 'Empresas'];
|
const words = ['Escalar', 'Evoluir', 'Empresas'];
|
||||||
|
|
||||||
|
|
@ -53,6 +55,14 @@
|
||||||
clearInterval(wordInterval);
|
clearInterval(wordInterval);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function openCreateAccountModal() {
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
|
|
@ -96,7 +106,7 @@
|
||||||
leading-tight
|
leading-tight
|
||||||
mb-6 sm:mb-8"
|
mb-6 sm:mb-8"
|
||||||
in:fly={{ y: 30, duration: 800 }}
|
in:fly={{ y: 30, duration: 800 }}
|
||||||
>
|
>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
Infraestrutura de
|
Infraestrutura de
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,7 +117,7 @@
|
||||||
<div class="block text-emerald-400">
|
<div class="block text-emerald-400">
|
||||||
expandir seus negócios
|
expandir seus negócios
|
||||||
</div>
|
</div>
|
||||||
</h1>
|
</h1>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Subtitle -->
|
<!-- Subtitle -->
|
||||||
|
|
@ -130,9 +140,8 @@
|
||||||
class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"
|
class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"
|
||||||
in:fly={{ y: 20, duration: 800, delay: 250 }}
|
in:fly={{ y: 20, duration: 800, delay: 250 }}
|
||||||
>
|
>
|
||||||
<!-- Primary Button -->
|
|
||||||
<button
|
<button
|
||||||
on:click={() => goto('/precos#form-negociacao-basspago')}
|
on:click={openCreateAccountModal}
|
||||||
class="relative group
|
class="relative group
|
||||||
inline-flex items-center justify-center gap-3
|
inline-flex items-center justify-center gap-3
|
||||||
rounded-2xl
|
rounded-2xl
|
||||||
|
|
@ -144,7 +153,7 @@
|
||||||
transition-all duration-300
|
transition-all duration-300
|
||||||
hover:shadow-2xl hover:scale-105
|
hover:shadow-2xl hover:scale-105
|
||||||
w-full sm:w-auto"
|
w-full sm:w-auto"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="absolute inset-0
|
class="absolute inset-0
|
||||||
bg-gradient-to-r from-blue-600 to-emerald-400
|
bg-gradient-to-r from-blue-600 to-emerald-400
|
||||||
|
|
@ -156,7 +165,7 @@
|
||||||
Abrir conta
|
Abrir conta
|
||||||
<ArrowRight size={18} />
|
<ArrowRight size={18} />
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -168,28 +177,30 @@
|
||||||
>
|
>
|
||||||
<div class="hero-logos-wrapper">
|
<div class="hero-logos-wrapper">
|
||||||
<div class="hero-logos-track">
|
<div class="hero-logos-track">
|
||||||
<!-- Primeira sequência de logos -->
|
|
||||||
{#each logos as logo}
|
{#each logos as logo}
|
||||||
<img src={logo.src} alt={logo.alt} />
|
<img src={logo.src} alt={logo.alt} />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<!-- Segunda sequência (duplicação) -->
|
|
||||||
{#each logos as logo}
|
{#each logos as logo}
|
||||||
<img src={logo.src} alt={logo.alt} />
|
<img src={logo.src} alt={logo.alt} />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<!-- Terceira sequência (garantia de continuidade) -->
|
|
||||||
{#each logos as logo}
|
{#each logos as logo}
|
||||||
<img src={logo.src} alt={logo.alt} />
|
<img src={logo.src} alt={logo.alt} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Container para as transições de palavras */
|
|
||||||
.word-transition {
|
.word-transition {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -198,12 +209,10 @@
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Seção dos logos - posicionada na parte inferior */
|
|
||||||
.hero-logos-section {
|
.hero-logos-section {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logos Parceiros - Wrapper */
|
|
||||||
.hero-logos-wrapper {
|
.hero-logos-wrapper {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -214,9 +223,8 @@
|
||||||
right: 50%;
|
right: 50%;
|
||||||
margin-left: -50vw;
|
margin-left: -50vw;
|
||||||
margin-right: -50vw;
|
margin-right: -50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logos Parceiros - Track */
|
|
||||||
.hero-logos-track {
|
.hero-logos-track {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
|
@ -237,7 +245,6 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animação de scroll infinito */
|
|
||||||
@keyframes scroll {
|
@keyframes scroll {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
|
@ -247,12 +254,26 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Floating animation já está definida no CSS global */
|
|
||||||
.floating-animation {
|
.floating-animation {
|
||||||
animation: floating 6s ease-in-out infinite;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.hero-logos-track {
|
.hero-logos-track {
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,17 @@
|
||||||
import { fly, fade } from 'svelte/transition';
|
import { fly, fade } from 'svelte/transition';
|
||||||
import { UserPlus, Settings, Zap, TrendingUp, ArrowRight, CheckCircle } from 'lucide-svelte';
|
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 mounted = false;
|
||||||
let visibleElements = {};
|
let visibleElements = {};
|
||||||
|
|
@ -53,7 +64,6 @@
|
||||||
|
|
||||||
<section id="como-funciona" class="section-padding bg-white">
|
<section id="como-funciona" class="section-padding bg-white">
|
||||||
<div class="container-basspago">
|
<div class="container-basspago">
|
||||||
<!-- Header -->
|
|
||||||
<div
|
<div
|
||||||
class="text-center mb-20 max-w-3xl mx-auto"
|
class="text-center mb-20 max-w-3xl mx-auto"
|
||||||
data-animate
|
data-animate
|
||||||
|
|
@ -85,7 +95,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Steps -->
|
|
||||||
<div class="relative grid md:grid-cols-4 gap-10 mb-20">
|
<div class="relative grid md:grid-cols-4 gap-10 mb-20">
|
||||||
{#each steps as step, index}
|
{#each steps as step, index}
|
||||||
<div
|
<div
|
||||||
|
|
@ -98,24 +107,20 @@
|
||||||
in:fly={{ y: 30, duration: 400, delay: index * 80 }}
|
in:fly={{ y: 30, duration: 400, delay: index * 80 }}
|
||||||
class="relative"
|
class="relative"
|
||||||
>
|
>
|
||||||
<!-- Step Icon -->
|
|
||||||
<div
|
<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"
|
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" />
|
<svelte:component this={step.icon} size={22} class="text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step Number & Title -->
|
|
||||||
<h3 class="text-lg font-semibold text-gray-900 mb-1">
|
<h3 class="text-lg font-semibold text-gray-900 mb-1">
|
||||||
{index + 1}. {step.title}
|
{index + 1}. {step.title}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<!-- Step Description -->
|
|
||||||
<p class="text-sm text-gray-600">
|
<p class="text-sm text-gray-600">
|
||||||
{step.description}
|
{step.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Connecting Line (não no último item) -->
|
|
||||||
{#if index < steps.length - 1}
|
{#if index < steps.length - 1}
|
||||||
<div
|
<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"
|
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}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<div
|
<div
|
||||||
class="text-center"
|
class="text-center"
|
||||||
data-animate
|
data-animate
|
||||||
|
|
@ -137,7 +141,7 @@
|
||||||
{#if mounted && visibleElements['howitworks-cta']}
|
{#if mounted && visibleElements['howitworks-cta']}
|
||||||
<div in:fly={{ y: 24, duration: 500 }}>
|
<div in:fly={{ y: 24, duration: 500 }}>
|
||||||
<button
|
<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"
|
class="btn-primary px-14 py-4 text-base inline-flex items-center gap-2 group"
|
||||||
>
|
>
|
||||||
Criar conta grátis
|
Criar conta grátis
|
||||||
|
|
@ -150,8 +154,241 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.step-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -165,11 +402,10 @@
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Linha conectora animada */
|
|
||||||
.step-item::after {
|
.step-item::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.75rem; /* 28px */
|
top: 1.75rem;
|
||||||
left: calc(100% - 0.5rem);
|
left: calc(100% - 0.5rem);
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
|
@ -179,12 +415,10 @@
|
||||||
animation-delay: 0.5s;
|
animation-delay: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Não mostrar linha no último item */
|
|
||||||
.step-item:last-child::after {
|
.step-item:last-child::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Esconder linha em mobile */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.step-item::after {
|
.step-item::after {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -202,12 +436,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hover effect para o botão CTA */
|
|
||||||
.group:hover .group-hover\:translate-x-1 {
|
.group:hover .group-hover\:translate-x-1 {
|
||||||
transform: translateX(0.25rem);
|
transform: translateX(0.25rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animação de pulso para os ícones */
|
|
||||||
.step-icon:hover {
|
.step-icon:hover {
|
||||||
animation: iconPulse 0.6s ease-in-out;
|
animation: iconPulse 0.6s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
@ -221,7 +453,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Gradient para o texto */
|
|
||||||
.text-gradient {
|
.text-gradient {
|
||||||
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||||
-webkit-background-clip: text;
|
-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,7 +18,8 @@
|
||||||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||||
contact: 'Chat on-line',
|
contact: 'Chat on-line',
|
||||||
href: 'mailto:suporte@basspago.com',
|
href: 'mailto:suporte@basspago.com',
|
||||||
ariaLabel: 'Enviar email para suporte@basspago.com'
|
ariaLabel: 'Chat Online Bass Pago',
|
||||||
|
isChat: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Ouvidoria',
|
title: 'Ouvidoria',
|
||||||
|
|
@ -26,7 +27,7 @@
|
||||||
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
|
||||||
contact: 'ouvidoria@basspago.com',
|
contact: 'ouvidoria@basspago.com',
|
||||||
href: 'mailto:ouvidoria@basspago.com',
|
href: 'mailto:ouvidoria@basspago.com',
|
||||||
ariaLabel: 'Chat Online Bass Pago'
|
ariaLabel: 'Enviar email para ouvidoria@basspago.com'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Vendas',
|
title: 'Vendas',
|
||||||
|
|
@ -35,7 +36,8 @@
|
||||||
contact: 'Chat on-line ou',
|
contact: 'Chat on-line ou',
|
||||||
contactEmail: 'comercial@basspago.com',
|
contactEmail: 'comercial@basspago.com',
|
||||||
href: 'mailto:comercial@basspago.com',
|
href: 'mailto:comercial@basspago.com',
|
||||||
ariaLabel: 'Enviar email para comercial@basspago.com'
|
ariaLabel: 'Enviar email para comercial@basspago.com',
|
||||||
|
hasChatAndEmail: true
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -105,6 +107,12 @@
|
||||||
openFaq = openFaq === index ? null : index;
|
openFaq = openFaq === index ? null : index;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openJivoChat() {
|
||||||
|
if (typeof window !== 'undefined' && window.jivo_api) {
|
||||||
|
window.jivo_api.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
|
|
@ -132,9 +140,7 @@
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<section class="contact-section">
|
<section class="contact-section">
|
||||||
<!-- Contact Hero Section -->
|
|
||||||
<div class="contact-hero">
|
<div class="contact-hero">
|
||||||
<div class="contact-hero__content">
|
<div class="contact-hero__content">
|
||||||
<h1 class="contact-hero__title fade-up">Precisa de ajuda?</h1>
|
<h1 class="contact-hero__title fade-up">Precisa de ajuda?</h1>
|
||||||
|
|
@ -155,9 +161,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Contact Cards Section -->
|
|
||||||
<div class="contact-cards">
|
<div class="contact-cards">
|
||||||
<!-- First Row - SAC, Ouvidoria, Venda -->
|
|
||||||
<div class="contact-cards__row">
|
<div class="contact-cards__row">
|
||||||
{#each contactCards as card}
|
{#each contactCards as card}
|
||||||
<div class="contact-card fade-right">
|
<div class="contact-card fade-right">
|
||||||
|
|
@ -166,10 +170,18 @@
|
||||||
<p class="contact-card__description">{card.description}</p>
|
<p class="contact-card__description">{card.description}</p>
|
||||||
<p class="contact-card__schedule">{card.schedule}</p>
|
<p class="contact-card__schedule">{card.schedule}</p>
|
||||||
|
|
||||||
{#if card.contactEmail}
|
{#if card.hasChatAndEmail}
|
||||||
<!-- Para o card de Vendas com email separado -->
|
|
||||||
<div class="contact-card__contact-group">
|
<div class="contact-card__contact-group">
|
||||||
<span class="contact-card__contact-text">{card.contact}</span>
|
<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
|
<a
|
||||||
href={card.href}
|
href={card.href}
|
||||||
class="contact-card__contact"
|
class="contact-card__contact"
|
||||||
|
|
@ -179,8 +191,17 @@
|
||||||
{card.contactEmail}
|
{card.contactEmail}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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}
|
{:else}
|
||||||
<!-- Para os outros cards -->
|
|
||||||
<a
|
<a
|
||||||
href={card.href}
|
href={card.href}
|
||||||
class="contact-card__contact"
|
class="contact-card__contact"
|
||||||
|
|
@ -192,10 +213,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Second Row - Social Media -->
|
|
||||||
<div class="contact-cards__row">
|
<div class="contact-cards__row">
|
||||||
<div class="contact-card contact-card--social fade-up">
|
<div class="contact-card contact-card--social fade-up">
|
||||||
<div class="contact-card__content">
|
<div class="contact-card__content">
|
||||||
|
|
@ -223,7 +243,6 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FAQ Section -->
|
|
||||||
<section class="faq-section">
|
<section class="faq-section">
|
||||||
<div class="faq-container">
|
<div class="faq-container">
|
||||||
<h2 class="faq-title fade-up">Perguntas frequentes</h2>
|
<h2 class="faq-title fade-up">Perguntas frequentes</h2>
|
||||||
|
|
@ -264,7 +283,43 @@
|
||||||
--p-minus: 16px;
|
--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 {
|
.contact-section {
|
||||||
padding: 60px 20px 60px;
|
padding: 60px 20px 60px;
|
||||||
background-color: var(--color-dark);
|
background-color: var(--color-dark);
|
||||||
|
|
@ -275,7 +330,6 @@
|
||||||
gap: 45px;
|
gap: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Hero Section */
|
|
||||||
.contact-hero {
|
.contact-hero {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -287,7 +341,6 @@
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Hero Content */
|
|
||||||
.contact-hero__content {
|
.contact-hero__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -298,7 +351,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Hero Title */
|
|
||||||
.contact-hero__title {
|
.contact-hero__title {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -309,7 +361,6 @@
|
||||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Hero Subtitle */
|
|
||||||
.contact-hero__subtitle {
|
.contact-hero__subtitle {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -321,7 +372,6 @@
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Hero Background */
|
|
||||||
.contact-hero__background {
|
.contact-hero__background {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -346,7 +396,6 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Cards Container */
|
|
||||||
.contact-cards {
|
.contact-cards {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -356,14 +405,12 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Cards Row */
|
|
||||||
.contact-cards__row {
|
.contact-cards__row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card */
|
|
||||||
.contact-card {
|
.contact-card {
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
background-color: rgba(255, 255, 255, 0.04);
|
||||||
border-radius: var(--border-radius-md);
|
border-radius: var(--border-radius-md);
|
||||||
|
|
@ -375,7 +422,6 @@
|
||||||
min-height: 222px;
|
min-height: 222px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card Content */
|
|
||||||
.contact-card__content {
|
.contact-card__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -388,7 +434,6 @@
|
||||||
font-size: var(--p-minus);
|
font-size: var(--p-minus);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card Title */
|
|
||||||
.contact-card__title {
|
.contact-card__title {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -399,7 +444,6 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card Description */
|
|
||||||
.contact-card__description {
|
.contact-card__description {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -409,7 +453,6 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card Schedule */
|
|
||||||
.contact-card__schedule {
|
.contact-card__schedule {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -428,7 +471,6 @@
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Texto de contato (não clicável) */
|
|
||||||
.contact-card__contact-text {
|
.contact-card__contact-text {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -439,7 +481,6 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Card Contact Info */
|
|
||||||
.contact-card__contact {
|
.contact-card__contact {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -457,14 +498,34 @@
|
||||||
opacity: 0.8;
|
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 {
|
.contact-card--social {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Social Media Icons */
|
|
||||||
.contact-card__social-icons {
|
.contact-card__social-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
@ -484,7 +545,6 @@
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FAQ Section */
|
|
||||||
.faq-section {
|
.faq-section {
|
||||||
background-color: var(--color-dark);
|
background-color: var(--color-dark);
|
||||||
padding: 80px 20px;
|
padding: 80px 20px;
|
||||||
|
|
@ -524,12 +584,12 @@
|
||||||
|
|
||||||
.faq-question {
|
.faq-question {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 24px 25px; /* Aumentado de 20px para 24px */
|
padding: 24px 25px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-size: 16px; /* Padronizado em 16px */
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -557,20 +617,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer {
|
.faq-answer {
|
||||||
padding: 20px 25px 24px; /* Mudança: adicionado padding-top de 20px */
|
padding: 20px 25px 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
animation: slideDown 0.3s ease-out forwards;
|
animation: slideDown 0.3s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer p {
|
.faq-answer p {
|
||||||
font-family: var(--font-family-space-grotesk);
|
font-family: var(--font-family-space-grotesk);
|
||||||
font-size: 16px; /* Padronizado: de 14px para 16px */
|
font-size: 16px;
|
||||||
line-height: 1.6; /* Aumentado de 1.5 para 1.6 */
|
line-height: 1.6;
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Atualização da animação para melhor espaçamento */
|
|
||||||
@keyframes slideDown {
|
@keyframes slideDown {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -579,29 +638,11 @@
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
max-height: 400px; /* Aumentado de 300px para 400px */
|
max-height: 400px;
|
||||||
transform: translateY(0);
|
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 {
|
.xs\:hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -618,7 +659,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fade animations */
|
|
||||||
.fade-up, .fade-right, .fade-left {
|
.fade-up, .fade-right, .fade-left {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
|
|
@ -633,20 +673,6 @@
|
||||||
transform: translateX(-30px);
|
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) {
|
@media (min-width: 1025px) {
|
||||||
.contact-hero {
|
.contact-hero {
|
||||||
padding-top: 200px;
|
padding-top: 200px;
|
||||||
|
|
@ -674,7 +700,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tablet */
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.contact-hero {
|
.contact-hero {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
@ -698,7 +723,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.contact-hero {
|
.contact-hero {
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
@ -754,15 +778,25 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FAQ specific mobile adjustments */
|
|
||||||
.faq-question {
|
.faq-question {
|
||||||
padding: 15px 20px;
|
padding: 20px;
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer {
|
.faq-answer {
|
||||||
padding: 0 20px 15px;
|
padding: 16px 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer p {
|
.faq-answer p {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card__dual-options {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card__separator {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
|
|
||||||
import phoneCard from '$lib/assets/phone-card.png';
|
import phoneCard from '$lib/assets/phone-card.png';
|
||||||
import pixETedAzul from '$lib/assets/pix-e-ted-azul.svg';
|
import pixETedAzul from '$lib/assets/pix-e-ted-azul.svg';
|
||||||
|
|
@ -18,6 +19,8 @@
|
||||||
import approvalFlowMockup from '$lib/assets/lock-icon.svg';
|
import approvalFlowMockup from '$lib/assets/lock-icon.svg';
|
||||||
import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg';
|
import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg';
|
||||||
|
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{ icon: pixETedAzul, label: 'Pix' },
|
{ icon: pixETedAzul, label: 'Pix' },
|
||||||
{ icon: pagamentosAzul, label: 'Pagamentos' },
|
{ icon: pagamentosAzul, label: 'Pagamentos' },
|
||||||
|
|
@ -29,6 +32,14 @@
|
||||||
{ icon: gestaoUsuarios, label: 'Gestão de\nusuários' }
|
{ icon: gestaoUsuarios, label: 'Gestão de\nusuários' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function openCreateAccountModal() {
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
const pixFeatures = [
|
const pixFeatures = [
|
||||||
'Transferência Pix',
|
'Transferência Pix',
|
||||||
'Pix saque',
|
'Pix saque',
|
||||||
|
|
@ -77,16 +88,17 @@
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="conta-digital-hero">
|
<section class="conta-digital-hero">
|
||||||
<div class="conta-digital-hero__container">
|
<div class="conta-digital-hero__container">
|
||||||
<!-- Desktop Layout: Content first, then image -->
|
|
||||||
<div class="conta-digital-hero__content fade-up lg:flex xs:hidden">
|
<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>
|
<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>
|
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
||||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
<button
|
||||||
<span>Abrir conta →</span>
|
class="link-cta"
|
||||||
</a>
|
on:click={openCreateAccountModal}
|
||||||
|
>
|
||||||
|
Abrir conta →
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="conta-digital-hero__image fade-up lg:flex xs:hidden">
|
<div class="conta-digital-hero__image fade-up lg:flex xs:hidden">
|
||||||
<div class="conta-digital-visual-bg">
|
<div class="conta-digital-visual-bg">
|
||||||
|
|
@ -95,27 +107,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="conta-digital-hero__content fade-up lg:hidden">
|
<div class="conta-digital-hero__content fade-up lg:hidden">
|
||||||
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
|
<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-hero__image fade-up lg:hidden">
|
||||||
<div class="conta-digital-visual-bg">
|
<div class="conta-digital-visual-bg">
|
||||||
<img src={phoneCard} alt="Celular com cartão" />
|
<img src={phoneCard} alt="Celular com cartão" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
||||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
<button
|
||||||
<span>Abrir conta →</span>
|
class="link-cta"
|
||||||
</a>
|
on:click={openCreateAccountModal}
|
||||||
|
>
|
||||||
|
Abrir conta →
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features Section -->
|
|
||||||
<section class="conta-digital-features section">
|
<section class="conta-digital-features section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="conta-digital-features__header fade-up">
|
<div class="conta-digital-features__header fade-up">
|
||||||
<h2 class="text-black">Tudo que você precisa de uma conta digital.</h2>
|
<h2 class="text-black">Tudo que você precisa de uma conta digital.</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- Ícones de métodos de pagamento -->
|
|
||||||
<div class="conta-digital-features__grid">
|
<div class="conta-digital-features__grid">
|
||||||
<div class="conta-digital-features__row">
|
<div class="conta-digital-features__row">
|
||||||
{#each features.slice(0, 4) as feature}
|
{#each features.slice(0, 4) as feature}
|
||||||
|
|
@ -141,10 +153,8 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- PIX Section -->
|
|
||||||
<section class="conta-digital-pix section">
|
<section class="conta-digital-pix section">
|
||||||
<div class="conta-digital-pix__container">
|
<div class="conta-digital-pix__container">
|
||||||
<!-- Mobile Layout -->
|
|
||||||
<div class="conta-digital-pix__mobile">
|
<div class="conta-digital-pix__mobile">
|
||||||
<div class="conta-digital-pix__content fade-up">
|
<div class="conta-digital-pix__content fade-up">
|
||||||
<h2 class="conta-digital-pix__title">Todos os tipos de Pix em um só lugar.</h2>
|
<h2 class="conta-digital-pix__title">Todos os tipos de Pix em um só lugar.</h2>
|
||||||
|
|
@ -320,6 +330,12 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -335,6 +351,65 @@
|
||||||
--conta-digital-text-secondary: rgba(0, 0, 0, 0.75);
|
--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 {
|
.conta-digital-visual-bg {
|
||||||
background: radial-gradient(ellipse 89% 85% at -68% -3%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
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%),
|
radial-gradient(ellipse 153% 147% at 191% 148%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
||||||
|
|
@ -455,6 +530,10 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-cta:hover {
|
.link-cta:hover {
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
|
|
||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
|
|
||||||
import cubesPlus from '$lib/assets/cubes-plus.svg';
|
import cubesPlus from '$lib/assets/cubes-plus.svg';
|
||||||
import case1 from '$lib/assets/case-1.webp';
|
import case1 from '$lib/assets/case-1.webp';
|
||||||
|
|
@ -26,6 +27,16 @@
|
||||||
import cartoesCinza from '$lib/assets/cartoes-cinza.svg';
|
import cartoesCinza from '$lib/assets/cartoes-cinza.svg';
|
||||||
import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
|
import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
|
||||||
|
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
|
function openCreateAccountModal() {
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{
|
{
|
||||||
step: 'Passo 1',
|
step: 'Passo 1',
|
||||||
|
|
@ -140,9 +151,12 @@
|
||||||
|
|
||||||
<p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
|
<p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
|
||||||
|
|
||||||
<a href="/precos#form-negociacao-basspago" class="link-cta">
|
<button
|
||||||
<span>Abrir conta →</span>
|
class="link-cta"
|
||||||
</a>
|
on:click={openCreateAccountModal}
|
||||||
|
>
|
||||||
|
Abrir conta →
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="desktop">
|
<div class="desktop">
|
||||||
|
|
@ -249,7 +263,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="integration-buttons fade-up">
|
<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>
|
<span>Acesse a documentação →</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -261,6 +275,12 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -268,6 +288,65 @@
|
||||||
DEVELOPERS PAGE STYLES
|
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 Section */
|
||||||
.build-with {
|
.build-with {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -330,6 +409,10 @@
|
||||||
border: none;
|
border: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.build-with .content .link-cta:hover {
|
.build-with .content .link-cta:hover {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
Settings
|
Settings
|
||||||
} from 'lucide-svelte';
|
} from 'lucide-svelte';
|
||||||
|
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
|
||||||
|
|
@ -30,6 +31,15 @@
|
||||||
let mounted = false;
|
let mounted = false;
|
||||||
let visibleElements = {};
|
let visibleElements = {};
|
||||||
let activeCase = 'fintech';
|
let activeCase = 'fintech';
|
||||||
|
let showModal = false;
|
||||||
|
|
||||||
|
function openCreateAccountModal() {
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{
|
{
|
||||||
|
|
@ -195,9 +205,12 @@ func main ( ) {
|
||||||
|
|
||||||
<p class="subtitle">Tecnologia que garante velocidade, segurança e escala nos seus pagamentos.</p>
|
<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" />
|
Abrir conta <ArrowRight size={16} class="icon" />
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pix-instant__visual fade-up">
|
<div class="pix-instant__visual fade-up">
|
||||||
|
|
@ -451,13 +464,13 @@ func main ( ) {
|
||||||
>
|
>
|
||||||
{#if mounted && visibleElements['howitworks-cta']}
|
{#if mounted && visibleElements['howitworks-cta']}
|
||||||
<div in:fly={{ y: 24, duration: 500 }}>
|
<div in:fly={{ y: 24, duration: 500 }}>
|
||||||
<a
|
<button
|
||||||
href="/precos#form-negociacao-basspago"
|
|
||||||
class="cta-btn-white px-14 py-4 text-base inline-flex items-center gap-2 group"
|
class="cta-btn-white px-14 py-4 text-base inline-flex items-center gap-2 group"
|
||||||
|
on:click={openCreateAccountModal}
|
||||||
>
|
>
|
||||||
Criar conta grátis
|
Criar conta grátis
|
||||||
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
|
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
|
||||||
</a>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -465,10 +478,75 @@ func main ( ) {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
bind:isOpen={showModal}
|
||||||
|
on:close={closeModal}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* PIX Instant Styles */
|
/* 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 {
|
.pix-instant {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -527,6 +605,8 @@ func main ( ) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-btn:hover {
|
.cta-btn:hover {
|
||||||
|
|
@ -550,6 +630,8 @@ func main ( ) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-btn-white:hover {
|
.cta-btn-white:hover {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user