809 lines
18 KiB
Svelte
809 lines
18 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
|
|
import quemSomos from '$lib/assets/quem-somos.png';
|
|
import elementosDigitais from '$lib/assets/elementos-digitais.png';
|
|
import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png';
|
|
import mockupIphoneFundoVerde from '$lib/assets/mockup-iphone-fundo-verde2.png';
|
|
import biggestLogoBasspago from '$lib/assets/biggest-logo-basspago.svg';
|
|
import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
|
|
|
|
const securityFeatures = [
|
|
{
|
|
title: 'Regulatório',
|
|
description: 'Somos uma instituição de pagamento, autorizada pelo Banco Central como participante indireta do Pix, sob o ISPB 37293930'
|
|
},
|
|
{
|
|
title: 'Segurança',
|
|
description: 'Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.'
|
|
},
|
|
{
|
|
title: 'Prevenção',
|
|
description: 'Tecnologia avançada de análise e prevenção a fraudes, farantindo segurança e conformidade.'
|
|
}
|
|
];
|
|
|
|
const valores = [
|
|
{ text: 'Inovação', light: false },
|
|
{ text: 'Integridade', light: true },
|
|
{ text: 'Colaboração', light: true }
|
|
];
|
|
|
|
const impactPillars = [
|
|
'Financeiro',
|
|
'Social',
|
|
'Ambiental',
|
|
'Governança'
|
|
];
|
|
|
|
onMount(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('.fade-up');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Sobre - BassPago</title>
|
|
<meta name="description" content="Olá, somos Bass Pago. Nossa expertise está focada em transformar a maneira como empresas criam, escalam e operam soluções financeiras." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<!-- About Hero Section -->
|
|
<section class="about-hero-v2">
|
|
<div class="about-hero-v2__container">
|
|
<div class="about-hero-v2__text fade-up">
|
|
<h1>Olá, somos Bass Pago</h1>
|
|
<div class="mobile">
|
|
<div class="about-hero-v2__visual fade-up">
|
|
<img src={quemSomos} alt="Quem somos" class="about-hero-v2__image" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
<p class="lead">
|
|
Nossa expertise está focada em transformar a maneira como empresas
|
|
criam, escalam e operam soluções financeiras.
|
|
</p>
|
|
</div>
|
|
<div class="desktop">
|
|
<div class="about-hero-v2__visual fade-up">
|
|
<img src={quemSomos} alt="Quem somos" class="about-hero-v2__image" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Mission Section -->
|
|
<section class="about-mission">
|
|
<div class="about-mission__container">
|
|
<div class="about-mission__info">
|
|
<h2 class="fade-up">
|
|
Somos uma empresa de tecnologia especializada em infraestrutura financeira.
|
|
</h2>
|
|
<div class="about-mission__visual fade-up lg:hidden">
|
|
<img src={iphonePixMockup} style="width: 100%;" alt="Interface financeira Bass Pago" />
|
|
</div>
|
|
<p class="fade-up">
|
|
Oferecemos soluções completas via API, com segurança, escalabilidade e autonomia para que empresas
|
|
desenvolvam experiências financeiras personalizadas em toda a jornada do cliente.
|
|
</p>
|
|
</div>
|
|
<div class="about-mission__visual fade-up lg:flex xs:hidden">
|
|
<img src={iphonePixMockup} alt="Interface financeira Bass Pago" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features App Section -->
|
|
<section class="features-app">
|
|
<div class="text-center text-black fade-up">
|
|
<h2>Na conta digital Bass Pago, seu dinheiro está seguro.</h2>
|
|
</div>
|
|
<div class="features-app__container">
|
|
<div class="features-app__visual fade-up lg:hidden">
|
|
<img src={mockupIphoneFundoVerde} alt="Mockup app Bass Pago" />
|
|
</div>
|
|
<div class="features-app__cards">
|
|
{#each securityFeatures as feature}
|
|
<div class="features-card fade-up">
|
|
<h3>{feature.title}</h3>
|
|
<p>{feature.description}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="features-app__visual fade-up lg:flex xs:hidden">
|
|
<img src={mockupIphoneFundoVerde} alt="Mockup app Bass Pago" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Valores Section -->
|
|
<section id="valores">
|
|
<div class="valores-section fade-up">
|
|
<div class="valores-content">
|
|
<div class="valores-text">
|
|
{#each valores as valor}
|
|
<h1 class="{valor.light ? 'light' : ''} fade-up">{valor.text}</h1>
|
|
{/each}
|
|
<p class="lead fade-up">
|
|
Agimos com integridade e ética, sempre guiados por valores sólidos. Buscamos constantemente nosso
|
|
máximo potencial, entregando as melhores versões de nós mesmos em tudo o que fazemos.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Integration Section -->
|
|
<section id="integration-easly">
|
|
<div class="integration-wrapper">
|
|
<div class="integration-text">
|
|
<h2 class="fade-up">Geramos impacto positivo em todas as frentes!</h2>
|
|
<p class="fade-up">
|
|
Comprometemo-nos a criar valor não apenas para nossos clientes, mas também para nossos
|
|
colaboradores, investidores e a sociedade em geral. Nossa abordagem está sempre alinhada com os pilares:
|
|
</p>
|
|
<div class="integration-benefits">
|
|
{#each impactPillars as pillar}
|
|
<span class="fade-up">{pillar}</span>
|
|
{/each}
|
|
</div>
|
|
<div class="integration-buttons fade-up">
|
|
<a href="/precos#form-negociacao-basspago" class="link-cta white">
|
|
<span>Abra sua conta →</span>
|
|
</a>
|
|
<a href="/suporte" class="link-cta">
|
|
<span>Suporte</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="integration-graphic desktop fade-up">
|
|
<img src={iconSlimBasspago} alt="Bass Pago Icon" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
ABOUT PAGE STYLES
|
|
========================= */
|
|
|
|
/* About Hero Section */
|
|
.about-hero-v2 {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 120px 20px 60px;
|
|
}
|
|
|
|
.about-hero-v2__container {
|
|
padding: 64px 48px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 64px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.about-hero-v2__text .lead {
|
|
color: #444;
|
|
}
|
|
|
|
.about-hero-v2__text {
|
|
flex: 1 1 1;
|
|
max-width: 420px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.about-hero-v2__text h1 {
|
|
color: #000;
|
|
letter-spacing: -0.5px;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.about-hero-v2__text .lead {
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.about-hero-v2__visual {
|
|
flex: 1 1 350px;
|
|
min-width: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.about-hero-v2__image {
|
|
width: 100%;
|
|
max-width: 534px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
|
|
/* About Mission Section */
|
|
.about-mission {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40px 20px 60px;
|
|
}
|
|
|
|
.about-mission__container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
min-height: 260px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: end;
|
|
gap: clamp(24px, 8vw, 64px);
|
|
padding: clamp(20px, 8vw, 60px) clamp(12px, 6vw, 44px);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-mission__info {
|
|
flex: 1;
|
|
min-width: 240px;
|
|
max-width: 570px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 22px;
|
|
}
|
|
|
|
.about-mission__info h2 {
|
|
color: #111;
|
|
margin: 0 0 10px 0;
|
|
font-weight: 400;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.about-mission__info p {
|
|
color: #444;
|
|
margin: 0;
|
|
max-width: 98%;
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.about-mission__visual {
|
|
position: sticky;
|
|
top: 56px;
|
|
flex: 1;
|
|
min-width: 220px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-mission__visual img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Features App Section */
|
|
.features-app {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0 20px 60px;
|
|
}
|
|
|
|
.features-app h2 {
|
|
width: 540px;
|
|
margin: 0 auto 40px;
|
|
font-weight: 400;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.features-app__container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
min-height: 280px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: end;
|
|
gap: clamp(32px, 10vw, 120px);
|
|
padding: clamp(18px, 7vw, 48px) clamp(10px, 6vw, 32px);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.features-app__cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
flex: 1.2;
|
|
}
|
|
|
|
.features-card {
|
|
background: #f8f9ff;
|
|
border-radius: 18px;
|
|
box-shadow: none;
|
|
padding: 22px 24px 20px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
|
|
.features-card h3 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #222;
|
|
margin: 0 0 2px 0;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.features-card p {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 16px;
|
|
color: #444;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* App visual */
|
|
.features-app__visual {
|
|
position: sticky;
|
|
top: 56px;
|
|
flex: 1.1;
|
|
min-width: 210px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 420px;
|
|
}
|
|
|
|
.features-app__visual img {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Valores Section */
|
|
#valores {
|
|
padding: 20px 0 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #000;
|
|
}
|
|
|
|
.valores-section {
|
|
width: 1170px;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: url({biggestLogoBasspago}) right center no-repeat, linear-gradient(244deg, #41FE95 -49.78%, #00F 137.84%);
|
|
border-radius: 45px;
|
|
overflow: hidden;
|
|
padding: 76px 80px;
|
|
margin: 70px 20px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.valores-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 1170px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.valores-text {
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: white;
|
|
max-width: 750px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.valores-text h1 {
|
|
font-weight: 500;
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.valores-text h1.light {
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.59);
|
|
}
|
|
|
|
.valores-text p {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
margin-top: 30px;
|
|
line-height: 1.3;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Integration Section */
|
|
#integration-easly {
|
|
width: 100%;
|
|
padding: 120px 90px;
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-wrapper {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 60px;
|
|
}
|
|
|
|
.integration-text {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 53px;
|
|
}
|
|
|
|
.integration-text h2 {
|
|
line-height: 1.2;
|
|
max-width: 600px;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
}
|
|
|
|
.integration-text p {
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
max-width: 597px;
|
|
margin-bottom: 40px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.integration-benefits {
|
|
display: flex;
|
|
gap: 10px 30px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.integration-benefits span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.integration-benefits span::before {
|
|
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2341FE95" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"></polyline></svg>');
|
|
}
|
|
|
|
.integration-buttons {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.integration-buttons .link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.integration-buttons .link-cta.white {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.integration-buttons .link-cta.white:hover {
|
|
background: #41FE95;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
|
|
}
|
|
|
|
.integration-buttons .link-cta:not(.white) {
|
|
background: transparent;
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.integration-buttons .link-cta:not(.white):hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.integration-graphic {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.integration-graphic img {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-black {
|
|
color: #000;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.xs\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:flex {
|
|
display: flex;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Fade animations */
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (min-width: 1024px) {
|
|
.xs\:hidden {
|
|
display: block;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Tablet */
|
|
@media (max-width: 1024px) {
|
|
.about-hero-v2__container {
|
|
padding: 36px 12px;
|
|
gap: 28px;
|
|
border-radius: 32px;
|
|
}
|
|
|
|
.about-hero-v2__image {
|
|
max-width: 340px;
|
|
}
|
|
|
|
.integration-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-text {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.integration-graphic {
|
|
width: 100%;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* Responsivo: imagem acima do texto */
|
|
@media (max-width: 860px) {
|
|
.about-mission__container {
|
|
flex-direction: column;
|
|
gap: 34px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.about-mission__visual img {
|
|
max-width: 94vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.about-mission__info {
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.features-app__container {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
padding: 20px 2vw;
|
|
}
|
|
|
|
.features-app__visual {
|
|
position: relative;
|
|
top: auto;
|
|
min-height: 340px;
|
|
width: 100%;
|
|
}
|
|
|
|
.features-app__visual img {
|
|
max-width: 96vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-app__cards {
|
|
max-width: 100vw;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.valores-section {
|
|
padding: 40px 20px;
|
|
background: linear-gradient(244deg, #41FE95 -49.78%, #00F 137.84%);
|
|
width: 100%;
|
|
}
|
|
|
|
.features-app h2 {
|
|
width: 90%;
|
|
}
|
|
|
|
.valores-content {
|
|
width: none;
|
|
}
|
|
|
|
.valores-text {
|
|
padding: 20px;
|
|
}
|
|
|
|
#integration-easly {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.integration-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-graphic {
|
|
order: -1;
|
|
width: 70%;
|
|
max-width: 70%;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.integration-text {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
gap: 30px;
|
|
}
|
|
|
|
.integration-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-buttons .link-cta {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 700px) {
|
|
.about-hero-v2__container {
|
|
flex-direction: column-reverse;
|
|
align-items: flex-start;
|
|
gap: 22px;
|
|
border-radius: 22px;
|
|
padding: 18px 0;
|
|
width: 100%;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.about-hero-v2__visual {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.about-hero-v2__image {
|
|
max-width: 95vw;
|
|
border-radius: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.about-hero-v2__text {
|
|
max-width: 100%;
|
|
gap: 18px;
|
|
}
|
|
|
|
.mobile {
|
|
display: block;
|
|
}
|
|
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
|
|
.xs\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:flex {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.features-app__cards {
|
|
gap: 15px;
|
|
}
|
|
|
|
.features-card {
|
|
padding: 14px 10px 14px 20px;
|
|
font-size: 0.98rem;
|
|
}
|
|
}
|
|
</style> |