From 02418eabfd9bbdaccf00d3dcd961744306a884d1 Mon Sep 17 00:00:00 2001 From: Pedro Chueiri Date: Wed, 11 Feb 2026 18:25:06 -0300 Subject: [PATCH] Fix: Adjust the image on the PDV screen. --- src/routes/pdv/+page.svelte | 262 +++++++++++++++++++++++++++++++--- src/routes/sobre/+page.svelte | 2 +- 2 files changed, 240 insertions(+), 24 deletions(-) diff --git a/src/routes/pdv/+page.svelte b/src/routes/pdv/+page.svelte index fbe819d..23d4bfb 100644 --- a/src/routes/pdv/+page.svelte +++ b/src/routes/pdv/+page.svelte @@ -3,7 +3,7 @@ import { fly, fade } from 'svelte/transition'; import { ArrowRight, - CheckCircle, + CircleCheckBig, ChevronDown, UserPlus, Settings, @@ -225,23 +225,23 @@ @@ -268,23 +268,23 @@ @@ -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; + } +} \ No newline at end of file diff --git a/src/routes/sobre/+page.svelte b/src/routes/sobre/+page.svelte index b9610fa..c755b76 100644 --- a/src/routes/sobre/+page.svelte +++ b/src/routes/sobre/+page.svelte @@ -96,7 +96,7 @@ Somos uma empresa de tecnologia especializada em infraestrutura financeira.
- Interface financeira Bass Pago + Interface financeira Bass Pago

Oferecemos soluções completas via API, com segurança, escalabilidade e autonomia para que empresas