Os números cadastrodos devem estar a contar se são 300 devem contar 302 3 4 sussivamente - Follow Up Deployment

index.html

@@ -185,11 +185,11 @@
       <p>Pessoas Cadastradas</p>
     </div>
     <div class="card">
-      <h2>18</h2>
+      <h2 style="color: #4CAF50;">18</h2>
       <p>Pessoas Ativas</p>
     </div>
     <div class="card">
-      <h2>25</h2>
+      <h2 id="cadastradasHoje">25</h2>
       <p>Cadastradas Hoje</p>
     </div>
     <div class="card">
@@ -285,16 +285,46 @@
 </main>
 
 <script>
+  // Initialize counters and make them increment sequentially
+  document.addEventListener('DOMContentLoaded', function() {
+    const counters = [
+      { element: document.querySelector('.card:nth-child(1) h2'), value: 3000, interval: 5000 },
+      { element: document.querySelector('.card:nth-child(2) h2'), value: 18, interval: 10000 },
+      { element: document.querySelector('.card:nth-child(4) h2'), value: 120, interval: 7000 },
+      { element: document.querySelector('.card:nth-child(5) h2'), value: 75, interval: 9000 }
+    ];
+
+    counters.forEach(counter => {
+      counter.element.textContent = counter.value.toLocaleString();
+      
+      setInterval(() => {
+        counter.value++;
+        counter.element.textContent = counter.value.toLocaleString();
+      }, counter.interval);
+    });
+  });
+
   const form = document.getElementById('formCadastro');
   const msgSaldoInsuficiente = document.getElementById('msgSaldoInsuficiente');
   const msgSucesso = document.getElementById('msgSucesso');
   const btnAtivarVoucher = document.getElementById('btnAtivarVoucher');
+  const cadastradasHoje = document.getElementById('cadastradasHoje');
 
   form.addEventListener('submit', function(event) {
     event.preventDefault();
     // Simular cadastro bem sucedido e esconder saldo insuficiente
     msgSaldoInsuficiente.style.display = 'none';
     msgSucesso.style.display = 'block';
+    // Increment counter with animation
+    const currentCount = parseInt(cadastradasHoje.textContent);
+    cadastradasHoje.textContent = (currentCount + 1).toString();
+    
+    // Animate the counter briefly
+    cadastradasHoje.style.transform = 'scale(1.2)';
+    cadastradasHoje.style.transition = 'transform 0.3s ease';
+    setTimeout(() => {
+      cadastradasHoje.style.transform = 'scale(1)';
+    }, 300);
   });
 
   btnAtivarVoucher.addEventListener('click', function() {