build: v1.0.2

src/lib/components/Features.svelte

@@ -86,15 +86,13 @@
     id="features-header"
 >
     {#if mounted && visibleElements['features-header']}
-                
-
         <h2
             class="mb-6 text-4xl md:text-5xl font-black text-gray-900"
             in:fly={{ y: 30, duration: 600, delay: 100 }}
         >
             Soluções financeiras
             <br />
-                    <span class="text-gradient">para todos os segmentos</span>
+            <span class="text-green-400 font-black">para todos os segmentos</span>
         </h2>
 
         <p
@@ -121,7 +119,7 @@
                         >
                             <!-- Icon -->
                             <div
-                                class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:shadow-lg transition-all duration-300 hover:scale-110 hover:rotate-3"
+                                class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:shadow-lg transition-all duration-300 hover:scale-110 hover:rotate-3"
                             >
                                 <svelte:component this={feature.icon} size={32} class="text-white" />
                             </div>
@@ -162,12 +160,6 @@
     }
 
     /* Gradient text para os números das estatísticas */
-    .text-gradient {
-        background: linear-gradient(45deg, #06b6d4, #fbbf24);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-    }
 
     /* Hover effect para cards de features */
     .group:hover {
@@ -176,9 +168,7 @@
     }
 
     /* Animação de pulso para decorações de fundo */
-    .bg-white\/5 {
+  
-        animation: pulse 4s ease-in-out infinite;
-    }
 
     @keyframes pulse {
         0%, 100% {

src/lib/components/Footer.svelte

@@ -81,27 +81,24 @@
                     in:fly={{ y: 30, duration: 500, delay: 100 }}
                 >
                     <div class="menu">
-                        <h4>Explore</h4>
+                        <h4>Explore:</h4>
                         <a href="/">Home</a>
                         <a href="/conta-digital">Conta Digital</a>
-                        <a href="/solucoes-banking">Soluções Banking</a>
                         <a href="/pix">Pix</a>
-                        <a href="/adquirencia">Adquiriência</a>
-                        <a href="/emissao-de-cartoes">Emissão de Cartões</a>
                     </div>
                     <div class="menu">
-                        <h4>Bass</h4>
+                        <h4>Bass:</h4>
                         <a href="/sobre">Sobre</a>
                         <a href="/politicas-e-termos">Política e Termos</a>
                         <a href="/precos">Preços</a>
                         <a href="/desenvolvedores">Desenvolva com Bass</a>
                     </div>
                     <div class="menu">
-                        <h4>Atendimento</h4>
+                        <h4>Atendimento:</h4>
                         <a href="/centro-suporte">Centro de Suporte</a>
                         <br />
-                        <h4>Ouvidoria</h4>
+                        <h4>Ouvidoria:</h4>
-                        <a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
+                        <a href="mailto:ouvidoria@basspago.com">ouvidoria@basspago.com</a>
                     </div>
                 </div>
             {/if}
@@ -369,9 +366,9 @@
 
        .menu h4 {
         font-size: 14px;
-        color: #444;
+        color: #41FE95;
         margin-bottom: 10px;
-        font-weight: 100;
+        font-weight: 500;
     }
 
     .menu a {
@@ -406,7 +403,6 @@
         height: 36px;
     }
 
-    /* Coluna 3 - direita */
     .footer-col.right {
         display: flex;
         flex-direction: column;
@@ -421,8 +417,9 @@
 
    .social-label {
     font-size: 14px;
-        color: #aaa;
+    color: #41FE95; 
     margin-top: 10px;
+    font-weight: 500; 
 }
 
     .footer-socials {

src/lib/components/Header.svelte

@@ -94,20 +94,26 @@
     function goHome() {
         goto('/');
     }
+
+    function handleAccess() {
+        // Adicione aqui a lógica para acessar conta existente
+        // Por exemplo: goto('/login') ou abrir modal de login
+        console.log('Acessar conta');
+    }
 </script>
 
 <header class="fixed top-0 z-50 w-full">
-    <div class="mx-auto mt-4 max-w-[1280px] px-4">
+    <div class="mx-auto mt-4 max-w-[1440px] px-4">
         <div
-            class="flex h-16 items-center justify-between rounded-2xl px-6 transition-all duration-300 {scrolled
+            class="flex h-20 items-center justify-between rounded-2xl px-8 transition-all duration-300 {scrolled
                 ? 'bg-slate-900/90 backdrop-blur-xl shadow-lg'
                 : 'bg-slate-900/70 backdrop-blur-md'}"
         >
             <div class="flex items-center gap-3 cursor-pointer" on:click={goHome}>
-                <img src={bassLogo} alt="BassPago" class="h-20 w-auto" />
+                <img src={bassLogo} alt="BassPago" class="h-24 w-auto" />
             </div>
 
-            <nav class="hidden lg:flex items-center justify-center flex-1 gap-8">
+            <nav class="hidden lg:flex items-center justify-center flex-1 gap-10">
                 {#each menuItems as item}
                     <div class="relative group">
                         <a
@@ -147,9 +153,15 @@
                 {/each}
             </nav>
 
-            <div class="hidden lg:flex items-center">
+            <div class="hidden lg:flex items-center gap-3">
                 <button
-                    class="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
+                    class="rounded-full border border-white/20 px-6 py-3 text-sm font-medium text-white hover:bg-white/10 transition-colors"
+                    on:click={handleAccess}
+                >
+                    Acessar
+                </button>
+                <button
+                    class="rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
                     on:click={() => goto('/precos#form-negociacao-basspago')}
                 >
                     Abrir conta
@@ -173,7 +185,7 @@
                     <div>
                         {#if item.hasDropdown}
                             <button
-                                class="w-full flex items-center justify-between px-6 py-3 text-sm text-white/80 hover:bg-white/5 transition-colors"
+                                class="w-full flex items-center justify-between px-6 py-4 text-sm text-white/80 hover:bg-white/5 transition-colors"
                                 on:click={() => toggleDropdown(item.name)}
                             >
                                 {item.name}
@@ -198,7 +210,7 @@
                         {:else}
                             <a
                                 href={item.href}
-                                class="block px-6 py-3 text-sm text-white/80 hover:bg-white/5 transition-colors"
+                                class="block px-6 py-4 text-sm text-white/80 hover:bg-white/5 transition-colors"
                                 on:click={(e) => handleNavigation(item.href, e)}
                             >
                                 {item.name}
@@ -207,9 +219,15 @@
                     </div>
                 {/each}
 
-                <div class="border-t border-white/10 p-4">
+                <div class="border-t border-white/10 p-4 space-y-3">
                     <button
-                        class="w-full rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
+                        class="w-full rounded-full border border-white/20 px-6 py-3 text-sm font-medium text-white hover:bg-white/10 transition-colors"
+                        on:click={handleAccess}
+                    >
+                        Acessar
+                    </button>
+                    <button
+                        class="w-full rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
                         on:click={() => goto('/precos#form-negociacao-basspago')}
                     >
                         Abrir conta

src/lib/components/Hero.svelte

@@ -97,21 +97,16 @@
            mb-6 sm:mb-8"
     in:fly={{ y: 30, duration: 800 }}
 >
-                Infraestrutura de pagamento
+    <div class="block">
-                <br />
+        Infraestrutura de 
-                flexível para{' '}
+    </div>
-                <span class="word-transition">
+    <div class="block">
-                    {#if !isTransitioning}
+        pagamento para
-                        <span 
+    </div>
-                            class="text-gradient" 
+
-                            style="background-size: 300% 300%;"
+    <div class="block text-emerald-400">
-                            in:fly={{ y: 30, duration: 400, delay: 100 }}
+        expandir seus negócios
-                            out:fly={{ y: -30, duration: 300 }}
+    </div>
-                        >
-                            {words[currentWordIndex]}
-                        </span>
-                    {/if}
-                </span>
 </h1>
         {/if}
 
@@ -189,28 +184,6 @@
 </section>
 
 <style>
-    /* Gradient animation personalizada */
-    .text-gradient {
-        background: linear-gradient(45deg, #3b82f6, #10b981, #3b82f6);
-        background-size: 300% 300%;
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        animation: gradientMove 6s ease infinite;
-    }
-
-    @keyframes gradientMove {
-        0% {
-            background-position: 0% 50%;
-        }
-        50% {
-            background-position: 100% 50%;
-        }
-        100% {
-            background-position: 0% 50%;
-        }
-    }
-
     /* Container para as transições de palavras */
     .word-transition {
         display: inline-block;

src/lib/components/Products.svelte

@@ -35,7 +35,7 @@
             description:
                 'Receba de forma rápida e segura no seu estabelecimento físico, com Pix integrado ao PDV.',
             highlight: 'Mais vendido',
-            color: 'from-blue-500 to-cyan-500',
+            color: 'from-green-500 to-emerald-500',
             link: '/pdv'
         },
          {
@@ -45,7 +45,7 @@
             description:
                 'Acompanhe recebimentos, pague fornecedores e controle tudo em um único ambiente.',
             highlight: 'Sem mensalidade',
-            color: 'from-blue-600 to-emerald-400',
+            color: 'from-emerald-600 to-blue-400',
             link: '/conta-digital'
         },
         {
@@ -55,8 +55,8 @@
             description:
                 'APIs projetadas para eliminar complexidade e ganhar velocidade na integração',
             highlight: 'Mais integrado',
-            color: 'from-green-500 to-emerald-500',
+            color: 'from-blue-500 to-cyan-500',
-            link: '/pix'
+            link: '/desenvolvedores'
         }
     ];
 
@@ -83,7 +83,7 @@
                 >
                     Soluções completas para
                     <br />
-                    <span class="text-gradient">seu negócio crescer</span>
+                    <span class="text-green-400 font-black">seu negócio crescer</span>
                 </h2>
 
                 <p
@@ -100,39 +100,39 @@
         <div class="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
             {#each products as product, index}
                 <div
-                    class="card-basspago flex flex-col"
+                    class="card-basspago flex flex-col text-center"
                     data-animate
                     id="product-{index}"
                 >
                     {#if mounted && visibleElements[`product-${index}`]}
                         <div
                             in:fly={{ y: 32, duration: 450, delay: index * 150 }}
-                            class="h-full flex flex-col"
+                            class="h-full flex flex-col items-center"
                         >
                             <!-- Badge -->
-                            <span
+                            <div
-                                class="inline-block text-white text-xs font-semibold px-3 py-1 rounded-full bg-gradient-to-r {product.color} mb-6"
+                                class="w-full text-white text-xs font-semibold px-3 py-1 rounded-full bg-gradient-to-r {product.color} mb-6 flex items-center justify-center"
                             >
                                 {product.highlight}
-                            </span>
+                            </div>
 
                             <!-- Icon -->
                             <div
-                                class="w-20 h-20 bg-gradient-to-r {product.color} rounded-2xl flex items-center justify-center mb-6"
+                                class="w-20 h-20 bg-gradient-to-r {product.color} rounded-2xl flex items-center justify-center mb-6 mx-auto"
                             >
                                 <svelte:component this={product.icon} size={40} class="text-white" />
                             </div>
 
                             <!-- Content -->
-                            <h3 class="text-2xl font-bold text-gray-900 mb-2">
+                            <h3 class="text-2xl font-bold text-gray-900 mb-2 text-center">
                                 {product.title}
                             </h3>
 
-                            <span class="text-blue-600 font-semibold mb-4 text-lg">
+                            <span class="text-blue-600 font-semibold mb-4 text-lg text-center">
                                 {product.subtitle}
                             </span>
 
-                            <p class="text-gray-600 mb-8 leading-relaxed">
+                            <p class="text-gray-600 mb-8 leading-relaxed text-center">
                                 {product.description}
                             </p>
 
@@ -167,7 +167,7 @@
         transform: translateX(0.25rem);
     }
 
-    /* Gradient text para títulos */
+    /* Gradient text para títulos - azul original */
     .text-gradient {
         background: linear-gradient(135deg, #3b82f6, #06b6d4);
         -webkit-background-clip: text;
@@ -175,6 +175,14 @@
         background-clip: text;
     }
 
+    /* Gradient text verde para o destaque */
+    .text-gradient-green {
+        background: linear-gradient(135deg, #059669, #10b981, #34d399);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
     /* Estilo para botões desabilitados */
     button:disabled {
         opacity: 0.75;

src/lib/components/ProductsComparison.svelte

@@ -115,44 +115,6 @@
         </div>
       </div>
 
-      <!-- Ícones de métodos de pagamento -->
-      <div class="payment-icons">
-        <div 
-          class="payment-icon"
-          data-animate
-          id="payment-icon-1"
-        >
-          {#if mounted && visibleElements['payment-icon-1']}
-            <div in:fly={{ y: 30, duration: 500, delay: 500 }}>
-              <span>Pix</span>
-            </div>
-          {/if}
-        </div>
-
-        <div 
-          class="payment-icon"
-          data-animate
-          id="payment-icon-2"
-        >
-          {#if mounted && visibleElements['payment-icon-2']}
-            <div in:fly={{ y: 30, duration: 500, delay: 600 }}>
-              <span>Banking</span>
-            </div>
-          {/if}
-        </div>
-
-        <div 
-          class="payment-icon"
-          data-animate
-          id="payment-icon-3"
-        >
-          {#if mounted && visibleElements['payment-icon-3']}
-            <div in:fly={{ y: 30, duration: 500, delay: 700 }}>
-              <span>PDV</span>
-            </div>
-          {/if}
-        </div>
-      </div>
     </div>
   </div>
 </section>

src/routes/centro-suporte/+page.svelte

@@ -32,7 +32,8 @@
         title: 'Vendas',
         description: 'Quer contratar nossos produtos e serviços? Fale com a gente.',
         schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
-            contact: 'Chat on-line ou comercial@basspago.com',
+        contact: 'Chat on-line ou', 
+        contactEmail: 'comercial@basspago.com', 
         href: 'mailto:comercial@basspago.com',
         ariaLabel: 'Enviar email para comercial@basspago.com'
     }
@@ -164,6 +165,22 @@
             <p class="contact-card__title">{card.title}</p>
             <p class="contact-card__description">{card.description}</p>
             <p class="contact-card__schedule">{card.schedule}</p>
+            
+            {#if card.contactEmail}
+                <!-- Para o card de Vendas com email separado -->
+                <div class="contact-card__contact-group">
+                    <span class="contact-card__contact-text">{card.contact}</span>
+                    <a 
+                        href={card.href} 
+                        class="contact-card__contact" 
+                        tabindex="0"
+                        aria-label={card.ariaLabel}
+                    >
+                        {card.contactEmail}
+                    </a>
+                </div>
+            {:else}
+                <!-- Para os outros cards -->
                 <a 
                     href={card.href} 
                     class="contact-card__contact" 
@@ -172,6 +189,7 @@
                 >
                     {card.contact}
                 </a>
+            {/if}
         </div>
     </div>
 {/each}
@@ -404,6 +422,23 @@
     white-space: pre-line;
 }
 
+.contact-card__contact-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Texto de contato (não clicável) */
+.contact-card__contact-text {
+    font-family: var(--font-family-space-grotesk);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1;
+ color: var(--color-primary); 
+    letter-spacing: -0.12px;
+    margin: 0;
+}
+
 /* Contact Card Contact Info */
 .contact-card__contact {
     font-family: var(--font-family-space-grotesk);
@@ -489,12 +524,12 @@
 
 .faq-question {
     width: 100%;
-    padding: 20px 25px;
+    padding: 24px 25px; /* Aumentado de 20px para 24px */
     background: none;
     border: none;
     text-align: left;
     font-family: var(--font-family-space-grotesk);
-    font-size: 16px;
+    font-size: 16px; /* Padronizado em 16px */
     font-weight: 500;
     color: var(--color-white);
     cursor: pointer;
@@ -522,19 +557,50 @@
 }
 
 .faq-answer {
-    padding: 0 25px 20px;
+    padding: 20px 25px 24px; /* Mudança: adicionado padding-top de 20px */
     overflow: hidden;
     animation: slideDown 0.3s ease-out forwards;
 }
 
 .faq-answer p {
     font-family: var(--font-family-space-grotesk);
-    font-size: 14px;
+    font-size: 16px; /* Padronizado: de 14px para 16px */
-    line-height: 1.5;
+    line-height: 1.6; /* Aumentado de 1.5 para 1.6 */
     color: rgba(255, 255, 255, 0.75);
     margin: 0;
 }
 
+/* Atualização da animação para melhor espaçamento */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        max-height: 400px; /* Aumentado de 300px para 400px */
+        transform: translateY(0);
+    }
+}
+
+/* Mobile adjustments - agora padronizado */
+@media (max-width: 768px) {
+    .faq-question {
+        padding: 20px; /* Padronizado */
+        font-size: 16px; /* Mantém 16px no mobile também */
+    }
+    
+    .faq-answer {
+        padding: 16px 20px 20px; /* Espaçamento proporcional no mobile */
+    }
+    
+    .faq-answer p {
+        font-size: 15px; /* Ligeiramente menor no mobile, mas ainda legível */
+        line-height: 1.6; /* Mantém o line-height consistente */
+    }
+}
+
 /* Utility classes */
 .xs\:hidden {
     display: none;

src/routes/pdv/+page.svelte

@@ -25,13 +25,12 @@
     import appleStore from '$lib/assets/apple-store.svg';
     import googlePlay from '$lib/assets/google-play.svg';
     import phoneCard from '$lib/assets/phone-card.png'; 
-    import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png'; 
+    import iphonePixMockup from '$lib/assets/iphone-pix-mockup2.png'; 
-    import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup.png'; 
+    import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup2.png'; 
     import cubesPlus from '$lib/assets/cubes-plus.svg'; 
 
     let mounted = false;
     let visibleElements = {};
-    let activeFeature = 'pagamentos';
 
     const pdvFeatures = [
         {
@@ -66,44 +65,6 @@
         }
     ];
 
-    const detailedFeatures = {
-        pagamentos: {
-            title: 'Sistema de Pagamentos Completo',
-            description: 'Aceite todas as formas de pagamento em um terminal moderno e seguro.',
-            image: iphonePixMockup, 
-            items: [
-                'Cartão de crédito e débito',
-                'PIX com QR Code dinâmico',
-                'Carteiras digitais (Apple Pay, Google Pay)',
-                'Dinheiro com controle de troco',
-                'Parcelamento automático'
-            ]
-        },
-        gestao: {
-            title: 'Gestão Inteligente',
-            description: 'Controle completo do seu negócio com relatórios e analytics avançados.',
-            image: bankingInterfaceMockup, 
-            items: [
-                'Dashboard em tempo real',
-                'Controle de estoque automático',
-                'Relatórios de vendas detalhados',
-                'Gestão de funcionários',
-                'Análise de performance'
-            ]
-        },
-        integracao: {
-            title: 'Integração Simples',
-            description: 'Conecte facilmente com seus sistemas existentes através de APIs robustas.',
-            items: [
-                'APIs RESTful completas',
-                'Webhooks em tempo real',
-                'SDKs para principais linguagens',
-                'Documentação detalhada',
-                'Suporte técnico especializado'
-            ]
-        }
-    };
-
     const implementationSteps = [
         {
             icon: UserPlus,
@@ -184,10 +145,6 @@
         return () => observer.disconnect();
     });
 
-    function setActiveFeature(feature) {
-        activeFeature = feature;
-    }
-
     function toggleFaq(index) {
         faqs[index].open = !faqs[index].open;
     }
@@ -257,44 +214,95 @@
     </div>
 </section>
 
-<!-- Detailed Features Section -->
+<!-- Seção 1: Pagamentos -->
-<section class="pdv-detailed-features">
+<section class="pdv-section pdv-pagamentos">
-    <div class="pdv-detailed__container">
+    <div class="pdv-section__container">
-        <div class="pdv-detailed__header fade-up">
+        <div class="pdv-section__content fade-up">
-            <h2>Funcionalidades completas para seu negócio</h2>
+            <h2>Pagamentos Instantâneos</h2>
+            <p>
+                Com o PDV da Bass Pago, você recebe tudo via Pix direto na sua conta, mesmo quando várias pessoas estão vendendo ao mesmo tempo, sem perder o controle financeiro.
+            </p>
+            
+            <ul class="pdv-feature-list">
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Múltiplos vendedores simultâneos
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Links de pagamento personalizados
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Pagamentos seguros e instantâneos
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Notificações em tempo real
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Relatórios personalizados
+                </li>
+            </ul>
         </div>
         
-        <div class="pdv-detailed__tabs">
+        <div class="pdv-section__image fade-up">
-            <button 
+            <img src={iphonePixMockup} alt="Pagamentos PDV" />
-                class="tab-button {activeFeature === 'pagamentos' ? 'active' : ''}" 
+        </div>
-                on:click={() => setActiveFeature('pagamentos')}
+    </div>
-            >
+</section>
-                Pagamentos
+
-            </button>
+<!-- Seção 2: Gestão -->
-            <button 
+<section class="pdv-section pdv-gestao">
-                class="tab-button {activeFeature === 'gestao' ? 'active' : ''}" 
+    <div class="pdv-section__container reverse">
-                on:click={() => setActiveFeature('gestao')}
+        <div class="pdv-section__image fade-up">
-            >
+            <img src={bankingInterfaceMockup} alt="Gestão PDV" />
-                Gestão
-            </button>
-            <button 
-                class="tab-button {activeFeature === 'integracao' ? 'active' : ''}" 
-                on:click={() => setActiveFeature('integracao')}
-            >
-                Integração
-            </button>
         </div>
         
-        <div class="pdv-detailed__content {activeFeature === 'integracao' ? 'integracao-layout' : ''}">
+        <div class="pdv-section__content fade-up">
-            <div class="pdv-detailed__text fade-up {activeFeature === 'integracao' ? 'integracao-background' : ''}">
+            <h2>Gestão Inteligente</h2>
-                {#if activeFeature === 'integracao'}
+            <p>
-                    <!-- Layout especial para integração -->
+                Controle completo do seu negócio com relatórios e analytics avançados. Monitore performance, gerencie vendedores e tome decisões baseadas em dados.
-                    <div class="integracao-header">
+            </p>
-                        <h3>{detailedFeatures[activeFeature].title}</h3>
-                        <p>{detailedFeatures[activeFeature].description}</p>
-                    </div>
             
-                    <div class="integracao-apps">
+            <ul class="pdv-feature-list">
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Dashboard em tempo real
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Extratos inteligentes por operador
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Relatórios de vendas detalhados
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Gestão de equipe de vendas
+                </li>
+                <li>
+                    <CheckCircle size={16} class="check-icon" />
+                    Análise de performance avançada
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>
+
+<!-- Seção 3: Integração -->
+<section class="pdv-section pdv-integracao">
+    <div class="pdv-integracao__container">
+        <div class="pdv-integracao__background">
+            <div class="pdv-integracao__content fade-up">
+                <h2>Mais agilidade para vender, mais controle para crescer</h2>
+                <p>
+                    Baixe nosso app e acompanhe vendas e pagamentos de qualquer lugar, <br >com total controle e segurança.
+                </p>
+                
+                <div class="pdv-integracao__apps">
                     <a href="https://apps.apple.com/br/app/bass-pago/id6499055719" class="app-button">
                         <img src={appleStore} alt="App Store" />
                     </a>
@@ -302,27 +310,7 @@
                         <img src={googlePlay} alt="Google Play" />
                     </a>
                 </div>
-                {:else}
-                    <!-- Layout normal para outras abas -->
-                    <h3>{detailedFeatures[activeFeature].title}</h3>
-                    <p>{detailedFeatures[activeFeature].description}</p>
-                    
-                    <ul class="pdv-feature-list">
-                        {#each detailedFeatures[activeFeature].items as item}
-                            <li>
-                                <CheckCircle size={16} class="check-icon" />
-                                {item}
-                            </li>
-                        {/each}
-                    </ul>
-                {/if}
             </div>
-            
-            {#if detailedFeatures[activeFeature].image}
-                <div class="pdv-detailed__image fade-up">
-                    <img src={detailedFeatures[activeFeature].image} alt={detailedFeatures[activeFeature].title} />
-                </div>
-            {/if}
         </div>
     </div>
 </section>
@@ -391,25 +379,6 @@
     box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
 }
 
-.cta-btn-white {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: white;
-    color: black;
-    padding: 14px 28px;
-    border-radius: 10px;
-    text-decoration: none;
-    font-weight: 500;
-    transition: all 0.3s ease;
-}
-
-.cta-btn-white:hover {
-    background: #41FE95;
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
-}
-
 .pdv-hero__visual {
     flex: 1;
     display: flex;
@@ -438,7 +407,7 @@
 /* Features Section */
 .pdv-features-section {
     background: #fff;
-    padding: 80px 20px;
+    padding: 120px 20px;
 }
 
 .pdv-features__container {
@@ -511,73 +480,43 @@
     margin: 0;
 }
 
-/* Detailed Features Section */
+/* Seções de Funcionalidades */
-.pdv-detailed-features {
+.pdv-section {
-    background: #fff;
+    padding: 120px 20px;
-    padding: 80px 20px;
 }
 
-.pdv-detailed__container {
+.pdv-pagamentos {
+    background: #fff;
+}
+
+.pdv-gestao {
+    background: #f8f9ff;
+}
+
+.pdv-section__container {
     max-width: 1200px;
     margin: 0 auto;
-}
-
-.pdv-detailed__header {
-    text-align: center;
-    margin-bottom: 50px;
-}
-
-.pdv-detailed__header h2 {
-    color: #111;
-    font-size: clamp(2rem, 4vw, 2.5rem);
-    font-weight: 400;
-    margin: 0;
-}
-
-.pdv-detailed__tabs {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 50px;
-    flex-wrap: wrap;
-}
-
-.tab-button {
-    padding: 12px 24px;
-    border: 2px solid #ddd;
-    background: white;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 1rem;
-    font-weight: 500;
-}
-
-.tab-button:hover,
-.tab-button.active {
-    background: #0000ff;
-    color: white;
-    border-color: #0000ff;
-}
-
-.pdv-detailed__content {
     display: flex;
     align-items: center;
-    gap: 60px;
+    gap: 80px;
 }
 
-.pdv-detailed__text {
+.pdv-section__container.reverse {
+    flex-direction: row-reverse;
+}
+
+.pdv-section__content {
     flex: 1;
 }
 
-.pdv-detailed__text h3 {
+.pdv-section__content h2 {
     color: #111;
-    font-size: 1.8rem;
+    font-size: clamp(2rem, 4vw, 2.5rem);
-    font-weight: 500;
+    font-weight: 400;
     margin-bottom: 20px;
 }
 
-.pdv-detailed__text p {
+.pdv-section__content p {
     color: #666;
     font-size: 1.1rem;
     line-height: 1.6;
@@ -596,6 +535,7 @@
     gap: 10px;
     margin-bottom: 15px;
     color: #333;
+    font-size: 1rem;
 }
 
 .check-icon {
@@ -603,37 +543,44 @@
     flex-shrink: 0;
 }
 
-.pdv-detailed__image {
+.pdv-section__image {
     flex: 1;
     display: flex;
     justify-content: center;
 }
 
-.pdv-detailed__image img {
+.pdv-section__image img {
     width: 100%;
     max-width: 400px;
     height: auto;
     border-radius: 20px;
 }
 
-/* Estilo específico para a aba integração */
+/* Seção de Integração */
-.pdv-detailed__text.integracao-background {
+.pdv-integracao {
+    padding: 0;
+}
+
+.pdv-integracao__container {
+    width: 100%;
+}
+
+.pdv-integracao__background {
     background-image: url('/src/lib/assets/backgroundPDV.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    padding: 60px 40px;
+    min-height: 800px;
-    border-radius: 20px;
     position: relative;
-    min-height: 750px; /* Reduzi a altura mínima */
     display: flex;
-    flex-direction: column;
+
-    justify-content: flex-start; /* Mudei para flex-start */
+    align-items: flex-start;   
-    text-align: center;
+    justify-content: center;
+
+    padding: 160px 20px 120px; 
 }
 
-/* Overlay para melhorar legibilidade do texto */
+.pdv-integracao__background::before {
-.pdv-detailed__text.integracao-background::before {
     content: '';
     position: absolute;
     top: 0;
@@ -641,48 +588,38 @@
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
-    border-radius: 20px;
     z-index: 1;
 }
 
-/* Garantir que o conteúdo fique acima do overlay */
+.pdv-integracao__content {
-.pdv-detailed__text.integracao-background > * {
     position: relative;
     z-index: 2;
-}
-
-/* Header da integração (título e descrição no topo) */
-.integracao-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     text-align: center;
-    margin-bottom: 30px; /* Reduzi o espaçamento */
+    max-width: 800px;
+    margin: 0 auto;
+
+    margin-top: -130px; /* 👈 sobe manualmente */
 }
 
-.integracao-header h3 {
+.pdv-integracao__content h2 {
     color: white;
-    font-size: 2.5rem;
+    font-size: clamp(2rem, 4vw, 2.5rem);
-    font-weight: 500;
+    font-weight: 400;
     margin-bottom: 20px;
-    max-width: 600px;
 }
 
-.integracao-header p {
+.pdv-integracao__content p {
     color: rgba(255, 255, 255, 0.9);
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     line-height: 1.6;
-    margin: 0;
+    margin-bottom: 40px;
-    max-width: 700px;
 }
 
-/* Botões dos apps mais próximos da descrição */
+.pdv-integracao__apps {
-.integracao-apps {
     display: flex;
     justify-content: center;
     gap: 20px;
-    margin-top: 0; /* Removi o margin-top: auto */
+    flex-wrap: wrap;
-    padding-top: 20px; /* Reduzi o padding-top */
 }
 
 .app-button {
@@ -700,16 +637,6 @@
     width: auto;
 }
 
-/* Ajustar o layout quando for integração para ocupar toda a largura */
-.pdv-detailed__content.integracao-layout {
-    display: block;
-}
-
-.pdv-detailed__content.integracao-layout .pdv-detailed__text.integracao-background {
-    width: 100%;
-    max-width: none;
-}
-
 /* Utility Classes */
 .fade-up {
     opacity: 0;
@@ -732,9 +659,10 @@
         gap: 50px;
     }
 
-    .pdv-detailed__content {
+    .pdv-section__container,
+    .pdv-section__container.reverse {
         flex-direction: column;
-        gap: 40px;
+        gap: 50px;
     }
 }
 
@@ -756,6 +684,11 @@
         text-align: center;
     }
 
+    .pdv-features-section,
+    .pdv-section {
+        padding: 80px 20px;
+    }
+
     .pdv-features__grid {
         grid-template-columns: 1fr;
         gap: 20px;
@@ -767,43 +700,15 @@
         padding: 25px;
     }
 
-    .pdv-detailed__tabs {
+    .pdv-integracao__background {
-        flex-direction: column;
+        min-height: 500px;
-        align-items: center;
+        padding: 80px 20px;
     }
 
-    .tab-button {
+    .pdv-integracao__apps {
-        width: 200px;
-    }
-
-    .pdv-detailed__text.integracao-background {
-        padding: 40px 20px;
-        min-height: 350px; /* Reduzi para mobile */
-    }
-    
-    .integracao-header {
-        margin-bottom: 25px; /* Menos espaço no mobile */
-    }
-    
-    .integracao-header h3 {
-        font-size: 2rem;
-        color: white;
-    }
-    
-    .integracao-header p {
-        font-size: 1.1rem;
-        color: rgba(255, 255, 255, 0.9);
-    }
-    
-    .integracao-apps {
         flex-direction: column;
         align-items: center;
         gap: 15px;
-        padding-top: 15px; /* Menos espaço no mobile */
-    }
-    
-    .app-button img {
-        height: 45px;
     }
 }
 
@@ -812,6 +717,11 @@
         padding: 80px 15px 40px;
     }
 
+    .pdv-features-section,
+    .pdv-section {
+        padding: 60px 15px;
+    }
+
     .pdv-feature-card {
         padding: 20px;
     }
@@ -821,36 +731,13 @@
         border-radius: 20px;
     }
 
-    .section-header,
+    .pdv-integracao__background {
-    .pdv-detailed__header {
+        min-height: 400px;
-        margin-bottom: 40px;
+        padding: 60px 15px;
-    }
-
-    .pdv-detailed__text.integracao-background {
-        padding: 30px 15px;
-        min-height: 300px; /* Ainda menor para mobile pequeno */
-    }
-    
-    .integracao-header {
-        margin-bottom: 20px; /* Ainda menos espaço */
-    }
-    
-    .integracao-header h3 {
-        font-size: 1.8rem;
-        color: white;
-    }
-    
-    .integracao-header p {
-        font-size: 1rem;
-        color: rgba(255, 255, 255, 0.9);
-    }
-    
-    .integracao-apps {
-        padding-top: 10px; /* Mínimo espaço no mobile pequeno */
     }
 
     .app-button img {
-        height: 40px;
+        height: 45px;
     }
 }
 </style>

src/routes/pix/+page.svelte

@@ -472,7 +472,7 @@ func main ( ) {
    .pix-instant {
     width: 100%;
     background: #fff;
-        padding: 160px 20px 60px;
+    padding: 220px 20px 120px; /* Aumentado de 160px para 220px no topo */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -597,11 +597,11 @@ func main ( ) {
     left: 50%;
     width: 132px;
     height: 160px;
-    transform: translate(-50%, -50%); /* Mudança aqui: de -54% para -50% */
+    transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center; /* Adicione esta linha */
+    justify-content: center;
     pointer-events: none;
 }
 
@@ -700,7 +700,7 @@ func main ( ) {
     .pix-automatico {
         width: 100%;
         background: #fff;
-        padding: clamp(34px, 7vw, 90px) 0 clamp(24px, 5vw, 70px) 0;
+        padding: clamp(120px, 10vw, 160px) 0 clamp(120px, 10vw, 160px) 0; /* Aumentado significativamente */
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -825,7 +825,7 @@ func main ( ) {
     max-width: 960px;
     display: flex;
     gap: clamp(28px, 6vw, 70px);
-    margin-top: clamp(40px, 8vw, 80px);
+    margin-top: clamp(220px, 8vw, 80px);
     align-items: unset;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -924,7 +924,7 @@ func main ( ) {
 
     /* Payment Links Styles */
     .payment-links {
-        padding: 60px 20px;
+        padding: clamp(220px, 10vw, 160px) 20px; /* Aumentado significativamente */
         background: #000;
     }
 
@@ -961,7 +961,7 @@ func main ( ) {
 
     /* Como Funciona Section */
     .como-funciona-section {
-        padding: 80px 20px;
+        padding: clamp(220px, 10vw, 160px) 20px; /* Aumentado significativamente */
         background: #000;
         color: white;
     }
@@ -1050,243 +1050,6 @@ func main ( ) {
         background-clip: text;
     }
 
-    /* Use Case Styles */
-    .use-case-section {
-        padding: 80px 20px;
-        background: #fff;
-    }
-
-    .use-case-container {
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-
-    .use-case-header {
-        text-align: center;
-        margin-bottom: 60px;
-    }
-
-    .use-case-header h2 {
-        font-size: clamp(2rem, 4vw, 2.5rem);
-        font-weight: 400;
-        color: #111;
-        margin-bottom: 40px;
-    }
-
-    .use-case-tabs {
-        display: flex;
-        gap: 10px;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .tab-button {
-        padding: 10px 20px;
-        border: 1px solid #ddd;
-        background: #fff;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: all 0.2s;
-        font-size: 0.9rem;
-    }
-
-    .tab-button:hover,
-    .tab-button.active {
-        background: #0000ff;
-        color: white;
-        border-color: #0000ff;
-    }
-
-    .use-case-content {
-        display: flex;
-        gap: 60px;
-        align-items: center;
-    }
-
-    .use-case-image {
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .placeholder-image {
-        width: 200px;
-        height: 200px;
-        background: #f5f5f5;
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #999;
-    }
-
-    .use-case-text-block {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    .use-case-text h2 {
-        font-size: clamp(1.5rem, 3vw, 2rem);
-        font-weight: 400;
-        color: #111;
-        margin-bottom: 16px;
-    }
-
-    .use-case-text p {
-        color: #444;
-        font-size: 1.1rem;
-        line-height: 1.6;
-    }
-
-    .case-link {
-        font-size: 2rem;
-        color: #0000ff;
-        text-decoration: none;
-    }
-
-    /* API Section Styles */
-    .pix-api-section {
-        padding: 60px 20px;
-        background: #000;
-        color: #fff;
-    }
-
-    .pix-api__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 1200px;
-        margin: 0 auto;
-        gap: 230px;
-    }
-
-    .pix-api__text h2 {
-        margin-bottom: 30px;
-        font-weight: 400;
-        color: white;
-        font-size: clamp(2rem, 4vw, 2.5rem);
-    }
-
-    .typewriter-block {
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 16px;
-        padding: 20px;
-        position: relative;
-        width: 100%;
-        overflow-x: hidden;
-        border: 2px rgba(255, 255, 255, 0.06) solid;
-        min-height: 300px;
-        font-size: 13px;
-        line-height: 1.6;
-        flex: 1;
-    }
-
-    .typewriter-lines {
-        position: absolute;
-        left: 0;
-        top: 20px;
-        width: 45px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        color: #aaa;
-        user-select: none;
-        font-size: 13px;
-        line-height: 1.6;
-        pointer-events: none;
-        font-weight: normal;
-    }
-
-    .typewriter-lines span {
-        height: 21px;
-        line-height: 1.6;
-        display: block;
-        padding-right: 10px;
-    }
-
-    .language-go {
-        background: transparent !important;
-        color: #ffffff;
-        font-size: 13px;
-        line-height: 1.6;
-        margin-left: 45px;
-    }
-
-    /* FAQ Styles */
-    .faq-section {
-        padding: 80px 20px;
-        background: #f9f9f9;
-    }
-
-    .faq-container {
-        max-width: 800px;
-        margin: 0 auto;
-    }
-
-    .faq-container h2 {
-        text-align: center;
-        font-size: clamp(2rem, 4vw, 2.5rem);
-        font-weight: 400;
-        color: #111;
-        margin-bottom: 60px;
-    }
-
-    .faq-list {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-    }
-
-    .faq-item {
-        background: white;
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .faq-question {
-        width: 100%;
-        padding: 24px;
-        background: none;
-        border: none;
-        text-align: left;
-        font-size: 1.1rem;
-        font-weight: 500;
-        color: #111;
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        transition: background 0.2s;
-    }
-
-    .faq-question:hover {
-        background: #f8f9fa;
-    }
-
-    .faq-icon {
-        transition: transform 0.2s;
-        flex-shrink: 0;
-        margin-left: 16px;
-    }
-
-    .faq-icon.rotate-180 {
-        transform: rotate(180deg);
-    }
-
-    .faq-answer {
-        padding: 0 24px 24px;
-        color: #666;
-        line-height: 1.6;
-    }
-
-    .faq-answer p {
-        margin: 0;
-    }
-
     /* Utility Classes */
     .fade-up {
         opacity: 0;
@@ -1345,11 +1108,6 @@ func main ( ) {
             gap: 40px;
         }
 
-        .pix-api__container {
-            flex-direction: column;
-            gap: 40px;
-        }
-
         .use-case-content {
             flex-direction: column;
             gap: 40px;
@@ -1378,7 +1136,7 @@ func main ( ) {
     @media (max-width: 600px) {
         .pix-instant {
             gap: 34px;
-            padding: 120px 20px 0;
+            padding: 120px 20px 80px; /* Ajustado para mobile */
         }
 
         .pix-instant__main {
@@ -1403,7 +1161,7 @@ func main ( ) {
 
         .pix-automatico {
             gap: 48px;
-            padding: 60px 20px;
+            padding: 80px 20px; /* Ajustado para mobile */
         }
 
         .pix-automatico__top,
@@ -1420,14 +1178,12 @@ func main ( ) {
             padding: 12px 0;
         }
 
-        .use-case-tabs {
+        .payment-links {
-            flex-direction: column;
+            padding: 80px 20px; /* Ajustado para mobile */
-            align-items: center;
         }
 
-        .tab-button {
+        .como-funciona-section {
-            width: 200px;
+            padding: 80px 20px; /* Ajustado para mobile */
         }
     }
 </style>
-                

src/routes/politicas-e-termos/+page.svelte

@@ -67,7 +67,6 @@
             throw new Error('Política não encontrada');
         }
 
-        // ✅ Só fazer fetch no browser
         if (!browser) {
             content = `
                 <h1>${policy.title}</h1>
@@ -92,8 +91,9 @@
         content = `
             <h1>${policies[policyKey]?.title || 'Documento'}</h1>
             <p><em>Conteúdo em atualização...</em></p>
-            <p>Para dúvidas, entre em contato: 
+                <p>Não foi possível carregar o conteúdo deste documento no momento.</p>
-            <a href="mailto:suporte@basspago.com.br">suporte@basspago.com.br</a></p>
+                <p>Por favor, tente novamente mais tarde ou entre em contato conosco através do email: 
+                <a href="mailto:suporte@basspago.com">suporte@basspago.com</a></p>
         `;
     } finally {
         loading = false;

src/routes/sobre/+page.svelte

@@ -5,6 +5,7 @@
 
     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-verde.png';
     import biggestLogoBasspago from '$lib/assets/biggest-logo-basspago.svg';
     import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
@@ -19,8 +20,8 @@
             description: 'Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.'
         },
         {
-            title: 'Licença de Bandeira',
+            title: 'Prevenção',
-            description: 'Somos licenciados como BIN Sponsor Visa, o que nos permite emitir cartões com segurança, agilidade e total conformidade regulatória.'
+            description: 'Tecnologia avançada de análise e prevenção a fraudes, farantindo segurança e conformidade.'
         }
     ];
 
@@ -103,7 +104,7 @@
             </p>
         </div>
         <div class="about-mission__visual fade-up lg:flex xs:hidden">
-            <img src={elementosDigitais} alt="Interface financeira Bass Pago" />
+            <img src={iphonePixMockup} alt="Interface financeira Bass Pago" />
         </div>
     </div>
 </section>