סקציות תוכן וכרטיסים — הגוף של האתר

5.1 אנטומיה של סקציית תוכן — מה עושה סקציה טובה

ה-hero section שבניתם בפרק 3 תופס את כל המסך הראשון. ה-navigation מפרק 4 מנווט את המבקר. אבל 80% מהאתר הוא מה שבאמצע — הסקציות שמספרות את הסיפור, מציגות את הפיצ'רים, מוכיחות עם ביקורות, ומשכנעות עם מחירים. אלה הסקציות שהמבקר גולל דרכן, וכל אחת צריכה לעשות עבודה ספציפית.

כל סקציית תוכן טובה מורכבת מ-5 רכיבים:

הריתמוס של הדף חשוב לא פחות מהתוכן עצמו. דף טוב מחליף בין סוגי סקציות — לא 5 feature card sections ברצף. הכלל: אל תחזרו על אותו סוג סקציה פעמיים ברצף. אם הייתה סקציית כרטיסים, הסקציה הבאה צריכה להיות שונה — testimonials, stats, timeline. זה יוצר מגוון ויזואלי שמחזיק את המבקר בגלילה.

טעות נפוצה: סקציות שנראות אותו דבר עם רק שינוי בתוכן. אם כל סקציה היא 3 כרטיסים ברקע לבן — הדף מרגיש מונוטוני. שנו לפחות 2 מתוך 3: רקע (כהה/בהיר/gradient), layout (grid/timeline/carousel), וויזואל (אייקונים/תמונות/מספרים).

5.2 Bento Grid — הפריסה שאפל הפכה לסטנדרט

ה-Bento Grid (בנטו גריד) הוא פריסת grid א-סימטרית שבה כרטיסים מגיעים בגדלים שונים — כרטיס גדול שתופס 2 עמודות, כרטיסים בינוניים, כרטיסים קטנים. השם מגיע מקופסת בנטו יפנית, שבה תאים בגדלים שונים יוצרים הרמוניה. Apple הפכה את הפריסה הזו לסטנדרט עם דפי המוצר של iPhone ו-Mac, ומאז 2023-2024 היא הפריסה הנפוצה ביותר לסקציות features באתרים מודרניים.

למה Bento Grid עובד:

• היררכיה ויזואלית ברורה — הכרטיס הגדול מושך את העין ראשון, הקטנים מספקים פרטים
• מגוון ויזואלי — במקום 6 כרטיסים זהים, יש סוגים שונים שמחזיקים עניין
• גמישות בתוכן — כרטיס גדול יכול להכיל תמונה + טקסט, קטן יכול להיות רק אייקון + מספר

המבנה הטכני — CSS Grid

Bento Grid מבוסס על CSS Grid עם grid-template-areas או grid-column: span 2. הנה הפריסה הכי נפוצה:

Prompt Template — Bento Grid

Create a bento grid section with 6 feature cards:
- Layout: CSS Grid, 3 columns on desktop
- Card 1: spans 2 columns (large) — [FEATURE NAME], image + heading + description
- Cards 2-3: single column each — icon + heading + short text
- Cards 4-6: single column each — icon + stat number + label
- Style: dark theme, rounded corners (16px), subtle border (1px rgba white 0.1)
- Gap: 16px between cards
- Responsive:
  - Desktop (1024px+): 3 columns as described
  - Tablet (640-1024px): 2 columns, card 1 spans full width
  - Mobile (<640px): single column, all cards full width
- Hover: subtle scale(1.02) + shadow increase on each card
- RTL support: direction: rtl, text-align: right
- Content language: Hebrew

דוגמה מעשית — Bento Grid לחברת SaaS ישראלית

נניח שאתם בונים דף נחיתה לחברת SaaS ישראלית עם 6 פיצ'רים עיקריים. הנה איך לחשוב על ה-Bento Grid:

הפרומפט יהיה:

