563 lines
18 KiB
Svelte
563 lines
18 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { fly } from 'svelte/transition';
|
|
|
|
import bassLogo from '$lib/assets/logo-basspago.svg';
|
|
import appleStore from '$lib/assets/apple-store.svg';
|
|
import googlePlay from '$lib/assets/google-play.svg';
|
|
import facebook from '$lib/assets/facebook.svg';
|
|
import instagram from '$lib/assets/instagram.svg';
|
|
import tiktok from '$lib/assets/tiktok.svg';
|
|
import linkedin from '$lib/assets/linkedin.svg';
|
|
import youtube from '$lib/assets/youtube.svg';
|
|
import pciDss from '$lib/assets/ic-pci-dss.svg';
|
|
|
|
let mounted = false;
|
|
let visibleElements = {};
|
|
|
|
onMount(() => {
|
|
mounted = true;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
visibleElements[entry.target.id] = true;
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('[data-animate]');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<footer class="footer desktop">
|
|
<div class="footer-wrapper">
|
|
<div
|
|
class="footer-col left"
|
|
data-animate
|
|
id="footer-col-1"
|
|
>
|
|
{#if mounted && visibleElements['footer-col-1']}
|
|
<img
|
|
src={bassLogo}
|
|
alt="Bass Pago"
|
|
class="footer-logo"
|
|
in:fly={{ y: 30, duration: 500 }}
|
|
/>
|
|
<p
|
|
class="footer-desc"
|
|
in:fly={{ y: 30, duration: 500, delay: 100 }}
|
|
>
|
|
A Infraestrutura financeira<br /> que impulsiona o seu negócio.
|
|
</p>
|
|
<div
|
|
class="app-buttons"
|
|
in:fly={{ y: 30, duration: 500, delay: 200 }}
|
|
>
|
|
<a href="https://apps.apple.com/br/app/bass-pago/id6758310271">
|
|
<img src={appleStore} alt="App Store" />
|
|
</a>
|
|
<a href="https://play.google.com/store/apps/details?id=finance.onz.bass.pago">
|
|
<img src={googlePlay} alt="Google Play" />
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div
|
|
class="footer-col center"
|
|
data-animate
|
|
id="footer-col-2"
|
|
>
|
|
{#if mounted && visibleElements['footer-col-2']}
|
|
<div
|
|
class="footer-menus"
|
|
in:fly={{ y: 30, duration: 500, delay: 100 }}
|
|
>
|
|
<div class="menu">
|
|
<h4>Explore:</h4>
|
|
<a href="/">Home</a>
|
|
<a href="/conta-digital">Conta Digital</a>
|
|
<a href="/pix">Pix</a>
|
|
<a href="/pdv">Pdv</a>
|
|
</div>
|
|
<div class="menu">
|
|
<h4>Bass:</h4>
|
|
<a href="/sobre">Sobre</a>
|
|
<a href="/precos">Preços</a>
|
|
<a href="/desenvolvedores">Desenvolva com Bass</a>
|
|
</div>
|
|
<div class="menu">
|
|
<h4>Atendimento:</h4>
|
|
<a href="/suporte">Centro de Suporte</a>
|
|
<br />
|
|
<h4>Ouvidoria:</h4>
|
|
<a href="mailto:ouvidoria@basspago.com">ouvidoria@basspago.com</a>
|
|
<br />
|
|
<h4>Políticas:</h4>
|
|
<a href="https://bassp-api.s3.sa-east-1.amazonaws.com/openingContract/BASS%20PAGO/contrato-de-abertura-v1.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6JB4JB7A3PPZX7XN%2F20260218%2Fsa-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260218T180250Z&X-Amz-Expires=900&X-Amz-Signature=97ca9b38aa1528fed20f0cbbd992bd6387a9753b52c8dac5403bb0b91187d348&X-Amz-SignedHeaders=host&x-id=GetObject" >Termos de Uso</a>
|
|
<a href="https://bassp-api.s3.sa-east-1.amazonaws.com/termsOfUse/BASS%20PAGO/termos-de-uso-v1.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6JB4JB7A3PPZX7XN%2F20260218%2Fsa-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260218T180250Z&X-Amz-Expires=900&X-Amz-Signature=fedf77953c90ae5490212847d0cf92d23e10480e549d9e8a72327902d7709d95&X-Amz-SignedHeaders=host&x-id=GetObject" >Política de Privacidade</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div
|
|
class="footer-col right"
|
|
data-animate
|
|
id="footer-col-3"
|
|
>
|
|
{#if mounted && visibleElements['footer-col-3']}
|
|
<p
|
|
class="social-label"
|
|
in:fly={{ y: 30, duration: 500, delay: 150 }}
|
|
>
|
|
Siga-nos
|
|
</p>
|
|
<div
|
|
class="footer-socials"
|
|
in:fly={{ y: 30, duration: 500, delay: 200 }}
|
|
>
|
|
<a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
|
|
<img src={facebook} alt="Facebook" />
|
|
</a>
|
|
<a href="https://www.instagram.com/basspago/">
|
|
<img src={instagram} alt="Instagram" />
|
|
</a>
|
|
<a href="https://www.tiktok.com/@basspago">
|
|
<img src={tiktok} alt="Tiktok" />
|
|
</a>
|
|
<a href="https://www.linkedin.com/company/bass-pago/">
|
|
<img src={linkedin} alt="Linkedin" />
|
|
</a>
|
|
<a href="https://www.youtube.com/@basspago">
|
|
<img src={youtube} alt="Youtube" />
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="footer-cert"
|
|
in:fly={{ y: 30, duration: 500, delay: 250 }}
|
|
>
|
|
<img src={pciDss} alt="PCI-DSS" />
|
|
<p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-cnpj">
|
|
<p>
|
|
© 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
|
|
pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, inscrita sob o cnpj n*
|
|
37.293.930/0001-90.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<footer class="footer mobile">
|
|
<div class="footer-wrapper">
|
|
<div
|
|
class="footer-col left"
|
|
data-animate
|
|
id="footer-mobile-col"
|
|
>
|
|
{#if mounted && visibleElements['footer-mobile-col']}
|
|
<img
|
|
src={bassLogo}
|
|
alt="Bass Pago"
|
|
class="footer-logo"
|
|
in:fly={{ y: 30, duration: 500 }}
|
|
/>
|
|
<p
|
|
class="footer-desc"
|
|
in:fly={{ y: 30, duration: 500, delay: 50 }}
|
|
>
|
|
A Infraestrutura financeira<br /> que impulsiona o seu negócio.
|
|
</p>
|
|
<div
|
|
class="app-buttons"
|
|
in:fly={{ y: 30, duration: 500, delay: 200 }}
|
|
>
|
|
<a href="https://apps.apple.com/br/app/bass-pago/id6758310271">
|
|
<img src={appleStore} alt="App Store" />
|
|
</a>
|
|
<a href="https://play.google.com/store/apps/details?id=finance.onz.bass.pago">
|
|
<img src={googlePlay} alt="Google Play" />
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="social"
|
|
in:fly={{ y: 30, duration: 500, delay: 150 }}
|
|
>
|
|
<p class="social-label">Siga-nos</p>
|
|
<div class="footer-socials">
|
|
<a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
|
|
<img src={facebook} alt="Facebook" />
|
|
</a>
|
|
<a href="https://www.instagram.com/basspago/">
|
|
<img src={instagram} alt="Instagram" />
|
|
</a>
|
|
<a href="https://www.tiktok.com/@basspago">
|
|
<img src={tiktok} alt="Tiktok" />
|
|
</a>
|
|
<a href="https://www.linkedin.com/company/bass-pago/">
|
|
<img src={linkedin} alt="Linkedin" />
|
|
</a>
|
|
<a href="https://www.youtube.com/@basspago">
|
|
<img src={youtube} alt="Youtube" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="footer-col center"
|
|
in:fly={{ y: 30, duration: 500, delay: 200 }}
|
|
>
|
|
<div class="footer-menus">
|
|
<div class="menu">
|
|
<h4>Explore</h4>
|
|
<a href="/">Home</a>
|
|
<a href="/conta-digital">Conta Digital</a>
|
|
<a href="/solucoes-banking">Soluções Banking</a>
|
|
<a href="/pix">Pix</a>
|
|
<a href="/adquirencia">Adquiriência</a>
|
|
<a href="/emissao-de-cartoes">Emissão de Cartões</a>
|
|
</div>
|
|
<div class="menu">
|
|
<h4>Bass</h4>
|
|
<a href="/sobre">Sobre</a>
|
|
<a href="/politicas-e-termos">Política e Termos</a>
|
|
<a href="/precos">Preços</a>
|
|
<a href="/desenvolvedores">Desenvolva com Bass</a>
|
|
</div>
|
|
<div class="menu">
|
|
<h4>Atendimento</h4>
|
|
<a href="/suporte">Centro de Suporte</a>
|
|
<br />
|
|
<h4>Ouvidoria</h4>
|
|
<a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
|
|
<br />
|
|
<h4>Políticas</h4>
|
|
<a href="https://bassp-api.s3.sa-east-1.amazonaws.com/openingContract/BASS%20PAGO/contrato-de-abertura-v1.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6JB4JB7A3PPZX7XN%2F20260218%2Fsa-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260218T180250Z&X-Amz-Expires=900&X-Amz-Signature=97ca9b38aa1528fed20f0cbbd992bd6387a9753b52c8dac5403bb0b91187d348&X-Amz-SignedHeaders=host&x-id=GetObject" >Termos de Uso</a>
|
|
<a href="https://bassp-api.s3.sa-east-1.amazonaws.com/termsOfUse/BASS%20PAGO/termos-de-uso-v1.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6JB4JB7A3PPZX7XN%2F20260218%2Fsa-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260218T180250Z&X-Amz-Expires=900&X-Amz-Signature=fedf77953c90ae5490212847d0cf92d23e10480e549d9e8a72327902d7709d95&X-Amz-SignedHeaders=host&x-id=GetObject" >Política de Privacidade</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-cert">
|
|
<img src={pciDss} alt="PCI-DSS" />
|
|
<p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-cnpj">
|
|
<p>
|
|
© 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
|
|
pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, sob o cnpj n:
|
|
37.293.930/0001-90.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- CSS permanece o mesmo -->
|
|
<style>
|
|
.cta-section {
|
|
background-color: #000;
|
|
padding: 60px 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-box {
|
|
background: linear-gradient(135deg, #207ce5, #2ee7a6);
|
|
border-radius: 40px;
|
|
text-align: center;
|
|
padding: 60px 40px;
|
|
color: white;
|
|
max-width: 717px;
|
|
width: 100%;
|
|
fill: linear-gradient(234deg, #41FE95 -9.25%, #00F 138.52%);
|
|
}
|
|
|
|
.cta-box h2 {
|
|
font-weight: 500;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cta-box p {
|
|
color: #e6e6e6;
|
|
margin-bottom: 30px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
color: white;
|
|
padding: 60px 40px;
|
|
}
|
|
|
|
.footer-wrapper {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 200px;
|
|
gap: 60px;
|
|
}
|
|
|
|
.footer-col.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.footer-logo {
|
|
width: 120px;
|
|
}
|
|
|
|
.footer-desc {
|
|
color: #ffffff75;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.app-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.app-buttons img {
|
|
height: 36px;
|
|
}
|
|
|
|
.footer-cnpj {
|
|
color: #888;
|
|
margin: 20px auto;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.10);
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.footer-cnpj p {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: #888;
|
|
margin: 0 auto;
|
|
max-width: 710px;
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile .footer-cnpj p {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Coluna 2 - centro */
|
|
.footer-col.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer-menus {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.menu h4 {
|
|
font-size: 14px;
|
|
color: #41FE95;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.menu a {
|
|
display: block;
|
|
color: rgb(255 255 255 / 50%);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.menu a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-cert {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 32px;
|
|
margin-top: 30px;
|
|
justify-content: center;
|
|
color: #888;
|
|
font-size: 13px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer-cert p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer-cert img {
|
|
height: 36px;
|
|
}
|
|
|
|
.footer-col.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.footer-col.right h4 {
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.social-label {
|
|
font-size: 14px;
|
|
color: #41FE95;
|
|
margin-top: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-socials {
|
|
display: flex;
|
|
gap: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
.footer-socials img {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-socials img:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
|
|
/* Link CTA */
|
|
.link-cta {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
color: #111;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
transition: color 0.3s ease, background-color 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.link-cta::before {
|
|
content: "";
|
|
position: absolute;
|
|
right: -131px;
|
|
top: -64px;
|
|
width: 433px;
|
|
height: 166px;
|
|
border-radius: 150px;
|
|
background: linear-gradient(261deg, #41FE95 6.53%, #00F 123.97%);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.9s ease;
|
|
z-index: 0;
|
|
}
|
|
|
|
.link-cta:hover::before {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.link-cta:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.link-cta span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Responsividade Mobile */
|
|
@media (max-width: 768px) {
|
|
.footer-wrapper {
|
|
grid-template-columns: 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.footer-menus {
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.footer {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.mobile {
|
|
display: block;
|
|
}
|
|
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
|
|
.footer-socials {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.footer-cert {
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.cta-box {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.cta-box h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.footer-col.left {
|
|
gap: 30px;
|
|
}
|
|
|
|
.app-buttons {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.footer-socials {
|
|
gap: 15px;
|
|
}
|
|
|
|
.footer-socials img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
</style> |