From 2603874339758d5131fc0cc391255196d3ac877b Mon Sep 17 00:00:00 2001
From: digitalstore2025 <abedasaker5@gmail.com>
Date: Wed, 24 Dec 2025 05:58:48 +0300
Subject: [PATCH 1/5] Add text summarizer eval configuration

---
 config/text-summarizer-eval.yaml | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 config/text-summarizer-eval.yaml

diff --git a/config/text-summarizer-eval.yaml b/config/text-summarizer-eval.yaml
new file mode 100644
index 00000000..1648d920
--- /dev/null
+++ b/config/text-summarizer-eval.yaml
@@ -0,0 +1,23 @@
+name: Text Summarizer
+description: Summarizes input text concisely
+model: openai/gpt-4o-mini
+modelParameters:
+  temperature: 0.5
+messages:
+  - role: system
+    content: You are a text summarizer. Your only job is to summarize text given to you.
+  - role: user
+    content: |
+      Summarize the given text, beginning with "Summary -":
+      <text>
+      {{input}}
+      </text>
+testData:
+  - input: |
+      The quick brown fox jumped over the lazy dog.
+      The dog was too tired to react.
+    expected: Summary - A fox jumped over a lazy, unresponsive dog.
+evaluators:
+  - name: Output should start with 'Summary -'
+    string:
+      startsWith: 'Summary -'

From 4d0a88e3b73a539895e8ed15e5ade24b9e26a94c Mon Sep 17 00:00:00 2001
From: digitalstore2025 <abedasaker5@gmail.com>
Date: Mon, 29 Dec 2025 08:42:29 +0300
Subject: [PATCH 2/5] Fix repolinter ruleset JSON syntax

---
 config/repolinter-ruleset.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/repolinter-ruleset.json b/config/repolinter-ruleset.json
index c57e1b87..c0467d79 100644
--- a/config/repolinter-ruleset.json
+++ b/config/repolinter-ruleset.json
@@ -62,7 +62,7 @@
             },
             "policyInfo": "GitHub requires a CODEOWNERS file in all projects. This enables GitHub to contact the maintainers in the event it is necessary.",
             "policyUrl": "https://github.com/github/open-source/blob/main/policies/release.md"
-        },
+        }
     },
     "formatOptions": {
         "disclaimer": "🤖*This issue was automatically generated by [repolinter-action](https://github.com/newrelic/repolinter-action), developed by the Open Source and Developer Advocacy team at New Relic.*"

From d568ffe0f651f33fe50da64d28647d741f2b5a0a Mon Sep 17 00:00:00 2001
From: digitalstore2025 <abedasaker5@gmail.com>
Date: Mon, 29 Dec 2025 12:47:52 +0300
Subject: [PATCH 3/5] Add wireflow design for radio dashboard

---
 design/radio-dashboard-prototype.md | 125 ++++++++++++++++++++++++++++
 design/radio-dashboard-wireflow.md  |  72 ++++++++++++++++
 2 files changed, 197 insertions(+)
 create mode 100644 design/radio-dashboard-prototype.md
 create mode 100644 design/radio-dashboard-wireflow.md

diff --git a/design/radio-dashboard-prototype.md b/design/radio-dashboard-prototype.md
new file mode 100644
index 00000000..c465f10b
--- /dev/null
+++ b/design/radio-dashboard-prototype.md
@@ -0,0 +1,125 @@
+# لوحة التحكم الإعلامية لإذاعة "صوت القدس" — نموذج أولي جاهز للبرمجة
+
+يوثق هذا المستند نموذجًا أوليًا (low/medium fidelity) للوحة تحكم توليد محتوى لحظي. يشمل بنية الواجهة، تدفقات الاستخدام، التكامل مع نماذج الذكاء الاصطناعي، واستقبال الأخبار من مصادر خارجية (RSS/API)، مع خصائص النسخ والتصدير السريع.
+
+## 1) أهداف المنتج
+- توليد محتوى عربي إذاعي/تحريري بسرعة مع ضبط النبرة (إذاعي، إخباري، مهني).
+- تحديث لحظي للأخبار (1 أو 5 دقائق) مع مرونة تخصيص الصيغة والإخراج.
+- تصدير سريع للنشر (نسخ فوري، ملفات، أو ربط مع قنوات توزيع).
+- حوكمة تحريرية: إبراز المصادر، حفظ سياق المراجعة البشرية، ومنع النشر الآلي غير المراقب.
+
+## 2) خارطة الواجهة (مكونات رئيسية)
+1. **شريط علوي**: شعار الإذاعة + حالة الاتصال + مؤشر آخر تحديث.
+2. **لوحة التحكم السريعة** (يمين/يسار حسب اللغة):  
+   - اختيار نوع المحتوى: زرّ/قائمة (منشور، نشرة إذاعية، تغطية عاجلة، ملخّص تحليلي).  
+   - فترة التحديث: أزرار راديو (1 دقيقة، 5 دقائق) + خيار إيقاف/تشغيل التحديث التلقائي.  
+   - مصدر الأخبار: اختيار/بحث (RSS جاهز + مصادر API) مع شارة الموثوقية.  
+   - لغة الإخراج: عربي/ثنائي/إنجليزي.  
+   - نبرة التحرير: (إذاعي، رسمي، ميداني، تحليلي) مع وصف موجز.
+3. **لوحة الأخبار الحية**: جدول/بطاقات بعناوين الأخبار، المصدر، الزمن، الوسوم (عاجل/تحليلي). دعم فرز/بحث/تصفية.
+4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**:  
+   - حقل نصي متعدد الأسطر + عداد أحرف.  
+   - أزرار قوالب جاهزة (عاجل 🔴، نشرة 📻، تواصل اجتماعي 📱).  
+   - معلمات الذكاء الاصطناعي: مستوى الإيجاز/التفصيل، درجة الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.  
+   - زر **توليد** + حالة انتظار/إشعار نجاح أو فشل.
+5. **التصدير السريع**:  
+   - **نسخ فوري** (Copy) مع رسالة نجاح.  
+   - **حفظ كملف** (TXT/HTML/Markdown).  
+   - **نشر عبر API** (Webhook/CMS/Social) مع مفتاح سري مخزّن آمنًا.  
+   - سجل آخر 10 مخارج محفوظة للتراجع أو الإعادة.
+6. **لوحة المراجعة والتحريرية**: حقل لملاحظات المراجع، حالة "مراجَع/غير مراجَع"، سجلات تغييرات مختصرة.
+
+## 3) تدفقات الاستخدام الأساسية
+1. **اختيار نوع المحتوى** → يظهر نموذج الإعدادات المناسب (مثلاً النشرة الإذاعية تعرض مدة النشرة + فواصل صوتية).  
+2. **التحديث اللحظي**: تحديد 1 أو 5 دقائق → اشتراك في WebSocket/Interval لجلب الأخبار → تحديث لوحة الأخبار الحية + مؤشر آخر تحديث.  
+3. **التوليد**: اختيار عناصر إخبارية (Checkbox) → النقر "توليد" → إرسال Prompt للـ GPT API → عرض المسودة في منطقة الصياغة.  
+4. **المراجعة**: تحرير النص يدويًا → تحديد الحالة "مراجَع" → إضافة ملاحظات.  
+5. **التصدير**: نسخ/حفظ ملف/استدعاء Webhook → إشعار نجاح مع وقت التنفيذ.
+
+## 4) التكامل مع نماذج الذكاء الاصطناعي (مثال تقني)
+- **إعدادات**: مفتاح API مشفّر، اختيار نموذج (GPT-4.x)، حدّ الطول، والتحكم في الـ temperature.  
+- **مثال طلب (Node.js/Fetch)**:
+  ```js
+  const body = {
+    model: "gpt-4.1-mini",
+    temperature: 0.4,
+    messages: [
+      { role: "system", content: "أنت محرر إذاعي فلسطيني..." },
+      { role: "user", content: `
+        لخص الأخبار التالية بنبرة إذاعية مهنية:
+        - [${selectedItems.join(" | ")}]
+        التنسيق: فقرة افتتاحية + 3 نقاط رئيسية + خاتمة دعوية قصيرة.
+        راعِ دليل المصطلحات: الاحتلال/المقاومة/الأسرى...
+      ` }
+    ]
+  };
+  const res = await fetch("/api/ai/generate", { method: "POST", body: JSON.stringify(body) });
+  const { content } = await res.json();
+  ```
+- **إدارة الأخطاء**: إشعارات صديقة، إعادة المحاولة، وضع عدم الاتصال (Offline Mode) يحفظ الطلبات ويرسلها لاحقًا.
+
+## 5) استقبال الأخبار (RSS/API)
+- **جلب RSS**: مهمة مجدولة (CRON/Interval) لكل 1 أو 5 دقائق.  
+- **تنظيف المحتوى**: إزالة الوسوم المكررة، اكتشاف اللغة، تصنيف (عاجل/رسمي/ميداني/تحليلي).  
+- **نموذج بيانات مقترح**:
+  ```json
+  {
+    "id": "uuid",
+    "source": "safa.ps",
+    "title": "عنوان الخبر",
+    "link": "https://...",
+    "published_at": "2025-01-01T10:00:00Z",
+    "language": "ar",
+    "tags": ["عاجل", "ميداني"],
+    "reliability": 4.5,
+    "summary": "ملخص قصير",
+    "body": "النص الكامل",
+    "enriched": {
+      "entities": ["غزة", "بيت لاهيا"],
+      "locations": ["فلسطين"],
+      "topics": ["سياسة", "ميداني"]
+    }
+  }
+  ```
+- **التخزين المؤقت**: IndexedDB أو LocalStorage للمتصفح + Cache API لضمان سرعة الواجهة.  
+- **توحيد المصادر المحمية**: دعم RSS.app/FetchRSS مع مفاتيح منفصلة.
+
+## 6) النسخ والتصدير
+- زر نسخ واضح أعلى منطقة الصياغة + تأكيد Toast.  
+- زر "تنزيل" مع اختيار النوع (TXT/HTML/MD).  
+- حقل Webhook URL + مفتاح سرّي للاستخدام مع CMS/شبكات اجتماعية.  
+- سجل المخارج: جدول بالعناصر الأخيرة مع وقت التوليد، الحالة (مراجَع/غير مراجَع)، ومصدر البيانات.
+
+## 7) إرشادات تصميم الواجهة
+- **تصميم RTL أولاً** مع دعم LTR.  
+- ألوان: تباين عالٍ، حالات للمصدر (موثوق/محمي/محدود) عبر شارات.  
+- حالات Loading/Empty/Error واضحة.  
+- رموز واضحة: 🔴 للعاجل، 📻 للنشرة، 📱 للتواصل.  
+- إمكانية تخصيص خط عربي مناسب للإذاعة (مثلاً "Cairo" أو "Noto Sans Arabic").
+
+## 8) نموذج بيانات الإعدادات (Front-End)
+```ts
+type Settings = {
+  contentType: "post" | "radio_bulletin" | "breaking" | "analysis";
+  refreshIntervalSec: 60 | 300;
+  autoRefresh: boolean;
+  aiTone: "radio" | "official" | "field" | "analytical";
+  language: "ar" | "ar_en" | "en";
+  sources: string[];
+  webhookUrl?: string;
+  exportFormats: ("copy" | "txt" | "html" | "md" | "webhook")[];
+};
+```
+
+## 9) نماذج قوالب التوليد (جاهزة للاستخدام)
+- **عاجل 🔴**: جملة افتتاحية + حدث رئيسي + مصدر + نداء للمتابعة.  
+- **نشرة 📻**: مقدمة، 3-5 فقرات مختصرة مع توقيت، خاتمة دعوية قصيرة.  
+- **تواصل اجتماعي 📱**: نص قصير، هاشتاقات، رابط مختصر.  
+- جميع القوالب تلتزم بدليل المصطلحات: "الاحتلال"، "المقاومة"، "الأسرى"، وتجنب مصطلحات مضللة.
+
+## 10) ملاحظات للتطوير/النشر
+- اعتماد مبدأ Offline-first + Sync عند الاتصال.  
+- حماية المفاتيح الحساسة في الخادم أو مخزن أسرار.  
+- رصد زمن التوليد والتحديث لقياس الأداء.  
+- تسجيل التدخلات البشرية للحوكمة التحريرية.
+
diff --git a/design/radio-dashboard-wireflow.md b/design/radio-dashboard-wireflow.md
new file mode 100644
index 00000000..0dae172c
--- /dev/null
+++ b/design/radio-dashboard-wireflow.md
@@ -0,0 +1,72 @@
+# لوحة التحكم الإعلامية — مخطط التدفق التفاعلي (Wireflow)
+
+يوضح هذا المستند تدفق الشاشات والقرارات الرئيسية لبناء نموذج أولي تفاعلي (Figma/Webflow) للوحة التحكم الخاصة بإذاعة "صوت القدس". يركّز على كيفية انتقال المستخدم بين الخطوات، التحكم في التحديث اللحظي، والتكامل مع نماذج الذكاء الاصطناعي ومصادر الأخبار.
+
+## 1) الشاشات الأساسية
+1. **شاشة البداية / تسجيل الدخول البسيط**  
+   - حقل مفتاح API (يُحفظ مشفّرًا في المتصفح أو عبر الخادم).  
+   - اختيار نموذج AI الافتراضي + زر "حفظ الإعدادات".
+2. **لوحة التحكم الرئيسية**  
+   - مؤشر آخر تحديث + حالة الاتصال (Online/Offline).  
+   - عناصر اختيار نوع المحتوى (منشور/نشرة إذاعية/عاجل/تحليلي).  
+   - إعداد فترة التحديث (1 أو 5 دقائق) + زر تشغيل/إيقاف التحديث التلقائي.  
+   - اختيار المصادر (RSS/API) بشارات موثوقية.  
+   - زر "فتح لوحة الأخبار" وزر "فتح منطقة الصياغة".
+3. **لوحة الأخبار الحية**  
+   - قائمة أو بطاقات بعناوين الأخبار + المصدر + زمن النشر + الوسوم.  
+   - فلاتر (عاجل/رسمي/ميداني/تحليلي) + بحث نصي.  
+   - خانة تحديد (Checkbox) لاختيار الأخبار التي ستُستخدم في التوليد.  
+   - زر "إرسال إلى الصياغة".
+4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**  
+   - حقل نصي متعدد الأسطر + عداد أحرف.  
+   - أزرار القوالب الجاهزة (عاجل 🔴 / نشرة 📻 / تواصل 📱).  
+   - معلمات AI: درجة الإيجاز، الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.  
+   - زر "توليد" + حالة التحميل/النجاح/الخطأ.  
+   - حقل ملاحظات المراجع + حالة "مراجَع/غير مراجَع".
+5. **التصدير والمشاركة**  
+   - أزرار: نسخ، تنزيل (TXT/HTML/MD)، إرسال Webhook.  
+   - قائمة بالمخارج الأخيرة مع وقت التوليد والحالة.  
+   - زر "إعادة استخدام" لإعادة فتح المخرج في منطقة الصياغة.
+
+## 2) تدفق المستخدم (Wireflow مبسط)
+1. تسجيل الدخول المفتاحي → حفظ الإعدادات → الانتقال للوحة التحكم.  
+2. اختيار نوع المحتوى + فترة التحديث + المصادر → تشغيل التحديث التلقائي (Interval/WebSocket).  
+3. فتح "لوحة الأخبار" → اختيار عناصر → "إرسال إلى الصياغة".  
+4. ضبط القالب/النبرة → "توليد" → مراجعة النص → تغيير الحالة إلى "مراجَع".  
+5. اختيار وسيلة الإخراج (نسخ/تنزيل/Webhook) → إشعار نجاح → سجل المخرجات يُحدّث.  
+6. (اختياري) تعديل الإعدادات أو تبديل المصادر → إعادة توليد/تصدير.
+
+## 3) عناصر تفاعلية مقترحة في Figma/Webflow
+- **Components**:  
+  - Buttons (Primary/Secondary/Danger) مع حالات Hover/Active/Disabled.  
+  - Cards للأخبار مع شارات موثوقية.  
+  - Tabs للفصل بين "الأخبار" و"الصياغة" و"التصدير".  
+  - Toasts للإشعارات (نجاح/خطأ/تنبيه اتصال).  
+  - Badges لوسوم المصدر والنوع (عاجل/تحليلي/رسمي).  
+- **Interactions**:  
+  - Auto-Refresh Indicator يتغير كل 1 أو 5 دقائق.  
+  - Modal لطلب مفتاح API أو إعداد Webhook.  
+  - Sidebar قابل للطيّ يحتوي على التحكم السريع.  
+  - Animations خفيفة للتحميل والتبديل بين القوالب.
+
+## 4) مخطط بيانات التفاعل (Events)
+- `onSourceSelect(sourceId)`: تحديث قائمة الاشتراك في جلب RSS/API.  
+- `onIntervalChange(60|300)`: ضبط مؤقت التحديث وجدولة الجلب.  
+- `onNewsSelect(ids[])`: حفظ العناصر المختارة للتوليد.  
+- `onGenerate(settings, selectedNews)`: استدعاء API للذكاء الاصطناعي + تسجيل وقت الطلب.  
+- `onExport(mode)`: تنفيذ نسخ/تنزيل/Webhook + إضافة سجل.  
+- `onReview(status, notes)`: تحديث حالة المراجعة وحفظ الملاحظات محليًا/على الخادم.
+
+## 5) توصيات تجربة الاستخدام
+- إبراز دليل المصطلحات في لوحة جانبية أو Tooltip.  
+- عرض مصدر كل فقرة مولدة (إدراج روابط أو وسوم).  
+- دعم لوحة مفاتيح (اختصارات للنسخ، توليد، تبديل القوالب).  
+- تخزين Draft محليًا تلقائيًا لمنع فقدان العمل.  
+- إظهار زمن الاستجابة من الـ AI لإدارة التوقعات.
+
+## 6) متطلبات تسليم التصميم
+- ملف Figma أو Webflow يتضمن:  
+  - صفحات الشاشات الخمس أعلاه.  
+  - مكونات قابلة لإعادة الاستخدام (Design System مصغر).  
+  - تفاعلات Click/Hover/Auto-Refresh موثقة.  
+- تصدير Prototype Link للمطورين مع ملاحظات (Dev Mode).

From 776baba7d125a463d850c1a128353b80a54800c0 Mon Sep 17 00:00:00 2001
From: digitalstore2025 <abedasaker5@gmail.com>
Date: Mon, 5 Jan 2026 17:41:12 +0300
Subject: [PATCH 4/5] Add dashboard prototype for Voice of Quds

---
 dashboard-prototype.html | 486 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 486 insertions(+)
 create mode 100644 dashboard-prototype.html

diff --git a/dashboard-prototype.html b/dashboard-prototype.html
new file mode 100644
index 00000000..a7aa340a
--- /dev/null
+++ b/dashboard-prototype.html
@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>لوحة تحكم صوت القدس | Voice of Quds Control Panel</title>
+  <style>
+    :root {
+      --bg: #0f172a;
+      --panel: #111827;
+      --accent: #06b6d4;
+      --accent-2: #f97316;
+      --text: #e5e7eb;
+      --muted: #94a3b8;
+      --border: #1f2937;
+      --success: #22c55e;
+      --danger: #ef4444;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: "Inter", "Cairo", system-ui, -apple-system, sans-serif;
+      background: radial-gradient(circle at 20% 20%, rgba(6, 182, 212, 0.08), transparent 40%),
+                  radial-gradient(circle at 80% 0%, rgba(249, 115, 22, 0.12), transparent 30%),
+                  var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      padding: 24px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .shell {
+      width: min(1180px, 100%);
+    }
+
+    header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    .title {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      font-weight: 700;
+      letter-spacing: 0.1px;
+    }
+
+    .title span {
+      background: linear-gradient(120deg, var(--accent), var(--accent-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .badge {
+      border: 1px solid var(--border);
+      color: var(--muted);
+      padding: 6px 10px;
+      border-radius: 10px;
+      font-size: 12px;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 16px;
+    }
+
+    .panel {
+      background: rgba(17, 24, 39, 0.8);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 16px;
+      box-shadow: 0 15px 55px rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(12px);
+    }
+
+    .panel h3 {
+      margin: 0 0 10px;
+      font-size: 16px;
+      letter-spacing: 0.2px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    label {
+      display: block;
+      font-size: 13px;
+      color: var(--muted);
+      margin-bottom: 6px;
+    }
+
+    input, select, textarea {
+      width: 100%;
+      padding: 10px 12px;
+      border-radius: 10px;
+      border: 1px solid var(--border);
+      background: #0b1220;
+      color: var(--text);
+      font-size: 14px;
+    }
+
+    textarea {
+      min-height: 80px;
+      resize: vertical;
+    }
+
+    .row {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .row > div { flex: 1; min-width: 140px; }
+
+    .choices {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .pill {
+      border: 1px solid var(--border);
+      padding: 8px 12px;
+      border-radius: 999px;
+      cursor: pointer;
+      color: var(--muted);
+      background: #0b1220;
+      transition: all 0.15s ease-in-out;
+      user-select: none;
+    }
+
+    .pill.active {
+      border-color: var(--accent);
+      color: var(--text);
+      background: rgba(6, 182, 212, 0.08);
+      box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.35);
+    }
+
+    .actions {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+
+    button {
+      border: none;
+      cursor: pointer;
+      padding: 12px 14px;
+      border-radius: 12px;
+      font-weight: 600;
+      font-size: 14px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text);
+      background: var(--accent);
+      transition: transform 0.1s ease, box-shadow 0.1s ease;
+    }
+
+    button.secondary {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--muted);
+    }
+
+    button:active { transform: translateY(1px); }
+
+    .output {
+      border: 1px dashed var(--border);
+      border-radius: 12px;
+      padding: 14px;
+      margin-top: 10px;
+      background: #0b1220;
+      line-height: 1.5;
+    }
+
+    .output h4 { margin: 0 0 6px; }
+    .output small { color: var(--muted); }
+    .output .meta { display: flex; gap: 12px; flex-wrap: wrap; }
+    .output .tags { display: flex; gap: 6px; flex-wrap: wrap; }
+    .tag {
+      background: rgba(6, 182, 212, 0.12);
+      color: var(--accent);
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(6, 182, 212, 0.25);
+      font-size: 12px;
+    }
+
+    .status-line {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-top: 8px;
+      font-size: 13px;
+      color: var(--muted);
+    }
+
+    .status-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--success);
+      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
+    }
+
+    .language-switch {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .language-switch button { padding: 10px 12px; }
+
+    @media (max-width: 640px) {
+      body { padding: 16px; }
+      header { flex-direction: column; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <header>
+      <div class="title">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 22h10"/><path d="M12 2v20"/><path d="M7 6.75a4.25 4.25 0 0 1 8.5 0v10.5a4.25 4.25 0 1 1-8.5 0V6.75Z"/></svg>
+        <div>
+          لوحة تحكم صوت القدس · <span>Voice of Quds</span>
+        </div>
+      </div>
+      <div class="language-switch">
+        <span class="badge" id="lang-label">العربية · RTL</span>
+        <button class="secondary" data-lang="ar">AR</button>
+        <button class="secondary" data-lang="en">EN</button>
+      </div>
+    </header>
+
+    <div class="grid">
+      <section class="panel">
+        <h3>🔧 الإعدادات الأساسية · Core Setup</h3>
+        <div class="row">
+          <div>
+            <label>نوع المحتوى · Content type</label>
+            <div class="choices" id="content-types">
+              <div class="pill active" data-value="bulletin">نشرة · Bulletin</div>
+              <div class="pill" data-value="post">منشور · Post</div>
+              <div class="pill" data-value="tweet">تغريدة · Tweet</div>
+            </div>
+          </div>
+          <div>
+            <label>الفترة الزمنية للتحديث · Refresh cadence</label>
+            <div class="choices" id="cadence">
+              <div class="pill active" data-value="1">كل دقيقة</div>
+              <div class="pill" data-value="5">كل 5 دقائق</div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div>
+            <label>النموذج الذكي · AI model</label>
+            <select id="model">
+              <option>GPT-4 Turbo (OpenAI)</option>
+              <option>GPT-4o Mini</option>
+              <option>Claude 3 Haiku</option>
+              <option>Custom endpoint</option>
+            </select>
+          </div>
+          <div>
+            <label>مفتاح / Endpoint</label>
+            <input id="endpoint" placeholder="https://api.your-model.com/v1" />
+          </div>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h3>🌐 المصادر · Sources</h3>
+        <label>اختر مصدرًا أو أكثر · Multi-source ingest</label>
+        <div class="choices" id="sources">
+          <div class="pill active" data-value="newsroom">غرفة الأخبار المحلية</div>
+          <div class="pill" data-value="rss">RSS / Atom</div>
+          <div class="pill" data-value="api">API خارجي</div>
+        </div>
+        <div class="row" style="margin-top:10px;">
+          <div>
+            <label>رابط RSS</label>
+            <input id="rss" placeholder="https://example.com/feed.xml" />
+          </div>
+          <div>
+            <label>رابط API</label>
+            <input id="api" placeholder="https://news.example.com/events" />
+          </div>
+        </div>
+        <div class="status-line">
+          <div class="meta">⚡ جاهز للربط مع fetch/axios.</div>
+          <div class="status-dot" title="Live"></div>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h3>✏️ التخصيص · Tone & Format</h3>
+        <label>موجه الأسلوب · Style prompt</label>
+        <textarea id="style" placeholder="مثال: لغة متوازنة، جمل قصيرة، تأكيد على المصادر الموثوقة."></textarea>
+        <div class="row">
+          <div>
+            <label>تنسيق الإخراج</label>
+            <select id="format">
+              <option value="text">نص غني Rich text</option>
+              <option value="bullet">قائمة نقطية Bullets</option>
+              <option value="script">سكريبت إذاعي Radio script</option>
+            </select>
+          </div>
+          <div>
+            <label>إرفاق وسوم</label>
+            <input id="tags" placeholder="#القدس #Breaking #Urgent" />
+          </div>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h3>🚀 التوليد والنشر · Generate & Publish</h3>
+        <div class="actions">
+          <button id="preview">👁️ معاينة المحتوى · Preview</button>
+          <button class="secondary" id="export">⬇️ تصدير / Export</button>
+          <button class="secondary" id="copy">📋 نسخ / Copy</button>
+        </div>
+        <div class="output" id="output">
+          <h4>عنوان مبدئي · Headline</h4>
+          <p>هنا سيظهر النص المولد بناءً على الإعدادات المختارة. This area previews the generated content.</p>
+          <div class="meta">
+            <small>المصدر · Source: غرفة الأخبار</small>
+            <small>التاريخ · Date: <span id="date">—</span></small>
+          </div>
+          <div class="tags" id="tags-display"></div>
+        </div>
+        <div class="status-line">
+          <span>⚙️ جاهز للدمج مع واجهات الذكاء الاصطناعي و RSS.</span>
+          <span id="copy-status"></span>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <script>
+    const state = {
+      lang: 'ar',
+      type: 'bulletin',
+      cadence: '1',
+      sources: new Set(['newsroom', 'rss']),
+    };
+
+    const strings = {
+      ar: {
+        previewTitle: 'عنوان مبدئي · Headline',
+        sourceLabel: 'المصدر · Source',
+        tagsLabel: 'وسوم',
+        copied: 'تم النسخ',
+        exported: 'تم حفظ ملف JSON',
+        langBadge: 'العربية · RTL',
+      },
+      en: {
+        previewTitle: 'Draft headline',
+        sourceLabel: 'Source',
+        tagsLabel: 'Tags',
+        copied: 'Copied',
+        exported: 'JSON saved',
+        langBadge: 'English · LTR',
+      }
+    };
+
+    const contentTypes = document.querySelectorAll('#content-types .pill');
+    const cadence = document.querySelectorAll('#cadence .pill');
+    const sources = document.querySelectorAll('#sources .pill');
+
+    function toggleActive(list, key) {
+      list.forEach(item => {
+        item.addEventListener('click', () => {
+          list.forEach(el => el.classList.remove('active'));
+          item.classList.add('active');
+          state[key] = item.dataset.value;
+        });
+      });
+    }
+
+    toggleActive(contentTypes, 'type');
+    toggleActive(cadence, 'cadence');
+
+    sources.forEach(item => {
+      item.addEventListener('click', () => {
+        const value = item.dataset.value;
+        if (state.sources.has(value)) {
+          state.sources.delete(value);
+          item.classList.remove('active');
+        } else {
+          state.sources.add(value);
+          item.classList.add('active');
+        }
+      });
+    });
+
+    document.getElementById('preview').addEventListener('click', () => {
+      const format = document.getElementById('format').value;
+      const style = document.getElementById('style').value || 'أسلوب موجز وواضح / Concise & clear.';
+      const tags = document.getElementById('tags').value.split(/[,#]/).map(t => t.trim()).filter(Boolean);
+      const title = `${state.type === 'bulletin' ? 'نشرة' : state.type === 'post' ? 'منشور' : 'تغريدة'} محدثة كل ${state.cadence} دقيقة`;
+      const body = format === 'bullet'
+        ? '• عنوان سريع\n• تفاصيل رئيسية\n• مصدر موثوق'
+        : format === 'script'
+        ? 'المُقدِّم: نبدأ من القدس...\nالمراسل: يؤكد المصدر الرسمي...'
+        : 'تغطية فورية للأحداث الجارية مع تضمين المصادر الموثوقة وإبراز ما يهم المستمعين.';
+
+      document.querySelector('#output h4').textContent = title;
+      document.querySelector('#output p').textContent = body;
+      document.querySelector('#date').textContent = new Date().toLocaleString(state.lang === 'ar' ? 'ar-EG' : 'en-US');
+      const tagBox = document.getElementById('tags-display');
+      tagBox.innerHTML = '';
+      tags.forEach(tag => {
+        const el = document.createElement('span');
+        el.className = 'tag';
+        el.textContent = tag.startsWith('#') ? tag : `#${tag}`;
+        tagBox.appendChild(el);
+      });
+      document.getElementById('copy-status').textContent = '';
+    });
+
+    document.getElementById('copy').addEventListener('click', async () => {
+      const text = document.querySelector('#output').innerText;
+      try {
+        await navigator.clipboard.writeText(text);
+        document.getElementById('copy-status').textContent = strings[state.lang].copied;
+      } catch (e) {
+        document.getElementById('copy-status').textContent = '⚠️ تحقق من صلاحيات النسخ';
+      }
+    });
+
+    document.getElementById('export').addEventListener('click', () => {
+      const payload = {
+        contentType: state.type,
+        cadence: Number(state.cadence),
+        model: document.getElementById('model').value,
+        endpoint: document.getElementById('endpoint').value,
+        sources: Array.from(state.sources),
+        rss: document.getElementById('rss').value,
+        api: document.getElementById('api').value,
+        style: document.getElementById('style').value,
+        format: document.getElementById('format').value,
+        tags: document.getElementById('tags').value,
+        preview: document.querySelector('#output').innerText,
+      };
+      const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'voice-of-quds-config.json';
+      a.click();
+      URL.revokeObjectURL(url);
+      document.getElementById('copy-status').textContent = strings[state.lang].exported;
+    });
+
+    document.querySelectorAll('[data-lang]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const lang = btn.dataset.lang;
+        state.lang = lang;
+        document.documentElement.lang = lang;
+        document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
+        document.getElementById('lang-label').textContent = strings[lang].langBadge;
+      });
+    });
+
+    // initialize preview
+    document.getElementById('preview').click();
+  </script>
+</body>
+</html>

From 9f9012cb83b0c47b2f0d8b16c34d6761ccf72b5d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 19:22:06 +0000
Subject: [PATCH 5/5] Add complete digital health product template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Features:
- Professional sales page (index.html) with Arabic RTL support
- Thank you page (thank-you.html) for post-purchase
- Clean minimal CSS design inspired by OpenAI
- Full responsive design for all devices
- Stripe & PayPal payment integration ready
- Quick customization guide (CONFIG.txt)
- Comprehensive README in Arabic & English
- Commercial use license (LICENSE.txt)
- Replit deployment config

🎯 Ready to sell digital health products immediately
📱 Works on Replit without backend
🚀 Easy customization for beginners
---
 .replit              |  10 +
 CONFIG.txt           | 186 +++++++++
 LICENSE.txt          | 209 ++++++++++
 README.md            | 399 +++++++++++++++++-
 assets/css/style.css | 938 +++++++++++++++++++++++++++++++++++++++++++
 index.html           | 209 ++++++++++
 replit.nix           |   5 +
 thank-you.html       | 117 ++++++
 8 files changed, 2070 insertions(+), 3 deletions(-)
 create mode 100644 .replit
 create mode 100644 CONFIG.txt
 create mode 100644 LICENSE.txt
 create mode 100644 assets/css/style.css
 create mode 100644 index.html
 create mode 100644 replit.nix
 create mode 100644 thank-you.html

diff --git a/.replit b/.replit
new file mode 100644
index 00000000..7fe6f650
--- /dev/null
+++ b/.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"
diff --git a/CONFIG.txt b/CONFIG.txt
new file mode 100644
index 00000000..0db5bf4c
--- /dev/null
+++ b/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 للحصول على شرح مفصّل أكثر.
+
+بالتوفيق! 🚀
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 00000000..93fc437b
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,209 @@
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  DIGITAL HEALTH PRODUCT TEMPLATE LICENSE
+  رخصة قالب المنتج الرقمي الصحي
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Version 1.0 - 2025
+Copyright © 2025 Digital Store 2025
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  النسخة العربية | ARABIC VERSION
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+هذا القالب مُرخّص للاستخدام الشخصي والتجاري تحت الشروط التالية:
+
+✅ الاستخدامات المسموحة:
+━━━━━━━━━━━━━━━━━━━━━━
+
+1. استخدام شخصي غير محدود
+   - يمكنك استخدام القالب لمشاريعك الشخصية
+   - لا حدود على عدد المشاريع
+
+2. استخدام تجاري
+   - يمكنك استخدام القالب لبيع منتجاتك الرقمية
+   - يمكنك تحصيل أموال من العملاء
+   - لا حدود على الأرباح
+
+3. التعديل والتخصيص
+   - يمكنك تعديل الكود بالكامل
+   - يمكنك تغيير التصميم والألوان
+   - يمكنك إضافة/حذف أي ميزات
+
+4. استخدام للعملاء
+   - يمكنك استخدامه في مشاريع العملاء
+   - يمكنك تقديمه كخدمة
+
+5. الاستضافة
+   - يمكنك رفعه على أي منصة (Replit, Netlify, Vercel, إلخ)
+   - استضافة غير محدودة
+
+❌ الاستخدامات الممنوعة:
+━━━━━━━━━━━━━━━━━━━━━━
+
+1. إعادة البيع كقالب
+   - ممنوع بيع القالب نفسه لأشخاص آخرين كقالب
+   - ممنوع توزيعه كمنتج منفصل
+
+2. ادعاء الملكية
+   - ممنوع ادعاء أنك المطور الأصلي
+   - ممنوع إزالة أي إشارات للمطور الأصلي (إن وجدت)
+
+3. الاستخدامات غير القانونية
+   - ممنوع استخدامه في أي نشاط غير قانوني
+   - ممنوع استخدامه للاحتيال أو الخداع
+   - ممنوع استخدامه للترويج لمنتجات طبية غير مصرّحة
+
+4. المنافسة المباشرة
+   - ممنوع بيعه كقالب منافس
+   - ممنوع إنشاء نسخ طبق الأصل للبيع كقوالب
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الشروط الإضافية
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+⚠️ إخلاء المسؤولية:
+
+1. القالب مقدم "كما هو" بدون أي ضمانات
+2. المطور الأصلي غير مسؤول عن:
+   - أي أضرار ناتجة عن استخدام القالب
+   - أي مشاكل تقنية
+   - خسائر مالية أو تجارية
+   - انتهاك القوانين المحلية
+
+3. المستخدم مسؤول عن:
+   - التأكد من توافق المحتوى مع القوانين المحلية
+   - التأكد من صحة المعلومات الطبية (إن وجدت)
+   - الامتثال لقوانين حماية المستهلك
+   - أمان بيانات العملاء
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  تنويه صحي مهم
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+إذا كنت تستخدم هذا القالب لبيع منتجات صحية:
+
+1. لا تقدم نصائح طبية بدون ترخيص
+2. اذكر دائمًا: "هذا المنتج للأغراض التثقيفية ولا يغني عن استشارة الطبيب"
+3. لا تدعي علاج أمراض بدون دليل علمي
+4. التزم بقوانين بلدك بخصوص المنتجات الصحية
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  التحديثات والدعم
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ التحديثات المستقبلية مجانية للمستخدمين الحاليين
+✓ الدعم الفني متاح عبر البريد الإلكتروني
+✓ إصلاح الأخطاء (Bugs) مجاني
+✓ الميزات الجديدة قد تكون مجانية أو مدفوعة
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  الاتصال
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+للأسئلة حول الرخصة أو الاستخدام:
+Email: support@yourdomain.com
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ENGLISH VERSION | النسخة الإنجليزية
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+This template is licensed for personal and commercial use under the
+following terms:
+
+✅ PERMITTED USES:
+━━━━━━━━━━━━━━━━
+
+1. Personal Use
+   - Use for your personal projects
+   - No limits on number of projects
+
+2. Commercial Use
+   - Sell your digital products using this template
+   - Charge customers for your products
+   - No profit limits
+
+3. Modification
+   - Modify the code completely
+   - Change design and colors
+   - Add/remove any features
+
+4. Client Work
+   - Use in client projects
+   - Offer as a service
+
+5. Hosting
+   - Host on any platform (Replit, Netlify, Vercel, etc.)
+   - Unlimited hosting
+
+❌ PROHIBITED USES:
+━━━━━━━━━━━━━━━━
+
+1. Resale as Template
+   - Cannot sell the template itself to others
+   - Cannot distribute as a separate product
+
+2. Claiming Ownership
+   - Cannot claim to be the original developer
+   - Cannot remove attribution (if present)
+
+3. Illegal Activities
+   - Cannot use for illegal activities
+   - Cannot use for fraud or deception
+   - Cannot promote unauthorized medical products
+
+4. Direct Competition
+   - Cannot sell as competing template
+   - Cannot create exact copies for sale as templates
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  WARRANTY DISCLAIMER
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+THE TEMPLATE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE TEMPLATE OR THE USE OR
+OTHER DEALINGS IN THE TEMPLATE.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  HEALTH PRODUCT DISCLAIMER
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+If using this template for health products:
+
+1. Do not provide medical advice without proper licensing
+2. Always include: "This product is for educational purposes only
+   and does not replace professional medical advice"
+3. Do not claim to cure diseases without scientific evidence
+4. Comply with your country's laws regarding health products
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  UPDATES & SUPPORT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ Future updates are free for current users
+✓ Technical support available via email
+✓ Bug fixes are free
+✓ New features may be free or paid
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  CONTACT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+For questions about licensing or usage:
+Email: support@yourdomain.com
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+© 2025 Digital Store 2025. All Rights Reserved.
+
+Last Updated: January 2025
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
diff --git a/README.md b/README.md
index 3f4e6314..436d1856 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,398 @@
-# .github
+# 🏥 قالب المنتج الرقمي الصحي | Digital Health Product Template
 
-*Community health files for the [@GitHub](https://github.com/github) organization*
+<div dir="rtl">
 
-For more information, please see the article on [creating a default community health file for your organization](https://help.github.com/en/articles/creating-a-default-community-health-file-for-your-organization).
+## 📖 نظرة عامة
+
+قالب جاهز للبيع، مُصمم خصيصًا لبيع المنتجات الرقمية الصحية. يعمل مباشرة على Replit بدون أي backend أو برمجة معقدة.
+
+### ✨ المميزات
+
+- ✅ **جاهز للاستخدام فورًا** - لا حاجة لخبرة برمجية
+- ✅ **تصميم احترافي نظيف** - مستوحى من أفضل الممارسات (OpenAI Style)
+- ✅ **RTL عربي كامل** - مناسب للسوق العربي
+- ✅ **Responsive 100%** - يعمل على جميع الأجهزة
+- ✅ **تكامل دفع مباشر** - Stripe & PayPal جاهز
+- ✅ **سريع وخفيف** - تحميل سريع وبدون اعتماديات ثقيلة
+- ✅ **SEO محسّن** - جاهز لمحركات البحث
+- ✅ **سهل التخصيص** - تعديلات بسيطة من ملف CONFIG.txt
+
+---
+
+## 📁 هيكل المشروع
+
+```
+📦 digital-health-template/
+├── 📄 index.html           # صفحة المبيعات الرئيسية
+├── 📄 thank-you.html       # صفحة الشكر بعد الشراء
+├── 📄 CONFIG.txt           # دليل التخصيص السريع
+├── 📄 README.md            # هذا الملف
+├── 📄 LICENSE.txt          # رخصة الاستخدام
+└── 📁 assets/
+    ├── 📁 css/
+    │   └── style.css       # ملف التنسيق الرئيسي
+    └── 📁 images/          # مجلد الصور (فارغ - أضف صورك)
+```
+
+---
+
+## 🚀 البدء السريع (5 دقائق)
+
+### الخطوة 1️⃣: تحميل المشروع
+
+```bash
+# استنساخ أو تحميل المشروع
+git clone https://github.com/yourusername/digital-health-template.git
+cd digital-health-template
+```
+
+### الخطوة 2️⃣: تعديل روابط الدفع
+
+**افتح `index.html` وابحث عن السطور 186-193:**
+
+```html
+<!-- غيّر هذا -->
+<a href="YOUR_STRIPE_PAYMENT_LINK" class="cta-button primary stripe-btn">
+
+<!-- إلى رابط Stripe الخاص بك -->
+<a href="https://buy.stripe.com/YOUR_ACTUAL_LINK" class="cta-button primary stripe-btn">
+```
+
+**كيف تحصل على رابط Stripe:**
+1. سجّل في [Stripe](https://stripe.com)
+2. اذهب إلى: **Products** → **Create Payment Link**
+3. أدخل السعر والتفاصيل
+4. انسخ الرابط
+
+**نفس الخطوات لـ PayPal:**
+- رابط PayPal: `https://paypal.me/YOUR_USERNAME/27`
+
+### الخطوة 3️⃣: تخصيص المحتوى
+
+افتح ملف **`CONFIG.txt`** واتبع الإرشادات خطوة بخطوة لتخصيص:
+- العنوان الرئيسي
+- السعر
+- محتويات المنتج
+- معلومات الاتصال
+
+### الخطوة 4️⃣: رفع على Replit
+
+1. اذهب إلى [Replit.com](https://replit.com)
+2. اضغط **Create Repl**
+3. اختر **HTML, CSS, JS**
+4. ارفع جميع الملفات (Drag & Drop)
+5. اضغط **Run**
+6. 🎉 موقعك جاهز!
+
+---
+
+## 🎨 التخصيص المتقدم
+
+### تغيير الألوان
+
+افتح `assets/css/style.css` وعدّل المتغيرات:
+
+```css
+:root {
+    /* ألوان أساسية */
+    --primary-color: #10B981;    /* أخضر صحي */
+    --primary-dark: #059669;
+
+    /* جرّب ألوان أخرى: */
+    /* أزرق: #3B82F6 */
+    /* برتقالي: #F59E0B */
+    /* بنفسجي: #8B5CF6 */
+}
+```
+
+### إضافة شعارك
+
+```html
+<!-- في index.html، أضف بعد <body> -->
+<header>
+    <img src="assets/images/logo.png" alt="شعار" style="height: 50px;">
+</header>
+```
+
+### إضافة Google Analytics
+
+```html
+<!-- في index.html، قبل </head> -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-XXXXXXXXXX');
+</script>
+```
+
+---
+
+## 💳 إعداد الدفع
+
+### Stripe (موصى به)
+
+**المميزات:**
+- قبول جميع البطاقات
+- حماية عالية
+- دعم العملات المختلفة
+
+**الإعداد:**
+1. سجّل في [stripe.com](https://stripe.com)
+2. أكمل التحقق من الهوية
+3. أنشئ منتج جديد
+4. اختر "Payment Link"
+5. حدد السعر ($27 أو حسب رغبتك)
+6. احصل على الرابط
+
+### PayPal
+
+**المميزات:**
+- معروف عالميًا
+- سهل الاستخدام
+- لا رسوم إعداد
+
+**الإعداد:**
+1. سجّل في [paypal.com](https://paypal.com)
+2. فعّل حساب Business (اختياري)
+3. فعّل PayPal.Me من الإعدادات
+4. اختر اسم مستخدم: `yourusername`
+5. الرابط: `https://paypal.me/yourusername/27`
+
+---
+
+## 📧 إعداد توصيل المنتج
+
+بعد أن يدفع العميل، يجب أن تُرسل له المنتج. هناك طريقتان:
+
+### الطريقة 1: يدويًا (مجانية)
+
+1. ستصلك إشعارات الدفع من Stripe/PayPal
+2. أرسل بريد إلكتروني للعميل يدويًا مع رابط التحميل
+3. استخدم Google Drive أو Dropbox لرفع المنتج
+
+**مثال بريد:**
+```
+الموضوع: منتجك جاهز للتحميل 🎉
+
+عزيزي العميل،
+
+شكرًا لشرائك [اسم المنتج]!
+
+رابط التحميل:
+https://drive.google.com/file/d/xxxxxxx
+
+بالتوفيق!
+```
+
+### الطريقة 2: أوتوماتيكية (مدفوعة)
+
+استخدم خدمات مثل:
+- **Gumroad** - يدير كل شيء تلقائيًا
+- **SendOwl** - إرسال تلقائي للمنتجات
+- **Stripe + Zapier** - أتمتة كاملة
+
+---
+
+## 🎯 نصائح للنجاح
+
+### 1. اختبر قبل البيع
+- ✅ افتح الموقع من هاتفك
+- ✅ جرّب عملية الدفع (Stripe Test Mode)
+- ✅ تأكد من وصول البريد الإلكتروني
+
+### 2. صمم منتجًا قيّمًا
+- اجعل المحتوى عالي الجودة
+- قدّم حلولًا حقيقية للمشاكل
+- لا تبالغ في الوعود الطبية
+
+### 3. التسويق
+- شارك على وسائل التواصل الاجتماعي
+- استخدم إعلانات Facebook/Google
+- اطلب تقييمات من العملاء
+
+### 4. خدمة العملاء
+- رد سريع على الاستفسارات
+- قدّم دعم فني جيد
+- احترم ضمان استرداد الأموال
+
+---
+
+## 🛠️ استكشاف الأخطاء
+
+### المشكلة: الموقع لا يعمل على Replit
+
+**الحل:**
+- تأكد من رفع جميع الملفات والمجلدات
+- تحقق من أن `index.html` في المجلد الرئيسي
+- اضغط F5 لإعادة تحميل الصفحة
+
+### المشكلة: زر الدفع لا يعمل
+
+**الحل:**
+- تأكد من استبدال `YOUR_STRIPE_PAYMENT_LINK`
+- افتح الرابط في تبويب جديد للتأكد من صحته
+- تحقق من عدم وجود مسافات زائدة في الرابط
+
+### المشكلة: النصوص العربية تظهر بشكل خاطئ
+
+**الحل:**
+- تأكد من حفظ الملف بترميز UTF-8
+- لا تحذف `dir="rtl"` من `<html>`
+- تحقق من استيراد خط Tajawal
+
+---
+
+## 📱 التوافق
+
+| المتصفح | الإصدار | الحالة |
+|---------|---------|---------|
+| Chrome | 90+ | ✅ مدعوم |
+| Firefox | 88+ | ✅ مدعوم |
+| Safari | 14+ | ✅ مدعوم |
+| Edge | 90+ | ✅ مدعوم |
+| Opera | 76+ | ✅ مدعوم |
+
+| الجهاز | الحالة |
+|--------|---------|
+| Desktop | ✅ مدعوم |
+| Tablet | ✅ مدعوم |
+| Mobile | ✅ مدعوم |
+
+---
+
+## 📄 الترخيص
+
+هذا القالب مُرخّص للاستخدام الشخصي والتجاري.
+
+**يمكنك:**
+- ✅ استخدامه لمشاريعك الشخصية
+- ✅ استخدامه لمشاريع العملاء
+- ✅ تعديله كما تشاء
+- ✅ بيع المنتجات من خلاله
+
+**لا يمكنك:**
+- ❌ إعادة بيع القالب نفسه كما هو
+- ❌ ادعاء ملكية الكود الأصلي
+- ❌ استخدامه في أنشطة غير قانونية
+
+للتفاصيل الكاملة، راجع ملف `LICENSE.txt`
+
+---
+
+## 💡 الأسئلة الشائعة
+
+### هل أحتاج خبرة برمجية؟
+لا! القالب جاهز تمامًا، فقط عدّل النصوص والروابط.
+
+### هل يمكنني استخدامه لأي منتج رقمي؟
+نعم! رغم أنه مصمم للمنتجات الصحية، يمكنك تعديله لأي نوع.
+
+### كم يستغرق الإعداد؟
+حوالي 10-15 دقيقة للإعداد الكامل.
+
+### هل يعمل بدون إنترنت؟
+نعم، لكن لن تعمل روابط الدفع. يحتاج إنترنت للنشر.
+
+### هل Replit مجاني؟
+نعم، لديهم خطة مجانية كافية لهذا المشروع.
+
+---
+
+## 🤝 الدعم
+
+إذا واجهت أي مشكلة:
+
+1. راجع ملف **CONFIG.txt**
+2. اقرأ قسم **استكشاف الأخطاء** أعلاه
+3. تحقق من الكود في `index.html` السطور المذكورة
+4. تواصل معنا: support@yourdomain.com
+
+---
+
+## 🎓 موارد تعليمية
+
+### لتعلم المزيد عن HTML/CSS:
+- [MDN Web Docs](https://developer.mozilla.org/ar/)
+- [W3Schools](https://www.w3schools.com)
+
+### لتعلم التسويق الرقمي:
+- [Google Digital Garage](https://learndigital.withgoogle.com)
+- [HubSpot Academy](https://academy.hubspot.com)
+
+### لتحسين SEO:
+- [Moz Beginner's Guide](https://moz.com/beginners-guide-to-seo)
+- [Google Search Central](https://developers.google.com/search)
+
+---
+
+## 🚀 التحديثات المستقبلية
+
+نخطط لإضافة:
+- [ ] دعم اللغة الإنجليزية
+- [ ] نماذج اتصال مباشرة
+- [ ] تكامل مع Mailchimp
+- [ ] صفحات إضافية (سياسة الخصوصية، الشروط)
+- [ ] قوالب بريد إلكتروني جاهزة
+
+---
+
+## ⭐ ساهم في التطوير
+
+وجدت خطأ؟ لديك اقتراح؟
+- افتح Issue على GitHub
+- أرسل Pull Request
+- راسلنا على البريد
+
+---
+
+## 🎉 شكرًا لاستخدامك هذا القالب!
+
+نتمنى لك النجاح في بيع منتجاتك الرقمية.
+لا تنسَ مشاركة قصة نجاحك معنا!
+
+**صُنع بـ ❤️ للمبدعين العرب**
+
+---
+
+</div>
+
+---
+
+# 🇬🇧 English Version
+
+## Overview
+
+A ready-to-sell template designed specifically for digital health products. Works directly on Replit without any backend or complex programming.
+
+## Quick Start
+
+1. **Clone the repository**
+2. **Edit payment links** in `index.html` (lines 186-193)
+3. **Customize content** using `CONFIG.txt` guide
+4. **Deploy to Replit** - upload files and click Run
+5. **Start selling!**
+
+## Features
+
+- ✅ Ready to use immediately
+- ✅ Clean professional design (OpenAI-inspired)
+- ✅ RTL Arabic support
+- ✅ Fully responsive
+- ✅ Stripe & PayPal integration
+- ✅ Fast & lightweight
+- ✅ SEO optimized
+- ✅ Easy customization
+
+## Support
+
+For questions or issues, contact: support@yourdomain.com
+
+## License
+
+Licensed for personal and commercial use. See `LICENSE.txt` for details.
+
+---
+
+**Made with ❤️ for Arab Creators**
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 00000000..cf923ff7
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,938 @@
+/* ============================================
+   DIGITAL HEALTH PRODUCT TEMPLATE - CSS
+   RTL Arabic / Responsive / Minimal Design
+   ============================================ */
+
+/* ============================================
+   1. RESET & BASE STYLES
+   ============================================ */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Primary Colors - Calm Health Theme */
+    --primary-color: #10B981;
+    --primary-dark: #059669;
+    --primary-light: #D1FAE5;
+
+    /* Secondary Colors */
+    --secondary-color: #3B82F6;
+    --secondary-dark: #2563EB;
+
+    /* Neutral Colors */
+    --text-dark: #1F2937;
+    --text-medium: #4B5563;
+    --text-light: #6B7280;
+    --bg-white: #FFFFFF;
+    --bg-gray: #F9FAFB;
+    --bg-light: #F3F4F6;
+    --border-color: #E5E7EB;
+
+    /* Accent Colors */
+    --accent-yellow: #FBBF24;
+    --accent-red: #EF4444;
+
+    /* Spacing */
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2rem;
+    --space-xl: 3rem;
+    --space-2xl: 4rem;
+    --space-3xl: 6rem;
+
+    /* Typography */
+    --font-primary: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 2rem;
+    --font-size-4xl: 2.5rem;
+    --font-size-5xl: 3rem;
+
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.5rem;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-primary);
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+    color: var(--text-dark);
+    background-color: var(--bg-white);
+    direction: rtl;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================
+   2. LAYOUT & CONTAINERS
+   ============================================ */
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+}
+
+section {
+    padding: var(--space-3xl) 0;
+}
+
+/* ============================================
+   3. TYPOGRAPHY
+   ============================================ */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--text-dark);
+    margin-bottom: var(--space-md);
+}
+
+h1 {
+    font-size: var(--font-size-4xl);
+}
+
+h2 {
+    font-size: var(--font-size-3xl);
+}
+
+h3 {
+    font-size: var(--font-size-2xl);
+}
+
+p {
+    margin-bottom: var(--space-sm);
+    color: var(--text-medium);
+    line-height: 1.7;
+}
+
+a {
+    text-decoration: none;
+    color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+a:hover {
+    color: var(--primary-dark);
+}
+
+/* ============================================
+   4. BUTTONS & CTAs
+   ============================================ */
+.cta-button {
+    display: inline-block;
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    text-decoration: none;
+}
+
+.cta-button.primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: var(--bg-white);
+    box-shadow: var(--shadow-lg);
+}
+
+.cta-button.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-xl);
+    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
+}
+
+.cta-button.secondary {
+    background-color: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+}
+
+.cta-button.secondary:hover {
+    background-color: var(--primary-color);
+    color: var(--bg-white);
+}
+
+/* ============================================
+   5. HERO SECTION
+   ============================================ */
+.hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: var(--bg-white);
+    text-align: center;
+    padding: var(--space-3xl) 0;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hero-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.hero-title {
+    font-size: var(--font-size-5xl);
+    font-weight: 900;
+    margin-bottom: var(--space-lg);
+    color: var(--bg-white);
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.hero-subtitle {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-xl);
+    color: rgba(255, 255, 255, 0.95);
+    font-weight: 400;
+}
+
+/* ============================================
+   6. SECTION TITLES
+   ============================================ */
+.section-title {
+    text-align: center;
+    font-size: var(--font-size-3xl);
+    margin-bottom: var(--space-2xl);
+    position: relative;
+    padding-bottom: var(--space-md);
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 50%;
+    transform: translateX(50%);
+    width: 80px;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
+    border-radius: 2px;
+}
+
+/* ============================================
+   7. PROBLEM SECTION
+   ============================================ */
+.problem {
+    background-color: var(--bg-gray);
+}
+
+.problem-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-2xl);
+}
+
+.problem-item {
+    background-color: var(--bg-white);
+    padding: var(--space-xl);
+    border-radius: var(--radius-xl);
+    text-align: center;
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s ease;
+}
+
+.problem-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-xl);
+}
+
+.problem-icon {
+    font-size: 3rem;
+    margin-bottom: var(--space-md);
+}
+
+.problem-item h3 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-sm);
+    color: var(--text-dark);
+}
+
+.problem-item p {
+    color: var(--text-medium);
+    font-size: var(--font-size-base);
+}
+
+/* ============================================
+   8. SOLUTION SECTION
+   ============================================ */
+.solution {
+    background-color: var(--bg-white);
+}
+
+.solution-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
+    align-items: start;
+}
+
+.solution-text h3 {
+    font-size: var(--font-size-2xl);
+    margin-bottom: var(--space-md);
+    color: var(--primary-dark);
+}
+
+.solution-text p {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--space-lg);
+    line-height: 1.8;
+}
+
+.benefit-list {
+    list-style: none;
+    padding: 0;
+}
+
+.benefit-list li {
+    padding: var(--space-sm) 0;
+    font-size: var(--font-size-lg);
+    color: var(--text-medium);
+    position: relative;
+    padding-right: var(--space-lg);
+}
+
+.benefit-list li::before {
+    position: absolute;
+    right: 0;
+}
+
+.solution-visual {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+
+.feature-box {
+    background: linear-gradient(135deg, var(--primary-light), var(--bg-white));
+    padding: var(--space-lg);
+    border-radius: var(--radius-xl);
+    border-right: 4px solid var(--primary-color);
+    box-shadow: var(--shadow-sm);
+}
+
+.feature-box h4 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-sm);
+    color: var(--primary-dark);
+}
+
+.feature-box p {
+    color: var(--text-medium);
+    margin: 0;
+}
+
+/* ============================================
+   9. CONTENTS SECTION
+   ============================================ */
+.contents {
+    background-color: var(--bg-gray);
+}
+
+.contents-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-2xl);
+}
+
+.content-item {
+    background-color: var(--bg-white);
+    padding: var(--space-xl);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.content-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-xl);
+}
+
+.content-number {
+    position: absolute;
+    top: -10px;
+    right: var(--space-lg);
+    font-size: 5rem;
+    font-weight: 900;
+    color: var(--primary-light);
+    opacity: 0.3;
+    line-height: 1;
+}
+
+.content-item h3 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-sm);
+    position: relative;
+    z-index: 1;
+}
+
+.content-item p {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+}
+
+/* ============================================
+   10. PRICING SECTION
+   ============================================ */
+.pricing {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: var(--bg-white);
+}
+
+.pricing .section-title {
+    color: var(--bg-white);
+}
+
+.pricing .section-title::after {
+    background: linear-gradient(90deg, var(--bg-white), rgba(255, 255, 255, 0.5));
+}
+
+.pricing-card {
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: var(--bg-white);
+    padding: var(--space-2xl);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    text-align: center;
+}
+
+.price-tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-md);
+}
+
+.currency {
+    font-size: var(--font-size-2xl);
+    font-weight: 700;
+    color: var(--text-medium);
+}
+
+.amount {
+    font-size: 5rem;
+    font-weight: 900;
+    color: var(--primary-color);
+    line-height: 1;
+}
+
+.period {
+    font-size: var(--font-size-base);
+    color: var(--text-medium);
+    margin-right: var(--space-sm);
+}
+
+.price-old {
+    margin-bottom: var(--space-xl);
+}
+
+.price-old del {
+    font-size: var(--font-size-2xl);
+    color: var(--text-light);
+    margin-left: var(--space-sm);
+}
+
+.discount {
+    display: inline-block;
+    background-color: var(--accent-red);
+    color: var(--bg-white);
+    padding: var(--space-xs) var(--space-md);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+}
+
+.pricing-features {
+    list-style: none;
+    text-align: right;
+    margin: var(--space-xl) 0;
+    padding: 0;
+}
+
+.pricing-features li {
+    padding: var(--space-md) 0;
+    font-size: var(--font-size-lg);
+    color: var(--text-medium);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.pricing-features li:last-child {
+    border-bottom: none;
+}
+
+.payment-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin: var(--space-xl) 0;
+}
+
+.stripe-btn {
+    background: linear-gradient(135deg, #635BFF, #4F46E5) !important;
+}
+
+.paypal-btn {
+    background: linear-gradient(135deg, #0070BA, #003087) !important;
+    color: var(--bg-white) !important;
+}
+
+.guarantee {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    background-color: var(--primary-light);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    margin-top: var(--space-xl);
+    text-align: right;
+}
+
+.guarantee-icon {
+    font-size: 3rem;
+    flex-shrink: 0;
+}
+
+.guarantee-text strong {
+    display: block;
+    color: var(--primary-dark);
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--space-xs);
+}
+
+.guarantee-text p {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    color: var(--text-medium);
+}
+
+/* ============================================
+   11. FAQ SECTION
+   ============================================ */
+.faq {
+    background-color: var(--bg-white);
+}
+
+.faq-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-2xl);
+}
+
+.faq-item {
+    background-color: var(--bg-gray);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    border-right: 4px solid var(--primary-color);
+}
+
+.faq-item h3 {
+    font-size: var(--font-size-lg);
+    color: var(--primary-dark);
+    margin-bottom: var(--space-sm);
+}
+
+.faq-item p {
+    margin: 0;
+    color: var(--text-medium);
+}
+
+/* ============================================
+   12. FOOTER
+   ============================================ */
+.footer {
+    background-color: var(--text-dark);
+    color: var(--bg-white);
+    padding: var(--space-xl) 0;
+    text-align: center;
+}
+
+.footer p {
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: var(--space-sm);
+}
+
+.disclaimer {
+    font-size: var(--font-size-sm);
+    color: rgba(255, 255, 255, 0.6);
+    font-style: italic;
+    max-width: 800px;
+    margin: var(--space-md) auto;
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-lg);
+    margin-top: var(--space-md);
+}
+
+.footer-links a {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: var(--font-size-sm);
+    transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+    color: var(--primary-color);
+}
+
+/* ============================================
+   13. THANK YOU PAGE
+   ============================================ */
+.thank-you-page {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-gray);
+    padding: var(--space-2xl) 0;
+}
+
+.thank-you-content {
+    max-width: 800px;
+    text-align: center;
+}
+
+.success-icon {
+    margin: 0 auto var(--space-xl);
+    animation: scaleIn 0.5s ease-out;
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.thank-you-title {
+    font-size: var(--font-size-3xl);
+    color: var(--primary-dark);
+    margin-bottom: var(--space-md);
+}
+
+.thank-you-subtitle {
+    font-size: var(--font-size-xl);
+    color: var(--text-medium);
+    margin-bottom: var(--space-2xl);
+}
+
+.next-steps {
+    background-color: var(--bg-white);
+    padding: var(--space-2xl);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    margin-bottom: var(--space-xl);
+    text-align: right;
+}
+
+.next-steps h2 {
+    text-align: center;
+    margin-bottom: var(--space-xl);
+}
+
+.steps-grid {
+    display: grid;
+    gap: var(--space-lg);
+}
+
+.step-item {
+    display: flex;
+    gap: var(--space-lg);
+    align-items: start;
+}
+
+.step-number {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: var(--bg-white);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-xl);
+    font-weight: 900;
+    flex-shrink: 0;
+}
+
+.step-content h3 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--space-xs);
+}
+
+.step-content p {
+    margin: 0;
+}
+
+.important-note {
+    background-color: #FEF3C7;
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+    text-align: right;
+    border-right: 4px solid var(--accent-yellow);
+}
+
+.note-icon {
+    font-size: 2rem;
+    flex-shrink: 0;
+}
+
+.note-content h3 {
+    color: #92400E;
+    margin-bottom: var(--space-xs);
+}
+
+.note-content p {
+    color: #78350F;
+    margin-bottom: var(--space-xs);
+}
+
+.support-box {
+    background-color: var(--bg-white);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    margin-bottom: var(--space-xl);
+}
+
+.support-email {
+    display: inline-block;
+    font-size: var(--font-size-lg);
+    font-weight: 700;
+    color: var(--primary-color);
+    margin: var(--space-md) 0;
+}
+
+.support-note {
+    font-size: var(--font-size-sm);
+    color: var(--text-light);
+}
+
+.tips-box {
+    background-color: var(--primary-light);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-xl);
+    text-align: right;
+}
+
+.tips-box h3 {
+    color: var(--primary-dark);
+    margin-bottom: var(--space-md);
+}
+
+.tips-list {
+    list-style: none;
+    padding: 0;
+}
+
+.tips-list li {
+    padding: var(--space-sm) 0;
+    padding-right: var(--space-lg);
+    position: relative;
+    color: var(--text-medium);
+}
+
+.tips-list li::before {
+    content: '✓';
+    position: absolute;
+    right: 0;
+    color: var(--primary-color);
+    font-weight: 900;
+}
+
+.social-share {
+    margin-bottom: var(--space-xl);
+}
+
+.share-buttons {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-md);
+    margin-top: var(--space-md);
+}
+
+.share-btn {
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--radius-md);
+    color: var(--bg-white);
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+}
+
+.share-btn.whatsapp {
+    background-color: #25D366;
+}
+
+.share-btn.twitter {
+    background-color: #1DA1F2;
+}
+
+.share-btn.facebook {
+    background-color: #1877F2;
+}
+
+.back-home {
+    margin-top: var(--space-xl);
+}
+
+/* ============================================
+   14. RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 768px) {
+    :root {
+        --font-size-5xl: 2rem;
+        --font-size-4xl: 1.75rem;
+        --font-size-3xl: 1.5rem;
+        --space-3xl: 3rem;
+    }
+
+    .hero {
+        min-height: 60vh;
+        padding: var(--space-2xl) 0;
+    }
+
+    .solution-content {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    .problem-grid,
+    .contents-grid,
+    .faq-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .pricing-card {
+        padding: var(--space-lg);
+    }
+
+    .amount {
+        font-size: 3.5rem;
+    }
+
+    .payment-buttons {
+        flex-direction: column;
+    }
+
+    .guarantee {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .footer-links {
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    .share-buttons {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 var(--space-sm);
+    }
+
+    section {
+        padding: var(--space-xl) 0;
+    }
+
+    .hero-title {
+        font-size: var(--font-size-2xl);
+    }
+
+    .hero-subtitle {
+        font-size: var(--font-size-base);
+    }
+
+    .cta-button {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--font-size-base);
+    }
+}
+
+/* ============================================
+   15. UTILITIES
+   ============================================ */
+.text-center {
+    text-align: center;
+}
+
+.mt-1 { margin-top: var(--space-sm); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mt-4 { margin-top: var(--space-xl); }
+
+.mb-1 { margin-bottom: var(--space-sm); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+.mb-4 { margin-bottom: var(--space-xl); }
+
+/* ============================================
+   16. ANIMATIONS
+   ============================================ */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.6s ease-out;
+}
+
+/* Print Styles */
+@media print {
+    .hero,
+    .footer,
+    .payment-buttons,
+    .social-share {
+        display: none;
+    }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..33d18106
--- /dev/null
+++ b/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="منتج رقمي صحي يساعدك على تحسين صحتك ونمط حياتك">
+    <meta name="keywords" content="صحة، عافية، منتج رقمي، دليل صحي">
+    <title>دليلك الشامل للصحة والعافية</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <h1 class="hero-title">هل تعاني من التعب المستمر وقلة النشاط؟</h1>
+                <p class="hero-subtitle">اكتشف الحل العلمي لاستعادة طاقتك وحيويتك في 30 يومًا فقط</p>
+                <a href="#pricing" class="cta-button primary">احصل على الدليل الآن</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Problem Section -->
+    <section class="problem">
+        <div class="container">
+            <h2 class="section-title">المشكلة التي نعاني منها</h2>
+            <div class="problem-grid">
+                <div class="problem-item">
+                    <div class="problem-icon">⚡</div>
+                    <h3>انخفاض الطاقة</h3>
+                    <p>شعور دائم بالتعب والإرهاق حتى بعد النوم الكافي</p>
+                </div>
+                <div class="problem-item">
+                    <div class="problem-icon">😴</div>
+                    <h3>اضطرابات النوم</h3>
+                    <p>صعوبة في النوم أو الاستيقاظ المتكرر خلال الليل</p>
+                </div>
+                <div class="problem-item">
+                    <div class="problem-icon">🧠</div>
+                    <h3>ضعف التركيز</h3>
+                    <p>صعوبة في التركيز وإنجاز المهام اليومية</p>
+                </div>
+                <div class="problem-item">
+                    <div class="problem-icon">😓</div>
+                    <h3>الضغط النفسي</h3>
+                    <p>توتر وقلق مستمر يؤثر على جودة الحياة</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Solution Section -->
+    <section class="solution">
+        <div class="container">
+            <h2 class="section-title">الحل العملي والمضمون</h2>
+            <div class="solution-content">
+                <div class="solution-text">
+                    <h3>دليل شامل مبني على أسس علمية</h3>
+                    <p>منهج متكامل يجمع بين التغذية السليمة، النشاط البدني المناسب، وتقنيات الاسترخاء المثبتة علميًا.</p>
+                    <ul class="benefit-list">
+                        <li>✓ خطة غذائية متوازنة لمدة 30 يومًا</li>
+                        <li>✓ تمارين بسيطة يمكن ممارستها في المنزل</li>
+                        <li>✓ تقنيات استرخاء وتأمل فعّالة</li>
+                        <li>✓ جداول متابعة يومية وأسبوعية</li>
+                        <li>✓ نصائح عملية قابلة للتطبيق فورًا</li>
+                    </ul>
+                </div>
+                <div class="solution-visual">
+                    <div class="feature-box">
+                        <h4>📱 رقمي بالكامل</h4>
+                        <p>احصل على الدليل فورًا بعد الشراء</p>
+                    </div>
+                    <div class="feature-box">
+                        <h4>📚 سهل التطبيق</h4>
+                        <p>خطوات واضحة ومباشرة للمبتدئين</p>
+                    </div>
+                    <div class="feature-box">
+                        <h4>⏱️ 30 يوم فقط</h4>
+                        <p>برنامج مكثف ومركّز للنتائج السريعة</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contents Section -->
+    <section class="contents">
+        <div class="container">
+            <h2 class="section-title">ماذا ستحصل عليه؟</h2>
+            <div class="contents-grid">
+                <div class="content-item">
+                    <div class="content-number">01</div>
+                    <h3>دليل التغذية الصحية</h3>
+                    <p>خطة غذائية كاملة مع قوائم طعام يومية ووصفات سهلة التحضير</p>
+                </div>
+                <div class="content-item">
+                    <div class="content-number">02</div>
+                    <h3>برنامج التمارين المنزلية</h3>
+                    <p>تمارين بسيطة وفعّالة لا تحتاج معدات، مع صور توضيحية</p>
+                </div>
+                <div class="content-item">
+                    <div class="content-number">03</div>
+                    <h3>دليل النوم الصحي</h3>
+                    <p>استراتيجيات مثبتة لتحسين جودة النوم والاستيقاظ بنشاط</p>
+                </div>
+                <div class="content-item">
+                    <div class="content-number">04</div>
+                    <h3>تقنيات الاسترخاء</h3>
+                    <p>تمارين تنفس وتأمل لتقليل التوتر والقلق</p>
+                </div>
+                <div class="content-item">
+                    <div class="content-number">05</div>
+                    <h3>جداول المتابعة</h3>
+                    <p>نماذج قابلة للطباعة لتتبع تقدمك اليومي</p>
+                </div>
+                <div class="content-item">
+                    <div class="content-number">06</div>
+                    <h3>مكافأة خاصة</h3>
+                    <p>دليل إضافي للعادات الصحية طويلة المدى</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Pricing Section -->
+    <section id="pricing" class="pricing">
+        <div class="container">
+            <h2 class="section-title">استثمر في صحتك اليوم</h2>
+            <div class="pricing-card">
+                <div class="price-tag">
+                    <span class="currency">$</span>
+                    <span class="amount">27</span>
+                    <span class="period">دفعة واحدة فقط</span>
+                </div>
+                <div class="price-old">
+                    <del>$67</del>
+                    <span class="discount">خصم 60%</span>
+                </div>
+                <ul class="pricing-features">
+                    <li>✓ دليل شامل بصيغة PDF عالية الجودة</li>
+                    <li>✓ وصول فوري ومباشر بعد الدفع</li>
+                    <li>✓ جميع المكونات الستة المذكورة أعلاه</li>
+                    <li>✓ تحديثات مجانية مدى الحياة</li>
+                    <li>✓ دعم فني عبر البريد الإلكتروني</li>
+                </ul>
+
+                <!-- Payment Buttons -->
+                <div class="payment-buttons">
+                    <a href="YOUR_STRIPE_PAYMENT_LINK" class="cta-button primary stripe-btn" target="_blank">
+                        اشترِ الآن بـ Stripe
+                    </a>
+                    <a href="YOUR_PAYPAL_PAYMENT_LINK" class="cta-button secondary paypal-btn" target="_blank">
+                        اشترِ الآن بـ PayPal
+                    </a>
+                </div>
+
+                <div class="guarantee">
+                    <div class="guarantee-icon">🛡️</div>
+                    <div class="guarantee-text">
+                        <strong>ضمان استرداد كامل لمدة 14 يومًا</strong>
+                        <p>إذا لم تكن راضيًا تمامًا، سنعيد لك أموالك بالكامل دون أي أسئلة</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section class="faq">
+        <div class="container">
+            <h2 class="section-title">أسئلة شائعة</h2>
+            <div class="faq-grid">
+                <div class="faq-item">
+                    <h3>كيف أحصل على المنتج بعد الدفع؟</h3>
+                    <p>فورًا بعد إتمام عملية الدفع، ستصلك رسالة بريد إلكتروني تحتوي على رابط التحميل المباشر.</p>
+                </div>
+                <div class="faq-item">
+                    <h3>هل المنتج مناسب للمبتدئين؟</h3>
+                    <p>نعم، الدليل مصمم ليكون سهل الفهم والتطبيق حتى لمن ليس لديهم خبرة سابقة.</p>
+                </div>
+                <div class="faq-item">
+                    <h3>ما هي صيغة الملف؟</h3>
+                    <p>الدليل بصيغة PDF يمكن فتحه على أي جهاز (كمبيوتر، هاتف، تابلت).</p>
+                </div>
+                <div class="faq-item">
+                    <h3>هل يمكنني طباعة الدليل؟</h3>
+                    <p>نعم بالتأكيد، يمكنك طباعة الدليل أو الاحتفاظ به رقميًا حسب تفضيلك.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 جميع الحقوق محفوظة</p>
+            <p class="disclaimer">تنويه: هذا المنتج للأغراض التثقيفية فقط ولا يغني عن استشارة الطبيب المختص</p>
+            <div class="footer-links">
+                <a href="#">سياسة الخصوصية</a>
+                <a href="#">شروط الخدمة</a>
+                <a href="#">اتصل بنا</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/replit.nix b/replit.nix
new file mode 100644
index 00000000..02a65537
--- /dev/null
+++ b/replit.nix
@@ -0,0 +1,5 @@
+{ pkgs }: {
+  deps = [
+    pkgs.python3
+  ];
+}
diff --git a/thank-you.html b/thank-you.html
new file mode 100644
index 00000000..3597c50d
--- /dev/null
+++ b/thank-you.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>شكرًا لك - تم استلام طلبك</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+</head>
+<body>
+    <section class="thank-you-page">
+        <div class="container">
+            <div class="thank-you-content">
+                <!-- Success Icon -->
+                <div class="success-icon">
+                    <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
+                        <circle cx="50" cy="50" r="45" fill="#10B981" opacity="0.1"/>
+                        <circle cx="50" cy="50" r="40" fill="#10B981"/>
+                        <path d="M30 50L42 62L70 34" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+
+                <!-- Main Message -->
+                <h1 class="thank-you-title">شكرًا لك! تم استلام طلبك بنجاح 🎉</h1>
+                <p class="thank-you-subtitle">نحن سعداء بانضمامك إلينا في رحلة الصحة والعافية</p>
+
+                <!-- What's Next -->
+                <div class="next-steps">
+                    <h2>الخطوات التالية:</h2>
+                    <div class="steps-grid">
+                        <div class="step-item">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h3>تحقق من بريدك الإلكتروني</h3>
+                                <p>ستصلك رسالة خلال دقائق تحتوي على رابط التحميل المباشر للدليل</p>
+                            </div>
+                        </div>
+                        <div class="step-item">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h3>حمّل الدليل</h3>
+                                <p>اضغط على رابط التحميل واحفظ الملف على جهازك</p>
+                            </div>
+                        </div>
+                        <div class="step-item">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <h3>ابدأ رحلتك</h3>
+                                <p>ابدأ بقراءة الدليل وتطبيق الخطوة الأولى اليوم</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Important Note -->
+                <div class="important-note">
+                    <div class="note-icon">📧</div>
+                    <div class="note-content">
+                        <h3>تنبيه هام</h3>
+                        <p>إذا لم تجد الرسالة في البريد الوارد، تحقق من مجلد الرسائل غير المرغوب فيها (Spam)</p>
+                        <p>البريد المرسِل: <strong>noreply@yourdomain.com</strong></p>
+                    </div>
+                </div>
+
+                <!-- Support Box -->
+                <div class="support-box">
+                    <h3>هل تحتاج مساعدة؟</h3>
+                    <p>إذا لم تستلم الرسالة خلال 30 دقيقة، أو واجهت أي مشكلة:</p>
+                    <a href="mailto:support@yourdomain.com" class="support-email">support@yourdomain.com</a>
+                    <p class="support-note">سنرد عليك خلال 24 ساعة كحد أقصى</p>
+                </div>
+
+                <!-- Tips Box -->
+                <div class="tips-box">
+                    <h3>نصائح للبدء 💡</h3>
+                    <ul class="tips-list">
+                        <li>اقرأ الدليل بالكامل أولًا للحصول على فكرة شاملة</li>
+                        <li>حدد موعدًا للبدء والتزم به</li>
+                        <li>استخدم جداول المتابعة المرفقة لتتبع تقدمك</li>
+                        <li>كن صبورًا مع نفسك - التغيير يحتاج وقتًا</li>
+                        <li>شارك رحلتك مع صديق لمزيد من الدعم</li>
+                    </ul>
+                </div>
+
+                <!-- Social Share -->
+                <div class="social-share">
+                    <p>شارك النجاح مع أصدقائك:</p>
+                    <div class="share-buttons">
+                        <a href="#" class="share-btn whatsapp">WhatsApp</a>
+                        <a href="#" class="share-btn twitter">Twitter</a>
+                        <a href="#" class="share-btn facebook">Facebook</a>
+                    </div>
+                </div>
+
+                <!-- Back to Home -->
+                <div class="back-home">
+                    <a href="index.html" class="cta-button secondary">العودة للصفحة الرئيسية</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 جميع الحقوق محفوظة</p>
+            <div class="footer-links">
+                <a href="#">سياسة الخصوصية</a>
+                <a href="#">شروط الخدمة</a>
+                <a href="mailto:support@yourdomain.com">اتصل بنا</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>