1584 lines
44 KiB
Svelte
1584 lines
44 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { ArrowRight } from 'lucide-svelte';
|
|
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
|
|
import bankShape from '$lib/assets/bank-shape.png';
|
|
import basspagoShape from '$lib/assets/basspago-shape.png';
|
|
import cardShape from '$lib/assets/card-shape.png';
|
|
import pixShape from '$lib/assets/pix-shape.png';
|
|
import qrcodeShape from '$lib/assets/qrcode-shape.png';
|
|
import iphoneMockup from '$lib/assets/iphone-mockup.png';
|
|
import onboardingImg from '$lib/assets/onboarding.png';
|
|
import ecossistemaImg from '$lib/assets/ecossistema-basspago.png';
|
|
import miniPhone from '$lib/assets/mini-phone.png';
|
|
import graphics from '$lib/assets/graphics.png';
|
|
import semLicenca from '$lib/assets/sem-licença.svg';
|
|
import infraestrutura from '$lib/assets/infraestrutura.svg';
|
|
import prevencao from '$lib/assets/prevencao.svg';
|
|
|
|
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>Banking Digital - BassPago</title>
|
|
<meta name="description" content="Transforme sua empresa em um banco digital com autonomia para criar e gerenciar sua própria operação financeira." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section fade-in">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="content fade-up">
|
|
<h1>Transforme sua empresa em um banco digital</h1>
|
|
|
|
<div class="banking-hero__visual banking-hero__visual-mobile fade-up">
|
|
<div class="shape shape6">
|
|
<img src={bankShape} alt="Bank Shape" />
|
|
</div>
|
|
<div class="shape-container">
|
|
<div class="shape shape1">
|
|
<img src={basspagoShape} alt="BassPago Shape" />
|
|
</div>
|
|
<div class="shape shape7">
|
|
<img src={cardShape} alt="Card Shape" />
|
|
</div>
|
|
</div>
|
|
<div class="shape shape8">
|
|
<img src={pixShape} alt="PIX Shape" />
|
|
</div>
|
|
<div class="shape shape5">
|
|
<img src={qrcodeShape} alt="QR Code Shape" />
|
|
</div>
|
|
</div>
|
|
|
|
<p class="lead">
|
|
Autonomia para sua empresa criar e gerenciar sua própria operação financeira.
|
|
</p>
|
|
|
|
<a
|
|
href="/precos#form-negociacao-basspago" class="link-cta"
|
|
>
|
|
<span>Abrir conta →</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="banking-hero__visual fade-up">
|
|
<div class="shape shape6">
|
|
<img src={bankShape} alt="Bank Shape" />
|
|
</div>
|
|
<div class="shape shape1">
|
|
<img src={basspagoShape} alt="BassPago Shape" />
|
|
</div>
|
|
<div class="shape shape7">
|
|
<img src={cardShape} alt="Card Shape" />
|
|
</div>
|
|
<div class="shape shape8">
|
|
<img src={pixShape} alt="PIX Shape" />
|
|
</div>
|
|
<div class="shape shape5">
|
|
<img src={qrcodeShape} alt="QR Code Shape" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Challenges Section -->
|
|
<section class="challenges-section">
|
|
<div class="challenges-container">
|
|
<div class="section-header">
|
|
<h2 class="text-black text-center fade-up">
|
|
Principais desafios das empresas ao desenvolver soluções bancárias.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="challenges-cards">
|
|
<div class="challenge-card fade-up">
|
|
<div class="challenge-card__icon">
|
|
<img src={semLicenca} alt="Sem licença" />
|
|
</div>
|
|
<div class="challenge-card__text">
|
|
<div class="challenge-card__title">Necessidade de licenças</div>
|
|
<div class="challenge-card__desc">
|
|
Tenha acesso rápido a operações financeiras regulamentadas, eliminando os entraves tradicionais para
|
|
obtenção de licença bancária.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="challenge-card fade-up">
|
|
<div class="challenge-card__icon">
|
|
<img src={infraestrutura} alt="Infraestrutura" />
|
|
</div>
|
|
<div class="challenge-card__text">
|
|
<div class="challenge-card__title">Infraestrutura ilimitada</div>
|
|
<div class="challenge-card__desc">
|
|
Nossa plataforma escalável em nuvem cresce junto com seu negócio, garantindo alta performance e
|
|
disponibilidade sem quedas ou lentidão.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="challenge-card fade-up">
|
|
<div class="challenge-card__icon">
|
|
<img src={prevencao} alt="Prevenção" />
|
|
</div>
|
|
<div class="challenge-card__text">
|
|
<div class="challenge-card__title">Prevenção a fraudes</div>
|
|
<div class="challenge-card__desc">
|
|
Proteja seu modelo de banking com tecnologias avançadas de análise e prevenção de fraudes, garantindo
|
|
segurança em todas as transações.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Eco Section -->
|
|
<section class="eco-section">
|
|
<div class="eco-container">
|
|
<div class="eco-left">
|
|
<h2 class="eco-title fade-up">
|
|
Tenha seu próprio <br>
|
|
ecossistema financeiro
|
|
</h2>
|
|
|
|
<div class="eco-visual fade-up lg:hidden">
|
|
<div class="eco-visual-bg"></div>
|
|
<img src={iphoneMockup} alt="App Bass Pago" />
|
|
</div>
|
|
|
|
<div class="eco-cards">
|
|
<div class="eco-card fade-up">
|
|
<span class="eco-card__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
|
|
<g clip-path="url(#clip0_1027_1809)">
|
|
<path d="M16.4926 23.6308C21.4629 23.6308 25.4921 19.6016 25.4921 14.6313C25.4921 9.66103 21.4629 5.63184 16.4926 5.63184C11.5224 5.63184 7.49316 9.66103 7.49316 14.6313C7.49316 19.6016 11.5224 23.6308 16.4926 23.6308Z" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M14.5547 16.5656V17.0702C14.5547 18.0795 15.3958 19.0047 16.4892 19.0047C17.4984 19.0047 18.4236 18.1636 18.4236 17.0702V16.5656C18.4236 15.5563 17.5825 14.6311 16.4892 14.6311C15.4799 14.6311 14.5547 13.7901 14.5547 12.6967V12.192C14.5547 11.1827 15.3958 10.2576 16.4892 10.2576C17.4984 10.2576 18.4236 11.0986 18.4236 12.192V12.6967" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.4893 10.2577V8.91199" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.4893 20.3506V19.0049" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M30.0625 7.22986V18.332" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M32.9224 10.7624L30.0628 7.22986L27.2031 10.7624" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M3.11719 17.3226V28.4248" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M5.9771 20.8551L3.11745 17.3226L0.257812 20.8551" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1027_1809">
|
|
<rect width="33" height="33" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<div class="eco-card__title">Gere novas receitas</div>
|
|
<div class="eco-card__desc">
|
|
Gere receita recorrente com serviços financeiros integrados à sua operação.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eco-card fade-up">
|
|
<span class="eco-card__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
|
|
<g clip-path="url(#clip0_1027_1820)">
|
|
<path d="M16.5074 9.36924C11.5371 9.36924 7.50791 13.3984 7.50791 18.3687C7.50791 23.339 11.5371 27.3682 16.5074 27.3682C21.4776 27.3682 25.5068 23.339 25.5068 18.3687C25.5068 13.3984 21.4776 9.36924 16.5074 9.36924Z" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M18.4453 16.4344L18.4453 15.9298C18.4453 14.9205 17.6042 13.9953 16.5108 13.9953C15.5016 13.9953 14.5764 14.8364 14.5764 15.9298L14.5764 16.4344C14.5764 17.4437 15.4175 18.3689 16.5108 18.3689C17.5201 18.3689 18.4453 19.2099 18.4453 20.3033L18.4453 20.808C18.4453 21.8173 17.6042 22.7424 16.5108 22.7424C15.5016 22.7424 14.5764 21.9014 14.5764 20.808L14.5764 20.3033" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.5107 22.7423L16.5107 24.088" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.5107 12.6494L16.5107 13.9951" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M2.9375 25.7701L2.9375 14.668" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M0.0775878 22.2376L2.93723 25.7701L5.79688 22.2376" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M29.8828 15.6774L29.8828 4.57523" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M27.0229 12.1449L29.8825 15.6774L32.7422 12.1449" stroke="#0000FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1027_1820">
|
|
<rect width="33" height="33" fill="white" transform="translate(33 33) rotate(-180)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<div class="eco-card__title">Reduza custos</div>
|
|
<div class="eco-card__desc">
|
|
Elimine custos associados a serviços financeiros externos.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eco-card fade-up">
|
|
<span class="eco-card__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 21V17C3 16.2089 3.2346 15.4355 3.67412 14.7777C4.11365 14.1199 4.73836 13.6072 5.46927 13.3045C6.20017 13.0017 7.00444 12.9225 7.78036 13.0769C8.55629 13.2312 9.26902 13.6122 9.82843 14.1716C10.3878 14.731 10.7688 15.4437 10.9231 16.2196C11.0775 16.9956 10.9983 17.7998 10.6955 18.5307C10.3928 19.2616 9.88008 19.8864 9.22228 20.3259C8.56448 20.7654 7.79113 21 7 21H3Z" stroke="#0000FF" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M8.2002 13.2C9.21789 10.505 10.9443 8.13474 13.1973 6.33944C15.4502 4.54414 18.146 3.3904 21.0002 3C20.6098 5.85418 19.4561 8.55002 17.6608 10.8029C15.8655 13.0559 13.4952 14.7823 10.8002 15.8" stroke="#0000FF" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M10.5996 9C12.5428 9.89687 14.1027 11.4568 14.9996 13.4" stroke="#0000FF" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<div class="eco-card__title">Personalize do seu jeito</div>
|
|
<div class="eco-card__desc">
|
|
Customize a sua solução financeira com autonomia e flexibilidade para crescer.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eco-visual fade-up xs:hidden lg:flex">
|
|
<div class="eco-visual-bg"></div>
|
|
<img src={iphoneMockup} alt="App Bass Pago" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Onboarding Section -->
|
|
<section class="onboarding-section">
|
|
<div class="onboarding-container">
|
|
<div class="onboarding-visual fade-up xs:hidden lg:flex">
|
|
<div class="onboarding-visual-bg"></div>
|
|
<img src={onboardingImg} alt="Onboarding Ilustração" />
|
|
</div>
|
|
|
|
<div class="onboarding-content">
|
|
<h2 class="onboarding-title fade-up">
|
|
Imagine um mundo com<br>menos burocracia.
|
|
</h2>
|
|
|
|
<div class="onboarding-visual fade-up lg:hidden">
|
|
<div class="onboarding-visual-bg"></div>
|
|
<img src={onboardingImg} alt="Onboarding Ilustração" />
|
|
</div>
|
|
|
|
<p class="onboarding-desc fade-up">
|
|
Com IA e automação, o onboarding digital ficou rápido, seguro e escalável.
|
|
</p>
|
|
|
|
<div class="onboarding-cards">
|
|
<div class="onboarding-card fade-up">
|
|
<span class="onboarding-card__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
|
|
<path d="M21.7256 13.5V21.5H2.72559V13.5H21.7256ZM5.72363 19.0039H8.72754V16H5.72363V19.0039ZM21.7256 2.5V10.5H2.72559V2.5H21.7256ZM5.72363 8.00391H8.72754V5H5.72363V8.00391Z" stroke="#0000FF" />
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<div class="onboarding-card__title">Captura de dados</div>
|
|
<div class="onboarding-card__desc">
|
|
Coletar dados é o começo, o diferencial está em lidar com exceções de forma fluida. Conte com nossa
|
|
expertise para um onboarding.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="onboarding-card fade-up">
|
|
<span class="onboarding-card__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M2.5 8.187C2.604 6.087 2.915 4.777 3.847 3.847C4.777 2.915 6.087 2.604 8.187 2.5M21.5 8.187C21.396 6.087 21.085 4.777 20.153 3.847C19.223 2.915 17.913 2.604 15.813 2.5M15.813 21.5C17.913 21.396 19.223 21.085 20.153 20.153C21.085 19.223 21.396 17.913 21.5 15.813M8.187 21.5C6.087 21.396 4.777 21.085 3.847 20.153C2.915 19.223 2.604 17.913 2.5 15.813M17.5 17L17.298 16.151C17.2159 15.8065 17.0437 15.49 16.7991 15.2338C16.5545 14.9776 16.2463 14.791 15.906 14.693L13.5 13.999V12.532C14.396 11.927 15 10.796 15 9.5C15 7.567 13.656 6 12 6C10.343 6 9 7.567 9 9.5C9 10.796 9.603 11.927 10.5 12.532V13.999L8.109 14.699C7.77885 14.7957 7.47922 14.9758 7.23905 15.2221C6.99889 15.4684 6.82631 15.7725 6.738 16.105L6.5 17" stroke="#0000FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<div class="onboarding-card__title">Aprovações seguras</div>
|
|
<div class="onboarding-card__desc">
|
|
Aprovações rápidas, seguras e inteligentes para impulsionar sua operação sem comprometer a experiência do
|
|
cliente.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bank Arrange Section -->
|
|
<section class="bank-arrange-section">
|
|
<div class="bank-arrange__container">
|
|
<!-- COLUNA 1: TEXTO -->
|
|
<div class="bank-arrange__text xs:hidden lg:flex">
|
|
<h2 class="fade-up">Soluções de banking completas para o seu negócio.</h2>
|
|
<p class="fade-up">Um arranjo de pagamentos que trás poder de banco para sua empresa.</p>
|
|
</div>
|
|
|
|
<div class="lg:hidden">
|
|
<div class="bank-arrange__text">
|
|
<h2 class="fade-up">Soluções de banking completas para o seu negócio.</h2>
|
|
</div>
|
|
<div class="dashboard fade-up lg:hidden" style="padding: 18px 0 30px 0;">
|
|
<img src={ecossistemaImg} alt="Ecossistema BassPago" />
|
|
</div>
|
|
<div class="bank-arrange__text">
|
|
<p class="fade-up">Um arranjo de pagamentos que trás poder de banco para sua empresa.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COLUNA 2: DASHBOARD -->
|
|
<div class="dashboard fade-up xs:hidden lg:flex">
|
|
<img src={ecossistemaImg} alt="Ecossistema BassPago" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block-group">
|
|
<div class="block block-app-banking fade-up">
|
|
<div class="block-inner">
|
|
<div class="block-title">
|
|
<div class="block-title-text">
|
|
<h3>App ou <br>Internet Banking</h3>
|
|
</div>
|
|
</div>
|
|
<div class="block-desc">
|
|
Crie sua própria experiência e conte com a tecnologia da Bass Pago para escalar.
|
|
</div>
|
|
<div class="image">
|
|
<img src={miniPhone} alt="Mini Phone" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block block-modules fade-up">
|
|
<div class="block-inner">
|
|
<div class="block-title">
|
|
<div class="block-title-text">
|
|
<h3>Soluções modulares para você escalar.</h3>
|
|
</div>
|
|
</div>
|
|
<div class="block-desc">
|
|
Com soluções modulares, você integra apenas o que faz sentido para o seu negócio e evolui ao seu ritmo.
|
|
</div>
|
|
<div class="image" style="top: 60px; right: 10px">
|
|
<img src={graphics} alt="Graphics" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
BANKING PAGE STYLES
|
|
========================= */
|
|
|
|
/* Hero Section */
|
|
.hero-section {
|
|
position: relative;
|
|
height: 100dvh;
|
|
padding: 120px 20px 60px;
|
|
overflow: hidden;
|
|
background: black;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-section .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 100px;
|
|
}
|
|
|
|
.hero-section .container > .row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 40px;
|
|
}
|
|
|
|
.hero-section .content {
|
|
flex: 1;
|
|
}
|
|
|
|
.hero-section .content h1 {
|
|
color: white;
|
|
margin-bottom: 20px;
|
|
width: 80%;
|
|
font-weight: 400;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.hero-section .content p {
|
|
font-size: 1.25rem;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
margin-bottom: 30px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: white;
|
|
color: black;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
border: none;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.link-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Visual area with shapes */
|
|
.banking-hero__visual {
|
|
position: relative;
|
|
width: 535px;
|
|
height: 394px;
|
|
flex-shrink: 0;
|
|
min-width: 280px;
|
|
max-width: 100vw;
|
|
overflow: visible;
|
|
display: block;
|
|
}
|
|
|
|
.shape {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.shape1 {
|
|
position: absolute;
|
|
width: 190px;
|
|
height: 190px;
|
|
left: 98px;
|
|
top: 127px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
box-shadow: 0 0 97px -54px rgba(255, 255, 255, 0.25) inset;
|
|
border-radius: 39px;
|
|
-webkit-backdrop-filter: blur(6.18px);
|
|
backdrop-filter: blur(6.18px);
|
|
animation: floatUp 4s ease-in-out infinite;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.shape2 {
|
|
position: absolute;
|
|
width: 54px;
|
|
height: 97px;
|
|
left: 152px;
|
|
top: 158px;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
border-radius: 14px;
|
|
animation: floatDown 3.5s ease-in-out infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.shape3 {
|
|
position: absolute;
|
|
width: 54px;
|
|
height: 75px;
|
|
left: 180px;
|
|
top: 175px;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
border-radius: 13px;
|
|
animation: floatSide 3s ease-in-out infinite;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.shape4 {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 33px;
|
|
left: 142px;
|
|
top: 252px;
|
|
background: linear-gradient(270deg, #41FE95 0%, #0000FF 100%);
|
|
border-radius: 22px;
|
|
animation: pulse 2.5s ease-in-out infinite;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.shape5 {
|
|
position: absolute;
|
|
width: 102px;
|
|
height: 102px;
|
|
left: 388px;
|
|
top: 200px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
box-shadow: 0 0 56px -32px rgba(255, 255, 255, 0.25) inset;
|
|
border-radius: 23px;
|
|
-webkit-backdrop-filter: blur(7.2px);
|
|
backdrop-filter: blur(7.2px);
|
|
animation: floatUp 3.8s ease-in-out infinite;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.shape6 {
|
|
position: absolute;
|
|
width: 102px;
|
|
height: 102px;
|
|
left: 46px;
|
|
top: 57px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
box-shadow: 0 0 56px -32px rgba(255, 255, 255, 0.25) inset;
|
|
border-radius: 23px;
|
|
-webkit-backdrop-filter: blur(7.2px);
|
|
backdrop-filter: blur(7.2px);
|
|
animation: floatDown 4.2s ease-in-out infinite;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.shape7 {
|
|
position: absolute;
|
|
width: 141px;
|
|
height: 141px;
|
|
left: 277px;
|
|
top: 101px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
box-shadow: 0 0 79px -44px rgba(255, 255, 255, 0.25) inset;
|
|
border-radius: 32px;
|
|
-webkit-backdrop-filter: blur(6.18px);
|
|
backdrop-filter: blur(6.18px);
|
|
animation: rotate 20s linear infinite;
|
|
}
|
|
|
|
.shape8 {
|
|
position: absolute;
|
|
width: 102px;
|
|
height: 102px;
|
|
left: 362px;
|
|
top: 29px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
box-shadow: 0 0 56px -32px rgba(255, 255, 255, 0.25) inset;
|
|
border-radius: 23px;
|
|
-webkit-backdrop-filter: blur(7.2px);
|
|
backdrop-filter: blur(7.2px);
|
|
}
|
|
|
|
/* Animações para os shapes */
|
|
@keyframes floatUp {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
@keyframes floatDown {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(8px); }
|
|
}
|
|
|
|
@keyframes floatSide {
|
|
0%, 100% { transform: translateX(0px); }
|
|
50% { transform: translateX(6px); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Challenges Section */
|
|
.challenges-section {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.challenges-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: clamp(18px, 4vw, 60px);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.challenges-container h2 {
|
|
text-align: center;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: #111;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
max-width: 740px;
|
|
}
|
|
|
|
.challenges-cards {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: clamp(16px, 2vw, 34px);
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.challenge-card {
|
|
background: #f6f7ff;
|
|
border-radius: 15px;
|
|
padding: clamp(22px, 4vw, 25px) clamp(16px, 2vw, 25px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: clamp(240px, 23vw, 330px);
|
|
max-width: 370px;
|
|
flex: 1;
|
|
transition: box-shadow .2s;
|
|
}
|
|
|
|
.challenge-card__icon {
|
|
margin-bottom: 0;
|
|
align-self: flex-start;
|
|
width: 42px;
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 255, 0.10);
|
|
border-radius: 100px;
|
|
padding: 27px;
|
|
}
|
|
|
|
.challenge-card__title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 500;
|
|
color: #111;
|
|
margin-bottom: 2px;
|
|
letter-spacing: -0.02em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.challenge-card__text {
|
|
gap: 10px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.challenge-card__desc {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: #222;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Eco Section */
|
|
.eco-section {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.eco-container {
|
|
max-width: 1250px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: clamp(30px, 7vw, 96px);
|
|
align-items: end;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.eco-left {
|
|
flex: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: clamp(28px, 7vw, 48px);
|
|
min-width: 270px;
|
|
max-width: 470px;
|
|
}
|
|
|
|
.eco-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: #111;
|
|
font-weight: 400;
|
|
margin: 0 0 clamp(12px, 2vw, 36px) 0;
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
.eco-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
width: 100%;
|
|
}
|
|
|
|
.eco-card {
|
|
background: #f6f7ff;
|
|
border-radius: 19px;
|
|
padding: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
transition: box-shadow .2s;
|
|
}
|
|
|
|
.eco-card__icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
min-width: 52px;
|
|
border-radius: 50%;
|
|
background: #eceeff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.eco-card__title {
|
|
font-weight: 500;
|
|
color: #111;
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.01em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.eco-card__desc {
|
|
color: #222;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
max-width: 340px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* VISUAL APP MOCKUP */
|
|
.eco-visual {
|
|
flex: 1.7;
|
|
min-width: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
min-height: 419px;
|
|
}
|
|
|
|
.eco-visual-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: clamp(30px, 5vw, 60px);
|
|
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%),
|
|
rgba(0, 0, 255, 0.01);
|
|
z-index: 1;
|
|
}
|
|
|
|
.eco-visual img {
|
|
width: clamp(230px, 38vw, 409px);
|
|
height: auto;
|
|
z-index: 2;
|
|
position: relative;
|
|
display: block;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
|
|
/* Onboarding Section */
|
|
.onboarding-section {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.onboarding-container {
|
|
max-width: 1250px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: clamp(30px, 7vw, 96px);
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.onboarding-visual {
|
|
flex: 1.6;
|
|
min-width: 230px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
min-height: 340px;
|
|
z-index: 2;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.onboarding-visual-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: clamp(30px, 6vw, 80px);
|
|
background: #f6f7ff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.onboarding-visual img {
|
|
width: clamp(230px, 40vw, 410px);
|
|
height: auto;
|
|
z-index: 2;
|
|
position: relative;
|
|
display: block;
|
|
border-radius: clamp(24px, 6vw, 48px);
|
|
box-shadow: 0 0 0 0 transparent;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.onboarding-content {
|
|
flex: 2;
|
|
min-width: 240px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: clamp(12px, 2vw, 36px);
|
|
max-width: 520px;
|
|
}
|
|
|
|
.onboarding-title {
|
|
color: #111;
|
|
font-weight: 400;
|
|
margin: 0 0 8px 0;
|
|
letter-spacing: -0.03em;
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
.onboarding-desc {
|
|
color: #222;
|
|
font-weight: 400;
|
|
margin-bottom: clamp(16px, 2vw, 22px);
|
|
margin-top: 0;
|
|
line-height: 1.5;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.onboarding-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.onboarding-card {
|
|
background: #f6f7ff;
|
|
border-radius: 19px;
|
|
padding: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
transition: box-shadow .2s;
|
|
}
|
|
|
|
.onboarding-card__icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
min-width: 52px;
|
|
border-radius: 50%;
|
|
background: #eceeff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.onboarding-card__title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 500;
|
|
color: #111;
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.01em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.onboarding-card__desc {
|
|
color: #222;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
max-width: 340px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Bank Arrange Section */
|
|
.bank-arrange-section {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: clamp(32px, 6vw, 60px);
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.bank-arrange__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: clamp(32px, 6vw, 60px);
|
|
box-sizing: border-box;
|
|
max-width: 1250px;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.bank-arrange__text {
|
|
min-width: 270px;
|
|
max-width: 360px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 30px;
|
|
}
|
|
|
|
.bank-arrange__text h2 {
|
|
font-weight: 400;
|
|
color: #111;
|
|
margin-bottom: 12px;
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
.bank-arrange__text p {
|
|
color: #444;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.dashboard,
|
|
.dashboard img {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Block Group */
|
|
.block-group {
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
gap: 40px;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.block {
|
|
min-width: 260px;
|
|
max-width: 529px;
|
|
width: 100%;
|
|
height: 320px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
border-radius: 33px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 30px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.block-app-banking {
|
|
background: rgba(0, 0, 255, 0.06);
|
|
}
|
|
|
|
.block-modules {
|
|
background: rgba(65, 254, 149, 0.22);
|
|
}
|
|
|
|
.block-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 30px;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.block-inner .image {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 45px;
|
|
}
|
|
|
|
.block-title-text h3 {
|
|
display: inline-block;
|
|
width: 270px;
|
|
color: #000;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
word-break: break-word;
|
|
font-size: clamp(1.3rem, 3vw, 1.75rem);
|
|
}
|
|
|
|
.block-desc {
|
|
width: 242px;
|
|
color: rgba(0, 0, 0, 0.75);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
word-break: break-word;
|
|
margin-bottom: 10px;
|
|
line-height: 1.5;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.block-modules .block-desc {
|
|
width: 270px;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.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%;
|
|
}
|
|
|
|
.cta-box h2 {
|
|
font-weight: 500;
|
|
margin-bottom: 20px;
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
.cta-box .link-cta {
|
|
background: white;
|
|
color: #111;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 13px 24px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.cta-box .link-cta:hover {
|
|
background: linear-gradient(194deg, #41FE95 0%, #0000FF 100%);
|
|
color: #fff;
|
|
box-shadow: 0 4px 32px 0 rgba(65, 254, 149, 0.33);
|
|
}
|
|
|
|
/* Fade animations */
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease forwards;
|
|
}
|
|
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Mobile shapes adjustments */
|
|
@media (max-width: 768px) {
|
|
.banking-hero__visual {
|
|
display: none;
|
|
}
|
|
|
|
.banking-hero__visual-mobile {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: -100px;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape-container {
|
|
width: fit-content;
|
|
display: flex;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape1,
|
|
.banking-hero__visual-mobile .shape7 {
|
|
position: static;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape7 {
|
|
width: 70.5px;
|
|
height: 70.5px;
|
|
top: 0%;
|
|
left: 0%;
|
|
border-radius: 1.4rem;
|
|
margin-left: -20%;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape7 img {
|
|
width: 100%;
|
|
max-width: 40%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape6 {
|
|
top: 70px;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape8 {
|
|
left: 56%;
|
|
top: 8%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.banking-hero__visual-mobile .shape5 {
|
|
left: 55%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.banking-hero__visual-mobile {
|
|
display: none !important;
|
|
}
|
|
|
|
.banking-hero__visual {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Responsive Hero Section */
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
padding: clamp(60px, 15vw, 80px) clamp(15px, 5vw, 20px);
|
|
}
|
|
|
|
.hero-section .container {
|
|
gap: clamp(40px, 10vw, 60px);
|
|
}
|
|
|
|
.hero-section .container > .row {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: clamp(30px, 8vw, 40px);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-section .content {
|
|
order: 2;
|
|
}
|
|
|
|
.hero-section .content h1 {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: clamp(1.75rem, 8vw, 3rem);
|
|
margin-bottom: clamp(15px, 4vw, 20px);
|
|
line-height: 1;
|
|
}
|
|
|
|
.hero-section .content p {
|
|
text-align: center;
|
|
margin-bottom: clamp(20px, 6vw, 30px);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hero-section .content .link-cta {
|
|
padding: clamp(10px, 3vw, 14px) clamp(20px, 6vw, 28px);
|
|
font-size: clamp(0.85rem, 3.5vw, 1rem);
|
|
border-radius: clamp(6px, 2vw, 10px);
|
|
width: auto;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.hero-section .banking-hero__visual {
|
|
order: 1;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
/* Responsive Challenges */
|
|
@media (max-width: 950px) {
|
|
.challenges-cards {
|
|
gap: 17px;
|
|
}
|
|
|
|
.challenge-card {
|
|
max-width: 95vw;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
.challenges-container {
|
|
gap: 40px;
|
|
}
|
|
|
|
.challenges-cards {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.challenge-card {
|
|
width: 100%;
|
|
max-width: 99vw;
|
|
min-width: 0;
|
|
padding: 20px;
|
|
border-radius: 14px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.challenge-card__icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.challenges-container h2 {
|
|
font-size: clamp(1.17rem, 5vw, 1.3rem);
|
|
max-width: 99vw;
|
|
padding: 0 2vw;
|
|
}
|
|
}
|
|
|
|
/* Responsive Eco */
|
|
@media (max-width: 950px) {
|
|
.eco-container {
|
|
flex-direction: column-reverse;
|
|
align-items: flex-start;
|
|
gap: 42px;
|
|
padding: 18px 0 40px 0;
|
|
}
|
|
|
|
.eco-visual {
|
|
width: 100%;
|
|
justify-content: center;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.eco-left {
|
|
max-width: 100vw;
|
|
width: 100%;
|
|
padding: 0 4vw;
|
|
}
|
|
|
|
.eco-card__desc {
|
|
max-width: 99vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.eco-card {
|
|
flex-direction: row;
|
|
padding: 12px 12px 12px 22px;
|
|
border-radius: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.eco-card__icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
min-width: 38px;
|
|
}
|
|
|
|
.eco-visual img {
|
|
width: clamp(180px, 70vw, 260px);
|
|
}
|
|
|
|
.eco-title {
|
|
max-width: 97vw;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Responsive Onboarding */
|
|
@media (max-width: 950px) {
|
|
.onboarding-container {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 38px;
|
|
}
|
|
|
|
.onboarding-visual {
|
|
width: 100%;
|
|
justify-content: center;
|
|
min-height: 220px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.onboarding-title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.onboarding-content {
|
|
max-width: 100vw;
|
|
width: 100%;
|
|
}
|
|
|
|
.onboarding-card__desc {
|
|
max-width: 99vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.onboarding-card {
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
padding: 13px 7px 14px 9px;
|
|
border-radius: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.onboarding-card__icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
min-width: 38px;
|
|
}
|
|
|
|
.onboarding-visual img {
|
|
width: clamp(160px, 90vw, 210px);
|
|
}
|
|
|
|
.onboarding-title {
|
|
max-width: 97vw;
|
|
}
|
|
}
|
|
|
|
/* Responsive Bank Arrange */
|
|
@media (max-width: 1050px) {
|
|
.bank-arrange__container,
|
|
.block-group {
|
|
flex-direction: column;
|
|
gap: 34px;
|
|
max-width: 98vw;
|
|
padding: clamp(8px, 3vw, 18px);
|
|
}
|
|
|
|
.block {
|
|
max-width: 100vw;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
.bank-arrange-section {
|
|
gap: 30px;
|
|
}
|
|
|
|
.block {
|
|
min-height: 170px;
|
|
border-radius: 14px;
|
|
padding: 12px 7px 14px 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 419px) {
|
|
.block-group {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.block {
|
|
padding: 7vw;
|
|
min-width: 0;
|
|
height: auto;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.block-inner .image {
|
|
display: none;
|
|
}
|
|
|
|
.block-title-text h3 {
|
|
font-size: 20px;
|
|
width: 85vw;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.block-desc,
|
|
.block-modules .block-desc {
|
|
font-size: 15px;
|
|
width: 100%;
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
|
|
/* Animações mais sutis para mobile */
|
|
@media (max-width: 768px) {
|
|
.shape1,
|
|
.shape2,
|
|
.shape3,
|
|
.shape4,
|
|
.shape5,
|
|
.shape6,
|
|
.shape7 {
|
|
animation-duration: 5s;
|
|
}
|
|
|
|
@keyframes floatUp {
|
|
0%, 100% { transform: scale(1) translateY(0px); }
|
|
50% { transform: scale(1) translateY(-5px); }
|
|
}
|
|
|
|
@keyframes floatDown {
|
|
0%, 100% { transform: scale(0.7) translateY(0px); }
|
|
50% { transform: scale(0.7) translateY(5px); }
|
|
}
|
|
|
|
@keyframes floatSide {
|
|
0%, 100% { transform: scale(0.7) translateX(0px); }
|
|
50% { transform: scale(0.7) translateX(4px); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(0.7); opacity: 1; }
|
|
50% { transform: scale(0.73); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% { transform: scale(0.7) rotate(0deg); }
|
|
100% { transform: scale(0.7) rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.banking-hero__visual-mobile .shape6,
|
|
.banking-hero__visual-mobile .shape1,
|
|
.banking-hero__visual-mobile .shape7,
|
|
.banking-hero__visual-mobile .shape8,
|
|
.banking-hero__visual-mobile .shape5 {
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
@keyframes floatUp {
|
|
0%, 100% { transform: scale(0.6) translateY(0px); }
|
|
50% { transform: scale(0.6) translateY(-4px); }
|
|
}
|
|
|
|
@keyframes floatDown {
|
|
0%, 100% { transform: scale(0.6) translateY(0px); }
|
|
50% { transform: scale(0.6) translateY(4px); }
|
|
}
|
|
|
|
@keyframes floatSide {
|
|
0%, 100% { transform: scale(0.6) translateX(0px); }
|
|
50% { transform: scale(0.6) translateX(3px); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(0.6); opacity: 1; }
|
|
50% { transform: scale(0.62); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% { transform: scale(1) rotate(0deg); }
|
|
100% { transform: scale(1) rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
/* Pausar animações quando o usuário prefere movimento reduzido */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.shape1,
|
|
.shape2,
|
|
.shape3,
|
|
.shape4,
|
|
.shape5,
|
|
.shape6,
|
|
.shape7 {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.xs\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:flex {
|
|
display: flex;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.xs\:hidden {
|
|
display: block;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.banking-hero__visual-mobile {
|
|
display: none !important;
|
|
}
|
|
|
|
.banking-hero__visual {
|
|
display: block;
|
|
}
|
|
}
|
|
</style> |