G79 · מוצר מוצמד עם קריאות שנדלקות בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G79 · מוצר מוצמד עם קריאות שנדלקות בגלילה */
.co{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));align-items:start;max-width:1100px;margin-inline:auto}
.co-pin{position:sticky;top:12vh;height:76vh;display:grid;place-items:center}
.co-fig{position:relative;width:min(100%,460px);aspect-ratio:4/5}
.co-fig .ph{position:absolute;inset:0;font-size:22px}
.co-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--accent, #4a3aff);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent, #4a3aff) 25%,transparent);translate:-50% -50%;opacity:0;scale:.6}
.co-steps{display:flex;flex-direction:column;gap:38vh;padding-block:30vh}
.co-step{opacity:.25;transition:opacity .4s}
.co-step.on{opacity:1}
.co-step b{display:block;font-size:13px;color:var(--accent, #4a3aff);letter-spacing:.14em;margin-bottom:8px}
.co-step h3{margin:0 0 8px;font-size:clamp(20px,2.4vw,32px)}
.co-step p{margin:0;color:var(--muted, #6a6d85);line-height:1.7;max-width:36ch}
@media(max-width:767px){
  .co{grid-template-columns:1fr}
  .co-pin{top:0;height:46vh;background:var(--bg, #f7f7fa);z-index:2}
  .co-fig{width:min(70vw,300px)}
  .co-steps{gap:22vh;padding-block:6vh 20vh}
}

HTML

<div class="stage tight"><div class="co">
  <div class="co-pin"><div class="co-fig"><div class="ph ph-b"><span class="ph-l">המוצר</span></div>
    <span class="co-dot" style="left:28%;top:22%"></span><span class="co-dot" style="left:70%;top:48%"></span><span class="co-dot" style="left:40%;top:78%"></span></div></div>
  <div class="co-steps">
    <div class="co-step"><b>01</b><h3>לוח בקרה אחד</h3><p>כל הלידים, ההצעות והתשלומים במסך אחד. בלי לעבור בין חמש מערכות.</p></div>
    <div class="co-step"><b>02</b><h3>התראות בזמן אמת</h3><p>פנייה חדשה מגיעה לוואטסאפ תוך שניות, עם כל הפרטים.</p></div>
    <div class="co-step"><b>03</b><h3>דוח שבועי אוטומטי</h3><p>כמה נכנס, כמה נסגר, ומה עדיין פתוח. כל יום ראשון בבוקר.</p></div>
  </div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const steps=gsap.utils.toArray(".co-step"),dots=gsap.utils.toArray(".co-dot");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce){steps.forEach(s=>s.classList.add("on"));gsap.set(dots,{opacity:1,scale:1});return;}
  steps.forEach((step,i)=>{
    ScrollTrigger.create({trigger:step,start:"top 60%",end:"bottom 40%",
      onToggle:s=>{step.classList.toggle("on",s.isActive);
        gsap.to(dots[i],{opacity:s.isActive?1:0,scale:s.isActive?1:.6,duration:.45,ease:"power3.out"});}});
  });
})();