<div dir="rtl" lang="he">

# תרגילים - שיעור 3.4: בניית אתר/דף נחיתה מאפס עם Claude Code

## מידע כללי
- **שיעור:** 3.4 - בניית דף נחיתה עם Claude Code
- **סוג השיעור:** מעשי (4 שעות)
- **הערה:** כל התרגילים מבוצעים עם Claude Code בזמן אמת. המטרה היא לתרגל את שרשרת העבודה (Workflow) מאפס ועד לאוויר (Deploy).

---

## תרגיל 1: הגדרת סביבה, CLAUDE.md ו-Hero Section (מונחה)
**מטרה:** יצירת הבסיס לפרויקט, הגדרת חוקי כתיבה ל-Claude Code ובניית החלק העליון של הדף.

**הוראות:**
1. פתחו תיקייה חדשה בשם `cafe-rothschild` ופתחו אותה בטרמינל.
2. הפעילו את Claude Code (על ידי הקלדת `claude`).
3. הזינו את הפרומפט הבא כדי לייצר את קובץ ההנחיות:
"צור קובץ CLAUDE.md בתיקייה זו. הגדר בו את החוקים הבאים: כל קוד ה-HTML שאתה מייצר חייב להיות עם תגית dir='rtl' ו-lang='he'. השתמש תמיד ב-Tailwind CSS v4 דרך CDN. העיצוב חייב להיות Mobile-first. אין להשתמש ב-CSS חיצוני, הכל באמצעות מחלקות Tailwind."
4. לאחר יצירת הקובץ, הזינו את הפרומפט הבא לבניית הדף:
"צור קובץ index.html. הוסף שלד HTML5 תקני. הוסף את ה-CDN של Tailwind v4. בנה Hero Section לבית קפה בשם 'קפה רוטשילד'. כלול כותרת ראשית (H1) מזמינה, תת-כותרת שמתארת קפה בוטיק בתל אביב, וכפתור CTA בולט שכתוב עליו 'לתפריט המלא'. השתמש בצבעים חמים (גווני חום וקרם)."
5. פתחו את קובץ ה-index.html בדפדפן וודאו שה-Hero נראה כראוי.

## תרגיל 2: הוספת Features, Testimonials והתאמה למובייל (מונחה)
**מטרה:** הרחבת דף הנחיתה באמצעות Claude Code תוך דגש על עיצוב רספונסיבי.

**הוראות:**
1. באותו סשן של Claude Code, בקשו ממנו להמשיך לעבוד על index.html.
2. הזינו את הפרומפט:
"הוסף מתחת ל-Hero אזור של 'ההתמחויות שלנו' (Features) עם 3 עמודות: פולי קפה בקלייה מקומית, מאפים טריים כל בוקר, ואווירה תל-אביבית. השתמש באייקונים מבוססי SVG לכל התמחות."
3. הזינו פרומפט נוסף לאזור ההמלצות:
"הוסף אזור המלצות (Testimonials) עם שתי ביקורות מלקוחות: 'יוסי מפלורנטין' ו-'מיכל מגבעתיים'. עצב את הביקורות ככרטיסיות (Cards) עם הצללה עדינה."
4. בקשו מ-Claude Code לבדוק רספונסיביות:
"עבור על הקוד וודא שבאזור ההתמחויות וההמלצות אתה משתמש ב-flex-col במובייל וב-md:flex-row במסכים גדולים יותר. תקן את הקוד במידת הצורך."
5. רעננו את הדפדפן, כווצו את החלון לגודל של סמארטפון וודאו שהעיצוב נשבר נכון.

## תרגיל 3: SEO, CRO, Footer והעלאה לאוויר (מונחה)
**מטרה:** סגירת קצוות לדף מנצח והעלאה לאוויר (Deploy).

**הוראות:**
1. הזינו את הפרומפט הבא לטובת SEO ו-Footer:
"הוסף תגיות Meta ל-SEO ב-head: כותרת מתאימה, תיאור (Description) שכולל את מילות המפתח 'בית קפה בתל אביב, קפה רוטשילד, קפה בוטיק'. בנוסף, הוסף Footer פשוט עם זכויות יוצרים, כתובת (שדרות רוטשילד 100, תל אביב) ומספר טלפון. הפוך את מספר הטלפון ללחיץ ממובייל (tel:)."
2. להגברת המרות (CRO), הזינו:
"הוסף כפתור 'הזמן שולחן' דביק (Sticky) שמופיע תמיד בתחתית המסך במובייל."
3. צאו מ-Claude Code ודחפו את הקוד ל-GitHub, או השתמשו ב-Wrangler CLI כדי להעלות את הדף ל-Cloudflare Pages.
4. ודאו שהדף נגיש דרך הלינק הציבורי.

