From 917fef3f71cc0a6259d5ac574ab9ac0bb477dce5 Mon Sep 17 00:00:00 2001
From: Ricardo Carneiro <ricardoroberto@outlook.com>
Date: Thu, 30 Apr 2026 19:51:05 -0300
Subject: [PATCH] fix: planos

---
 src/BCards.Web/Views/Home/Pricing.cshtml | 118 +++++++++++++++--------
 1 file changed, 80 insertions(+), 38 deletions(-)

diff --git a/src/BCards.Web/Views/Home/Pricing.cshtml b/src/BCards.Web/Views/Home/Pricing.cshtml
index 694daec..9536974 100644
--- a/src/BCards.Web/Views/Home/Pricing.cshtml
+++ b/src/BCards.Web/Views/Home/Pricing.cshtml
@@ -7,29 +7,75 @@
     Layout = "_Layout";
 }
 
-<div class="container py-5">
+<div class="container-fluid px-3 px-lg-5 py-5">
     <div class="text-center mb-5">
         <h1 class="display-5 fw-bold mb-3">Escolha o plano ideal para você</h1>
         <p class="lead text-muted">Comece grátis e faça upgrade quando precisar de mais recursos</p>
         
         <!-- Toggle Mensal/Anual -->
-        <div class="d-flex justify-content-center mb-4">
-            <div class="btn-group" role="group" aria-label="Período de cobrança">
-                <input type="radio" class="btn-check" name="billingPeriod" id="monthly" autocomplete="off" checked>
-                <label class="btn btn-outline-primary" for="monthly">Mensal</label>
-
-                <input type="radio" class="btn-check" name="billingPeriod" id="yearly" autocomplete="off">
-                <label class="btn btn-outline-primary" for="yearly">
-                    Anual 
-                    <span class="badge bg-success ms-1">2 meses grátis</span>
-                </label>
+        <div class="d-flex justify-content-center mb-4 mt-3">
+            <div class="pricing-toggle-wrapper">
+                <span class="pricing-savings-chip">🎁 2 meses grátis</span>
+                <div class="pricing-pill">
+                    <button type="button" class="pill-btn pill-active" id="btnMonthly">Mensal</button>
+                    <button type="button" class="pill-btn" id="btnYearly">Anual</button>
+                </div>
             </div>
         </div>
