diff --git a/src/app.html b/src/app.html index d2068a3..3a27ac5 100644 --- a/src/app.html +++ b/src/app.html @@ -5,11 +5,9 @@ - - - - - - - - - + \ No newline at end of file diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index 77f9fb0..02a754d 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -2,7 +2,8 @@ import { onMount } from 'svelte'; import { fly, fade } from 'svelte/transition'; import { ArrowRight } from 'lucide-svelte'; - import { goto } from '$app/navigation'; + import { goto } from '$app/navigation'; + import Modal from '$lib/components/Modal.svelte'; import backgroundSection1 from '$lib/assets/backgroundSection2.png'; @@ -21,6 +22,7 @@ let heroSection; let currentWordIndex = 0; let isTransitioning = false; + let showModal = false; const words = ['Escalar', 'Evoluir', 'Empresas']; @@ -53,6 +55,14 @@ clearInterval(wordInterval); }; }); + + function openCreateAccountModal() { + showModal = true; + } + + function closeModal() { + showModal = false; + }
{#if mounted}

-
- Infraestrutura de -
-
- pagamento para -
+ class="text-white + text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl + font-black + leading-tight + mb-6 sm:mb-8" + in:fly={{ y: 30, duration: 800 }} + > +
+ Infraestrutura de +
+
+ pagamento para +
-
- expandir seus negócios -
-

+
+ expandir seus negócios +
+ {/if} @@ -125,71 +135,72 @@

{/if} - {#if mounted} + {#if mounted}
- + on:click={openCreateAccountModal} + class="relative group + inline-flex items-center justify-center gap-3 + rounded-2xl + px-8 py-3 sm:px-12 sm:py-4 + bg-white text-black + text-sm sm:text-base + font-semibold + overflow-hidden + transition-all duration-300 + hover:shadow-2xl hover:scale-105 + w-full sm:w-auto" + > + + + Abrir conta + + +
{/if} {#if mounted} -
-
-
- - {#each logos as logo} - {logo.alt} - {/each} - - - {#each logos as logo} - {logo.alt} - {/each} - - - {#each logos as logo} - {logo.alt} - {/each} +
+
+
+ {#each logos as logo} + {logo.alt} + {/each} + + {#each logos as logo} + {logo.alt} + {/each} + + {#each logos as logo} + {logo.alt} + {/each} +
-
-{/if} + {/if}
+ + + \ No newline at end of file diff --git a/src/routes/centro-suporte/+page.svelte b/src/routes/centro-suporte/+page.svelte index f596b2e..71b11d4 100644 --- a/src/routes/centro-suporte/+page.svelte +++ b/src/routes/centro-suporte/+page.svelte @@ -18,25 +18,27 @@ schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)', contact: 'Chat on-line', href: 'mailto:suporte@basspago.com', - ariaLabel: 'Enviar email para suporte@basspago.com' + ariaLabel: 'Chat Online Bass Pago', + isChat: true }, { title: 'Ouvidoria', description: 'Não teve solução no atendimento? Registre sua reclamação ou denúncia aqui:', schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)', contact: 'ouvidoria@basspago.com', - href: 'mailto:ouvidoria@basspago.com', - ariaLabel: 'Chat Online Bass Pago' + href: 'mailto:ouvidoria@basspago.com', + ariaLabel: 'Enviar email para ouvidoria@basspago.com' }, { - 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', - contactEmail: 'comercial@basspago.com', - href: 'mailto:comercial@basspago.com', - ariaLabel: 'Enviar email para comercial@basspago.com' - } + 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', + contactEmail: 'comercial@basspago.com', + href: 'mailto:comercial@basspago.com', + ariaLabel: 'Enviar email para comercial@basspago.com', + hasChatAndEmail: true + } ]; const socialMedia = [ @@ -105,6 +107,12 @@ openFaq = openFaq === index ? null : index; } + function openJivoChat() { + if (typeof window !== 'undefined' && window.jivo_api) { + window.jivo_api.open(); + } + } + onMount(() => { const observer = new IntersectionObserver( (entries) => { @@ -132,9 +140,7 @@
-
-

Precisa de ajuda?

@@ -155,47 +161,61 @@
-
-
{#each contactCards as card} -
-
-

{card.title}

-

{card.description}

-

{card.schedule}

- - {#if card.contactEmail} - -
- {card.contact} - - {card.contactEmail} - +
+
+

{card.title}

+

{card.description}

+

{card.schedule}

+ + {#if card.hasChatAndEmail} +
+
+ + ou + + {card.contactEmail} + +
+
+ {:else if card.isChat} + + {:else} + + {card.contact} + + {/if} +
- {:else} - - - {card.contact} - - {/if} -
-
-{/each} + {/each}
-
-

Perguntas frequentes

@@ -264,7 +283,43 @@ --p-minus: 16px; } -/* Contact Section - Main Container */ +.contact-card__dual-options { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-start; +} + +.contact-card__separator { + font-family: var(--font-family-space-grotesk); + font-weight: 400; + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + margin: 0; + align-self: flex-start; +} + +.contact-card__dual-options .contact-card__chat-button { + background: none; + border: none; + padding: 0; + font-family: var(--font-family-space-grotesk); + font-weight: 600; + font-size: 16px; + line-height: 1; + color: var(--color-primary); + letter-spacing: -0.12px; + margin: 0; + text-decoration: none; + transition: opacity 0.3s ease; + cursor: pointer; + text-align: left; +} + +.contact-card__dual-options .contact-card__chat-button:hover { + opacity: 0.8; +} + .contact-section { padding: 60px 20px 60px; background-color: var(--color-dark); @@ -275,7 +330,6 @@ gap: 45px; } -/* Contact Hero Section */ .contact-hero { display: flex; flex-direction: column; @@ -287,7 +341,6 @@ padding-top: 100px; } -/* Contact Hero Content */ .contact-hero__content { display: flex; flex-direction: column; @@ -298,7 +351,6 @@ height: 100%; } -/* Contact Hero Title */ .contact-hero__title { font-family: var(--font-family-space-grotesk); font-weight: 400; @@ -309,7 +361,6 @@ font-size: clamp(2rem, 5vw, 3.5rem); } -/* Contact Hero Subtitle */ .contact-hero__subtitle { font-family: var(--font-family-space-grotesk); font-weight: 400; @@ -321,7 +372,6 @@ font-size: 1.1rem; } -/* Contact Hero Background */ .contact-hero__background { width: 100%; height: 100%; @@ -346,7 +396,6 @@ display: block; } -/* Contact Cards Container */ .contact-cards { display: flex; flex-direction: column; @@ -356,14 +405,12 @@ margin: 0 auto; } -/* Contact Cards Row */ .contact-cards__row { display: flex; gap: 15px; width: 100%; } -/* Contact Card */ .contact-card { background-color: rgba(255, 255, 255, 0.04); border-radius: var(--border-radius-md); @@ -375,7 +422,6 @@ min-height: 222px; } -/* Contact Card Content */ .contact-card__content { display: flex; flex-direction: column; @@ -388,7 +434,6 @@ font-size: var(--p-minus); } -/* Contact Card Title */ .contact-card__title { font-family: var(--font-family-space-grotesk); font-weight: 500; @@ -399,7 +444,6 @@ white-space: nowrap; } -/* Contact Card Description */ .contact-card__description { font-family: var(--font-family-space-grotesk); font-weight: 400; @@ -409,7 +453,6 @@ margin: 0; } -/* Contact Card Schedule */ .contact-card__schedule { font-family: var(--font-family-space-grotesk); font-weight: 400; @@ -428,18 +471,16 @@ 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); + color: var(--color-primary); letter-spacing: -0.12px; margin: 0; } -/* Contact Card Contact Info */ .contact-card__contact { font-family: var(--font-family-space-grotesk); font-weight: 600; @@ -457,14 +498,34 @@ opacity: 0.8; } -/* Social Media Card */ +.contact-card__chat-button { + background: none; + border: none; + padding: 0; + font-family: var(--font-family-space-grotesk); + font-weight: 600; + font-size: 16px; + line-height: 1; + color: var(--color-primary); + letter-spacing: -0.12px; + margin: 0; + text-decoration: none; + transition: opacity 0.3s ease; + white-space: nowrap; + cursor: pointer; + text-align: left; +} + +.contact-card__chat-button:hover { + opacity: 0.8; +} + .contact-card--social { width: 100%; min-height: auto; padding: 30px; } -/* Social Media Icons */ .contact-card__social-icons { display: flex; gap: 15px; @@ -484,7 +545,6 @@ opacity: 0.8; } -/* FAQ Section */ .faq-section { background-color: var(--color-dark); padding: 80px 20px; @@ -524,12 +584,12 @@ .faq-question { width: 100%; - padding: 24px 25px; /* Aumentado de 20px para 24px */ + padding: 24px 25px; background: none; border: none; text-align: left; font-family: var(--font-family-space-grotesk); - font-size: 16px; /* Padronizado em 16px */ + font-size: 16px; font-weight: 500; color: var(--color-white); cursor: pointer; @@ -557,20 +617,19 @@ } .faq-answer { - padding: 20px 25px 24px; /* Mudança: adicionado padding-top de 20px */ + padding: 20px 25px 24px; overflow: hidden; animation: slideDown 0.3s ease-out forwards; } .faq-answer p { font-family: var(--font-family-space-grotesk); - font-size: 16px; /* Padronizado: de 14px para 16px */ - line-height: 1.6; /* Aumentado de 1.5 para 1.6 */ + font-size: 16px; + line-height: 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; @@ -579,29 +638,11 @@ } to { opacity: 1; - max-height: 400px; /* Aumentado de 300px para 400px */ + max-height: 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; } @@ -618,7 +659,6 @@ width: 100%; } -/* Fade animations */ .fade-up, .fade-right, .fade-left { opacity: 0; transform: translateY(30px); @@ -633,20 +673,6 @@ transform: translateX(-30px); } -@keyframes slideDown { - from { - opacity: 0; - max-height: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - max-height: 300px; - transform: translateY(0); - } -} - -/* Responsive Design */ @media (min-width: 1025px) { .contact-hero { padding-top: 200px; @@ -674,7 +700,6 @@ } } -/* Tablet */ @media (max-width: 1024px) { .contact-hero { max-width: 100%; @@ -698,7 +723,6 @@ } } -/* Mobile */ @media (max-width: 768px) { .contact-hero { gap: 30px; @@ -754,15 +778,25 @@ display: block; } - /* FAQ specific mobile adjustments */ .faq-question { - padding: 15px 20px; - font-size: 15px; + padding: 20px; + font-size: 16px; } + .faq-answer { - padding: 0 20px 15px; + padding: 16px 20px 20px; } + .faq-answer p { + font-size: 15px; + line-height: 1.6; + } + + .contact-card__dual-options { + gap: 6px; + } + + .contact-card__separator { font-size: 13px; } } diff --git a/src/routes/conta-digital/+page.svelte b/src/routes/conta-digital/+page.svelte index 2d04c0e..38544f2 100644 --- a/src/routes/conta-digital/+page.svelte +++ b/src/routes/conta-digital/+page.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import Header from '$lib/components/Header.svelte'; import Footer from '$lib/components/Footer.svelte'; + import Modal from '$lib/components/Modal.svelte'; import phoneCard from '$lib/assets/phone-card.png'; import pixETedAzul from '$lib/assets/pix-e-ted-azul.svg'; @@ -18,6 +19,8 @@ import approvalFlowMockup from '$lib/assets/lock-icon.svg'; import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg'; + let showModal = false; + const features = [ { icon: pixETedAzul, label: 'Pix' }, { icon: pagamentosAzul, label: 'Pagamentos' }, @@ -29,6 +32,14 @@ { icon: gestaoUsuarios, label: 'Gestão de\nusuários' } ]; + function openCreateAccountModal() { + showModal = true; + } + + function closeModal() { + showModal = false; + } + const pixFeatures = [ 'Transferência Pix', 'Pix saque', @@ -77,16 +88,17 @@
-
-

Você no controle do
seu dinheiro

Fácil, rápido e sem complicações.

- - Abrir conta → - +
@@ -95,27 +107,27 @@

Você no controle do
seu dinheiro

-
Celular com cartão

Fácil, rápido e sem complicações.

- - Abrir conta → - +
-

Tudo que você precisa de uma conta digital.

-
{#each features.slice(0, 4) as feature} @@ -141,10 +153,8 @@
-
-

Todos os tipos de Pix em um só lugar.

@@ -320,6 +330,12 @@
+ + +