## תרגיל 4: דף נחיתה למאלף כלבים בשרון (פתוח)
**מטרה:** עבודה עצמאית עם תקציר עסק (Brief) מול Claude Code.

**תקציר העסק:**
- **שם:** דוגי-סטייל אילוף מתקדם
- **מיקום:** אזור השרון (הרצליה, רעננה, כפר סבא)
- **קהל יעד:** בעלי גורים או כלבים עם בעיות התנהגות
- **מטרה (CRO):** איסוף לידים לשיחת ייעוץ חינם.
- **דרישות ביצוע:** הגדירו CLAUDE.md עם הנחיות. בקשו מ-Claude Code לבנות דף מלא (Hero, שירותים, אודות המאלף, טופס לידים בולט). הדף חייב לשדר אמון וסמכותיות (גווני כחול וירוק).
- **תוצר:** דף index.html עובד בדפדפן.

## תרגיל 5: דף המתנה (Waitlist) לסטארטאפ סייבר/AI (פתוח)
**מטרה:** עיצוב מודרני מבוסס Dark Mode ומיקוד בפעולה אחת (Micro-conversion).

**תקציר העסק:**
- **שם:** CyberShield.AI
- **אווירה:** הייטקיסטי, Dark Mode, תל אביב, עתידני.
- **תוכן:** כותרת שיווקית חזקה ("דור העתיד של אבטחת ענן"), אנימציה פשוטה (באמצעות Tailwind classes בלבד), וטופס הצטרפות ל-Waitlist (שדה אימייל וכפתור).
- **דרישות ביצוע:** הנחו את Claude Code לייצר דף נחיתה מינימליסטי. הטופס צריך להיות במרכז המסך (Centered layout). ודאו שהקונטרסט נעים לעין.
- **תוצר:** דף נחיתה כהה ומרשים, פתוח בדפדפן.

## תרגיל 6: דף נחיתה ממוקד מובייל למנעולן חירום (פתוח)
**מטרה:** תכנון דף נחיתה לשירות חירום שמצריך המרה מהירה מאוד.

**תקציר העסק:**
- **שם:** מנעולן אקספרס 24/7
- **מיקום:** גוש דן
- **אפיון:** הלקוח בדרך כלל לחוץ, עומד מחוץ לדלת, וגולש מהסמארטפון.
- **דרישות ביצוע:** באמצעות Claude Code, צרו דף שמציג כפתור "חייג עכשיו" ענק כבר בשנייה הראשונה (Above the fold). הטקסט צריך להיות קצר ולעניין: "הגעה עד 20 דקות". הוסיפו תג הוכחה חברתית ("מעל 1000 לקוחות מרוצים בגוש דן"). התעלמו לחלוטין מתצוגת דסקטופ מרשימה - המיקוד הוא 100% Mobile UI.
- **תוצר:** HTML מוצג במצב "Device Toolbar" (מובייל) בדפדפן.

## תרגיל 7: משימת בית
**הגישו עד השיעור הבא.**

**המשימה:**
בנו דף נחיתה אמיתי עבור רעיון עסקי שלכם, פרויקט צד, או עסק של בן משפחה/חבר בישראל.
עליכם ליישם את שרשרת העבודה המלאה:
1. כתיבת אפיון קצר (Brief) בקובץ טקסט.
2. הגדרת `CLAUDE.md` מתאים לפרויקט.
3. שימוש ב-Claude Code לבניית כל הסקשנים (Hero, Features, Testimonials, CTA, Footer).
4. הוספת תגיות SEO ויישום עקרונות CRO (כפתור קריאה לפעולה ברור).
5. פריסה (Deployment) של האתר באמצעות GitHub Pages או Cloudflare Pages.

**אופן ההגשה:**
יש להגיש קישור ציבורי (URL) לדף הנחיתה התקין באוויר, בצירוף קובץ ה-CLAUDE.md שבו השתמשתם.

---

## קריטריונים להערכה
| קריטריון | ציון |
|---|---|
| **שימוש נכון ב-Tailwind v4** (עיצוב מודרני, ללא CSS חיצוני) | 20% |
| **רספונסיביות (Mobile First)** (הדף נראה ומתפקד מצוין בנייד) | 25% |
| **Vibe Coding Workflow** (עבודה נכונה עם CLAUDE.md ופרומפטים) | 20% |
| **SEO ו-CRO** (הנעה ברורה לפעולה, היררכיית כותרות, תגיות מטא) | 15% |
| **Deployment** (הדף באוויר וזמין בקישור ציבורי) | 20% |

</div>