Fix: Adjust the image on the PDV screen.

This commit is contained in:
Pedro Chueiri 2026-02-11 18:25:06 -03:00
parent 6dc970673b
commit 02418eabfd
2 changed files with 240 additions and 24 deletions

View File

@ -3,7 +3,7 @@
import { fly, fade } from 'svelte/transition'; import { fly, fade } from 'svelte/transition';
import { import {
ArrowRight, ArrowRight,
CheckCircle, CircleCheckBig,
ChevronDown, ChevronDown,
UserPlus, UserPlus,
Settings, Settings,
@ -225,23 +225,23 @@
<ul class="pdv-feature-list"> <ul class="pdv-feature-list">
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Múltiplos vendedores simultâneos Múltiplos vendedores simultâneos
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Links de pagamento personalizados Links de pagamento personalizados
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Pagamentos seguros e instantâneos Pagamentos seguros e instantâneos
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Notificações em tempo real Notificações em tempo real
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Relatórios personalizados Relatórios personalizados
</li> </li>
</ul> </ul>
@ -268,23 +268,23 @@
<ul class="pdv-feature-list"> <ul class="pdv-feature-list">
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Dashboard em tempo real Dashboard em tempo real
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Extratos inteligentes por operador Extratos inteligentes por operador
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Relatórios de vendas detalhados Relatórios de vendas detalhados
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Gestão de equipe de vendas Gestão de equipe de vendas
</li> </li>
<li> <li>
<CheckCircle size={16} class="check-icon" /> <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
Análise de performance avançada Análise de performance avançada
</li> </li>
</ul> </ul>
@ -480,17 +480,18 @@
margin: 0; margin: 0;
} }
/* Seções de Funcionalidades */ /* Seções de Funcionalidades - MELHORADAS */
.pdv-section { .pdv-section {
padding: 120px 20px; padding: 120px 20px;
overflow: hidden;
} }
.pdv-pagamentos { .pdv-pagamentos {
background: #fff; background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
} }
.pdv-gestao { .pdv-gestao {
background: #f8f9ff; background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
} }
.pdv-section__container { .pdv-section__container {
@ -507,6 +508,7 @@
.pdv-section__content { .pdv-section__content {
flex: 1; flex: 1;
max-width: 500px;
} }
.pdv-section__content h2 { .pdv-section__content h2 {
@ -543,20 +545,104 @@
flex-shrink: 0; flex-shrink: 0;
} }
/* ✅ MELHORIAS NA SEÇÃO DE IMAGEM */
.pdv-section__image { .pdv-section__image {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
position: relative;
min-height: 450px;
padding: 20px;
} }
.pdv-section__image img { .pdv-section__image img {
width: 100%; width: 100%;
max-width: 400px; max-width: 500px;
height: auto; height: auto;
border-radius: 20px; 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 { .pdv-integracao {
padding: 0; padding: 0;
} }
@ -573,10 +659,8 @@
min-height: 800px; min-height: 800px;
position: relative; position: relative;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 160px 20px 120px; padding: 160px 20px 120px;
} }
@ -587,7 +671,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.4);
z-index: 1; z-index: 1;
} }
@ -597,8 +681,7 @@
text-align: center; text-align: center;
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
margin-top: -130px;
margin-top: -130px; /* 👈 sobe manualmente */
} }
.pdv-integracao__content h2 { .pdv-integracao__content h2 {
@ -637,7 +720,6 @@
width: auto; width: auto;
} }
/* Utility Classes */
.fade-up { .fade-up {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
@ -652,7 +734,20 @@
display: none; 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) { @media (max-width: 1024px) {
.pdv-hero__container { .pdv-hero__container {
flex-direction: column; flex-direction: column;
@ -663,6 +758,42 @@
.pdv-section__container.reverse { .pdv-section__container.reverse {
flex-direction: column; flex-direction: column;
gap: 50px; 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; 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 { .pdv-integracao__background {
min-height: 500px; min-height: 500px;
padding: 80px 20px; padding: 80px 20px;
} }
.pdv-integracao__content {
margin-top: -80px;
}
.pdv-integracao__apps { .pdv-integracao__apps {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -731,13 +896,64 @@
border-radius: 20px; 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 { .pdv-integracao__background {
min-height: 400px; min-height: 400px;
padding: 60px 15px; padding: 60px 15px;
} }
.pdv-integracao__content {
margin-top: -60px;
}
.app-button img { .app-button img {
height: 45px; 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> </style>

View File

@ -96,7 +96,7 @@
Somos uma empresa de tecnologia especializada em infraestrutura financeira. Somos uma empresa de tecnologia especializada em infraestrutura financeira.
</h2> </h2>
<div class="about-mission__visual fade-up lg:hidden"> <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> </div>
<p class="fade-up"> <p class="fade-up">
Oferecemos soluções completas via API, com segurança, escalabilidade e autonomia para que empresas Oferecemos soluções completas via API, com segurança, escalabilidade e autonomia para que empresas