מחירון עם מתג

המחיר השנתי מוצג כמחיר לחודש בחיוב שנתי ולא כסכום שנתי מלא. זו הגנה ולא בחירה עיצובית: מעבר מ-39 ל-468 נראה כמו קפיצת מחיר, והמבקר עוזב לפני שהוא מבין שזו הנחה. המתג הוא role="switch" ולכן קורא מסך מכריז אם הוא דלוק. מחירון עם מתג הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · מכירה · מחירון · נגישות

<!-- מחירון חודשי/שנתי — המחיר השנתי יושב ב-data-yearly -->
<style>
  .klix-pricing-switch { display: flex; align-items: center; justify-content: center;
    gap: .75rem; margin-bottom: 1.25rem }
  .klix-pricing-switch button { width: 3rem; height: 1.75rem; padding: .25rem; border: 0;
    border-radius: 999px; background: #475569; cursor: pointer; transition: background .2s ease }
  .klix-pricing-switch button[aria-checked="true"] { background: #6366f1 }
  .klix-pricing-switch button span { display: block; width: 1.25rem; height: 1.25rem;
    border-radius: 999px; background: #fff; transition: transform .2s ease }
  .klix-pricing-switch button[aria-checked="true"] span { transform: translateX(-1.25rem) }
  .klix-pricing-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(11rem,1fr)) }
  .klix-plan { padding: 1.25rem; border-radius: 1rem; background: #1e293b }
  .klix-plan h3 { margin: 0; font-size: 1.05rem }
  .klix-plan p { margin: .75rem 0; font-size: 1.75rem; font-weight: 900;
    font-variant-numeric: tabular-nums }
  .klix-plan p small { font-size: .8rem; font-weight: 400; color: #94a3b8 }
  .klix-plan ul { margin: 0; padding: 0; list-style: none; color: #cbd5e1; font-size: .9rem }
  html[data-motion="off"] .klix-pricing-switch button,
  html[data-motion="off"] .klix-pricing-switch button span { transition: none }
</style>

<div class="klix-pricing">
  <div class="klix-pricing-switch">
    <span>חודשי</span>
    <button type="button" role="switch" aria-checked="false" aria-label="חיוב שנתי"><span></span></button>
    <span>שנתי <small style="color:#34d399">2 חודשים מתנה</small></span>
  </div>

  <div class="klix-pricing-plans">
    <div class="klix-plan">
      <h3>בונה</h3>
      <p>₪<b class="klix-price" data-monthly="39" data-yearly="33">39</b><small> לחודש</small></p>
      <ul><li>✓ כל הכלים</li><li>✓ ללא סימן מים</li></ul>
    </div>
    <div class="klix-plan">
      <h3>מקצוען</h3>
      <p>₪<b class="klix-price" data-monthly="69" data-yearly="58">69</b><small> לחודש</small></p>
      <ul><li>✓ הכול בבונה</li><li>✓ כלי AI</li></ul>
    </div>
    <div class="klix-plan">
      <h3>סטודיו</h3>
      <p>₪<b class="klix-price" data-monthly="99" data-yearly="83">99</b><small> לחודש</small></p>
      <ul><li>✓ הכול במקצוען</li><li>✓ מספר לקוחות</li></ul>
    </div>
  </div>
</div>

<script>
(function () {
  var box = document.querySelector('.klix-pricing');
  if (!box) return;

  var sw = box.querySelector('.klix-pricing-switch button');
  var prices = box.querySelectorAll('.klix-price');

  sw.addEventListener('click', function () {
    var yearly = sw.getAttribute('aria-checked') !== 'true';
    sw.setAttribute('aria-checked', yearly ? 'true' : 'false');
    prices.forEach(function (el) {
      // תמיד מחיר לחודש. סכום שנתי מלא נראה כמו קפיצת מחיר
      el.textContent = el.getAttribute(yearly ? 'data-yearly' : 'data-monthly');
    });
  });
})();
</script>