Fix: Adjust the image on the PDV screen.
This commit is contained in:
Pedro Chueiri
parent
6dc970673b
commit
02418eabfd
|
|
@ -3,7 +3,7 @@
|
|||
import { fly, fade } from 'svelte/transition';
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
CircleCheckBig,
|
||||
ChevronDown,
|
||||
UserPlus,
|
||||
Settings,
|
||||
|
|
@ -225,23 +225,23 @@
|
|||
|
||||
<ul class="pdv-feature-list">
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Múltiplos vendedores simultâneos
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Links de pagamento personalizados
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Pagamentos seguros e instantâneos
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Notificações em tempo real
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Relatórios personalizados
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -268,23 +268,23 @@
|
|||
|
||||
<ul class="pdv-feature-list">
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Dashboard em tempo real
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Extratos inteligentes por operador
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Relatórios de vendas detalhados
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Gestão de equipe de vendas
|
||||
</li>
|
||||
<li>
|
||||
<CheckCircle size={16} class="check-icon" />
|
||||
<CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
|
||||
Análise de performance avançada
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -480,17 +480,18 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* Seções de Funcionalidades */
|
||||
/* Seções de Funcionalidades - MELHORADAS */
|
||||
.pdv-section {
|
||||
padding: 120px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdv-pagamentos {
|
||||
background: #fff;
|
||||
background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
|
||||
}
|
||||
|
||||
.pdv-gestao {
|
||||
background: #f8f9ff;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
|
||||
}
|
||||
|
||||
.pdv-section__container {
|
||||
|
|
@ -507,6 +508,7 @@
|
|||
|
||||
.pdv-section__content {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.pdv-section__content h2 {
|
||||
|
|
@ -543,20 +545,104 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ✅ MELHORIAS NA SEÇÃO DE IMAGEM */
|
||||
.pdv-section__image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
min-height: 450px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pdv-section__image img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s ease;
|
||||
animation: imageFloat 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pdv-section__image img:hover {
|
||||
transform: scale(1.02);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__container {
|
||||
max-width: 1400px;
|
||||
gap: 120px;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image {
|
||||
background: radial-gradient(
|
||||
ellipse 70% 80% at 50% 50%,
|
||||
rgba(65, 254, 149, 0.08) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 30px;
|
||||
min-height: 700px;
|
||||
padding: 50px;
|
||||
flex: 1.5;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
max-width: 700px;
|
||||
width: 130%;
|
||||
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.3));
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__content {
|
||||
flex: 0.8;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.pdv-pagamentos .pdv-section__image {
|
||||
background: radial-gradient(
|
||||
ellipse 70% 80% at 50% 50%,
|
||||
rgba(0, 0, 255, 0.06) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.pdv-pagamentos .pdv-section__image img {
|
||||
filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2));
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
@keyframes imageFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
animation: imageFloatLarge 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes imageFloatLarge {
|
||||
0%, 100% {
|
||||
transform: scale(1.2) translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img:hover {
|
||||
transform: scale(1.25) !important;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Seção de Integração */
|
||||
.pdv-integracao {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -573,10 +659,8 @@
|
|||
min-height: 800px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
padding: 160px 20px 120px;
|
||||
}
|
||||
|
||||
|
|
@ -587,7 +671,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -597,8 +681,7 @@
|
|||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
margin-top: -130px; /* 👈 sobe manualmente */
|
||||
margin-top: -130px;
|
||||
}
|
||||
|
||||
.pdv-integracao__content h2 {
|
||||
|
|
@ -637,7 +720,6 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
|
|
@ -652,7 +734,20 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
/* Responsive Styles - AJUSTADOS PARA IMAGEM MAIOR */
|
||||
@media (max-width: 1400px) {
|
||||
.pdv-gestao .pdv-section__container {
|
||||
max-width: 1200px;
|
||||
gap: 100px;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
max-width: 750px;
|
||||
width: 120%;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.pdv-hero__container {
|
||||
flex-direction: column;
|
||||
|
|
@ -663,6 +758,42 @@
|
|||
.pdv-section__container.reverse {
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdv-section__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pdv-section__image {
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
.pdv-section__image img {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
/* ✅ GESTÃO EM TABLET */
|
||||
.pdv-gestao .pdv-section__container {
|
||||
max-width: 100%;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image {
|
||||
min-height: 500px;
|
||||
padding: 30px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
max-width: 600px;
|
||||
width: 110%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__content {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -700,11 +831,45 @@
|
|||
padding: 25px;
|
||||
}
|
||||
|
||||
/* ✅ MOBILE - IMAGEM GESTÃO AINDA GRANDE */
|
||||
.pdv-section__image {
|
||||
min-height: 280px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdv-section__image img {
|
||||
max-width: 350px;
|
||||
border-radius: 15px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image {
|
||||
background: none;
|
||||
padding: 0;
|
||||
min-height: 350px; /* ✅ Maior que outras em mobile */
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
max-width: 450px !important; /* ✅ Maior que padrão mobile */
|
||||
width: 100%;
|
||||
transform: scale(1) !important;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.pdv-pagamentos .pdv-section__image {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pdv-integracao__background {
|
||||
min-height: 500px;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.pdv-integracao__content {
|
||||
margin-top: -80px;
|
||||
}
|
||||
|
||||
.pdv-integracao__apps {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -731,13 +896,64 @@
|
|||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* ✅ MOBILE PEQUENO */
|
||||
.pdv-section__image {
|
||||
min-height: 220px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.pdv-section__image img {
|
||||
max-width: 300px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ✅ GESTÃO EM MOBILE PEQUENO - AINDA MAIOR */
|
||||
.pdv-gestao .pdv-section__image {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
max-width: 380px !important; /* ✅ Maior que padrão */
|
||||
}
|
||||
|
||||
.pdv-integracao__background {
|
||||
min-height: 400px;
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.pdv-integracao__content {
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
.app-button img {
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ✅ MELHORIAS ADICIONAIS DE PERFORMANCE */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pdv-section__image img {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.pdv-gestao .pdv-section__image img {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.fade-up {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ✅ HIGH CONTRAST SUPPORT */
|
||||
@media (prefers-contrast: high) {
|
||||
.pdv-section__image img {
|
||||
box-shadow: 0 0 0 2px #000;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #00ff00;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
Somos uma empresa de tecnologia especializada em infraestrutura financeira.
|
||||
</h2>
|
||||
<div class="about-mission__visual fade-up lg:hidden">
|
||||
<img src={elementosDigitais} style="width: 100%;" alt="Interface financeira Bass Pago" />
|
||||
<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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user