מחירון עבור מקדמי אתרים – קוד לשימוש חופשי

				
					<div id="deadline" style="max-width:1100px;margin:0 auto .6rem;background:#111;color:#fff;padding:.6rem 1rem;border-radius:10px;text-align:center;direction:rtl">
  הצטרפו עד <span id="dlDate"></span> וקבלו ‎10%‎ הנחה על השנה הראשונה
  <span id="dlLeftWrap"> • נשארו <strong id="dlLeft"></strong> ימים</span>
</div>

<style>
.pricing-wrap{max-width:1100px;margin:0 auto;font-family:system-ui}
.pricing-head{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}
.switch{position:relative;display:inline-block;width:56px;height:28px}
.switch input{display:none}
.slider{position:absolute;inset:0;cursor:pointer;background:#ddd;border-radius:999px;transition:.25s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.25s}
input:checked + .slider{background:#111}
input:checked + .slider:before{transform:translateX(28px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{border:1px solid #eee;border-radius:14px;padding:1rem;background:#fff;position:relative}
.card h3{margin:.2rem 0 .6rem}
.card .sub{color:#666;font-size:.9rem;margin:-.3rem 0 .7rem}
.price{font-weight:800;font-size:2.1rem}
.price small{font-weight:600;font-size:.85rem;color:#666}
ul{padding:0;margin:.6rem 0 0;list-style:none}
li{margin:.45rem 0}
.btn{display:inline-block;margin-top:1rem;padding:.65rem 1rem;border-radius:10px;background:#111;text-decoration:none}
.badge{display:inline-block;margin-inline-start:.4rem;padding:.15rem .45rem;font-size:.75rem;background:#f1f1f1;border-radius:6px}
.rtl{direction:rtl}
.featured{border-color:#111;box-shadow:0 8px 26px rgba(0,0,0,.07)}
.ribbon{
  position:absolute;top:10px;inset-inline-end:-6px;background:#111;color:#fff;
  padding:.35rem .6rem;border-radius:999px 0 0 999px;font-size:.78rem
}
.small-note{font-size:.85rem;color:#666;margin-top:.6rem}
.hr{height:1px;background:#eee;margin:.8rem 0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}

[data-tip]{position:relative;cursor:help}
[data-tip]:hover::after, [data-tip].tip-on::after{
  content:attr(data-tip);
  position:absolute; bottom:120%; inset-inline-start:0;
  background:#111; color:#fff; padding:.35rem .55rem; border-radius:6px;
  font-size:.8rem; white-space:nowrap; pointer-events:none; z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
[data-tip]:hover::before, [data-tip].tip-on::before{
  content:""; position:absolute; bottom:110%; inset-inline-start:.8rem;
  border:6px solid transparent; border-top-color:#111; transform:translateY(2px);
}

.pricing-wrap a.btn:not(.whatsapp),
.pricing-wrap a.btn:not(.whatsapp):link,
.pricing-wrap a.btn:not(.whatsapp):visited,
.pricing-wrap a.btn:not(.whatsapp):hover,
.pricing-wrap a.btn:not(.whatsapp):active{
  color:#fff !important;
}
a.btn.whatsapp{background:#25D366;color:#111}

.actions .btn.cta{position:relative;isolation:isolate}
.actions .btn.cta::after{
  content:""; position:absolute; top:-6px; inset-inline-end:-6px;
  width:10px; height:10px; border-radius:50%;
  background:#0ea5e9; box-shadow:0 0 0 0 rgba(14,165,233,.6);
  animation: ping 2.8s cubic-bezier(.17,.67,.83,.67) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(14,165,233,.55) }
  70%{ box-shadow:0 0 0 10px rgba(14,165,233,0) }
  100%{ box-shadow:0 0 0 0 rgba(14,165,233,0) }
}
.cta-pop{
  position:absolute; bottom:100%; inset-inline-end:0;
  background:#111; color:#fff; font-size:.8rem;
  padding:.35rem .6rem; border-radius:6px;
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap; z-index:10;
}
.cta-pop.show{ opacity:1; transform:translateY(-2px) }
.cta-pop::after{
  content:""; position:absolute; top:100%; inset-inline-end:10px;
  border:6px solid transparent; border-top-color:#111;
}


.fitline{
  display:flex; gap:.75rem; justify-content:center; align-items:center;
  margin:.25rem 0 .75rem; direction:rtl; flex-wrap:wrap; font-size:.95rem;
}
.fitline b{font-weight:700}
.fitline a{
  color:#111; text-decoration:none; padding:.25rem .5rem; border:1px solid #eee; border-radius:999px;
}
.fitline a:hover{background:#f7f7f7}

.tags{display:flex;gap:.35rem;flex-wrap:wrap;margin:.2rem 0 .4rem}
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .5rem; border:1px solid #efefef; border-radius:999px;
  font-size:.78rem; background:#fafafa;
}

.pricing-wrap a.btn:not(.whatsapp){
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
  background:#111; box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.pricing-wrap a.btn:not(.whatsapp):hover{
  background:linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0)) #111;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.pricing-wrap a.btn:not(.whatsapp):active{ transform:translateY(1px) }
.card{transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease}
.card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); transform:translateY(-1px) }
.card.selected{ border-color:#111; box-shadow:0 10px 30px rgba(0,0,0,.12) }
@keyframes cardIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.grid .card{ animation: cardIn .35s ease both }
.price .val{ font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: reduce){
  .card, .btn, .grid .card, .actions .btn.cta::after{ transition:none!important; animation:none!important }
}
</style>

<div class="pricing-wrap rtl" id="servicesPricing">
  <div class="pricing-head">
    <span>חודשי</span>
    <label class="switch">
      <input id="billingToggle" type="checkbox" aria-label="החלפת חודשי/שנתי">
      <span class="slider"></span>
    </label>
    <span>שנתי <span class="badge" id="saveBadge">חיסכון 20%</span></span>
  </div>

  <div class="fitline" aria-label="הכוונה לבחירת חבילה">
    <b>מה מתאים לך?</b>
    <a href="#card-seo">צמיחה אורגנית קבועה → SEO</a>
    <a href="#card-rep">צריך להגן על המותג → ניהול מוניטין</a>
    <a href="#card-coach">רוצה שליטה עצמאית → שיעורים פרטיים</a>
  </div>

  <div class="grid" id="plans">
    <div class="card" id="card-seo" data-m="2400" data-y="1920" data-unit="לחודש" data-name="קידום אורגני (SEO)">
      <h3>קידום אורגני (SEO)</h3>
      <div class="tags">
        <span class="tag">החזר השקעה גבוה</span>
        <span class="tag">מותאם לאתרים קיימים</span>
      </div>
      <div class="sub">אופטימיזציה טכנית + תוכן + קישורים</div>
      <div class="price"><span class="val"></span> ₪ <small class="unit"></small></div>
      <div class="hr"></div>
      <ul>
        <li data-tip="כולל מחקר כוונת חיפוש ומפות נושאים">מחקר מילות מפתח ותכנון תוכן</li>
        <li data-tip="טיפול במבנה, סכמות, WPO">On-Page SEO + שיפור מהירות</li>
        <li data-tip="קישורים אתיים ממקורות רלוונטיים">בניית קישורים לבנים</li>
        <li data-tip="דו״ח PDF + משימות להמשך">דוח חודשי ותובנות</li>
      </ul>
      <div class="actions">
        <a href="https://wa.me/0000000000" class="btn whatsapp">שיחת וואטסאפ</a>
        <a href="/contact?service=seo" class="btn cta" data-pop="SEO מבטיח צמיחה יציבה לטווח ארוך 🚀">התחילו עכשיו</a>
      </div>
      <details class="faq">
        <summary>שאלות נפוצות</summary>
        <div class="faq-body">
          <p><b>מתי רואים תוצאות?</b> לרוב 8–12 שבועות עד מגמות יציבות.</p>
          <p><b>יש התחייבות?</b> לא. מומלץ 3 חוד׳ לתנופה.</p>
        </div>
      </details>
      <div class="small-note">* מינימום 3 חודשים מומלץ לתוצאות יציבות</div>
    </div>

    <div class="card featured" id="card-rep" data-m="3900" data-y="3120" data-unit="לחודש" data-name="ניהול מוניטין">
      <span class="ribbon">הכי פופולרי</span>
      <h3>ניהול מוניטין</h3>
      <div class="tags">
        <span class="tag">הכי משתלם</span>
        <span class="tag">מותאם למותגים אישיים</span>
      </div>
      <div class="sub">דחיקת תוצאות שליליות ובניית נכסים חיוביים</div>
      <div class="price"><span class="val"></span> ₪ <small class="unit"></small></div>
      <div class="hr"></div>
      <ul>
        <li data-tip="מיפוי לפי נפח/קושי/הזדמנויות">מיפוי SERP ותוכנית פעולה</li>
        <li data-tip="פרופילים ואתרי לווין חיוביים">יצירת/חיזוק נכסים חיוביים</li>
        <li data-tip="PR דיגיטלי עם תוכן איכותי">SEO למותג + PR דיגיטלי</li>
        <li data-tip="התראות על אזכורים חדשים">ניטור אזכורים והתראות</li>
      </ul>
      <div class="actions">
        <a href="tel:000-0000000" class="btn">שיחת היכרות</a>
        <a href="/contact?service=reputation" class="btn cta" data-pop="הגן על השם שלך – מתחילים עכשיו">בואו נתחיל</a>
      </div>
      <details class="faq">
        <summary>שאלות נפוצות</summary>
        <div class="faq-body">
          <p><b>כמה זמן נמשך טיפול?</b> לרוב 2–6 חודשים (תלוי בעוצמת הבעיה).</p>
          <p><b>אפשר סודיות?</b> כן. NDA לפי צורך.</p>
        </div>
      </details>
      <div class="small-note">* היקף הפעילות מותאם לעוצמת הבעיה</div>
    </div>

    <div class="card" id="card-coach" data-m="1400" data-y="1120" data-unit="לחודש" data-name="שיעורים פרטיים בקידום">
      <h3>שיעורים פרטיים בקידום</h3>
      <div class="tags">
        <span class="tag">מועדף לעסקים קטנים</span>
        <span class="tag">ליווי 1-על-1</span>
      </div>
      <div class="sub">1-על-1 בזום או פרונטלי (4 שיעורים בחודש)</div>
      <div class="price"><span class="val"></span> ₪ <small class="unit"></small></div>
      <div class="hr"></div>
      <ul>
        <li data-tip="סילבוס מותאם לענף ולמטרות">סילבוס מותאם לעסק שלך</li>
        <li data-tip="משימות ויישום עם פידבק">ליווי משימות בין שיעורים</li>
        <li data-tip="טמפלייטים והקלטות מלאות">הקלטות ותבניות עבודה</li>
        <li data-tip="מענה מהיר לשאלות קצרות">גישה לשאלות בין מפגשים</li>
      </ul>
      <div class="actions">
        <a href="/calendar?service=coaching" class="btn cta" data-pop="קחו שליטה מלאה על השיווק שלכם">קבעו שיעור היכרות</a>
        <a href="mailto:info@example.com" class="btn">שליחת מייל</a>
      </div>
      <details class="faq">
        <summary>שאלות נפוצות</summary>
        <div class="faq-body">
          <p><b>אפשר שיעור בודד?</b> כן, 380 ₪ לשיעור ניסיון.</p>
          <p><b>פרונטלי או זום?</b> מה שנוח לך.</p>
        </div>
      </details>
      <div class="small-note">* אפשרות לשיעור בודד: 380 ₪</div>
    </div>
  </div>
</div>

<script>
(function(){
  const target='2025-08-31T23:59:59';
  const dl=document.getElementById('deadline');
  const dlDate=document.getElementById('dlDate');
  const dlLeft=document.getElementById('dlLeft');
  const dlLeftWrap=document.getElementById('dlLeftWrap');
  const t=new Date(target), now=new Date(), msDay=86400000;
  const daysLeft=Math.ceil((t-now)/msDay);
  if(daysLeft<=0){ dl.style.display='none'; return; }
  dlDate.textContent=t.toLocaleDateString('he-IL');
  dlLeft.textContent=daysLeft.toLocaleString('he-IL');
  dlLeftWrap.style.display='inline';
})();

(function(){
  const toggle=document.getElementById('billingToggle');
  const cards=[...document.querySelectorAll('#plans .card')];
  const badge=document.getElementById('saveBadge');
  const fmt=n=>Number(n).toLocaleString('he-IL');
  function render(){
    const isYearly=toggle.checked;
    cards.forEach(c=>{
      const price=isYearly?c.dataset.y:c.dataset.m;
      const unit=c.dataset.unit||'לחודש';
      c.querySelector('.val').textContent=fmt(price);
      c.querySelector('.unit').textContent=isYearly?unit+' (בחיוב שנתי)':unit;
    });
    badge.textContent='חיסכון 20%';
  }
  toggle.addEventListener('change',render);
  render();
})();

(function(){
  let timer;
  document.addEventListener('click',function(e){
    const el=e.target.closest('[data-tip]');
    if(!el){
      document.querySelectorAll('[data-tip].tip-on').forEach(n=>n.classList.remove('tip-on'));
      return;
    }
    el.classList.add('tip-on');
    clearTimeout(timer);
    timer=setTimeout(()=>el.classList.remove('tip-on'),2000);
  },{passive:true});
})();


(function(){
  document.querySelectorAll('#plans .card').forEach(card=>{
    card.setAttribute('tabindex','0');
    card.addEventListener('click',e=>{
      if(e.target.closest('a,button,details,summary')) return;
      const primary=card.querySelector('.actions .cta')||card.querySelector('.actions a.btn');
      if(primary){
        card.classList.add('selected');
        setTimeout(()=>card.classList.remove('selected'),1200);
        primary.click();
      }
    });
    card.addEventListener('keydown',e=>{
      if(e.key==='Enter'||e.key===' '){e.preventDefault();card.click();}
    });
  });
})();

(function(){
  const ctas=document.querySelectorAll('.actions .btn.cta');

  ctas.forEach(btn=>{
    const pop=document.createElement('div');
    pop.className='cta-pop';
    pop.textContent=btn.dataset.pop||'זה הזמן להצטרף!';
    btn.appendChild(pop);

    btn.addEventListener('click',e=>{
      e.preventDefault();
      pop.classList.add('show');
      setTimeout(()=>pop.classList.remove('show'),2200);
      const href=btn.getAttribute('href');
      if(href && href!=='#'){
        setTimeout(()=>{ window.location.href=href; }, 100); 
      }
    });
  });

  if(!sessionStorage.getItem('ctaAutoShown')){
    setTimeout(()=>{
      const first=document.querySelector('.actions .btn.cta .cta-pop');
      if(first){
        first.classList.add('show');
        setTimeout(()=>first.classList.remove('show'),2500);
        sessionStorage.setItem('ctaAutoShown','1');
      }
    },5000);
  }
})();
</script>