diff --git a/css/styles.css b/css/styles.css index 0d6edce..f43b703 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,145 +1,172 @@ -body { - font-family: 'Roboto', sans-serif; - background-color: #f4f4f4; - margin: 0; - padding: 0; +/* Reset de estilos */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; } -.pricing-section { - text-align: center; - padding: 50px 20px; - background-color: #fff; +body { + font-family: 'Taviraj', serif; + background-color: #f8f8f8; + color: #333; } -.pricing-section h1 { - margin-bottom: 30px; - color: #333; - font-size: 2em; +.container { + max-width: 960px; + margin: 0 auto; + padding: 2rem; } -.toggle-container { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 20px; +/* Hero Section */ +.hero { + background-color: #222; + color: #fff; + padding: 4rem 0; + text-align: center; } -.switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; +.hero h2 { + font-family: 'Yeseva One', serif; + font-size: 2.5rem; + margin-bottom: 1rem; } -.switch input { - opacity: 0; - width: 0; - height: 0; +.hero p { + font-size: 1.2rem; + line-height: 1.6; + margin-bottom: 2rem; } -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - transition: .4s; - border-radius: 34px; +/* Toggle Button */ +.toggle { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 3rem; } -.slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - transition: .4s; - border-radius: 50%; +.toggle span { + font-size: 1rem; + margin: 0 1rem; } -input:checked + .slider { - background-color: #007bff; +.toggle button { + background-color: #ccc; + border: none; + border-radius: 2rem; + width: 4rem; + height: 2rem; + position: relative; + cursor: pointer; } -input:checked + .slider:before { - transform: translateX(26px); +.toggle-slider { + background-color: #fff; + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; + position: absolute; + left: 0.25rem; + top: 0.25rem; + transition: left 0.3s ease; } -.toggle-label { - margin-left: 10px; - font-size: 1.2em; - color: #333; +.toggle button[aria-checked="true"] .toggle-slider { + left: 2.25rem; } -.pricing-cards { - display: flex; - justify-content: center; - gap: 20px; - flex-wrap: wrap; +/* Plans Section */ +.plans { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; } -.card { - background-color: #f9f9f9; - border: 1px solid #ddd; - border-radius: 10px; - padding: 20px; - width: 300px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: transform 0.3s; +.plan { + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 2rem; + text-align: center; } -.card:hover { - transform: translateY(-10px); +.plan h3 { + font-family: 'Yeseva One', serif; + font-size: 1.5rem; + margin-bottom: 1rem; } -.card h2 { - margin-top: 0; - color: #555; - font-size: 1.5em; +.price { + display: flex; + align-items: baseline; + justify-content: center; + margin-bottom: 1.5rem; } -.price { - font-size: 24px; - color: #333; - margin: 10px 0; +.price-value { + font-size: 2rem; + font-weight: bold; } -.annual-price { - color: #777; - font-size: 20px; +.price-period { + font-size: 1rem; + color: #666; + margin-left: 0.5rem; } .features { - list-style-type: none; - padding: 0; - text-align: left; - color: #555; + list-style: none; + margin-bottom: 2rem; } .features li { - margin: 10px 0; + font-size: 1rem; + line-height: 1.6; + text-align: left; + margin-bottom: 0.5rem; +} + +.features .unavailable { + color: #999; } -.features i { - color: #28a745; - margin-right: 10px; +.features li::before { + content: "\2713"; /* Checkmark symbol */ + color: #007bff; + margin-right: 0.5rem; } -.btn { - display: inline-block; - padding: 10px 20px; - color: #fff; - background-color: #007bff; - border-radius: 5px; - text-decoration: none; - margin-top: 20px; - transition: background-color 0.3s; +.features .unavailable::before { + content: "\2717"; /* X symbol */ + color: #999; } -.btn:hover { - background-color: #0056b3; +.subscribe-button { + background-color: #007bff; + color: #fff; + border: none; + border-radius: 0.3rem; + padding: 0.8rem 1.5rem; + cursor: pointer; + transition: background-color 0.3s ease; } + +.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; + } +} \ No newline at end of file diff --git a/index.html b/index.html index b265809..3d23f8a 100644 --- a/index.html +++ b/index.html @@ -1,52 +1,71 @@ - + - - - Planos e Preços - - + + + Escolha seu plano ideal + -
-

Planos para todos os níveis de ambição

-
- - Anual +
+
+
+

Escolha seu plano ideal

+

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

+
+ Mensal + + Anual
-
-
-

Plano Newton

-

R$19,90/mês

-

R$199,90/ano (R$16,66/mês)

-
    -
  • Acesso às aulas já gravadas
  • -
  • Acesso às listas de exercícios
  • -
  • Acesso aos materiais de estudo
  • -
- Assinar Mensal - Assinar Anual +
+
+
+
+

Plano Newton

+
+ R$19,90 + /mês
-
-

Plano Einstein

-

R$29,90/mês

-

R$299,90/ano (R$24,99/mês)

-
    -
  • Tudo do plano Newton
  • -
  • Acesso ao Grupo de Dúvidas do WhatsApp
  • -
  • Acesso ao Drive de +1TB do Curso
  • -
  • Atendimento personalizado
  • -
  • Lives mensais com os alunos
  • -
- Assinar Mensal - Assinar Anual +
    +
  • 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
  • +
+ +
-
- - +
+ +
+ - + \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index cd4d826..04aa44a 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,19 +1,35 @@ -document.addEventListener('DOMContentLoaded', function() { - const toggle = document.getElementById('toggle-pricing'); - const monthlyPrices = document.querySelectorAll('.monthly-price'); - const annualPrices = document.querySelectorAll('.annual-price'); +const planToggle = document.getElementById('plan-toggle'); +const plansContainer = document.getElementById('plans-container'); - toggle.addEventListener('change', function() { - if (this.checked) { - monthlyPrices.forEach(price => price.style.display = 'none'); - annualPrices.forEach(price => price.style.display = 'block'); - } else { - monthlyPrices.forEach(price => price.style.display = 'block'); - annualPrices.forEach(price => price.style.display = 'none'); - } - }); +planToggle.addEventListener('click', () => { + const isChecked = planToggle.getAttribute('aria-checked') === 'true'; + planToggle.setAttribute('aria-checked', !isChecked); - // Initialize with monthly prices displayed - monthlyPrices.forEach(price => price.style.display = 'block'); - annualPrices.forEach(price => price.style.display = 'none'); -}); + // Atualiza os preços e períodos dos planos + const plans = plansContainer.querySelectorAll('.plan'); + plans.forEach(plan => { + const priceValue = plan.querySelector('.price-value'); + const pricePeriod = plan.querySelector('.price-period'); + + if (!isChecked) { + // Define preços anuais (desconto de 20%) + const monthlyPrice = parseFloat(priceValue.textContent.replace('R$', '').replace(',', '.')); + const annualPrice = monthlyPrice * 12 * 0.8; + priceValue.textContent = `R$${annualPrice.toFixed(2).replace('.', ',')}`; + pricePeriod.textContent = '/ano'; + } else { + // Retorna para preços mensais + switch (plan.dataset.plan) { + case 'newton': + priceValue.textContent = 'R$19,90'; + break; + case 'einstein': + priceValue.textContent = 'R$29,90'; + break; + default: + break; + } + pricePeriod.textContent = '/mês'; + } + }); +}); \ No newline at end of file