Skip to content

NEW_PROJECT_GUIDE.md

Latest commit

 

History

History
192 lines (151 loc) · 6.27 KB

NEW_PROJECT_GUIDE.md

File metadata and controls

192 lines (151 loc) · 6.27 KB

🚀 מדריך פתיחת פרויקט חדש עם Claude

📋 סקירה כללית

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

🎯 שלב 1: הכנת הפרויקט החדש

1.1 יצירת Repository חדש

# צור repo חדש ב-GitHub עבור הלקוח
# שם מומלץ: client-name-website (לדוגמה: sara-salon-website)

1.2 שכפול והכנת הבסיס

# שכפל את המבנה הבסיסי
git clone https://github.com/nioasoft/CODE7.git client-project
cd client-project

# נקה היסטוריה ישנה
rm -rf .git
rm -rf data/siteData.json  # נקה דאטה ישנה

# צור Git חדש
git init
git remote add origin https://github.com/YOUR_USERNAME/client-project.git

# צור commit ראשוני
git add .
git commit -m "Initial project setup from CODE7 template"
git push -u origin main

1.3 נקה תוכן דמו

  • מחק תמונות מ-assets/images/
  • נקה את תוכן data/siteData.json
  • הסר לוגו קיים

📝 שלב 2: פתיחת שיחה עם Claude

תבנית לפתיחת שיחה:

היי Claude! אני רוצה לבנות אתר חדש.

**מידע טכני:**
- Master Components: https://github.com/nioasoft/CODE7
- New Project: https://github.com/YOUR_USERNAME/client-project
- Current Directory: /path/to/client-project

**פרטי הלקוח:**
- שם העסק: [שם העסק]
- תחום: [מספרה/מסעדה/עורך דין/אחר]
- שפה: [עברית/אנגלית]
- כיוון: [RTL/LTR]

**דרישות:**
- סוג אתר: [תדמית/חנות/תורים/בלוג]
- עמודים: [ראשי/אודות/שירותים/צור קשר/אחר]
- פיצ'רים מיוחדים: [מערכת תורים/תשלומים/גלריה/אחר]

**עיצוב:**
- סגנון: [מודרני/קלאסי/מינימליסטי]
- צבעים ראשיים: [#צבע1, #צבע2]
- פונט מועדף: [Heebo/Rubik/Open Sans]

**קומפוננטים רצויים:**
- Header: [modern-rtl/classic/minimal]
- Hero: [gradient-animated/image-bg/video]
- Features: [services-cards/pricing-table]

🧩 שלב 3: קומפוננטים זמינים

Headers

  • modern-rtl - הדר מודרני עם תמיכה ב-RTL (מהאתר הנוכחי)
  • classic - הדר קלאסי עם לוגו במרכז (יבנה בעתיד)
  • minimal - הדר מינימליסטי (יבנה בעתיד)

Heroes

  • gradient-animated - Hero עם רקע גרדיאנט מונפש (מהאתר הנוכחי)
  • image-bg - Hero עם תמונת רקע (יבנה בעתיד)
  • video-bg - Hero עם וידאו ברקע (יבנה בעתיד)
  • slider - Hero עם סליידר תמונות (יבנה בעתיד)

Features

  • services-cards - כרטיסי שירותים עם אייקונים (מהאתר הנוכחי)
  • projects-grid - גריד פרויקטים עם תמונות (מהאתר הנוכחי)
  • testimonials-cards - כרטיסי המלצות (מהאתר הנוכחי)
  • faq-accordion - שאלות נפוצות באקורדיון (מהאתר הנוכחי)
  • pricing-table - טבלת מחירים (יבנה בעתיד)
  • team-members - הצגת צוות (יבנה בעתיד)

Systems

  • contact-form - טופס יצירת קשר עם שמירה ל-DB (מהאתר הנוכחי)
  • admin-panel - פאנל ניהול מלא (מהאתר הנוכחי)
  • booking-system - מערכת הזמנת תורים (יבנה בעתיד)
  • ecommerce - מערכת מסחר אלקטרוני (יבנה בעתיד)
  • blog - מערכת בלוג (יבנה בעתיד)
  • user-auth - מערכת משתמשים (יבנה בעתיד)

Forms

  • contact-advanced - טופס קשר מתקדם (מהאתר הנוכחי)
  • newsletter - טופס רישום לניוזלטר (יבנה בעתיד)
  • quote-request - טופס בקשת הצעת מחיר (יבנה בעתיד)

🔧 שלב 4: התאמות נפוצות

שינוי צבעים

/* ב-styles.css */
:root {
    --color-primary: #007AFF;  /* צבע ראשי */
    --color-secondary: #5856D6; /* צבע משני */
    --color-text: #1D1D1F;     /* צבע טקסט */
}

שינוי פונטים

<!-- ב-index.html -->
<link href="https://fonts.googleapis.com/css2?family=YOUR_FONT:wght@300;400;500;700&display=swap" rel="stylesheet">

הוספת עמודים

# צור עמוד חדש
cp index.html about.html
# ערוך את התוכן בהתאם

📦 שלב 5: Deployment

אפשרות 1: Heroku (כמו האתר הנוכחי)

# הוסף Procfile
echo "web: node server.js" > Procfile

# צור אפליקציה ב-Heroku
heroku create client-name-site

# דחוף לייצור
git push heroku main

אפשרות 2: Vercel/Netlify (לאתרים סטטיים)

  • חבר את ה-repo
  • בחר branch: main
  • Deploy

💡 טיפים חשובים

1. סדר עבודה מומלץ

  1. התקן את הבסיס
  2. התאם צבעים ופונטים
  3. עדכן תוכן (טקסטים, תמונות)
  4. הוסף/הסר features לפי הצורך
  5. בדוק באמולטור מובייל
  6. העלה לייצור

2. שמירה על עקביות

  • השתמש באותה מתודולוגיית CSS
  • שמור על מבנה קבצים זהה
  • תעד שינויים מיוחדים

3. קומפוננט חדש?

אם צריך קומפוננט שלא קיים:

  1. בנה אותו קודם ב-CODE7 master
  2. בדוק שעובד כמו שצריך
  3. העתק לפרויקט החדש
  4. תעד אותו כאן

🐛 בעיות נפוצות

בעיה: תמונות לא נטענות

פתרון: בדוק נתיבים ב-siteData.json, ודא שהתמונות קיימות ב-assets

בעיה: טופס לא נשלח

פתרון: בדוק שה-server.js רץ, ושיש חיבור ל-database

בעיה: אנימציות איטיות

פתרון: הפחת את ה-delay בין אלמנטים ב-script.js

📞 תמיכה

  • Documentation: /docs בפרויקט הבסיס
  • Examples: /examples לדוגמאות מוכנות
  • Components specs: /components/README.md

עדכון אחרון: דצמבר 2024 גרסה: 1.0.0