Skip to content

E
EL-Captain-Website
Commit 9940f32a authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Rewrite pricing page: 3-tier model + Saudi geo-detection 

- Replace 4 old plans with 3 tiers (Small/Medium/Large)
- Egypt: 699+7%, 1499+5%, 3499+3%
- Saudi: 299SAR+5%, 699SAR+3.5%, 1499SAR+2%
- Add IP-based geo-detection (ipapi.co) to auto-show SAR prices
- Add "250K system / support fees only" value framing
- Add academy website + custom domain messaging
- Update calculator with dual-market plans
- Rewrite comparison table and FAQ for new model
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 900c5017
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 229 deletions
public/js/main.js
View file @ 9940f32a
......@@ -3,6 +3,65 @@
* main.js — Vanilla ES6+, no external dependencies
*/
/* ═══════════════════════════════════════════════
GEO-DETECTION & PRICING LOCALIZATION
Detects visitor country and swaps pricing to SAR if Saudi Arabia
═══════════════════════════════════════════════ */
let detectedCountry = 'EG'; // default
async function detectCountry() {
try {
const res = await fetch('https://ipapi.co/json/', { signal: AbortSignal.timeout(3000) });
const data = await res.json();
return data.country_code || 'EG'; // 'SA', 'EG', etc.
} catch {
return 'EG'; // default Egypt
}
}
function applyGeoPricing(country) {
detectedCountry = country;
const isSA = country === 'SA';
const currency = isSA ? 'ر.س' : 'ج.م';
// Swap plan card amounts
document.querySelectorAll('.plan-card[data-plan]').forEach(card => {
const flat = isSA ? card.dataset.saFlat : card.dataset.egFlat;
const pct = isSA ? card.dataset.saPct : card.dataset.egPct;
const amountEl = card.querySelector('.plan-card__amount-number');
if (amountEl) amountEl.textContent = Number(flat).toLocaleString('en-US');
const currencyEl = card.querySelector('.plan-card__amount-currency');
if (currencyEl) currencyEl.textContent = currency;
const pctEl = card.querySelector('.plan-card__pct-number');
if (pctEl) pctEl.textContent = pct + '%';
});
// Swap setup fee displays
document.querySelectorAll('[data-eg-setup]').forEach(el => {
el.textContent = isSA ? el.dataset.saSetup : el.dataset.egSetup;
});
document.querySelectorAll('.setup-currency').forEach(el => {
el.textContent = currency;
});
// Swap comparison table values
document.querySelectorAll('[data-eg-compare]').forEach(el => {
el.textContent = isSA ? el.dataset.saCompare : el.dataset.egCompare;
});
document.querySelectorAll('[data-eg-pct-compare]').forEach(el => {
el.textContent = isSA ? el.dataset.saPctCompare : el.dataset.egPctCompare;
});
document.querySelectorAll('.compare-currency').forEach(el => {
el.textContent = currency;
});
// Re-initialize pricing calculator with correct plans
initPricingCalc();
}
document.addEventListener('DOMContentLoaded', () => {
initNav();
initMobileMenu();
......@@ -21,6 +80,13 @@ document.addEventListener('DOMContentLoaded', () => {
initSocialProof();
injectRevealStyles();
injectDynamicStyles();
// Detect country and apply geo-pricing
detectCountry().then(country => {
if (country !== 'EG') {
applyGeoPricing(country);
}
});
});
/* ═══════════════════════════════════════════════
......@@ -626,41 +692,46 @@ function initBackToTop() {
/* ═══════════════════════════════════════════════
12. PRICING CALCULATOR
Range slider for monthly collections (10,000–500,000 EGP).
Range slider for monthly collections.
Shows calculated cost per plan. Highlights cheapest.
Supports geo-switching (Egypt / Saudi Arabia).
Only activates if #pricing-calculator exists.
═══════════════════════════════════════════════ */
function initPricingCalc() {
const container = document.getElementById('pricing-calculator');
if (!container) return;
// Plan definitions: { name, monthlyFee (EGP), platformPercent }
const plans = [
{ id: 'free', name: 'نسبة فقط', monthlyFee: 0, platformPercent: 12.0 },
{ id: 'starter', name: 'المبتدئ', monthlyFee: 1000, platformPercent: 7.5 },
{ id: 'institutional',name: 'المؤسسي', monthlyFee: 3500, platformPercent: 5.0 },
{ id: 'professional', name: 'الاحترافي', monthlyFee: 10000, platformPercent: 3.5 },
// Egypt plans
const plansEG = [
{ id: 'small', name: 'حتى ١٠٠ لاعب', monthlyFee: 699, platformPercent: 7.0 },
{ id: 'medium', name: '١٠٠-٣٠٠ لاعب', monthlyFee: 1499, platformPercent: 5.0 },
{ id: 'large', name: '٣٠٠+ لاعب', monthlyFee: 3499, platformPercent: 3.0 },
];
// Allow overriding plans via data attribute
if (container.dataset.plans) {
try {
const customPlans = JSON.parse(container.dataset.plans);
if (Array.isArray(customPlans) && customPlans.length) {
plans.length = 0;
plans.push(...customPlans);
}
} catch (e) { /* use defaults */ }
}
// Saudi Arabia plans
const plansSA = [
{ id: 'small', name: 'حتى ١٠٠ لاعب', monthlyFee: 299, platformPercent: 5.0 },
{ id: 'medium', name: '١٠٠-٣٠٠ لاعب', monthlyFee: 699, platformPercent: 3.5 },
{ id: 'large', name: '٣٠٠+ لاعب', monthlyFee: 1499, platformPercent: 2.0 },
];
const isSA = detectedCountry === 'SA';
const plans = isSA ? plansSA : plansEG;
const currencyCode = isSA ? 'SAR' : 'EGP';
const currencyLabel = isSA ? 'ر.س' : 'ج.م';
const minCollections = 10000;
const maxCollections = 500000;
const step = 5000;
function formatAmount(amount) {
return new Intl.NumberFormat('ar-EG', { style: 'currency', currency: currencyCode, maximumFractionDigits: 0 }).format(amount);
}
container.innerHTML = `
<div class="pricing-calc">
<label class="pricing-calc__label" for="collectionsSlider">
حجم التحصيلات الشهرية: <strong class="pricing-calc__value" id="calcValue">${formatEGP(minCollections)}</strong>
حجم التحصيلات الشهرية: <strong class="pricing-calc__value" id="calcValue">${formatAmount(minCollections)}</strong>
</label>
<input
type="range"
......@@ -673,8 +744,8 @@ function initPricingCalc() {
dir="ltr"
/>
<div class="pricing-calc__range-labels">
<span>${formatEGP(minCollections)}</span>
<span>${formatEGP(maxCollections)}</span>
<span>${formatAmount(minCollections)}</span>
<span>${formatAmount(maxCollections)}</span>
</div>
<div class="pricing-calc__results" id="calcResults"></div>
</div>
......@@ -684,10 +755,6 @@ function initPricingCalc() {
const valueDisplay = container.querySelector('#calcValue');
const resultsContainer = container.querySelector('#calcResults');
function formatEGP(amount) {
return new Intl.NumberFormat('ar-EG', { style: 'currency', currency: 'EGP', maximumFractionDigits: 0 }).format(amount);
}
function calculate(collections) {
const results = plans.map(plan => ({
...plan,
......@@ -701,10 +768,10 @@ function initPricingCalc() {
<div class="pricing-calc__plan ${r.totalCost === minCost ? 'pricing-calc__plan--cheapest' : ''}">
<div class="pricing-calc__plan-name">${r.name}</div>
<div class="pricing-calc__plan-breakdown">
<span>اشتراك: ${formatEGP(r.monthlyFee)}</span>
<span>عمولة: ${formatEGP(collections * r.platformPercent / 100)} (${r.platformPercent}%)</span>
<span>اشتراك: ${formatAmount(r.monthlyFee)}</span>
<span>نسبة تشغيل: ${formatAmount(collections * r.platformPercent / 100)} (${r.platformPercent}%)</span>
</div>
<div class="pricing-calc__plan-total">${formatEGP(r.totalCost)}</div>
<div class="pricing-calc__plan-total">${formatAmount(r.totalCost)}</div>
${r.totalCost === minCost ? '<span class="pricing-calc__badge">الأوفر</span>' : ''}
</div>
`).join('');
......@@ -712,7 +779,7 @@ function initPricingCalc() {
slider.addEventListener('input', () => {
const val = parseInt(slider.value);
valueDisplay.textContent = formatEGP(val);
valueDisplay.textContent = formatAmount(val);
calculate(val);
});
......
public/pricing.html
View file @ 9940f32a
......@@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الباقات والأسعار - El-Captain</title>
<meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة. فترة تجريبية مجانية لكل الباقات.">
<meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 3 خطط حسب حجم أكاديميتك — اشتراك شهري ثابت + نسبة تشغيل بسيطة. فترة تجريبية 10 أيام مجانية.">
<meta property="og:title" content="الباقات والأسعار - El-Captain">
<meta property="og:description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة.">
<meta property="og:description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 3 خطط حسب حجم أكاديميتك — اشتراك شهري ثابت + نسبة تشغيل بسيطة. أوائل المشتركين يقفلون على السعر للأبد.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/pricing.html">
<meta property="og:locale" content="ar_EG">
......@@ -103,24 +103,75 @@
color: var(--ink-muted);
}
/* 4-column pricing grid */
/* 3-column pricing grid */
.pricing-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
align-items: stretch;
}
@media (max-width: 1100px) {
@media (max-width: 900px) {
.pricing-grid-4 {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.pricing-grid-4 {
grid-template-columns: 1fr;
}
/* Value frame banner */
.value-frame {
text-align: center;
padding: var(--space-lg) var(--space-xl);
background: linear-gradient(135deg, oklch(0.95 0.04 200), oklch(0.97 0.02 155));
border: 1px solid oklch(0.85 0.06 200);
border-radius: var(--radius-xl);
margin-bottom: var(--space-xl);
}
.value-frame__headline {
font-size: var(--text-lg);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.value-frame__sub {
font-size: var(--text-sm);
color: var(--ink-secondary);
}
.value-frame__early {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-sm);
padding: 6px 14px;
background: oklch(0.95 0.06 80);
color: oklch(0.40 0.14 80);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
}
/* Post-cards website note */
.pricing-website-note {
text-align: center;
padding: var(--space-lg);
margin-top: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
}
.pricing-website-note__text {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
}
.pricing-website-note__sub {
font-size: var(--text-sm);
color: var(--ink-muted);
margin-top: var(--space-2xs);
}
/* Plan card */
......@@ -432,155 +483,137 @@
<!-- Pricing Cards -->
<section class="section">
<div class="container">
<!-- Value Frame Banner -->
<div class="value-frame" data-reveal>
<div class="value-frame__headline">نظام تكلفة تطويره أكثر من ٢٥٠,٠٠٠ ج.م — أنت بتدفع رسوم دعم واستضافة فقط</div>
<div class="value-frame__sub">٤٩ ج.م لكل لاعب في الشهر (لأكاديمية ٥٠ لاعب)</div>
<div class="value-frame__early">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
أوائل المشتركين يقفلون على السعر ده للأبد
</div>
</div>
<div class="pricing-grid-4" data-reveal>
<!-- Plan 1: Platform % Only -->
<div class="plan-card">
<h3 class="plan-card__name">نسبة فقط</h3>
<p class="plan-card__tagline">ابدأ بدون أي تكلفة ثابتة</p>
<!-- Plan 1: Small -->
<div class="plan-card" data-plan="small" data-eg-flat="699" data-eg-pct="7" data-sa-flat="299" data-sa-pct="5">
<h3 class="plan-card__name">الباقة الصغيرة</h3>
<p class="plan-card__tagline">حتى ١٠٠ لاعب</p>
<div class="plan-card__price">
<div class="plan-card__amount plan-card__amount--free">
<span>مجاناً</span>
<div class="plan-card__amount">
<span class="plan-card__amount-number" dir="ltr">699</span>
<span class="plan-card__amount-currency">ج.م</span>
<span class="plan-card__amount-period">/ شهرياً</span>
</div>
<div class="plan-card__platform">
<span>نسبة المنصة:</span>
<strong dir="ltr">12%</strong>
<span>نسبة التشغيل:</span>
<strong class="plan-card__pct-number" dir="ltr">7%</strong>
<span class="plan-card__platform-label">من التحصيلات</span>
</div>
<div class="plan-card__trial">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span dir="ltr">10</span> يوم تجريبي
<span dir="ltr">10</span> يوم تجريبي مجاني
</div>
</div>
<ul class="plan-card__features">
<li>اشتراك شهري: 0 ج.م</li>
<li>كل مزايا النظام الأساسية</li>
<li>كل مزايا النظام بدون استثناء</li>
<li>إدارة المشتركين والحضور</li>
<li>الفواتير والمدفوعات</li>
<li>تقارير أساسية</li>
<li>البرامج والمجموعات والجداول</li>
<li>تقارير متقدمة</li>
<li>موقع إلكتروني (سب دومين)</li>
<li>دومين خاص: مع الاشتراك السنوي</li>
<li>رسوم التفعيل: <span dir="ltr" data-eg-setup="1,000" data-sa-setup="499">1,000</span> <span class="setup-currency">ج.م</span></li>
<li>دعم عبر WhatsApp</li>
<li>مناسب لأكاديميات تحت التأسيس</li>
</ul>
<div class="plan-card__cta">
<a href="contact.html" class="btn btn--secondary btn--large">ابدأ مجاناً</a>
<a href="contact.html" class="btn btn--secondary btn--large">ابدأ التجربة المجانية</a>
</div>
</div>
<!-- Plan 2: Starter -->
<div class="plan-card">
<h3 class="plan-card__name">المبتدئ</h3>
<p class="plan-card__tagline">للأكاديميات الصغيرة والناشئة</p>
<!-- Plan 2: Medium (Featured) -->
<div class="plan-card plan-card--featured" data-plan="medium" data-eg-flat="1499" data-eg-pct="5" data-sa-flat="699" data-sa-pct="3.5">
<span class="plan-card__badge">الأكثر طلباً</span>
<h3 class="plan-card__name">الباقة المتوسطة</h3>
<p class="plan-card__tagline">١٠٠ - ٣٠٠ لاعب</p>
<div class="plan-card__price">
<div class="plan-card__amount">
<span dir="ltr">1,000</span>
<span class="plan-card__amount-number" dir="ltr">1,499</span>
<span class="plan-card__amount-currency">ج.م</span>
<span class="plan-card__amount-period">/ شهرياً</span>
</div>
<div class="plan-card__platform">
<span>نسبة المنصة:</span>
<strong dir="ltr">7.5%</strong>
<span>نسبة التشغيل:</span>
<strong class="plan-card__pct-number" dir="ltr">5%</strong>
<span class="plan-card__platform-label">من التحصيلات</span>
</div>
<div class="plan-card__trial">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span dir="ltr">10</span> يوم تجريبي
<span dir="ltr">10</span> يوم تجريبي مجاني
</div>
</div>
<ul class="plan-card__features">
<li>كل مزايا باقة "نسبة فقط"</li>
<li>إدارة البرامج والمجموعات</li>
<li>الجدول الأسبوعي</li>
<li>التسجيلات وقائمة الانتظار</li>
<li>تقارير متوسطة</li>
<li>إشعارات بريد إلكتروني</li>
<li>كل مزايا النظام بدون استثناء</li>
<li>إدارة المشتركين والحضور</li>
<li>الفواتير والمدفوعات</li>
<li>البرامج والمجموعات والجداول</li>
<li>محرك التسعير الذكي</li>
<li>المنشآت ونظام الحارات</li>
<li>نقطة البيع (POS)</li>
<li>تقارير متقدمة + تصدير</li>
<li>موقع إلكتروني (سب دومين)</li>
<li>دومين خاص: مع الاشتراك السنوي</li>
<li>رسوم التفعيل: <span dir="ltr" data-eg-setup="2,500" data-sa-setup="999">2,500</span> <span class="setup-currency">ج.م</span></li>
<li>دعم أولوية</li>
</ul>
<div class="plan-card__cta">
<a href="contact.html" class="btn btn--secondary btn--large">احجز عرض</a>
<a href="contact.html" class="btn btn--primary btn--large">ابدأ التجربة المجانية</a>
</div>
</div>
<!-- Plan 3: Enterprise (Featured) -->
<div class="plan-card plan-card--featured">
<span class="plan-card__badge">الأكثر طلباً</span>
<h3 class="plan-card__name">المؤسسي</h3>
<p class="plan-card__tagline">للأكاديميات المتوسطة والنامية</p>
<!-- Plan 3: Large -->
<div class="plan-card" data-plan="large" data-eg-flat="3499" data-eg-pct="3" data-sa-flat="1499" data-sa-pct="2">
<h3 class="plan-card__name">الباقة الكبيرة</h3>
<p class="plan-card__tagline">٣٠٠+ لاعب</p>
<div class="plan-card__price">
<div class="plan-card__amount">
<span dir="ltr">3,500</span>
<span class="plan-card__amount-number" dir="ltr">3,499</span>
<span class="plan-card__amount-currency">ج.م</span>
<span class="plan-card__amount-period">/ شهرياً</span>
</div>
<div class="plan-card__platform">
<span>نسبة المنصة:</span>
<strong dir="ltr">5%</strong>
<span>نسبة التشغيل:</span>
<strong class="plan-card__pct-number" dir="ltr">3%</strong>
<span class="plan-card__platform-label">من التحصيلات</span>
</div>
<div class="plan-card__trial">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span dir="ltr">10</span> يوم تجريبي
<span dir="ltr">10</span> يوم تجريبي مجاني
</div>
</div>
<ul class="plan-card__features">
<li>كل مزايا باقة "المبتدئ"</li>
<li>كل مزايا النظام بدون استثناء</li>
<li>فروع متعددة بلا حدود</li>
<li>محرك التسعير الذكي</li>
<li>المنشآت ونظام الحارات</li>
<li>المخازن والمنتجات</li>
<li>الموارد البشرية والرواتب</li>
<li>نقطة البيع (POS)</li>
<li>إشعارات SMS + بريد</li>
<li>تقارير متقدمة + تصدير</li>
<li>صلاحيات متقدمة متعددة الأدوار</li>
<li>فترة تجريبية 10 أيام</li>
<li>فترة سماح 14 يوم</li>
</ul>
<div class="plan-card__cta">
<a href="contact.html" class="btn btn--primary btn--large">ابدأ الآن</a>
</div>
</div>
<!-- Plan 4: Professional -->
<div class="plan-card">
<h3 class="plan-card__name">الاحترافي</h3>
<p class="plan-card__tagline">للأكاديميات الكبيرة والسلاسل</p>
<div class="plan-card__price">
<div class="plan-card__amount">
<span dir="ltr">10,000</span>
<span class="plan-card__amount-currency">ج.م</span>
<span class="plan-card__amount-period">/ شهرياً</span>
</div>
<div class="plan-card__platform">
<span>نسبة المنصة:</span>
<strong dir="ltr">3.5%</strong>
<span class="plan-card__platform-label">من التحصيلات</span>
</div>
<div class="plan-card__trial">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span dir="ltr">10</span> يوم تجريبي
</div>
</div>
<ul class="plan-card__features">
<li>كل مزايا الباقة المؤسسية</li>
<li>فروع متعددة بلا حدود</li>
<li>تطبيقات مدربين + أولياء أمور</li>
<li>API للتكامل مع أنظمة خارجية</li>
<li>تخصيصات حسب الطلب</li>
<li>موقع إلكتروني + دومين خاص مجاناً</li>
<li>رسوم التفعيل: <span dir="ltr" data-eg-setup="5,000" data-sa-setup="1,999">5,000</span> <span class="setup-currency">ج.م</span></li>
<li>مدير حساب مخصص</li>
<li>تدريب فريق العمل</li>
<li>أقل نسبة منصة (3.5%)</li>
<li>SLA + ضمان وقت التشغيل</li>
<li>استضافة خاصة (اختياري)</li>
</ul>
<div class="plan-card__cta">
......@@ -589,6 +622,13 @@
</div>
</div>
<!-- Website note -->
<div class="pricing-website-note" data-reveal="100">
<div class="pricing-website-note__text">موقع إلكتروني لأكاديميتك مجاناً + دومين خاص مع الاشتراك السنوي</div>
<div class="pricing-website-note__sub">النظام ينشئ موقع احترافي لأكاديميتك تلقائياً عند التفعيل</div>
</div>
</div>
</section>
......@@ -647,147 +687,91 @@
<p class="section-header__desc">كل ما تحتاج معرفته عن كل باقة في مكان واحد</p>
</div>
<div class="compare-table-wrap" data-reveal="100">
<div class="compare-table-wrap" data-reveal="100" id="compare-table">
<table class="compare-table">
<thead>
<tr>
<th>الميزة</th>
<th>نسبة فقط</th>
<th>المبتدئ</th>
<th class="featured-col">المؤسسي</th>
<th>الاحترافي</th>
<th>الصغيرة</th>
<th class="featured-col">المتوسطة</th>
<th>الكبيرة</th>
</tr>
</thead>
<tbody>
<tr>
<td>الاشتراك الشهري</td>
<td dir="ltr">0 EGP</td>
<td dir="ltr">1,000 EGP</td>
<td class="featured-col" dir="ltr">3,500 EGP</td>
<td dir="ltr">10,000 EGP</td>
</tr>
<tr>
<td>نسبة المنصة</td>
<td dir="ltr">12%</td>
<td dir="ltr">7.5%</td>
<td class="featured-col" dir="ltr">5%</td>
<td dir="ltr">3.5%</td>
</tr>
<tr>
<td>فترة التجربة المجانية</td>
<td dir="ltr">10 أيام</td>
<td dir="ltr">10 أيام</td>
<td class="featured-col" dir="ltr">10 أيام</td>
<td dir="ltr">10 أيام</td>
</tr>
<tr>
<td>فترة السماح</td>
<td dir="ltr">7 أيام</td>
<td dir="ltr">7 أيام</td>
<td class="featured-col" dir="ltr">14 يوم</td>
<td dir="ltr">10 أيام</td>
<td>عدد اللاعبين</td>
<td>حتى ١٠٠</td>
<td class="featured-col">١٠٠ - ٣٠٠</td>
<td>٣٠٠+</td>
</tr>
<tr>
<td>إدارة المشتركين</td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>الفواتير والمدفوعات</td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>الاشتراك الشهري</td>
<td dir="ltr"><span data-eg-compare="699" data-sa-compare="299">699</span> <span class="compare-currency">ج.م</span></td>
<td class="featured-col" dir="ltr"><span data-eg-compare="1,499" data-sa-compare="699">1,499</span> <span class="compare-currency">ج.م</span></td>
<td dir="ltr"><span data-eg-compare="3,499" data-sa-compare="1,499">3,499</span> <span class="compare-currency">ج.م</span></td>
</tr>
<tr>
<td>تسجيل الحضور</td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>نسبة التشغيل</td>
<td dir="ltr"><span data-eg-pct-compare="7%" data-sa-pct-compare="5%">7%</span></td>
<td class="featured-col" dir="ltr"><span data-eg-pct-compare="5%" data-sa-pct-compare="3.5%">5%</span></td>
<td dir="ltr"><span data-eg-pct-compare="3%" data-sa-pct-compare="2%">3%</span></td>
</tr>
<tr>
<td>البرامج والمجموعات</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>اشتراك ٦ أشهر</td>
<td dir="ltr"><span data-eg-compare="3,499" data-sa-compare="1,499">3,499</span> <span class="compare-currency">ج.م</span></td>
<td class="featured-col" dir="ltr"><span data-eg-compare="7,499" data-sa-compare="3,499">7,499</span> <span class="compare-currency">ج.م</span></td>
<td dir="ltr"><span data-eg-compare="17,499" data-sa-compare="7,499">17,499</span> <span class="compare-currency">ج.م</span></td>
</tr>
<tr>
<td>الجدول الأسبوعي</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>اشتراك سنوي</td>
<td dir="ltr"><span data-eg-compare="5,999" data-sa-compare="2,699">5,999</span> <span class="compare-currency">ج.م</span></td>
<td class="featured-col" dir="ltr"><span data-eg-compare="13,499" data-sa-compare="5,999">13,499</span> <span class="compare-currency">ج.م</span></td>
<td dir="ltr"><span data-eg-compare="29,999" data-sa-compare="12,999">29,999</span> <span class="compare-currency">ج.م</span></td>
</tr>
<tr>
<td>محرك التسعير الذكي</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>رسوم التفعيل</td>
<td dir="ltr"><span data-eg-compare="1,000" data-sa-compare="499">1,000</span> <span class="compare-currency">ج.م</span></td>
<td class="featured-col" dir="ltr"><span data-eg-compare="2,500" data-sa-compare="999">2,500</span> <span class="compare-currency">ج.م</span></td>
<td dir="ltr"><span data-eg-compare="5,000" data-sa-compare="1,999">5,000</span> <span class="compare-currency">ج.م</span></td>
</tr>
<tr>
<td>المنشآت ونظام الحارات</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>فترة التجربة المجانية</td>
<td>10 أيام</td>
<td class="featured-col">10 أيام</td>
<td>10 أيام</td>
</tr>
<tr>
<td>المخازن والمنتجات</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>موقع إلكتروني</td>
<td>سب دومين مجاني</td>
<td class="featured-col">سب دومين مجاني</td>
<td>دومين خاص مجاني</td>
</tr>
<tr>
<td>الموارد البشرية والرواتب</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>دومين خاص</td>
<td>مع الاشتراك السنوي</td>
<td class="featured-col">مع الاشتراك السنوي</td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> مجاني</td>
</tr>
<tr>
<td>نقطة البيع (POS)</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td>كل مزايا النظام</td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>إشعارات SMS</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>فروع متعددة</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>تطبيقات موبايل</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="featured-col check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>API وتكاملات خارجية</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td>مدير حساب مخصص</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
</tr>
<tr>
<td>مدير حساب مخصص</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td>تدريب فريق العمل</td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="cross"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></td>
<td class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
......@@ -844,28 +828,36 @@
<div style="display: flex; flex-direction: column; gap: var(--space-md);" data-reveal="200">
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هي "نسبة المنصة" بالضبط؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نسبة بسيطة تُحسب من إجمالي المدفوعات التي تحصّلها عبر النظام (اشتراكات المشتركين، مبيعات المنتجات، إلخ). مثلاً: إذا حصّلت 100,000 ج.م في الشهر على الباقة المؤسسية (5%)، تكون نسبة المنصة 5,000 ج.م فقط.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هي "نسبة التشغيل" بالضبط؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نسبة بسيطة تُحسب من إجمالي المدفوعات التي تحصّلها عبر النظام (اشتراكات اللاعبين، مبيعات المنتجات، إلخ). هي رسوم تشغيل تغطي تكاليف الاستضافة والصيانة والتطوير المستمر. مثلاً: إذا حصّلت 100,000 ج.م في الشهر على الباقة المتوسطة (5%)، تكون نسبة التشغيل 5,000 ج.م فقط.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل باقة "نسبة فقط" مناسبة لي؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">مثالية إذا كنت تبدأ أكاديمية جديدة أو عندك عدد صغير من المشتركين. تحصل على النظام كاملاً بدون دفع جنيه واحد كاشتراك — فقط 12% من التحصيلات. مع نمو أكاديميتك، الترقية لباقة أعلى توفر لك أكثر.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف أختار الباقة المناسبة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">اختر حسب عدد اللاعبين المسجلين في أكاديميتك: حتى 100 لاعب = الصغيرة، من 100 لـ 300 = المتوسطة، أكثر من 300 = الكبيرة. كل الباقات فيها نفس المزايا — الفرق في السعر ونسبة التشغيل فقط.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">متى تصبح الترقية أوفر؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">قاعدة بسيطة: إذا كانت تحصيلاتك الشهرية تتجاوز 15,000 ج.م، باقة المبتدئ (1,000 + 7.5%) أوفر من باقة "نسبة فقط" (12%). وإذا تجاوزت 70,000 ج.م، الباقة المؤسسية تصبح الخيار الأمثل.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل فيه باقة مجانية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا يوجد باقة مجانية، لكن كل الباقات فيها 10 أيام تجربة مجانية كاملة بدون أي التزام. بعد التجربة تختار الباقة اللي تناسبك.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث بعد انتهاء الفترة التجريبية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بعد انتهاء التجربة + فترة السماح، يتوقف النظام مؤقتاً حتى تفعّل الاشتراك. بياناتك تبقى محفوظة ولا تُحذف — يمكنك العودة في أي وقت.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هو عرض "أوائل المشتركين"؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">أوائل المشتركين (أول 50 أكاديمية) يقفلون على السعر الحالي للأبد — حتى لو زادت الأسعار لاحقاً. السعر المعروض اليوم هو سعرك الدائم.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني التنقل بين الباقات؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الترقية فورية والتخفيض يبدأ من الشهر القادم. لا فقد لأي بيانات في كلا الحالتين.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل الاشتراك السنوي أوفر؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الاشتراك السنوي يوفر لك ما يعادل شهرين أو أكثر مقارنة بالدفع الشهري. بالإضافة لدومين خاص مجاني لموقع أكاديميتك.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث بعد انتهاء الفترة التجريبية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بعد انتهاء الـ 10 أيام التجريبية، يتوقف النظام مؤقتاً حتى تفعّل الاشتراك. بياناتك تبقى محفوظة ولا تُحذف — يمكنك العودة في أي وقت.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحتاج أجهزة خاصة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل ويعمل من أي متصفح (كمبيوتر، تابلت، موبايل). لا حاجة لسيرفرات أو تثبيت برامج.</p>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل ويعمل من أي متصفح (كمبيوتر، تابلت، موبايل). لا حاجة لسيرفرات أو تثبيت برامج. والنظام ينشئ لك موقع إلكتروني تلقائياً عند التفعيل.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني التنقل بين الباقات؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الترقية فورية والتخفيض يبدأ من الشهر القادم. لا فقد لأي بيانات في كلا الحالتين.</p>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment