1
אפיון
שיחה אחת שממפה מי הלקוח ומה מונע ממנו לפנות.
כרטיסים שוכבים שטוחים בפרספקטיבה, כמו על שולחן, ובזמן שהם נכנסים למסך הם מתרוממים לזקוף, אחד אחרי השני. כניסה עם עומק במקום עוד fade-up.
מתי משתמשים: גריד יתרונות, חבילות, צוות. כל סקשן כרטיסים שרוצים לתת לו נוכחות. פעם או פעמיים בעמוד.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
שיחה אחת שממפה מי הלקוח ומה מונע ממנו לפנות.
כל משפט עונה על שאלה. כל מסך מוביל לפעולה.
האתר עולה תוך שבועיים, וכל פנייה נספרת.
חודש של תיקונים ושיפורים לפי הנתונים.
דפי נחיתה, מערכות, אוטומציות. כשצריך.
עדכונים, גיבויים ואבטחה, בלי לחשוב על זה.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.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-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.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)}
/* G96 · סקשן שמתרומם מהשולחן */
.tb{perspective:1200px;perspective-origin:50% 0%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px));max-width:1100px;margin-inline:auto;padding-block:10vh 20vh}
.tb-card{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:var(--r, 14px);padding:26px;transform-origin:50% 100%;will-change:transform,opacity;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.tb-card .ph{height:140px;border-radius:12px;margin-bottom:18px;font-size:18px}
.tb-card h3{margin:0 0 6px;font-size:20px}
.tb-card p{margin:0;color:var(--muted, #6a6d85);font-size:15px;line-height:1.6}
@media(max-width:767px){.tb{grid-template-columns:1fr}}<div class="stage tight"><div class="tb">
<article class="tb-card"><div class="ph ph-a"><span class="ph-l">1</span></div><h3>אפיון</h3><p>שיחה אחת שממפה מי הלקוח ומה מונע ממנו לפנות.</p></article>
<article class="tb-card"><div class="ph ph-b"><span class="ph-l">2</span></div><h3>קופי ועיצוב</h3><p>כל משפט עונה על שאלה. כל מסך מוביל לפעולה.</p></article>
<article class="tb-card"><div class="ph ph-c"><span class="ph-l">3</span></div><h3>עלייה ומדידה</h3><p>האתר עולה תוך שבועיים, וכל פנייה נספרת.</p></article>
<article class="tb-card"><div class="ph ph-d"><span class="ph-l">4</span></div><h3>ליווי</h3><p>חודש של תיקונים ושיפורים לפי הנתונים.</p></article>
<article class="tb-card"><div class="ph ph-e"><span class="ph-l">5</span></div><h3>הרחבה</h3><p>דפי נחיתה, מערכות, אוטומציות. כשצריך.</p></article>
<article class="tb-card"><div class="ph ph-a"><span class="ph-l">6</span></div><h3>תחזוקה</h3><p>עדכונים, גיבויים ואבטחה, בלי לחשוב על זה.</p></article>
</div></div>gsap.registerPlugin(ScrollTrigger);
(function(){
const cards=gsap.utils.toArray(".tb-card");
if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
const ang=matchMedia("(max-width:767px)").matches?28:48;
gsap.set(cards,{rotateX:ang,y:60,opacity:.35});
ScrollTrigger.batch(cards,{start:"top 88%",end:"top 45%",scrub:.6,onEnter:b=>{}, // batch כאן רק כדי לקבץ את הכרטיסים לפי שורה
onEnter:batch=>gsap.to(batch,{rotateX:0,y:0,opacity:1,stagger:.1,duration:.8,ease:"power3.out",overwrite:true}),
onLeaveBack:batch=>gsap.to(batch,{rotateX:ang,y:60,opacity:.35,stagger:.05,duration:.5,ease:"power3.in",overwrite:true})});
})();