Create a bento grid for an Israeli SaaS company:
- Card 1 (large, span 2 cols): "אוטומציה חכמה" — heading + 3-line description + screenshot placeholder, purple gradient accent
- Card 2: "אינטגרציות" — 6 tool logos (Monday, Slack, HubSpot, Salesforce, Zapier, Google) in mini grid
- Card 3: "אבטחה מתקדמת" — lock icon + "הצפנה 256-bit, SOC2 certified, GDPR compliant"
- Card 4: "99.9% uptime" — large number + "זמינות מובטחת"
- Card 5: "₪0 setup" — large number + "ללא עלות הקמה"
- Card 6: "24/7 support" — large number + "תמיכה בעברית"
- Style: dark (#1e1e2e), cards have subtle glass effect, rounded 16px
- Responsive: 3 cols desktop, 2 tablet (card 1 full width), 1 mobile
- RTL, Hebrew content

שימו לב לפרינציפ: הכרטיס הגדול = הדבר הכי חשוב. הכרטיסים הקטנים = מספרים שתומכים. זה לא אקראי — זו היררכיה ויזואלית מכוונת שמנחה את העין של המבקר בסדר הנכון.

Gaps ובעיות נפוצות ב-Bento Grid

AI נוטה לייצר bento grid עם בעיות חוזרות. הנה 3 דברים שצריך לבדוק ולתקן:

• Gap לא אחיד: אם יש gap: 16px בין כרטיסים אבל כרטיס אחד נדחק לקצה — בדקו שאין padding כפול. ציינו בפרומפט: "consistent gap: 16px between all cards, no extra padding on container edges"
• כרטיס שלא ממלא את הגובה: אם 2 כרטיסים קטנים לצד כרטיס גדול אבל הם לא ממלאים את אותו גובה — הוסיפו: "Cards in same row must have equal height. Use align-items: stretch on the grid."
• תמונות שמעוותות: תמונות בתוך כרטיסי bento צריכות object-fit: cover עם גובה קבוע. בלי זה הן נמתחות. ציינו: "All images: object-fit: cover, fixed height 200px on large card, 150px on small cards."

5.3 Feature Cards עם Hover Effects — הכרטיסים שמזמינים לגעת

Feature Cards (כרטיסי פיצ'רים) הם אבן הבניין הבסיסית של כמעט כל אתר. כל כרטיס מציג יתרון, פיצ'ר, או שירות בודד — אייקון למעלה, כותרת, תיאור קצר, ולפעמים CTA. מה שמפריד בין כרטיסים בינוניים למרשימים הוא ה-hover effect — מה קורה כשהעכבר עובר על הכרטיס.

6 סוגי Hover Effects

Prompt Template — Feature Cards עם Hover

Create a feature cards section with 4 cards in a row:
- Each card: icon (SVG or emoji), heading (Hebrew), 2-line description (Hebrew), optional CTA link
- Layout: CSS Grid, 4 columns desktop, 2 tablet, 1 mobile
- Card style: dark background (#1e1e2e), rounded corners (12px), padding 2rem, subtle border
- Hover effect: [CHOOSE ONE]
  Option A — Scale: transform: scale(1.03), box-shadow increase, transition 0.3s ease
  Option B — Glow: gradient border that fades in on hover (purple to blue), transition 0.4s
  Option C — Tilt: 3D perspective tilt following mouse position (JS required)
- Mobile: hover effects disabled (touch devices), cards stack vertically
- RTL: direction rtl, text-align right
- Accessibility: focus-visible matches hover style for keyboard navigation

Card Flip Animation — הטכניקה

ה-Card Flip (הפיכת כרטיס) היא אנימציית CSS 3D שבה כרטיס "מתהפך" לחשוף צד אחורי. הטכניקה דורשת 3 דברים:

1. perspective על ה-parent — perspective: 1000px
2. backface-visibility: hidden על שני הצדדים (front ו-back)
3. transform: rotateY(180deg) על הצד האחורי (ו-0deg על הקדמי)

טיפ חשוב ל-RTL: בעברית, השתמשו ב-rotateY(-180deg) כדי שהכרטיס יתהפך בכיוון הנכון (מימין לשמאל).

טיפ חשוב למובייל: ב-touch devices אין hover. השתמשו ב-click/tap כ-trigger — הוסיפו class toggle ב-JavaScript. בפרומפט: "On mobile: flip on tap (toggle class), not hover".

5.4 Testimonial Carousel — הוכחה חברתית שזזה

Social Proof (הוכחה חברתית) הוא אחד מכלי השכנוע החזקים ביותר. ביקורות לקוחות, ציטוטים, דירוגים — כולם אומרים למבקר "אנשים כמוך כבר בחרו בנו". ה-Testimonial Carousel היא הדרך הנפוצה ביותר להציג הוכחה חברתית כשיש לכם 5 ביקורות או יותר.

5 Patterns לתצוגת Testimonials

Prompt Template — Testimonial Carousel

Create a testimonial carousel section:
- Layout: 3 visible cards at a time, center card slightly larger (scale 1.05)
- Each card: quote text (Hebrew), author name, role/company, small avatar image placeholder
- Navigation: left/right arrow buttons, dot indicators below
- Behavior: auto-advance every 5 seconds, pause on hover, pause on focus
- Keyboard: arrow keys navigate between testimonials
- Accessibility: aria-live="polite" on carousel container, aria-label on navigation buttons
- RTL: direction rtl, arrows reversed (right = previous, left = next)
- Mobile: single card view, swipe gesture support
- Style: cards with subtle shadow, rounded corners (12px), quote mark decorative element
- Content: 5 testimonials in Hebrew with realistic Israeli names and companies
- Animation: smooth slide transition (0.4s ease)

RTL Carousel — נקודה חשובה: בעברית, הכיוון הטבעי הוא מימין לשמאל. זה אומר: חץ ימין = אחורה (previous), חץ שמאל = קדימה (next). אם AI בנה את הכיוונים הפוך — ציינו בפרומפט: "RTL carousel: right arrow goes to previous, left arrow goes to next. Swipe right = previous, swipe left = next."

Infinite Marquee — חלופה מודרנית לקרוסלה

אם יש לכם 10+ ביקורות קצרות (1-2 משפטים), ה-Infinite Marquee (גלילה אינסופית) עובד מעולה. במקום חצים ו-dots, הביקורות פשוט גוללות אוטומטית בלולאה — כמו ticker של חדשות. זה עובד מצוין גם ללוגואים.

הטכניקה: משכפלים את רשימת הביקורות בתוך ה-HTML (פעמיים), ומנפשים עם translateX — כשהאנימציה מגיעה לסוף העותק הראשון, העותק השני כבר מחליף אותו. Seamless loop. CSS בלבד, אפס JavaScript.

Create an infinite testimonial marquee:
- Two rows scrolling in opposite directions (row 1: right-to-left, row 2: left-to-right)
- Each row: 6+ short testimonial cards (1-2 sentences each, Hebrew)
- Cards: avatar placeholder, name, role, short quote, 5-star rating
- Animation: CSS translateX, linear, 30s per loop, seamless (duplicate content in HTML)
- Behavior: pause entire marquee on hover, respect prefers-reduced-motion
- Style: subtle cards with rounded corners, slight shadow, gap between cards
- RTL: primary direction right-to-left (natural for Hebrew)

מתי Marquee ומתי Carousel?

• Marquee — ביקורות קצרות (1-2 משפטים), 10+ ביקורות, רוצים תחושה של "הרבה לקוחות מרוצים". אין שליטה על מה נראה כרגע.
• Carousel — ביקורות ארוכות (פסקה), 5-8 ביקורות, רוצים שהמשתמש יקרא כל אחת. יש שליטה מלאה.

5.5 Pricing Table ו-Toggle — הסקציה שמייצרת הכנסות

ה-Pricing Table (טבלת מחירים) היא הסקציה שבה מבקרים הופכים ללקוחות. זו לא סתם טבלה עם מספרים — זו ארכיטקטורת שכנוע. הסדר של התוכניות, איך מודגשת המומלצת, ה-CTA, ה-toggle חודשי/שנתי — כל פרט משפיע על ההחלטה.

5 עקרונות של Pricing Table שממיר

1. 3-4 תוכניות מקסימום — יותר מזה יוצר "שיתוק בחירה" (paradox of choice). 3 הוא האידיאלי: חינמי/בסיסי, מקצועי (המומלץ), עסקי.
2. התוכנית המומלצת בולטת — צבע אחר, גובה יותר (scale), badge של "פופולרי" או "מומלץ", border מודגש.
3. CTA שונה לתוכנית המומלצת — כפתור מלא (filled) לתוכנית המומלצת, כפתורי outline לשאר. ההבדל הויזואלי מכוון את העין.
4. Toggle חודשי/שנתי — מראה חיסכון בתשלום שנתי. Badge של "חיסכון 20%" ליד ה-toggle.
5. Feature comparison — רשימה של פיצ'רים עם checkmark (✓) לתוכניות שכוללות ו-X למי שלא.

Pricing ישראלי — מה לשים לב

• מטבע: ₪ (שקלים חדשים). הסימן בא לפני המספר: ₪99, לא 99₪
• מע"מ: תמיד ציינו "+ מע\"מ" או "כולל מע\"מ". בישראל חובה להבהיר
• תשלום חודשי: נפוץ מאוד. ישראלים מעדיפים חודשי אלא אם החיסכון השנתי משמעותי (15%+)
• מחירים נפוצים: ₪49/חודש (בסיסי), ₪99-149/חודש (מקצועי), ₪299-499/חודש (עסקי), צור קשר (enterprise)

Prompt Template — Pricing Table

Create a pricing table section with 3 tiers:
- Tiers: בסיסי (₪49/חודש), מקצועי (₪149/חודש, RECOMMENDED), עסקי (₪349/חודש)
- Annual prices: ₪39/חודש, ₪119/חודש, ₪279/חודש (show savings badge)
- Toggle: monthly/annual switch at the top, with "חיסכון 20%" badge on annual
- Recommended plan: larger card (scale 1.05), purple gradient border, "מומלץ" badge, filled CTA button
- Other plans: normal size, subtle border, outline CTA buttons
- Features list per plan: 6-8 items with checkmarks (included) and X (not included)
- CTA buttons: "התחילו חינם" / "בחרו מקצועי" / "צרו קשר"
- Style: dark theme, rounded corners (16px), cards in a row
- Mobile: stack vertically, recommended plan first
- RTL: direction rtl, prices left-to-right (₪149), text right-aligned
- Note at bottom: "כל המחירים + מע\"מ"
- Animation: toggle smoothly switches prices (CSS transition on number)

Pricing Toggle — הטכניקה

ה-Pricing Toggle הוא מתג שמחליף בין מחיר חודשי לשנתי. מבחינה טכנית, יש 2 גישות:

1. CSS Checkbox Hack — input[type="checkbox"] מוסתר + label כ-toggle switch. כש-checked, CSS משנה את המחירים דרך ~ sibling selector. אפס JavaScript.
2. JavaScript Toggle — click event על ה-switch, JS מחליף את ה-innerText של כל מחיר. יותר גמיש, מאפשר אנימציית מספרים.

לפרומפט, הגישה השנייה עדיפה כי AI מייצר אותה יותר אמין:

Pricing toggle behavior:
- Toggle switch with "חודשי" and "שנתי" labels
- When toggled to annual: all prices animate to annual rate (CSS transition on opacity)
- Show savings badge: "חיסכון 20%" next to annual label
- Annual prices: monthly price × 0.8 × 12 / 12 (show monthly equivalent)
- JavaScript: toggle class on pricing container, CSS handles the rest

דוגמה ישראלית: רוב חברות ה-SaaS הישראליות (Monday.com, Elementor, JotForm) מציגות toggle עם חיסכון של 15-20% בתשלום שנתי. הנוסחה הנפוצה: חודשי × 10 = שנתי (חיסכון של 2 חודשות, כ-17%). זה מספיק מושך בלי להיראות "too good to be true".

5.6 Timeline Layout ו-Comparison Table — תוכן שמתארגן בזמן ובטורים

Timeline Layout — סיפור שמתגלה בגלילה

ה-Timeline Layout (פריסת ציר זמן) מציג מידע לפי סדר כרונולוגי — תהליך עבודה, היסטוריית חברה, שלבי פרויקט, או roadmap מוצר. מה שהופך timeline מרשימת bullet points סתם ל-WOW הוא scroll-driven activation — הנקודות מופיעות ומאירות ככל שהמבקר גולל.

3 סוגי Timeline:

Prompt Template — Timeline

Create a vertical timeline section with 5 steps:
- Layout: vertical line on the right side (RTL), cards on the left
- Each step: numbered circle on the line, card with heading + description (Hebrew)
- Animation: as user scrolls, each step fades in and the connecting line grows
  Use IntersectionObserver to trigger when step enters viewport
- Line: 2px solid line, gradient from purple (#a855f7) at top to transparent at bottom
- Circles: 40px, filled purple when active, outline when not yet scrolled to
- Cards: subtle background, rounded corners (8px), slide in from left on activation
- Mobile: single column, cards below circles, line on right
- RTL: direction rtl, line on right side, text right-aligned

Comparison Table — השוואה שמקלה על החלטות

ה-Comparison Table (טבלת השוואה) מציגה פיצ'רים צד-לצד בין מוצרים, תוכניות, או אפשרויות. היא שונה מ-Pricing Table כי המיקוד הוא על ההשוואה, לא על המחיר.

Prompt Template — Comparison Table

Create a comparison table section:
- Layout: HTML table with 4 columns (Feature, Plan A, Plan B, Plan C)
- Header row: sticky on scroll, dark background with plan names
- Feature rows: 8-10 features, checkmark (✓) for included, dash (—) for excluded
- Highlighted column: "Plan B" (recommended) with subtle background tint
- Tooltips: on hover over feature name, show short explanation
- Style: alternating row colors, rounded corners on table container
- RTL: direction rtl, feature names right-aligned, table scrolls if needed
- Mobile: horizontal scroll with sticky first column, OR collapse to accordion

טיפ Responsive: טבלאות רחבות נשברות במובייל. 2 פתרונות:

1. Horizontal scroll — הטבלה גוללת לצדדים עם overflow-x: auto ו-sticky first column
2. Accordion collapse — כל שורה הופכת ל-accordion item שנפתח בלחיצה (עדיף למובייל)

בפרומפט: "Responsive: on mobile, convert comparison table to accordion — each feature row becomes an expandable section".

5.7 FAQ Accordion — שאלות שנפתחות בסטייל

ה-FAQ Accordion (אקורדיון שאלות נפוצות) היא סקציה שבה שאלות נפוצות מוצגות ברשימה סגורה, וכל שאלה נפתחת בלחיצה כדי לחשוף את התשובה המלאה. זו אחת הסקציות הנפוצות והחשובות ביותר באתרים — כמעט כל דף נחיתה, דף מוצר, ודף שירות כולל אחת. היא חוסכת מקום, מארגנת מידע, ומפחיתה פניות לתמיכה.

HTML Native vs. JavaScript

הדרך הפשוטה ביותר לבנות accordion היא עם <details> ו-<summary> של HTML — אפס JavaScript, נגיש by default, ועובד בכל דפדפן:

<details>
  <summary>האם יש תקופת ניסיון חינמית?</summary>
  <p>כן, 14 יום ניסיון חינם ללא צורך בכרטיס אשראי.</p>
</details>

הבעיה? בלי CSS נוסף, ה-<details> נפתח ברגע בלי אנימציה. זה מרגיש שבור. הפתרון: CSS animation על הפתיחה.

Prompt Template — FAQ Accordion

Create an FAQ accordion section:
- Structure: HTML native <details>/<summary> elements (no JavaScript required for basic functionality)
- Questions: 6 FAQ items in Hebrew
- Animation: smooth open/close with CSS transition
  - Content slides down on open (max-height transition or CSS animation)
  - Plus icon rotates to minus (or chevron rotates 180deg) on open
  - Transition: 0.3s ease
- Style: clean design, subtle border-bottom between items, no outer border
- Icon: plus/minus or chevron on the left side (RTL: icon on left, text on right)
- Behavior: allow multiple items open at the same time (don't auto-close others)
- RTL: direction rtl, text-align right, icon on left
- Mobile: full width, touch-friendly tap targets (min 44px height per summary)
- SEO: add FAQPage schema markup (JSON-LD) with all questions and answers
- Accessibility: aria-expanded states handled natively by details/summary

SEO Bonus: FAQ sections עם schema markup (FAQPage) יכולות להופיע ב-Google כ-rich results — השאלות מוצגות ישירות בתוצאות החיפוש. הוסיפו בפרומפט: "Add FAQPage JSON-LD schema markup in a script tag".

כמה שאלות לכלול? 5-10 הוא האידיאלי. פחות מ-5 נראה דל. יותר מ-10 מרגיש מכריע — אם יש לכם 15+ שאלות, חלקו ל-קטגוריות (כל קטגוריה = accordion section נפרד). לדוגמה: "שאלות על מחירים", "שאלות טכניות", "שאלות על תמיכה".

One-at-a-time vs. Multiple Open: שני הדפוסים תקפים. One-at-a-time (רק שאלה אחת פתוחה, השאר נסגרות) — מתאים כשהתשובות ארוכות ואתם רוצים למקד תשומת לב. Multiple open (כל שאלה עצמאית) — מתאים כשהמשתמש רוצה להשוות בין תשובות. HTML native details/summary = multiple open by default. אם רוצים one-at-a-time, צריך JavaScript שסוגר את השאר.

5.8 Stats Section ו-Logo Cloud — מספרים ולוגואים שבונים אמון

Stats Section — מספרים שעושים רושם

ה-Stats Section מציגה 3-5 מספרים גדולים שמשדרים הישגים: כמות לקוחות, שנות ניסיון, שביעות רצון, הכנסות. מה שהופך מספרים סטטיים למרשימים הוא counter animation — המספרים "רצים" מ-0 לערך הסופי כשהסקציה נכנסת ל-viewport.

הטכניקה:

1. IntersectionObserver — מזהה מתי הסקציה נכנסת למסך
2. requestAnimationFrame — מנפש את המספר מ-0 לערך הסופי בצורה חלקה
3. duration — 1.5-2 שניות לספירה. מספרים גדולים (10,000+) צריכים easing שמאט לקראת הסוף

Prompt Template — Stats Section

Create a stats counter section with 4 metrics:
- Stats: "1,200+ לקוחות", "₪50M+ הכנסות", "99.9% שביעות רצון", "15+ שנות ניסיון"
- Layout: 4 columns on desktop, 2 on tablet, 1 on mobile
- Animation: numbers count up from 0 when section enters viewport
  Use IntersectionObserver to trigger, requestAnimationFrame for smooth animation
  Duration: 2 seconds, ease-out (fast start, slow finish)
- Style: large numbers (font-size: 3rem+, bold), small labels below
- Background: dark gradient or solid dark color for contrast
- Suffix handling: "+" and "%" symbols should not animate, only the number
- RTL: direction rtl, but numbers remain left-to-right (standard for numbers)
- Mobile: stack in 2x2 grid, then single column on very small screens

Stats Section — טעויות ועצות

מספרים אמיתיים בלבד. אל תמציאו מספרים. אם אין לכם 1,200 לקוחות — אל תכתבו 1,200. מספרים מומצאים הורסים אמון ברגע שמישהו בודק. אם אתם סטארטאפ צעיר, השתמשו במספרים שיש לכם: "50+ פרויקטים", "3 שנות ניסיון", "100% שביעות רצון". גם מספרים קטנים עובדים אם הם אמיתיים.

סיומות (suffixes): חשוב שה-"+" או "%" לא יהיו חלק מהאנימציה — רק המספר רץ. ציינו בפרומפט: "Only animate the number, not the suffix. Plus sign and percent should remain static."

Easing: מספרים שעוצרים ברגע נראים מכניים. הוסיפו ease-out — מהיר בהתחלה, איטי לקראת הסוף. זה נותן תחושה של "הגעתי ליעד".

Logo Cloud — לוגואים שבונים אמון

ה-Logo Cloud (ענן לוגואים) מציג את הלוגואים של הלקוחות, השותפים, או המדיה שסיקרה אתכם. זה אחד מכלי ה-social proof הכי יעילים — "אם Monday.com, Wix ו-Check Point עובדים איתנו, גם אתה יכול לסמוך עלינו".

2 Patterns:

• Static Grid — 4-6 לוגואים בשורה. Grayscale by default, צבע ב-hover. פשוט ויעיל.
• Infinite Marquee — לוגואים גוללים אוטומטית בלולאה אינסופית. CSS animation על translateX עם logos duplicated. חובה: pause on hover + prefers-reduced-motion: reduce stops animation.

Create a logo cloud section:
- Layout: infinite horizontal marquee (auto-scrolling, seamless loop)
- Logos: 8 placeholder logo boxes (replace with real logos later)
- Style: grayscale by default (filter: grayscale(1) opacity(0.6)), full color on hover
- Speed: 30 seconds per full loop, smooth linear animation
- Behavior: pause on hover, respect prefers-reduced-motion (stop animation)
- Heading: "לקוחות שסומכים עלינו" above the marquee
- Mobile: same marquee, smaller logos (height: 30px instead of 50px)
- RTL: marquee scrolls right-to-left (natural Hebrew direction)
- Duplicate logos in HTML for seamless loop effect

5.9 Masonry Grid ו-Stacked Cards — פריסות מתקדמות

Masonry Grid — פריסת Pinterest

ה-Masonry Grid (פריסת masonry, כמו "לבנים") היא פריסה שבה כרטיסים בגבהים שונים ממלאים את המרחב בצורה אופטימלית — בלי רווחים ריקים. אתם מכירים את זה מ-Pinterest, ומ-portfolio של מעצבים.

3 דרכים לבנות Masonry Grid:

Prompt Template — Masonry Grid (CSS columns):

Create a masonry grid portfolio section:
- Layout: CSS columns (NOT CSS Grid masonry — not production ready)
  column-count: 3 on desktop, 2 on tablet, 1 on mobile
  column-gap: 16px
- Cards: 8-10 cards with varying heights (mix of tall images, short text cards, medium cards)
- Each card: image/placeholder + optional title + optional short text
- Style: rounded corners (12px), break-inside: avoid on each card, margin-bottom: 16px
- Hover: subtle scale(1.02) + shadow increase
- RTL: content direction rtl, but column flow is left-to-right (standard for masonry)
- Mobile: single column, all cards full width

Stacked Cards — כרטיסים שנחשפים בגלילה

ה-Stacked Cards (כרטיסים מוערמים) הם pattern שבו כרטיסים "מוערמים" זה על זה, וכשהמבקר גולל — כל כרטיס "נדחף" למעלה וחושף את הבא. הטכניקה מבוססת על position: sticky עם z-index עולה:

1. כל כרטיס מקבל position: sticky; top: Xpx (כל כרטיס עם top גבוה יותר ב-30-50px)
2. כל כרטיס מקבל z-index עולה — כך הבא תמיד מעל הקודם
3. בגלילה, הכרטיס הראשון "נתקע" ב-top, והבא גולל מעליו

Create a stacked cards section with 4 content cards:
- Technique: position: sticky with increasing top offset (80px, 110px, 140px, 170px)
- Each card: full width, min-height 400px, distinct background color
- Content: heading + description + image per card (Hebrew)
- Z-index: increasing (1, 2, 3, 4) so each card stacks on top of previous
- Style: rounded corners (16px), shadow, dark theme variations per card
- Mobile: disable sticky stacking, show as normal vertically scrolling cards
- RTL: direction rtl, text-align right

מתי Stacked Cards עובד מעולה: כשיש לכם 3-5 sections עם תוכן עשיר שרוצים להציג בצורה cinematic — כל section "חושפת" את הבאה. פופולרי מאוד באתרי Apple, Vercel, ו-Linear ב-2025-2026. זה עובד מצוין לסיפור של תהליך (שלב אחרי שלב) או להצגת פיצ'רים "אחד-אחד" בצורה דרמטית.

אזהרה: Stacked Cards דורשים גובה דף משמעותי (כל card = לפחות 100vh של scrollable area). אם הדף כבר ארוך — זה עלול להרגיש אינסופי למשתמש שמנסה להגיע לתחתית. השתמשו במשורה: 3-4 cards מקסימום, ואל תשלבו עם עוד sections כבדות scroll-intensive באותו דף. זכרו גם שבמובייל position: sticky עובד שונה — ברוב המקרים עדיף לבטל את ה-stacking במובייל ולהציג את הכרטיסים כרגיל בזה אחר זה.

5.10 Component Libraries — ספריות השראה ורכיבים מוכנים

אחד ה-shortcuts החזקים ביותר בעבודה עם AI הוא לציין בשם את הספרייה ואת הרכיב שרוצים. במקום לתאר "כרטיס עם אפקט של אור שעוקב אחרי העכבר", אפשר לכתוב: "Create a component like Aceternity UI's Spotlight Card" — ו-AI מבין בדיוק מה לבנות.

הנה 4 ספריות שכדאי להכיר ולהשתמש בשמות שלהן בפרומפטים:

איך להשתמש בשמות של ספריות בפרומפטים

הטריק: ציינו את שם הספרייה + שם הרכיב בפרומפט שלכם. AI מכיר את הספריות האלה ויודע בדיוק מה כל רכיב עושה:

איך לבחור ספרייה לפי הצורך

לא כל ספרייה מתאימה לכל מצב. הנה כלל אצבע:

• צריכים בסיס נקי ומותאם אישית? → shadcn/ui — רכיבים unstyled שאתם מעצבים. הכי טוב כשרוצים שליטה מלאה.
• צריכים WOW effects לדף נחיתה? → Aceternity UI — אפקטים מרשימים מוכנים. הכי טוב ל-portfolio ו-landing pages.
• צריכים animated marketing components? → Magic UI — marquees, number tickers, shimmer buttons. הכי טוב ל-SaaS marketing sites.
• צריכים משהו ניסיוני ומקורי? → Cult UI — spring physics, morphing. הכי טוב להשראה ולפרויקטים ייחודיים.

חשוב: אתם לא צריכים להתקין את הספריות. אתם משתמשים בשמות שלהן כ-reference בפרומפטים. AI מכיר את הרכיבים ויודע ליצור משהו דומה — גם אם לא באותה טכנולוגיה בדיוק. השם הוא ה-shortcut.

5.11 סיכום וצ'קליסט — בונים את גוף האתר

עברנו דרך ארוכה בפרק הזה — מאנטומיה של סקציית תוכן, דרך 8+ סוגי סקציות עם prompt template לכל אחד, ועד component libraries שמשמשות כ-shortcut בפרומפטים. הגיע הזמן לעצור ולוודא שהכל נמצא.

מה בניתם בפרק הזה:

• קטלוג של 10+ סוגי סקציות תוכן עם שמות מקצועיים ו-prompt template לכל אחד
• Bento Grid רספונסיבי בסגנון Apple
• Feature Cards עם hover effects שבדקתם ובחרתם
• Pricing Table מלא עם toggle חודשי/שנתי ב-₪
• עץ החלטות — איזה סוג סקציה מתאים לאיזה סוג תוכן
• דף נחיתה שלם עם 5 סקציות מגוונות

מה למדתם:

• כל סקציה צריכה סוג מוגדר — לא "תעשה לי עוד section". Bento Grid, Pricing Table, FAQ Accordion — שמות מדויקים = AI מבין בדיוק מה לבנות
• ריתמוס הדף חשוב לא פחות מהתוכן — לא חוזרים על אותו סוג סקציה פעמיים ברצף
• Hover effects חובה להיות מבוטלים במובייל — או מומרים ל-tap interaction
• Component libraries הן shortcut בפרומפטים — ציון שם הספרייה + הרכיב חוסך 20 שורות של הסבר