diff --git a/css/styles.css b/css/styles.css index f43b703..2d82a7e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,172 +1,191 @@ -/* Reset de estilos */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - +/* Estilos gerais */ body { font-family: 'Taviraj', serif; - background-color: #f8f8f8; - color: #333; + background-color: #121212; + color: #fff; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Yeseva One', serif; } .container { - max-width: 960px; + max-width: 1200px; margin: 0 auto; padding: 2rem; } -/* Hero Section */ -.hero { - background-color: #222; - color: #fff; +/* Seção de preços */ +.pricing-section { padding: 4rem 0; +} + +.pricing-header { text-align: center; + margin-bottom: 3rem; } -.hero h2 { - font-family: 'Yeseva One', serif; +.pricing-header h2 { font-size: 2.5rem; margin-bottom: 1rem; } -.hero p { - font-size: 1.2rem; - line-height: 1.6; - margin-bottom: 2rem; -} - -/* Toggle Button */ -.toggle { +/* Toggle switch */ +.toggle-switch { display: flex; align-items: center; justify-content: center; - margin-bottom: 3rem; + margin-bottom: 2rem; } -.toggle span { - font-size: 1rem; - margin: 0 1rem; +.toggle-switch span { + font-size: 0.9rem; + margin: 0 0.5rem; } -.toggle button { - background-color: #ccc; - border: none; - border-radius: 2rem; - width: 4rem; - height: 2rem; +/* The switch - the box around the slider */ +.switch { position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; } -.toggle-slider { - background-color: #fff; - border-radius: 50%; - width: 1.5rem; - height: 1.5rem; +.slider:before { position: absolute; - left: 0.25rem; - top: 0.25rem; - transition: left 0.3s ease; + content: ""; + height: 16px; + width: 16px; + left: 2px; + bottom: 2px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #8b5cf6; } -.toggle button[aria-checked="true"] .toggle-slider { - left: 2.25rem; +input:focus + .slider { + box-shadow: 0 0 1px #8b5cf6; } -/* Plans Section */ -.plans { +input:checked + .slider:before { + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +/* Planos de assinatura */ +.pricing-plans { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .plan { - background-color: #fff; - border-radius: 0.5rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border: 1px solid #333; padding: 2rem; - text-align: center; + border-radius: 8px; + background-color: #27272a; + transition: border-color 0.3s ease; +} + +.plan:hover { + border-color: #8b5cf6; } .plan h3 { - font-family: 'Yeseva One', serif; - font-size: 1.5rem; + font-size: 1.8rem; margin-bottom: 1rem; } -.price { +.plan .price { display: flex; align-items: baseline; - justify-content: center; - margin-bottom: 1.5rem; + font-size: 2rem; + margin-bottom: 1rem; } -.price-value { - font-size: 2rem; +.plan .price .value { font-weight: bold; + margin-right: 0.5rem; } -.price-period { - font-size: 1rem; - color: #666; - margin-left: 0.5rem; +.plan .annual-price { + font-size: 0.9rem; + color: #888; + margin-bottom: 1.5rem; } -.features { +.plan ul { list-style: none; + padding: 0; margin-bottom: 2rem; } -.features li { - font-size: 1rem; - line-height: 1.6; - text-align: left; +.plan ul li { margin-bottom: 0.5rem; + color: #a1a1aa; + font-size: 0.9rem; + display: flex; + align-items: center; } -.features .unavailable { - color: #999; +.plan ul li i { + margin-right: 0.5rem; + font-size: 1.2rem; } -.features li::before { - content: "\2713"; /* Checkmark symbol */ - color: #007bff; - margin-right: 0.5rem; +.plan ul li .check { + color: #8b5cf6; } -.features .unavailable::before { - content: "\2717"; /* X symbol */ - color: #999; +.plan ul li .x { + color: #ef4444; } -.subscribe-button { - background-color: #007bff; +.plan .subscribe-button { + background-color: #8b5cf6; color: #fff; border: none; - border-radius: 0.3rem; padding: 0.8rem 1.5rem; + border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; + width: 100%; } -.subscribe-button:hover { - background-color: #0069d9; -} - -.subscribe-button a { - color: inherit; - text-decoration: none; -} - -/* Media Queries */ -@media (max-width: 768px) { - .hero h2 { - font-size: 2rem; - } - - .plans { - grid-template-columns: 1fr; - } +.plan .subscribe-button:hover { + background-color: #a855f7; } \ No newline at end of file diff --git a/index.html b/index.html index 378f9be..2257670 100644 --- a/index.html +++ b/index.html @@ -1,154 +1,66 @@ - - - Escolha seu plano ideal - - - - + + + Planos de Assinatura + - -
-
-
-
-

Escolha seu plano ideal

-

- Encontre o plano que melhor se adapta às suas necessidades. -

-
-
- Mensal - - Anual -
-
-
-
-
-

Plano Newton

-
- R$19,90 - /mês -
-
    -
  • - - - - Acesso a todas as aulas já gravadas -
    • -
  • - - - - Acesso às listas de exercícios -
    • -
  • - - - - Acesso aos materiais de estudo -
    • -
  • - - - - - Acesso ao Grupo de Dúvidas do WhatsApp -
    • -
  • - - - - - Acesso ao Drive de +1TB do Curso -
    • -
  • - - - - - Atendimento personalizado -
    • -
  • - - - - - Lives mensais com os alunos -
    • -
- -
-
-
-
-

Plano Einstein

-
- R$29,90 - /mês -
-
    -
  • - - - - Acesso a todas as aulas já gravadas -
    • -
  • - - - - Acesso às listas de exercícios -
    • -
  • - - - - Acesso aos materiais de estudo -
    • -
  • - - - - Acesso ao Grupo de Dúvidas do WhatsApp -
    • -
  • - - - - Acesso ao Drive de +1TB do Curso -
    • -
  • - - - - Atendimento personalizado -
    • -
  • - - - - Lives mensais com os alunos -
    • -
- -
-
-
+ +
+
+
+

Escolha seu plano ideal

+

Encontre o plano que melhor se adapta às suas necessidades.

+
+ Mensal + + Anual
-
- +
+
+
+

Plano Newton

+
+ 19,90 + /mês +
+

Equivalente a R$19,90/mês

+
    +
  • Acesso a todas as aulas já gravadas
    • +
  • Acesso às listas de exercícios
    • +
  • Acesso aos materiais de estudo
    • +
  • Acesso ao Grupo de Dúvidas do WhatsApp
    • +
  • Acesso ao Drive de +1TB do Curso
    • +
  • Atendimento personalizado
    • +
  • Lives mensais com os alunos
    • +
+ +
+
+

Plano Einstein

+
+ 29,90 + /mês +
+

Equivalente a R$29,90/mês

+
    +
  • Acesso a todas as aulas já gravadas
    • +
  • Acesso às listas de exercícios
    • +
  • Acesso aos materiais de estudo
    • +
  • Acesso ao Grupo de Dúvidas do WhatsApp
    • +
  • Acesso ao Drive de +1TB do Curso
    • +
  • Atendimento personalizado
    • +
  • Lives mensais com os alunos
    • +
+ +
+
+ +
+ - - + \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 893f8f1..81ba753 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,27 +1,31 @@ -const switchElement = document.querySelector('.switch input[type="checkbox"]'); -const pricesNewton = document.querySelectorAll('.price')[0]; -const pricesEinstein = document.querySelectorAll('.price')[1]; -const monthlyPrices = [19.90, 29.90]; -const annualPrices = [199.90, 299.90]; +const planSwitch = document.getElementById('planSwitch'); +const plans = document.querySelectorAll('.plan'); -switchElement.addEventListener('change', () => { - const isChecked = switchElement.checked; - const newPrices = isChecked ? annualPrices : monthlyPrices; - const priceSuffix = isChecked ? '/ano' : '/mês'; +planSwitch.addEventListener('change', () => { + plans.forEach(plan => { + const planType = plan.dataset.plan; + const priceElement = plan.querySelector('.price .value'); + const periodElement = plan.querySelector('.price .period'); + const annualPriceElement = plan.querySelector('.annual-price'); - pricesNewton.textContent = `R$${newPrices[0].toFixed(2)}`; - pricesEinstein.textContent = `R$${newPrices[1].toFixed(2)}`; - - document.querySelectorAll('.text-gray-300').forEach((span, index) => { - span.textContent = priceSuffix; - if (index === 0 && isChecked) { - span.textContent += ' (Equivalente a R$19,90/mês)'; - } else if (index === 1 && isChecked) { - span.textContent += ' (Equivalente a R$29,90/mês)'; + if (planSwitch.checked) { + // Plano anual + if (planType === 'newton') { + priceElement.textContent = '199,90'; + } else if (planType === 'einstein') { + priceElement.textContent = '299,90'; + } + periodElement.textContent = '/ano'; + annualPriceElement.style.display = 'block'; + } else { + // Plano mensal + if (planType === 'newton') { + priceElement.textContent = '19,90'; + } else if (planType === 'einstein') { + priceElement.textContent = '29,90'; + } + periodElement.textContent = '/mês'; + annualPriceElement.style.display = 'none'; } }); - - const slider = document.querySelector('.slider'); - slider.classList.toggle('translate-x-6', isChecked); - slider.classList.toggle('translate-x-1', !isChecked); -}); +}); \ No newline at end of file