+        <style>
+            .pricing-toggle-wrapper {
+                position: relative;
+                display: inline-block;
+            }
+            .pricing-savings-chip {
+                position: absolute;
+                top: -24px;
+                right: -4px;
+                background: #198754;
+                color: #fff;
+                font-size: 0.68rem;
+                font-weight: 700;
+                padding: 2px 9px;
+                border-radius: 20px;
+                white-space: nowrap;
+                letter-spacing: 0.02em;
+            }
+            .pricing-pill {
+                display: inline-flex;
+                background: #ededf3;
+                border-radius: 50px;
+                padding: 4px;
+                gap: 2px;
+            }
+            .pill-btn {
+                padding: 8px 32px;
+                border-radius: 50px;
+                border: none;
+                background: transparent;
+                color: #555;
+                font-weight: 600;
+                font-size: 0.95rem;
+                cursor: pointer;
+                transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+                white-space: nowrap;
+            }
+            .pill-btn.pill-active {
+                background: var(--tenant-primary, #667eea);
+                color: #fff;
+                box-shadow: 0 2px 10px rgba(0,0,0,.18);
+            }
+            .pricing-cards .card-body {
+                font-size: 0.875rem;
+            }
+            .pricing-cards .card-header h5 {
+                font-size: 0.95rem;
+            }
+        </style>
     </div>
 
-    <div class="row g-3 justify-content-center pricing-cards">
+    <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 pricing-cards">
         <!-- Plano Trial -->
-        <div class="col-xl-2 col-lg-4 col-md-6">
+        <div class="col">
             <div class="card h-100 border-0 shadow-sm">
                 <div class="card-header bg-success bg-opacity-10 text-center py-4">
                     <h5 class="mb-0">Trial Gratuito</h5>
@@ -76,7 +122,7 @@
         </div>
 
         <!-- Plano Básico -->
-        <div class="col-xl-2 col-lg-4 col-md-6">
+        <div class="col">
             <div class="card h-100 border-0 shadow-sm">
                 <div class="card-header bg-light text-center py-4">
                     <h5 class="mb-0">Básico</h5>
@@ -150,7 +196,7 @@
         </div>
 
         <!-- Plano Profissional (Decoy) -->
-        <div class="col-xl-2 col-lg-4 col-md-6">
+        <div class="col">
             <div class="card h-100 border-0 shadow-sm">
                 <div class="card-header bg-warning bg-opacity-10 text-center py-4">
                     <h5 class="mb-0">Profissional</h5>
@@ -224,12 +270,10 @@
         </div>
 
         <!-- Plano Premium (Mais Popular) -->
-        <div class="col-xl-2 col-lg-4 col-md-6">
-            <div class="card h-100 border-primary shadow position-relative">
-                <div class="position-absolute top-0 start-50 translate-middle">
-                    <span class="badge bg-primary px-3 py-2">Mais Popular</span>
-                </div>
-                <div class="card-header bg-primary text-white text-center py-4">
+        <div class="col">
+            <div class="card h-100 border-primary shadow">
+                <div class="card-header bg-primary text-white text-center pt-3 pb-4">
+                    <span class="badge bg-white text-primary px-3 py-1 mb-2 d-inline-block" style="font-size:0.7rem;letter-spacing:.04em;">⭐ Mais Popular</span>
                     <h5 class="mb-0">Premium</h5>
                     <div class="mt-3">
                         <div class="pricing-monthly">
@@ -309,12 +353,10 @@
         </div>
 
         <!-- Plano Premium + Afiliados -->
-        <div class="col-xl-2 col-lg-4 col-md-6">
+        <div class="col">
             <div class="card h-100 border-success shadow">
-                <div class="position-absolute top-0 start-50 translate-middle pricing-premium-badge">
-                    <span class="badge bg-success px-3 py-2">Novo!</span>
-                </div>
-                <div class="card-header bg-success text-white text-center py-4">
+                <div class="card-header bg-success text-white text-center pt-3 pb-4">
+                    <span class="badge bg-white text-success px-3 py-1 mb-2 d-inline-block" style="font-size:0.7rem;letter-spacing:.04em;">🆕 Novo!</span>
                     <h5 class="mb-0">Premium + Afiliados</h5>
                     <div class="mt-3">
                         <div class="pricing-monthly">
@@ -394,6 +436,7 @@
         </div>
     </div>
 
+    <div class="container">
     <!-- Comparação de recursos -->
     <div class="mt-5 pt-5">
         <h2 class="text-center mb-4">Compare todos os recursos</h2>
@@ -535,6 +578,7 @@
             </div>
         </div>
     </div>
+    </div><!-- /container inner -->
 </div>
 
 @if (TempData["Success"] != null)
@@ -587,22 +631,20 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    const monthlyRadio = document.getElementById('monthly');
-    const yearlyRadio = document.getElementById('yearly');
+    const btnMonthly = document.getElementById('btnMonthly');
+    const btnYearly = document.getElementById('btnYearly');
     const monthlyElements = document.querySelectorAll('.pricing-monthly');
     const yearlyElements = document.querySelectorAll('.pricing-yearly');
 
-    function togglePricing() {
-        if (yearlyRadio.checked) {
-            monthlyElements.forEach(el => el.classList.add('d-none'));
-            yearlyElements.forEach(el => el.classList.remove('d-none'));
-        } else {
-            monthlyElements.forEach(el => el.classList.remove('d-none'));
-            yearlyElements.forEach(el => el.classList.add('d-none'));
-        }
+    function setPricing(period) {
+        const isYearly = period === 'yearly';
+        btnMonthly.classList.toggle('pill-active', !isYearly);
+        btnYearly.classList.toggle('pill-active', isYearly);
+        monthlyElements.forEach(el => el.classList.toggle('d-none', isYearly));
+        yearlyElements.forEach(el => el.classList.toggle('d-none', !isYearly));
     }
 
-    monthlyRadio.addEventListener('change', togglePricing);
-    yearlyRadio.addEventListener('change', togglePricing);
+    btnMonthly.addEventListener('click', () => setPricing('monthly'));
+    btnYearly.addEventListener('click', () => setPricing('yearly'));
 });
 </script>