Claude/digital product template 6 ni1o

.replit

@@ -0,0 +1,10 @@
+run = "python3 -m http.server 8080"
+language = "html"
+entrypoint = "index.html"
+
+[nix]
+channel = "stable-21_11"
+
+[deployment]
+run = ["sh", "-c", "python3 -m http.server 8080"]
+deploymentTarget = "cloudrun"

CONFIG.txt

@@ -0,0 +1,186 @@
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  دليل التخصيص السريع - QUICK CUSTOMIZATION GUIDE
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+مرحبًا! 👋
+
+هذا الملف يحتوي على جميع الأماكن التي تحتاج لتعديلها لتخصيص القالب.
+اتبع الخطوات بالترتيب وستكون جاهزًا للبيع خلال 15 دقيقة!
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 1: تفعيل روابط الدفع (الأهم!)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html
+📍 ابحث عن السطور: 186-193
+
+▶ الرابط الحالي:
+   <a href="YOUR_STRIPE_PAYMENT_LINK" ...>
+
+▶ غيّره إلى:
+   <a href="https://buy.stripe.com/YOUR_LINK_HERE" ...>
+
+▶ كيف تحصل على رابط Stripe:
+   1. سجّل حساب في: https://stripe.com
+   2. اذهب إلى: Products → Create Payment Link
+   3. أدخل السعر: $27
+   4. انسخ الرابط والصقه مكان YOUR_STRIPE_PAYMENT_LINK
+
+▶ الرابط الحالي:
+   <a href="YOUR_PAYPAL_PAYMENT_LINK" ...>
+
+▶ غيّره إلى:
+   <a href="https://paypal.me/YOUR_USERNAME/27" ...>
+
+▶ كيف تحصل على رابط PayPal:
+   1. سجّل حساب في: https://paypal.com
+   2. فعّل PayPal.Me من الإعدادات
+   3. اختر اسم المستخدم الخاص بك
+   4. استخدم الرابط: https://paypal.me/USERNAME/27
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 2: تغيير محتوى الصفحة
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html
+
+▶ تغيير العنوان الرئيسي (السطر: 17-18)
+   الحالي: <h1 class="hero-title">هل تعاني من التعب المستمر...</h1>
+   عدّله إلى مشكلتك الصحية الخاصة
+
+▶ تغيير العنوان الفرعي (السطر: 19)
+   الحالي: <p class="hero-subtitle">اكتشف الحل العلمي...</p>
+   اكتب الحل الذي يقدمه منتجك
+
+▶ تغيير اسم المنتج (السطر: 10)
+   الحالي: <title>دليلك الشامل للصحة والعافية</title>
+   ضع اسم منتجك الرقمي
+
+▶ تغيير السعر (السطر: 147-149)
+   الحالي: <span class="amount">27</span>
+   غيّر الرقم 27 إلى سعرك
+
+   الحالي: <del>$67</del>
+   غيّر السعر القديم حسب رغبتك
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 3: تخصيص محتويات المنتج
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html
+📍 القسم: Contents Section (السطور: 104-143)
+
+▶ عدّل العناصر الستة حسب محتوى منتجك:
+   - دليل التغذية الصحية ← منتجك الأول
+   - برنامج التمارين المنزلية ← منتجك الثاني
+   - دليل النوم الصحي ← منتجك الثالث
+   ... إلخ
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 4: تحديث معلومات الاتصال
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html - Footer (السطور: 231-242)
+
+▶ استبدل الإيميلات:
+   - ابحث عن: support@yourdomain.com
+   - غيّره إلى: بريدك الإلكتروني الحقيقي
+   - يوجد في 3 أماكن (index.html + thank-you.html)
+
+📍 الملف: thank-you.html - السطر: 56
+
+▶ استبدل:
+   noreply@yourdomain.com
+   بإيميل الإرسال الخاص بك
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 5: تخصيص الألوان (اختياري)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: assets/css/style.css
+📍 القسم: :root (السطور: 12-20)
+
+▶ الألوان الرئيسية:
+   --primary-color: #10B981;     ← لون أخضر صحي
+   --primary-dark: #059669;      ← أخضر داكن
+
+▶ غيّرها حسب هويتك:
+   مثلاً للون أزرق:
+   --primary-color: #3B82F6;
+   --primary-dark: #2563EB;
+
+   مثلاً للون برتقالي:
+   --primary-color: #F59E0B;
+   --primary-dark: #D97706;
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 6: إضافة صورة المنتج (اختياري)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+▶ إذا كانت لديك صورة للمنتج:
+   1. ضعها في: assets/images/product.png
+   2. أضف في index.html بعد السطر 20:
+      <img src="assets/images/product.png" alt="المنتج" style="max-width: 400px; margin-top: 2rem;">
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 7: SEO - تحسين محركات البحث
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html (السطور: 5-7)
+
+▶ غيّر الوصف:
+   <meta name="description" content="منتج رقمي صحي...">
+   اكتب وصف مختصر لمنتجك (150-160 حرف)
+
+▶ غيّر الكلمات المفتاحية:
+   <meta name="keywords" content="صحة، عافية...">
+   أضف كلمات متعلقة بمنتجك
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 8: إضافة Google Analytics (اختياري)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+▶ إذا أردت تتبع الزوار:
+   1. سجّل في: https://analytics.google.com
+   2. أنشئ property جديد
+   3. احصل على كود التتبع
+   4. الصقه قبل </head> في index.html
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 9: اختبار قبل النشر
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ افتح index.html في المتصفح
+✓ تأكد من أن كل النصوص صحيحة
+✓ جرّب الضغط على زر "اشترِ الآن"
+✓ تأكد من أنه يوجهك لصفحة الدفع الصحيحة
+✓ افتح الموقع من الهاتف وتأكد من أنه responsive
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الخطوة 10: رفع المشروع على Replit
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+1. اذهب إلى: https://replit.com
+2. اضغط: Create Repl
+3. اختر: HTML, CSS, JS
+4. ارفع جميع الملفات
+5. اضغط: Run
+6. انسخ الرابط وشاركه مع العملاء!
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  نصائح إضافية
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ احتفظ بنسخة احتياطية من الملفات الأصلية
+✓ جرّب عملية الشراء بنفسك أولاً (Stripe Test Mode)
+✓ راجع التهجئة والأخطاء الإملائية
+✓ تأكد من أن جميع الروابط تعمل
+✓ اختبر الموقع على متصفحات مختلفة
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  هل تحتاج مساعدة؟
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+راجع ملف README.md للحصول على شرح مفصّل أكثر.
+
+بالتوفيق! 🚀