Skip to content

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

Implement 50 website improvements across all categories 

New pages (11): about, blog, changelog, compare, faq, football,
gymnastics, martial-arts, partners, privacy, terms

Technical/SEO: sitemap.xml, robots.txt, manifest.json, Open Graph
meta tags, canonical URLs on all existing pages

UX enhancements (main.js rewrite): sticky CTA bar, exit-intent popup,
back-to-top button, pricing calculator, enhanced mobile drawer,
micro-interactions, View Transitions API, social proof counters

Homepage additions: social proof stats section, testimonials section,
data-sticky-cta and data-exit-intent attributes

Pricing page: interactive cost calculator with slider

Contact page: simplified to 3 fields, pre-filled WhatsApp message

CSS: new styles for FAQ accordion, comparison table, changelog
timeline, blog cards, about values, partner tiers, newsletter CTA,
testimonials, sticky CTA, exit modal, back-to-top, micro-interactions
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent c0c2bad4
Hide whitespace changes
Inline Side-by-side
Showing with 7376 additions and 58 deletions
public/about.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 المصري الذي يبني نظام إدارة الأكاديميات الرياضية الأول من نوعه في السوق العربي.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero Banner -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<nav class="breadcrumb" aria-label="مسار التنقل">
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>من نحن</span>
</nav>
<span class="section-header__tag" style="margin-bottom: var(--space-lg); display: inline-flex;">قصتنا</span>
<h1 class="module-hero__title">من نحن</h1>
<p class="module-hero__desc">فريق مصري يبني أول نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في العالم العربي.</p>
</div>
</div>
</section>
<!-- Egyptian Team Section -->
<section class="section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag section-header__tag--teal">فريق محلي</span>
<h2 class="section-header__title">فريق مصري يفهم السوق المصري</h2>
<p class="section-header__desc">نحن لسنا شركة أجنبية تحاول تعريب منتج جاهز. نحن فريق مصري عاش واقع الأكاديميات الرياضية وفهم تحدياتها اليومية، فبنينا نظاماً يحل مشاكل حقيقية يواجهها أصحاب الأكاديميات كل يوم.</p>
</div>
<div class="why-section__grid" data-reveal="100">
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
</div>
<h3 class="why-card__title">عربي من الجذور</h3>
<p class="why-card__desc">واجهة عربية أصلية من اليمين لليسار، مصطلحات مفهومة لكل موظف في الأكاديمية، ودعم فني بالعربي.</p>
</div>
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3 class="why-card__title">نعرف عملاءنا</h3>
<p class="why-card__desc">تعاملنا مع عشرات الأكاديميات في مصر والوطن العربي. نفهم التحديات ونبني الحلول بناءً على احتياجات حقيقية.</p>
</div>
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1v22"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<h3 class="why-card__title">تسعير السوق المصري</h3>
<p class="why-card__desc">أسعارنا مصممة لواقع السوق المصري. لا نقارن أنفسنا بأنظمة أجنبية مكلفة لا تناسب ميزانيات أكاديمياتنا.</p>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="section" style="background: var(--bg-base);">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<circle cx="12" cy="12" r="6"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">رسالتنا</span>
</div>
<h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">رقمنة إدارة الأكاديميات الرياضية</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">نؤمن أن كل أكاديمية رياضية تستحق نظام إدارة احترافي يوفر وقتها ويزيد كفاءتها. رسالتنا هي تحويل العمليات اليدوية المعقدة إلى تجربة رقمية سلسة تساعد الأكاديميات على التركيز في ما تبرع فيه: تدريب الرياضيين.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تحويل الدفاتر الورقية إلى نظام رقمي متكامل</div>
<div class="module-detail__list-item">أتمتة العمليات المتكررة: الفواتير، الحضور، التجديدات</div>
<div class="module-detail__list-item">توفير رؤية مالية واضحة لأصحاب الأكاديميات</div>
<div class="module-detail__list-item">تمكين أولياء الأمور من متابعة أبنائهم لحظة بلحظة</div>
<div class="module-detail__list-item">رفع جودة التدريب عبر تقييمات منهجية وتقارير أداء</div>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-xl); justify-content: center;" data-reveal="150">
<div style="background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center;">
<div style="font-size: var(--text-3xl); font-weight: 800; color: var(--brand-primary); margin-bottom: var(--space-sm);">14+</div>
<div style="color: var(--ink-secondary); font-size: var(--text-sm);">وحدة متكاملة</div>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center;">
<div style="font-size: var(--text-3xl); font-weight: 800; color: var(--brand-accent); margin-bottom: var(--space-sm);">100%</div>
<div style="color: var(--ink-secondary); font-size: var(--text-sm);">عربي من الجذور</div>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center;">
<div style="font-size: var(--text-3xl); font-weight: 800; color: var(--brand-gold); margin-bottom: var(--space-sm);">24/7</div>
<div style="color: var(--ink-secondary); font-size: var(--text-sm);">نظام سحابي متاح دائماً</div>
</div>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag section-header__tag--gold">مبادئنا</span>
<h2 class="section-header__title">القيم التي نبني عليها</h2>
<p class="section-header__desc">كل قرار في بناء النظام يمر عبر هذه القيم الأربع.</p>
</div>
<div class="why-section__grid" data-reveal="100">
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<h3 class="why-card__title">الثقة والأمان</h3>
<p class="why-card__desc">بيانات أكاديميتك أمانة. نشفر كل شيء، نأخذ نسخ احتياطية يومية، ونضمن أن لا أحد يصل لبياناتك إلا من تسمح له.</p>
</div>
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 0 1 6.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
</svg>
</div>
<h3 class="why-card__title">عربي أولاً</h3>
<p class="why-card__desc">لسنا ترجمة. كل شاشة وكل زر وكل رسالة خطأ مكتوبة بالعربي من البداية. النظام يفكر بالعربي.</p>
</div>
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
</svg>
</div>
<h3 class="why-card__title">البساطة</h3>
<p class="why-card__desc">نظام قوي لا يعني نظام معقد. نصمم كل شاشة ليستخدمها موظف الاستقبال بدون تدريب طويل.</p>
</div>
<div class="why-card">
<div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
</svg>
</div>
<h3 class="why-card__title">التطور المستمر</h3>
<p class="why-card__desc">نستمع لعملائنا ونطور النظام باستمرار. كل تحديث يأتي من احتياج حقيقي لأكاديمية حقيقية.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز تعرف أكتر؟</h2>
<p class="cta-section__desc">احجز عرضاً تجريبياً مجانياً وشوف بنفسك كيف El-Captain يقدر يغير طريقة إدارة أكاديميتك.</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من تسجيل المشترك حتى التقارير المالية الشهرية.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="features.html#members" class="footer__link">العضويات</a>
<a href="features.html#sports" class="footer__link">الأنشطة الرياضية</a>
<a href="features.html#pool" class="footer__link">حمامات السباحة</a>
<a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/blog.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مدونة El-Captain — مقالات عن إدارة الأكاديميات الرياضية</title>
<meta name="description" content="مقالات ونصائح عملية لأصحاب الأكاديميات الرياضية — من إدارة الاشتراكات والحضور إلى تحسين الأداء المالي وتجربة أولياء الأمور.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* Blog Card Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
padding-block: var(--space-xl);
}
@media (max-width: 960px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.blog-grid {
grid-template-columns: 1fr;
}
}
.blog-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.blog-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.blog-card__bar {
height: 4px;
width: 100%;
}
.blog-card__bar--teal {
background: var(--color-accent);
}
.blog-card__bar--navy {
background: var(--color-primary);
}
.blog-card__bar--gold {
background: var(--color-gold);
}
.blog-card__body {
padding: var(--card-padding);
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card__category {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-accent-ghost);
color: var(--color-accent-dark);
margin-block-end: var(--space-sm);
width: fit-content;
}
.blog-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
margin-block-end: var(--space-sm);
}
.blog-card__excerpt {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-normal);
margin-block-end: var(--space-md);
flex: 1;
}
.blog-card__footer {
display: flex;
align-items: center;
gap: var(--space-xs);
padding-block-start: var(--space-sm);
border-block-start: 1px solid var(--border-subtle);
}
.blog-card__link {
font-size: var(--text-sm);
color: var(--ink-link);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
transition: color var(--duration-fast) var(--ease-out);
}
.blog-card__link:hover {
color: var(--ink-link-hover);
}
.blog-card__link svg {
width: 16px;
height: 16px;
transform: scaleX(-1);
}
.blog-card__coming {
font-size: var(--text-xs);
color: var(--ink-muted);
margin-inline-start: auto;
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
.blog-card__coming svg {
width: 14px;
height: 14px;
}
/* Newsletter Section */
.newsletter-section {
background: var(--bg-muted);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-lg);
margin-block: var(--space-2xl);
text-align: center;
}
.newsletter-section__title {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-xs);
}
.newsletter-section__subtitle {
font-size: var(--text-base);
color: var(--ink-secondary);
margin-block-end: var(--space-lg);
}
.newsletter-form {
display: flex;
gap: var(--space-sm);
max-width: 480px;
margin-inline: auto;
}
@media (max-width: 600px) {
.newsletter-form {
flex-direction: column;
}
}
.newsletter-form__input {
flex: 1;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-default);
border-radius: var(--btn-radius);
font-size: var(--text-base);
font-family: var(--font-primary);
background: var(--bg-surface);
color: var(--ink-primary);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.newsletter-form__input::placeholder {
color: var(--ink-placeholder);
}
.newsletter-form__input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-ghost);
}
.newsletter-form__btn {
padding: var(--space-sm) var(--space-lg);
background: var(--color-accent);
color: #fff;
border: none;
border-radius: var(--btn-radius);
font-size: var(--text-base);
font-weight: var(--btn-font-weight);
font-family: var(--font-primary);
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.newsletter-form__btn:hover {
background: var(--color-accent-dark);
box-shadow: var(--shadow-accent);
}
</style>
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<section class="module-hero">
<div class="container">
<div class="module-hero__content">
<h1>مدونة El-Captain</h1>
<p>مقالات ونصائح عملية لأصحاب الأكاديميات الرياضية — من إدارة الاشتراكات إلى تحسين الأداء المالي</p>
</div>
</div>
</section>
<main class="section">
<div class="container">
<div class="blog-grid">
<!-- Article 1 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--teal"></div>
<div class="blog-card__body">
<span class="blog-card__category">إدارة</span>
<h3 class="blog-card__title">7 اخطاء شائعة في إدارة اشتراكات الأكاديمية</h3>
<p class="blog-card__excerpt">تعرف على الأخطاء التي تكلف أكاديميتك مشتركين وأرباح — وكيف تتجنبها بسهولة.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
<!-- Article 2 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--navy"></div>
<div class="blog-card__body">
<span class="blog-card__category">حضور</span>
<h3 class="blog-card__title">كيف تزيد معدل الحضور في أكاديميتك بنسبة 30%</h3>
<p class="blog-card__excerpt">استراتيجيات مجربة لتقليل الغياب وزيادة التزام المشتركين بالتدريبات.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
<!-- Article 3 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--gold"></div>
<div class="blog-card__body">
<span class="blog-card__category">تقنية</span>
<h3 class="blog-card__title">دليل اختيار نظام إدارة لأكاديميتك الرياضية</h3>
<p class="blog-card__excerpt">ما الذي يجب أن تبحث عنه عند اختيار نظام إدارة؟ دليل شامل لاتخاذ القرار الصحيح.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
<!-- Article 4 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--teal"></div>
<div class="blog-card__body">
<span class="blog-card__category">سباحة</span>
<h3 class="blog-card__title">إدارة حارات السباحة: من الفوضى إلى النظام</h3>
<p class="blog-card__excerpt">كيف تنظم حجوزات الحارات وتمنع التعارضات وتزيد استغلال المساحات المتاحة.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
<!-- Article 5 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--navy"></div>
<div class="blog-card__body">
<span class="blog-card__category">تجربة العميل</span>
<h3 class="blog-card__title">5 طرق لتحسين تجربة أولياء الأمور</h3>
<p class="blog-card__excerpt">ولي الأمر الراضي يجدد الاشتراك. اكتشف كيف تحسن تواصلك معهم بدون مجهود إضافي.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
<!-- Article 6 -->
<article class="blog-card">
<div class="blog-card__bar blog-card__bar--gold"></div>
<div class="blog-card__body">
<span class="blog-card__category">مالية</span>
<h3 class="blog-card__title">كيف تحسب تكلفة المشترك الواحد بدقة</h3>
<p class="blog-card__excerpt">فهم التكلفة الحقيقية لكل مشترك يساعدك في تسعير خدماتك بشكل صحيح وزيادة أرباحك.</p>
<div class="blog-card__footer">
<a href="contact.html" class="blog-card__link">
قريبا — تواصل معنا للمزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<span class="blog-card__coming">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
قريبا
</span>
</div>
</div>
</article>
</div>
<!-- Newsletter Signup -->
<div class="newsletter-section">
<h2 class="newsletter-section__title">اشترك في نشرتنا</h2>
<p class="newsletter-section__subtitle">احصل على نصائح أسبوعية لإدارة أكاديميتك بشكل أفضل</p>
<form class="newsletter-form" action="contact.html" method="get">
<input type="email" class="newsletter-form__input" placeholder="بريدك الإلكتروني" required aria-label="البريد الإلكتروني">
<button type="submit" class="newsletter-form__btn">اشترك الآن</button>
</form>
</div>
</div>
</main>
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز تبدأ؟</h2>
<p class="cta-section__desc">لا تضيع وقتك في أنظمة عامة تحتاج سنوات لتخصيصها. El-Captain جاهز لإدارة أكاديميتك من اليوم الأول.</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصًا للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/changelog.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 لإدارة الأكاديميات الرياضية. نظام يتطور باستمرار لخدمتك بشكل أفضل.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
.timeline {
position: relative;
padding-block: var(--space-16, 4rem) var(--space-8, 2rem);
}
.timeline__line {
position: absolute;
inset-inline-start: 1.25rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-subtle, #E2E8F0);
}
.timeline__entries {
display: flex;
flex-direction: column;
gap: var(--space-10, 2.5rem);
list-style: none;
padding: 0;
margin: 0;
}
.timeline__entry {
position: relative;
padding-inline-start: 3.5rem;
}
.timeline__dot {
position: absolute;
inset-inline-start: 0.625rem;
top: 0.375rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--color-primary, #1B2B4B);
border: 3px solid var(--bg-surface, #FFFFFF);
box-shadow: 0 0 0 2px var(--border-subtle, #E2E8F0);
z-index: 1;
}
.timeline__entry:first-child .timeline__dot {
background: var(--color-accent, #0891B2);
box-shadow: 0 0 0 2px var(--color-accent, #0891B2), 0 0 0 5px rgba(8, 145, 178, 0.15);
}
.timeline__card {
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border-subtle, #E2E8F0);
border-radius: var(--radius-lg, 12px);
padding: var(--space-6, 1.5rem);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.timeline__card:hover {
box-shadow: 0 4px 24px rgba(27, 43, 75, 0.08);
transform: translateY(-2px);
}
.timeline__header {
display: flex;
align-items: center;
gap: var(--space-3, 0.75rem);
margin-block-end: var(--space-3, 0.75rem);
flex-wrap: wrap;
}
.timeline__date {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-primary, #1B2B4B);
background: rgba(27, 43, 75, 0.06);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
}
.timeline__date svg {
width: 14px;
height: 14px;
opacity: 0.7;
}
.timeline__tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
padding: 0.1875rem 0.625rem;
border-radius: 9999px;
line-height: 1.4;
}
.timeline__tag--new {
background: rgba(8, 145, 178, 0.1);
color: var(--color-accent, #0891B2);
}
.timeline__tag--improvement {
background: rgba(201, 149, 43, 0.1);
color: var(--color-gold, #C9952B);
}
.timeline__tag--launch {
background: rgba(27, 43, 75, 0.08);
color: var(--color-primary, #1B2B4B);
}
.timeline__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary, #1B2B4B);
margin: 0 0 var(--space-2, 0.5rem);
line-height: 1.5;
}
.timeline__desc {
font-size: 1rem;
line-height: 1.75;
color: #4A5568;
margin: 0;
}
@media (min-width: 768px) {
.timeline__line {
inset-inline-start: 2rem;
}
.timeline__entry {
padding-inline-start: 5rem;
}
.timeline__dot {
inset-inline-start: 1.375rem;
width: 1.5rem;
height: 1.5rem;
}
.timeline__card {
padding: var(--space-8, 2rem);
}
.timeline__title {
font-size: 1.375rem;
}
}
.changelog-intro {
text-align: center;
max-width: 640px;
margin-inline: auto;
padding-block-end: var(--space-8, 2rem);
}
.changelog-intro__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: rgba(8, 145, 178, 0.1);
color: var(--color-accent, #0891B2);
margin-block-end: var(--space-4, 1rem);
}
.changelog-intro__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.changelog-intro__text {
font-size: 1.0625rem;
line-height: 1.75;
color: #4A5568;
}
</style>
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<section class="module-hero">
<div class="container">
<div class="module-hero__content">
<h1>ما الجديد في El-Captain</h1>
<p>نظام يتطور باستمرار — تابع آخر المزايا والتحسينات التي نضيفها كل شهر</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="changelog-intro" data-reveal>
<div class="changelog-intro__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 8v4l3 3"/>
<circle cx="12" cy="12" r="10"/>
</svg>
</div>
<p class="changelog-intro__text">نعمل باستمرار على تطوير النظام وإضافة مزايا جديدة بناءً على احتياجات الأكاديميات. هنا تجد سجل كامل بكل التحديثات.</p>
</div>
<div class="timeline">
<div class="timeline__line" aria-hidden="true"></div>
<ol class="timeline__entries">
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
يوليو 2026
</span>
<span class="timeline__tag timeline__tag--new">جديد</span>
</div>
<h3 class="timeline__title">محرك التسعير الذكي</h3>
<p class="timeline__desc">خصومات تلقائية وعروض موسمية بقواعد مرنة. حدد شروط الخصم مرة واحدة والنظام يطبقها تلقائيا على كل عملية بيع او تسجيل.</p>
</div>
</li>
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
يونيو 2026
</span>
<span class="timeline__tag timeline__tag--new">جديد</span>
</div>
<h3 class="timeline__title">نظام المنشآت والحارات</h3>
<p class="timeline__desc">إدارة المساحات بصريا — حارات السباحة، الملاعب، وقاعات التدريب. كشف التعارضات تلقائيا ومنع الحجز المزدوج.</p>
</div>
</li>
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
مايو 2026
</span>
<span class="timeline__tag timeline__tag--new">جديد</span>
</div>
<h3 class="timeline__title">لوحة تحكم المدرب</h3>
<p class="timeline__desc">واجهة مخصصة للمدربين تعمل من الموبايل. تسجيل الحضور بلمسة واحدة، عرض جدول اليوم، وتقييم أداء اللاعبين.</p>
</div>
</li>
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
أبريل 2026
</span>
<span class="timeline__tag timeline__tag--improvement">تحسين</span>
</div>
<h3 class="timeline__title">الرسائل الجماعية والإشعارات</h3>
<p class="timeline__desc">إرسال إشعارات SMS ورسائل بريد إلكتروني مخصصة لأولياء الأمور. قوالب جاهزة لتذكير الحضور وتأخر الدفع.</p>
</div>
</li>
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
مارس 2026
</span>
<span class="timeline__tag timeline__tag--new">جديد</span>
</div>
<h3 class="timeline__title">نقطة البيع المتكاملة</h3>
<p class="timeline__desc">بيع المنتجات والكروت من مكتب الاستقبال. ربط تلقائي بالمخازن والمحاسبة مع إيصالات فورية.</p>
</div>
</li>
<li class="timeline__entry" data-reveal>
<div class="timeline__dot" aria-hidden="true"></div>
<div class="timeline__card">
<div class="timeline__header">
<span class="timeline__date">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
فبراير 2026
</span>
<span class="timeline__tag timeline__tag--launch">إطلاق</span>
</div>
<h3 class="timeline__title">إطلاق النظام — النسخة الأولى</h3>
<p class="timeline__desc">إطلاق النسخة الأولى من El-Captain مع الوحدات الأساسية: إدارة المشتركين، المالية، الحضور، والتقارير.</p>
</div>
</li>
</ol>
</div>
</div>
</section>
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">نظام يتطور معك</h2>
<p class="cta-section__desc">كل شهر مزايا جديدة وتحسينات مبنية على احتياجات أكاديميتك الحقيقية. جرب بنفسك.</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصًا للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/compare.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 مع Excel والإدارة الورقية وبرامج CRM العامة وبرامج الأكاديميات الأخرى. اكتشف لماذا El-Captain هو الخيار الأفضل لأكاديميتك الرياضية.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* Page-specific: Highlight El-Captain column */
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
background: var(--color-accent-ghost);
font-weight: 600;
}
.comparison-table th:nth-child(2) {
color: var(--color-accent-dark);
position: relative;
}
.comparison-table th:nth-child(2)::after {
content: '';
position: absolute;
bottom: 0;
inset-inline: 0;
height: 2px;
background: var(--color-accent);
}
/* Table wrapper for mobile scroll */
.table-wrapper {
overflow-x: auto;
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
}
.table-wrapper .comparison-table {
border: none;
border-radius: 0;
}
/* Why switch section */
.why-switch {
padding-block: var(--space-section);
background: var(--bg-muted);
}
.why-switch__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-lg);
margin-block-start: var(--space-2xl);
}
.why-switch__card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition:
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.why-switch__card:hover {
box-shadow: var(--shadow-md);
border-color: var(--border-accent);
transform: translateY(-3px);
}
.why-switch__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
margin-block-end: var(--space-lg);
}
.why-switch__icon svg {
width: 1.375rem;
height: 1.375rem;
}
.why-switch__card-title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-xs);
line-height: var(--leading-snug);
}
.why-switch__card-text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
}
/* Comparison section spacing */
.compare-section {
padding-block: var(--space-section);
}
.compare-section .section-header {
margin-block-end: var(--space-xl);
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="module-hero">
<div class="container">
<div class="module-hero__content">
<h1>لماذا El-Captain؟</h1>
<p>قارن بنفسك — لماذا تختار نظام مبني خصيصاً للرياضة بدلاً من حلول عامة أو يدوية</p>
</div>
</div>
</section>
<!-- Comparison Table -->
<section class="compare-section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">مقارنة شاملة</h2>
<p class="section-header__desc">شوف الفرق بين El-Captain والبدائل المتاحة في السوق</p>
</div>
<div class="table-wrapper" data-reveal="100">
<table class="comparison-table">
<thead>
<tr>
<th>الميزة</th>
<th>El-Captain</th>
<th>Excel</th>
<th>ورقي</th>
<th>CRM عام</th>
<th>برامج أخرى</th>
</tr>
</thead>
<tbody>
<tr>
<td>إدارة المشتركين</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
<td><svg class="check" width="20" height="20" 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><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
</tr>
<tr>
<td>الحضور الذكي</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
</tr>
<tr>
<td>الجدول والمجموعات</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
</tr>
<tr>
<td>نقطة البيع</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
</tr>
<tr>
<td>التقارير والتحليلات</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span style="color: var(--color-warning);">جزئي</span></td>
</tr>
<tr>
<td>عربي بالكامل</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
</tr>
<tr>
<td>مصمم للرياضة</td>
<td><svg class="check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check" width="20" height="20" 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><strong style="color: var(--color-accent);">مناسب</strong></td>
<td><span style="color: var(--ink-muted); font-size: var(--text-xs);">مجاني (لكن بتكلفة مخفية)</span></td>
<td><span style="color: var(--ink-muted);">مجاني</span></td>
<td><span style="color: var(--color-error);">مرتفع</span></td>
<td><span style="color: var(--color-error);">مرتفع</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Why Academies Switch -->
<section class="why-switch">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">ليه الأكاديميات بتنقل لـ El-Captain؟</h2>
<p class="section-header__desc">مش بس برنامج إدارة — ده شريك نمو لأكاديميتك</p>
</div>
<div class="why-switch__grid">
<!-- Card 1: Time Saving -->
<div class="why-switch__card" data-reveal="100">
<div class="why-switch__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<h3 class="why-switch__card-title">توفير ٢٠+ ساعة أسبوعياً</h3>
<p class="why-switch__card-text">بدل ما تضيع وقتك في إدخال بيانات يدوي وملفات منفصلة، النظام يربط كل شيء تلقائياً.</p>
</div>
<!-- Card 2: No Data Loss -->
<div class="why-switch__card" data-reveal="200">
<div class="why-switch__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<h3 class="why-switch__card-title">لا فقدان بيانات</h3>
<p class="why-switch__card-text">لا ملفات ضائعة ولا ورق مفقود. كل شيء محفوظ ومنظم في مكان واحد آمن مع نسخ احتياطي يومي.</p>
</div>
<!-- Card 3: Growth -->
<div class="why-switch__card" data-reveal="300">
<div class="why-switch__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
<polyline points="17 6 23 6 23 12"/>
</svg>
</div>
<h3 class="why-switch__card-title">نمو الأكاديمية</h3>
<p class="why-switch__card-text">مع تقارير واضحة وإدارة مالية دقيقة، تقدر تاخد قرارات أفضل وتنمّي أكاديميتك بثقة.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز تجرب بنفسك؟</h2>
<p class="cta-section__desc">احجز عرض تجريبي مجاني وشوف الفرق بعينك.</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصًا للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/contact.html
View file @ 067dce8d
......@@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>احجز عرضك التجريبي - El-Captain</title>
<meta name="description" content="احجز عرضاً تجريبياً مجانياً لنظام El-Captain لإدارة الأكاديميات الرياضية. نريك النظام يعمل على بيانات مشابهة لأكاديميتك.">
<meta property="og:title" content="احجز عرضك التجريبي - El-Captain">
<meta property="og:description" content="احجز عرضاً تجريبياً مجانياً لنظام El-Captain لإدارة الأكاديميات الرياضية. نريك النظام يعمل على بيانات مشابهة لأكاديميتك.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/contact.html">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/contact.html">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
......@@ -64,49 +70,14 @@
<input type="text" id="name" name="name" required placeholder="اسمك الكامل">
</div>
<div class="form-group">
<label for="academy">اسم الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
</div>
<div class="form-group">
<label for="phone">رقم الهاتف <span style="color: var(--brand-primary);">*</span></label>
<input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx" dir="ltr">
</div>
<div class="form-group">
<label for="email">البريد الإلكتروني <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<input type="email" id="email" name="email" placeholder="email@academy.com" dir="ltr">
</div>
<div class="form-group">
<label for="subscribers_count">عدد المشتركين التقريبي</label>
<select id="subscribers_count" name="subscribers_count">
<option value="">اختر</option>
<option value="lt50">أقل من 50</option>
<option value="50-200">50 - 200</option>
<option value="200-500">200 - 500</option>
<option value="500-1000">500 - 1000</option>
<option value="gt1000">أكثر من 1000</option>
</select>
</div>
<div class="form-group">
<label for="interest">أكثر ما يهمك</label>
<select id="interest" name="interest">
<option value="">ما الوحدة الأهم بالنسبة لك؟</option>
<option value="participants">إدارة المشتركين</option>
<option value="finance">المالية</option>
<option value="attendance">الحضور</option>
<option value="programs">البرامج التدريبية</option>
<option value="inventory">المخازن</option>
<option value="all">النظام بالكامل</option>
</select>
</div>
<div class="form-group">
<label for="message">ملاحظات إضافية <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<textarea id="message" name="message" placeholder="أخبرنا عن أي متطلبات خاصة لأكاديميتك أو أسئلة تريد إجابة عليها في العرض"></textarea>
<label for="academy">اسم الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
</div>
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
......@@ -128,7 +99,7 @@
<div style="color: oklch(1 0 0 / 0.75); font-size: var(--text-sm);">رد فوري خلال دقائق</div>
</div>
</div>
<a href="https://wa.me/201000000000" target="_blank" rel="noopener noreferrer"
<a href="https://wa.me/201000000000?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D8%8C%20%D8%A3%D9%88%D8%AF%20%D9%85%D8%B9%D8%B1%D9%81%D8%A9%20%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF%20%D8%B9%D9%86%20%D9%86%D8%B8%D8%A7%D9%85%20El-Captain%20%D9%84%D8%A3%D9%83%D8%A7%D8%AF%D9%8A%D9%85%D9%8A%D8%AA%D9%8A" target="_blank" rel="noopener noreferrer"
style="display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: white; color: oklch(0.35 0.160 145); font-weight: 700; font-size: var(--text-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); transition: opacity 0.2s; text-decoration: none;">
ابدأ المحادثة الآن
</a>
......
public/css/home.css
View file @ 067dce8d
......@@ -1277,3 +1277,319 @@
justify-content: center;
}
}
/* ─────────────────────────────────────────────
SOCIAL PROOF STATS
───────────────────────────────────────────── */
.social-proof {
padding: var(--space-xl) 0;
background: var(--bg-muted);
border-bottom: 1px solid var(--border-subtle);
}
.social-proof__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
text-align: center;
}
@media (max-width: 768px) {
.social-proof__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
}
.social-proof__stat {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.social-proof__number {
font-size: var(--text-2xl);
font-weight: 900;
color: var(--color-accent-dark);
line-height: 1;
}
.social-proof__label {
font-size: var(--text-sm);
color: var(--ink-muted);
font-weight: 500;
}
/* ─────────────────────────────────────────────
TESTIMONIALS
───────────────────────────────────────────── */
.testimonials {
background: var(--bg-muted);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
@media (max-width: 900px) {
.testimonials__grid {
grid-template-columns: 1fr;
}
}
.testimonial-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: #f59e0b;
}
.testimonial-card__text {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
flex: 1;
}
.testimonial-card__author {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--space-md);
border-top: 1px solid var(--border-subtle);
}
.testimonial-card__author strong {
color: var(--ink-primary);
font-size: var(--text-sm);
}
.testimonial-card__author span {
color: var(--ink-muted);
font-size: var(--text-xs);
}
/* ─────────────────────────────────────────────
STICKY CTA BAR
───────────────────────────────────────────── */
.sticky-cta {
position: fixed;
bottom: 0;
inset-inline: 0;
background: var(--color-primary);
color: white;
padding: var(--space-sm) var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
z-index: 900;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -4px 20px oklch(0 0 0 / 0.15);
}
.sticky-cta--visible {
transform: translateY(0);
}
.sticky-cta__text {
font-weight: 600;
font-size: var(--text-sm);
}
.sticky-cta__btn {
background: white;
color: var(--color-primary);
padding: 8px 20px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: transform 0.15s;
}
.sticky-cta__btn:hover {
transform: scale(1.05);
}
.sticky-cta__close {
position: absolute;
inset-inline-end: var(--space-md);
background: none;
border: none;
color: white;
opacity: 0.7;
cursor: pointer;
padding: 4px;
}
.sticky-cta__close:hover {
opacity: 1;
}
/* ─────────────────────────────────────────────
EXIT INTENT MODAL
───────────────────────────────────────────── */
.exit-modal-backdrop {
position: fixed;
inset: 0;
background: oklch(0 0 0 / 0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.exit-modal-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
.exit-modal {
background: var(--bg-surface);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
max-width: 420px;
width: 100%;
text-align: center;
position: relative;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-modal-backdrop--visible .exit-modal {
transform: scale(1) translateY(0);
}
.exit-modal__close {
position: absolute;
top: var(--space-md);
inset-inline-end: var(--space-md);
background: none;
border: none;
color: var(--ink-muted);
cursor: pointer;
padding: 4px;
}
.exit-modal__title {
font-size: var(--text-xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.exit-modal__subtitle {
color: var(--ink-secondary);
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.exit-modal__input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-base);
text-align: center;
direction: ltr;
margin-bottom: var(--space-md);
}
.exit-modal__input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.1);
}
.exit-modal__submit {
width: 100%;
padding: 12px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.2s;
}
.exit-modal__submit:hover {
background: var(--color-accent-dark);
}
/* ─────────────────────────────────────────────
BACK TO TOP
───────────────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 100px;
inset-inline-start: var(--space-lg);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-default);
color: var(--ink-secondary);
display: grid;
place-items: center;
cursor: pointer;
z-index: 800;
opacity: 0;
transform: scale(0);
transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
.back-to-top--visible {
opacity: 1;
transform: scale(1);
}
.back-to-top:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* ─────────────────────────────────────────────
MICRO-INTERACTIONS
───────────────────────────────────────────── */
.btn {
transition: transform 0.1s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:active {
transform: scale(0.97);
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.12);
}
.plan-card, .pain-card, .feature-card, .module-card, .testimonial-card {
transition: transform 0.2s, box-shadow 0.2s;
}
.plan-card:hover, .pain-card:hover, .feature-card:hover, .module-card:hover, .testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
}
public/css/pages.css
View file @ 067dce8d
......@@ -1360,3 +1360,390 @@
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
}
/* ─────────────────────────────────────────────
FAQ ACCORDION
───────────────────────────────────────────── */
.faq-category {
margin-bottom: var(--space-xl);
}
.faq-category__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--border-subtle);
}
.faq-item {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
margin-bottom: var(--space-sm);
overflow: hidden;
background: var(--bg-surface);
}
.faq-item summary {
padding: var(--space-md) var(--space-lg);
font-weight: 600;
color: var(--ink-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '';
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.2s;
flex-shrink: 0;
}
.faq-item[open] summary::after {
transform: rotate(180deg);
}
.faq-item__answer {
padding: 0 var(--space-lg) var(--space-lg);
color: var(--ink-secondary);
line-height: 1.8;
font-size: var(--text-sm);
}
/* ─────────────────────────────────────────────
COMPARE TABLE
───────────────────────────────────────────── */
.compare-section {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-full-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 800px;
background: var(--bg-surface);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.compare-full-table th,
.compare-full-table td {
padding: 14px 16px;
text-align: center;
border-bottom: 1px solid var(--border-subtle);
}
.compare-full-table th {
background: var(--bg-muted);
font-weight: 700;
color: var(--ink-primary);
}
.compare-full-table th:first-child,
.compare-full-table td:first-child {
text-align: start;
font-weight: 600;
}
.compare-full-table .highlight-col {
background: oklch(0.55 0.15 200 / 0.05);
}
/* ─────────────────────────────────────────────
CHANGELOG TIMELINE
───────────────────────────────────────────── */
.changelog-timeline {
position: relative;
padding-inline-start: var(--space-xl);
}
.changelog-timeline::before {
content: '';
position: absolute;
inset-inline-start: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-default);
}
.changelog-entry {
position: relative;
padding-bottom: var(--space-xl);
}
.changelog-entry::before {
content: '';
position: absolute;
inset-inline-start: calc(-1 * var(--space-xl) + 4px);
top: 6px;
width: 12px;
height: 12px;
background: var(--color-accent);
border-radius: 50%;
border: 2px solid var(--bg-body);
}
.changelog-entry__date {
font-size: var(--text-xs);
color: var(--ink-muted);
font-weight: 600;
margin-bottom: var(--space-2xs);
}
.changelog-entry__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.changelog-entry__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* ─────────────────────────────────────────────
BLOG CARDS
───────────────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-lg);
}
.blog-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.08);
}
.blog-card__bar {
height: 4px;
background: var(--color-accent);
}
.blog-card__body {
padding: var(--space-lg);
}
.blog-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-sm);
line-height: 1.5;
}
.blog-card__excerpt {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.blog-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.blog-card__link:hover {
text-decoration: underline;
}
/* ─────────────────────────────────────────────
ABOUT PAGE
───────────────────────────────────────────── */
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
.about-value {
text-align: center;
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
}
.about-value__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
background: oklch(0.93 0.05 200);
border-radius: var(--radius-lg);
display: grid;
place-items: center;
color: var(--color-accent-dark);
}
.about-value__title {
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.about-value__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* ─────────────────────────────────────────────
PARTNER TIERS
───────────────────────────────────────────── */
.partner-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-lg);
}
.partner-tier {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
text-align: center;
}
.partner-tier__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-md);
background: oklch(0.93 0.04 45);
border-radius: var(--radius-full);
display: grid;
place-items: center;
color: oklch(0.50 0.15 45);
}
.partner-tier__name {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.partner-tier__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.partner-tier__benefits {
list-style: none;
padding: 0;
text-align: start;
}
.partner-tier__benefits li {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
color: var(--ink-secondary);
padding: 6px 0;
}
.partner-tier__benefits li::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
background: oklch(0.93 0.05 170);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23178a5b' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px;
background-position: center;
background-repeat: no-repeat;
}
/* ─────────────────────────────────────────────
NEWSLETTER CTA
───────────────────────────────────────────── */
.newsletter-cta {
background: var(--color-primary);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
text-align: center;
color: white;
}
.newsletter-cta__title {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.newsletter-cta__desc {
opacity: 0.85;
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.newsletter-cta__form {
display: flex;
gap: var(--space-sm);
max-width: 400px;
margin: 0 auto;
}
@media (max-width: 500px) {
.newsletter-cta__form {
flex-direction: column;
}
}
.newsletter-cta__input {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: var(--radius-md);
font-size: var(--text-sm);
direction: ltr;
}
.newsletter-cta__btn {
padding: 10px 20px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--text-sm);
cursor: pointer;
white-space: nowrap;
}
public/faq.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 لإدارة الأكاديميات الرياضية.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
.faq-section {
padding: var(--space-section) 0;
}
.faq-category {
margin-block-end: var(--space-2xl);
}
.faq-category:last-child {
margin-block-end: 0;
}
.faq-category__title {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-primary);
margin-block-end: var(--space-lg);
padding-block-end: var(--space-sm);
border-block-end: 2px solid var(--color-accent);
display: inline-block;
}
.faq-category__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.faq-item {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
border-color: var(--border-accent);
}
.faq-item[open] {
border-color: var(--color-accent);
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.08);
}
.faq-item summary {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
font-size: var(--text-lg);
font-weight: 600;
color: var(--ink-primary);
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::marker {
display: none;
content: '';
}
.faq-item summary:hover {
background: var(--color-primary-ghost);
}
.faq-item[open] summary {
background: var(--color-accent-ghost);
color: var(--color-accent-dark);
}
.faq-item__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--color-accent);
transition: transform 0.3s ease;
}
.faq-item[open] .faq-item__icon {
transform: rotate(45deg);
}
.faq-item__answer {
padding: 0 var(--space-lg) var(--space-lg);
padding-inline-start: calc(var(--space-lg) + 24px + var(--space-md));
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink-secondary);
}
.faq-cta {
text-align: center;
padding-block: var(--space-2xl);
margin-block-start: var(--space-2xl);
border-block-start: 1px solid var(--border-subtle);
}
.faq-cta__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-sm);
}
.faq-cta__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-block-start: var(--space-md);
padding: var(--space-sm) var(--space-lg);
background: var(--color-accent);
color: #fff;
border-radius: var(--radius-md);
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.faq-cta__link:hover {
background: var(--color-accent-dark);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.faq-item summary {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
gap: var(--space-sm);
}
.faq-item__answer {
padding: 0 var(--space-md) var(--space-md);
padding-inline-start: calc(var(--space-md) + 24px + var(--space-sm));
}
.faq-category__title {
font-size: var(--text-xl);
}
}
</style>
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo"><span class="nav__logo-mark">EC</span><span>El-Captain</span></a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="module-hero">
<div class="container">
<div class="module-hero__content">
<h1>الأسئلة الشائعة</h1>
<p>إجابات على أكثر الأسئلة التي يطرحها أصحاب الأكاديميات الرياضية عن نظام El-Captain</p>
</div>
</div>
</section>
<!-- FAQ Content -->
<section class="faq-section">
<div class="container">
<!-- Category: About the System -->
<div class="faq-category">
<h2 class="faq-category__title">عن النظام</h2>
<div class="faq-category__list">
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ما هو El-Captain؟
</summary>
<div class="faq-item__answer">
<p>نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية. يغطي إدارة المشتركين، الحضور، الفواتير، الجدولة، المخازن، ونقطة البيع.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ما الرياضات التي يدعمها النظام؟
</summary>
<div class="faq-item__answer">
<p>النظام مصمم لأي نشاط رياضي — سباحة، كرة قدم، جمباز، فنون قتالية، تنس، وغيرها. أي رياضة يمكن تهيئتها.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل النظام يعمل على الموبايل؟
</summary>
<div class="faq-item__answer">
<p>نعم، النظام سحابي ويعمل من أي متصفح بما في ذلك الهواتف والتابلت بدون تثبيت.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
كم عدد المشتركين الذي يدعمه النظام؟
</summary>
<div class="faq-item__answer">
<p>لا حد أقصى. النظام مصمم للتعامل مع آلاف المشتركين بسلاسة.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل يمكنني استخدام النظام لأكثر من فرع؟
</summary>
<div class="faq-item__answer">
<p>نعم، في الباقة الاحترافية يمكنك إدارة فروع متعددة من لوحة تحكم واحدة.</p>
</div>
</details>
</div>
</div>
<!-- Category: Pricing & Subscription -->
<div class="faq-category">
<h2 class="faq-category__title">التسعير والاشتراك</h2>
<div class="faq-category__list">
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل يوجد فترة تجريبية مجانية؟
</summary>
<div class="faq-item__answer">
<p>نعم، 10 أيام تجريبية مجانية لكل الباقات بدون بطاقة ائتمان.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ما هي نسبة المنصة؟
</summary>
<div class="faq-item__answer">
<p>نسبة بسيطة من التحصيلات التي تتم عبر النظام. تقل مع الباقات الأعلى (من 12% حتى 3.5%).</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل يمكنني تغيير الباقة؟
</summary>
<div class="faq-item__answer">
<p>نعم، الترقية فورية والتخفيض من الشهر القادم. بدون فقد بيانات.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ماذا يحدث عند الإلغاء؟
</summary>
<div class="faq-item__answer">
<p>بياناتك تبقى محفوظة 30 يوماً يمكنك خلالها تصدير كل شيء.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ما طرق الدفع المتاحة؟
</summary>
<div class="faq-item__answer">
<p>تحويل بنكي، فودافون كاش، أو بطاقة ائتمان.</p>
</div>
</details>
</div>
</div>
<!-- Category: Security & Privacy -->
<div class="faq-category">
<h2 class="faq-category__title">الأمان والخصوصية</h2>
<div class="faq-category__list">
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل بياناتي آمنة؟
</summary>
<div class="faq-item__answer">
<p>نعم، كل البيانات مشفرة بـ SSL ومخزنة على سيرفرات آمنة مع نسخ احتياطي يومي.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
من يمكنه الوصول لبياناتي؟
</summary>
<div class="faq-item__answer">
<p>فقط أنت وفريقك حسب الصلاحيات التي تحددها. لا أحد غيركم.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل يمكنني تصدير بياناتي؟
</summary>
<div class="faq-item__answer">
<p>نعم، يمكنك تصدير كل بياناتك في أي وقت بصيغة Excel أو CSV.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ماذا لو حدث عطل؟
</summary>
<div class="faq-item__answer">
<p>النسخ الاحتياطي اليومي يضمن استرجاع بياناتك. نلتزم بوقت تشغيل 99.5%.</p>
</div>
</details>
</div>
</div>
<!-- Category: Technical Support -->
<div class="faq-category">
<h2 class="faq-category__title">الدعم الفني</h2>
<div class="faq-category__list">
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
كيف أتواصل مع الدعم؟
</summary>
<div class="faq-item__answer">
<p>WhatsApp، بريد إلكتروني، أو من داخل النظام مباشرة. وقت الاستجابة أقل من ساعة.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل يوجد تدريب؟
</summary>
<div class="faq-item__answer">
<p>نعم، نقدم تدريب مجاني عند التفعيل + فيديوهات تعليمية لكل الميزات.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
هل تساعدون في إدخال البيانات الأولى؟
</summary>
<div class="faq-item__answer">
<p>نعم، نساعدك في نقل بياناتك من Excel أو أي نظام سابق مجاناً.</p>
</div>
</details>
<details class="faq-item">
<summary>
<svg class="faq-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
ما ساعات الدعم؟
</summary>
<div class="faq-item__answer">
<p>الدعم متاح من 9 صباحاً حتى 10 مساءً طوال أيام الأسبوع.</p>
</div>
</details>
</div>
</div>
<!-- CTA -->
<div class="faq-cta">
<h2 class="faq-cta__title">لم تجد إجابة؟</h2>
<a href="contact.html" class="faq-cta__link">تواصل معنا</a>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand"><div class="footer__brand-name">El-Captain</div><p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر.</p></div>
<div><h4 class="footer__col-title">النظام</h4><a href="features.html" class="footer__link">المزايا</a><a href="pricing.html" class="footer__link">الباقات</a><a href="contact.html" class="footer__link">تواصل</a></div>
<div><h4 class="footer__col-title">المزيد</h4><a href="about.html" class="footer__link">من نحن</a><a href="faq.html" class="footer__link">الأسئلة الشائعة</a><a href="blog.html" class="footer__link">المدونة</a><a href="compare.html" class="footer__link">المقارنة</a></div>
<div><h4 class="footer__col-title">تواصل</h4><a href="contact.html" class="footer__link">اطلب عرض</a><a href="https://wa.me/201000000000" class="footer__link" target="_blank">WhatsApp</a><a href="terms.html" class="footer__link">الشروط</a><a href="privacy.html" class="footer__link">الخصوصية</a></div>
</div>
<div class="footer__bottom"><span>El-Captain ERP</span><span>نظام إدارة الأكاديميات الرياضية</span></div>
</div>
</footer>
<a href="https://wa.me/201000000000" target="_blank" class="whatsapp-fab" aria-label="تواصل عبر WhatsApp"><svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg></a>
<script src="js/main.js"></script>
</body>
</html>
public/football.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 يحل مشكلة تنظيم الفئات العمرية وجداول الملاعب وتتبع حضور اللاعبين. نظام ذكي يدير أكاديمية كرة القدم بالكامل.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* ═══════════════════════════════════════════════════════════
Football Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Sport Hero — football pitch-inspired background */
.sport-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 40%, var(--bg-body) 100%);
}
.sport-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(46, 125, 50, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(46, 125, 50, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.sport-hero::after {
content: '';
position: absolute;
bottom: -50%;
inset-inline: -10%;
height: 100%;
background: radial-gradient(ellipse at 50% 100%, rgba(46, 125, 50, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.sport-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.sport-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.sport-hero__actions {
justify-content: center;
}
}
.sport-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(46, 125, 50, 0.08);
border: 1px solid rgba(46, 125, 50, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: #2E7D32;
margin-bottom: var(--space-md);
}
.sport-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
line-height: 1.25;
margin-bottom: var(--space-md);
}
.sport-hero__title-accent {
color: #2E7D32;
position: relative;
}
.sport-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
max-width: 560px;
margin-bottom: var(--space-xl);
}
.sport-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Football Specific */
.sport-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.sport-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.sport-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.sport-pain-card::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
width: 4px;
height: 100%;
background: var(--color-error);
border-radius: 0 4px 4px 0;
}
.sport-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-error-bg);
color: var(--color-error);
display: grid;
place-items: center;
margin-bottom: var(--space-md);
font-size: 1.5rem;
}
.sport-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.sport-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Feature Highlight Section */
.sport-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.sport-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.sport-feature,
.sport-feature--reverse {
grid-template-columns: 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: 0;
}
}
.sport-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.sport-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Comparison Before/After */
.sport-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
align-items: center;
}
@media (max-width: 768px) {
.sport-comparison {
grid-template-columns: 1fr;
}
.sport-comparison__arrow {
transform: rotate(90deg);
}
}
.sport-comparison__before,
.sport-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.sport-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.sport-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.sport-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
font-weight: 800;
}
.sport-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.sport-comparison__before .sport-comparison__title {
color: var(--color-error);
}
.sport-comparison__after .sport-comparison__title {
color: var(--color-success);
}
.sport-comparison__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.sport-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: var(--space-xs);
}
.sport-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
margin-top: 0.55em;
border-radius: 50%;
flex-shrink: 0;
}
.sport-comparison__before .sport-comparison__list li::before {
background: var(--color-error);
}
.sport-comparison__after .sport-comparison__list li::before {
background: var(--color-success);
}
/* Stats banner */
.sport-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--color-primary);
border-radius: var(--radius-xl);
color: var(--ink-on-dark);
}
.sport-stat {
text-align: center;
}
.sport-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
line-height: 1;
margin-bottom: var(--space-2xs);
}
.sport-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section — Football */
.sport-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #E8F5E9 100%);
position: relative;
}
.sport-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, #2E7D32 50%, transparent 90%);
opacity: 0.3;
}
.sport-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.sport-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
margin: 0 auto var(--space-xl);
line-height: 1.8;
}
.sport-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Grid feature highlight bullets */
.grid-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
}
.grid-feature-item:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.grid-feature-item__icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.grid-feature-item__icon svg {
width: 1rem;
height: 1rem;
}
.grid-feature-item__text {
flex: 1;
}
.grid-feature-item__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 2px;
}
.grid-feature-item__desc {
font-size: var(--text-xs);
color: var(--ink-secondary);
line-height: 1.6;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="sport-hero">
<div class="container">
<div class="sport-hero__inner">
<div data-reveal>
<span class="sport-hero__eyebrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>
مصمم خصيصاً لأكاديميات كرة القدم
</span>
<h1 class="sport-hero__title">أكاديميتك تحتاج نظام <span class="sport-hero__title-accent">يفهم تقسيم الفئات العمرية</span></h1>
<p class="sport-hero__desc">إدارة الفئات العمرية المختلفة (ناشئين / شباب / أولى)، جدولة التدريبات على ملاعب متعددة، تتبع تطور اللاعبين وحضورهم — كل ذلك من نظام واحد متكامل.</p>
<div class="sport-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لكرة القدم</a>
<a href="#group-management" class="btn btn--secondary btn--large">شوف النظام</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/groups.png" alt="نظام إدارة المجموعات والفئات العمرية" loading="eager">
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points — Football Specific -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-error-bg); color: var(--color-error); border-color: rgba(185,28,28,0.2);">المشاكل اليومية</span>
<h2 class="section-header__title">كل يوم نفس الفوضى</h2>
<p class="section-header__desc">أكاديميات كرة القدم تعاني من مشاكل فريدة في تنظيم الفئات والملاعب. هل تعرف هذه المشاكل؟</p>
</div>
<div class="sport-pain__grid" data-reveal="100">
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="sport-pain-card__title">فوضى الفئات العمرية</h3>
<p class="sport-pain-card__text">تحت 10، تحت 12، شباب، أولى — كل فئة بجدول مختلف ومدرب مختلف. تنظيمها على الورق كابوس يومي يزداد تعقيداً مع كل موسم جديد.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/></svg>
</div>
<h3 class="sport-pain-card__title">تضارب جداول الملاعب</h3>
<p class="sport-pain-card__text">ملعبين أو ثلاثة يتنافس عليهم 8 مجموعات. مجموعة تصل فتجد الملعب مشغول. جدول يتغير أسبوعياً بدون إبلاغ المدربين أو الأهالي.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
</div>
<h3 class="sport-pain-card__title">حضور بدون متابعة</h3>
<p class="sport-pain-card__text">كشوف ورقية تضيع. مدرب ينسى يسجل الحضور. ولي الأمر يسأل "ابني حضر التمرين؟" ولا أحد يستطيع الإجابة بدقة.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<h3 class="sport-pain-card__title">فوضى مالية</h3>
<p class="sport-pain-card__text">رسوم مختلفة لكل فريق، رعايات، تكاليف بطولات — كلها مختلطة. لا تعرف ربحية كل فئة ولا المتأخرين عن الدفع ولا المصروفات الحقيقية.</p>
</div>
</div>
</div>
</section>
<!-- Before / After Comparison -->
<section class="section">
<div class="container">
<div class="sport-comparison" data-reveal>
<div class="sport-comparison__before">
<h3 class="sport-comparison__title">قبل El-Captain</h3>
<ul class="sport-comparison__list">
<li>كشوف ورقية لكل فريق تضيع كل أسبوع</li>
<li>جروبات WhatsApp لكل فئة للتواصل والجداول</li>
<li>أوراق تسجيل ضائعة أو غير مكتملة</li>
<li>لا تتبع حقيقي للحضور والغياب</li>
<li>أولياء الأمور يتصلون يومياً للسؤال عن المواعيد</li>
</ul>
</div>
<div class="sport-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="sport-comparison__after">
<h3 class="sport-comparison__title">بعد El-Captain</h3>
<ul class="sport-comparison__list">
<li>مجموعات رقمية مقسمة بالفئة العمرية</li>
<li>جداول تلقائية لكل ملعب ومجموعة</li>
<li>حضور رقمي مع إشعارات فورية لولي الأمر</li>
<li>تقارير مالية واضحة لكل فريق على حدة</li>
<li>ولي الأمر يرى الجدول والحضور من تطبيقه</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Feature 1: Group Management by Age -->
<section class="section" id="group-management" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>مجموعات مُقسّمة بالفئة العمرية</h2>
<p>نظّم لاعبيك في مجموعات حسب الفئة العمرية — تحت 8، تحت 10، تحت 12، شباب، درجة أولى — كل مجموعة بمدربها وجدولها وسعتها القصوى. ترقية اللاعبين بين المجموعات بضغطة زر.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تصنيف بالفئة العمرية</div>
<div class="grid-feature-item__desc">كل مجموعة محددة بفئة عمرية واضحة. النظام يقترح المجموعة المناسبة عند تسجيل لاعب جديد.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">سعة قصوى لكل مجموعة</div>
<div class="grid-feature-item__desc">حدد العدد الأقصى لكل مجموعة. النظام يمنع التسجيل الزائد ويفتح قائمة انتظار تلقائياً.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 8l-4 4-2-2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تعيين المدربين</div>
<div class="grid-feature-item__desc">كل مجموعة بمدربها المسؤول. النظام يتتبع ساعات كل مدرب وحصصه التدريبية.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">ترقية بين المجموعات</div>
<div class="grid-feature-item__desc">عند نهاية الموسم أو تقدم اللاعب — انقله للمجموعة الأعلى مع الاحتفاظ بكامل سجله.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/groups.png" alt="إدارة المجموعات حسب الفئة العمرية" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 2: Attendance Tracking (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>حضور رقمي لكل تدريب</h2>
<p>انتهى زمن الكشوف الورقية. المدرب يسجل الحضور من هاتفه في ثوانٍ. ولي الأمر يصله إشعار فوري عند وصول ابنه التدريب أو غيابه.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تسجيل حضور لكل حصة</div>
<div class="grid-feature-item__desc">قائمة اللاعبين جاهزة تلقائياً لكل تدريب. المدرب يضغط حاضر أو غائب فقط.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تتبع التأخير</div>
<div class="grid-feature-item__desc">النظام يحسب دقائق التأخير تلقائياً. فترة سماح قابلة للتعديل حسب سياسة الأكاديمية.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تنبيهات غياب تلقائية</div>
<div class="grid-feature-item__desc">بعد عدد محدد من الغيابات المتتالية — إشعار فوري للإدارة وولي الأمر.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تقارير حضور لكل لاعب</div>
<div class="grid-feature-item__desc">نسبة حضور كل لاعب شهرياً وموسمياً. تقارير جاهزة للطباعة أو التصدير.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/attendance.png" alt="تسجيل الحضور الرقمي للاعبين" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 3: Weekly Schedule -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>جدول أسبوعي لكل الملاعب والمجموعات</h2>
<p>شاهد كل الملاعب وكل المجموعات وكل المدربين في عرض أسبوعي واحد. كل مجموعة بلون مختلف. اضغط على أي خانة لمعرفة التفاصيل أو التعديل.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">ترميز بالألوان</div>
<div class="grid-feature-item__desc">كل مجموعة وفريق بلون مميز. تعرف من نظرة واحدة أي فئة تتدرب الآن.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">فلترة بالملعب أو المدرب</div>
<div class="grid-feature-item__desc">اعرض جدول ملعب واحد فقط أو تدريبات مدرب بعينه. تصفية فورية بدون إعادة تحميل.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">سحب وإفلات لإعادة الجدولة</div>
<div class="grid-feature-item__desc">انقل حصة تدريبية لوقت آخر بالسحب والإفلات. النظام يتحقق من التعارضات فوراً.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">توليد تلقائي للجلسات المتكررة</div>
<div class="grid-feature-item__desc">حدد الجدول مرة واحدة — النظام يولّد الجلسات أسبوعياً تلقائياً طوال الموسم.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي للملاعب والمجموعات" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 4: Player Management (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>ملف متكامل لكل لاعب</h2>
<p>كل لاعب في أكاديميتك له ملف شامل يحتوي على كل بياناته في مكان واحد — من معلوماته الشخصية وبيانات ولي الأمر، مروراً بسجل تسجيله ومجموعاته، وصولاً لنسب حضوره ووضعه المالي.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">بيانات شخصية + بيانات ولي الأمر</div>
<div class="grid-feature-item__desc">اسم اللاعب، تاريخ ميلاده، رقم ولي الأمر، عنوانه — كل شيء في مكان واحد.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">سجل التسجيل والمجموعات</div>
<div class="grid-feature-item__desc">تاريخ كل مجموعة انضم إليها، ترقياته، انتقالاته بين الفئات — سجل كامل.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">نسبة الحضور</div>
<div class="grid-feature-item__desc">نسبة حضور اللاعب الشهرية والإجمالية. تنبيه عند انخفاض الحضور عن الحد الأدنى.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">الوضع المالي</div>
<div class="grid-feature-item__desc">فواتيره، مدفوعاته، المتأخرات — كل شيء واضح. ولي الأمر يعرف وضعه المالي بدقة.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/participants-list.png" alt="قائمة اللاعبين وملفاتهم الشاملة" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-stats" data-reveal>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+14</div>
<div class="sport-stat__label">وحدة متكاملة</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+250</div>
<div class="sport-stat__label">شاشة إدارية</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">100%</div>
<div class="sport-stat__label">عربي بالكامل</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">0</div>
<div class="sport-stat__label">تضاربات في الجدول</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="sport-cta">
<div class="container" data-reveal>
<h2 class="sport-cta__title">جاهز تنظّم أكاديميتك؟</h2>
<p class="sport-cta__desc">احجز عرض خاص لأكاديميات كرة القدم. نريك النظام على فئات ومجموعات مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="sport-cta__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لأكاديميات كرة القدم</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--secondary btn--large" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-inline-end: 6px;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/gymnastics.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 يحل مشكلة جدولة الأجهزة وتتبع مستويات اللاعبين وتواصل أولياء الأمور في أكاديميات الجمباز.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* ═══════════════════════════════════════════════════════════
Gymnastics Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Sport Hero — gymnastics-inspired background */
.sport-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #F3E5F5 0%, #F8F0FA 40%, var(--bg-body) 100%);
}
.sport-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.sport-hero::after {
content: '';
position: absolute;
bottom: -50%;
inset-inline: -10%;
height: 100%;
background: radial-gradient(ellipse at 50% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.sport-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.sport-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.sport-hero__actions {
justify-content: center;
}
}
.sport-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: #6B21A8;
margin-bottom: var(--space-md);
}
.sport-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
line-height: 1.25;
margin-bottom: var(--space-md);
}
.sport-hero__title-accent {
color: var(--color-accent);
position: relative;
}
.sport-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
max-width: 560px;
margin-bottom: var(--space-xl);
}
.sport-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Gymnastics Specific */
.sport-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.sport-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.sport-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.sport-pain-card::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
width: 4px;
height: 100%;
background: var(--color-error);
border-radius: 0 4px 4px 0;
}
.sport-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-error-bg);
color: var(--color-error);
display: grid;
place-items: center;
margin-bottom: var(--space-md);
font-size: 1.5rem;
}
.sport-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.sport-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Comparison Before/After */
.sport-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
align-items: center;
}
@media (max-width: 768px) {
.sport-comparison {
grid-template-columns: 1fr;
}
.sport-comparison__arrow {
transform: rotate(90deg);
}
}
.sport-comparison__before,
.sport-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.sport-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.sport-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.sport-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
font-weight: 800;
}
.sport-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.sport-comparison__before .sport-comparison__title {
color: var(--color-error);
}
.sport-comparison__after .sport-comparison__title {
color: var(--color-success);
}
.sport-comparison__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.sport-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: var(--space-xs);
}
.sport-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
margin-top: 0.55em;
border-radius: 50%;
flex-shrink: 0;
}
.sport-comparison__before .sport-comparison__list li::before {
background: var(--color-error);
}
.sport-comparison__after .sport-comparison__list li::before {
background: var(--color-success);
}
/* Feature Highlight Section */
.sport-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.sport-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.sport-feature,
.sport-feature--reverse {
grid-template-columns: 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: 0;
}
}
.sport-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.sport-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Grid feature highlight bullets */
.grid-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
}
.grid-feature-item:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.grid-feature-item__icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.grid-feature-item__icon svg {
width: 1rem;
height: 1rem;
}
.grid-feature-item__text {
flex: 1;
}
.grid-feature-item__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 2px;
}
.grid-feature-item__desc {
font-size: var(--text-xs);
color: var(--ink-secondary);
line-height: 1.6;
}
/* Stats banner */
.sport-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--color-primary);
border-radius: var(--radius-xl);
color: var(--ink-on-dark);
}
.sport-stat {
text-align: center;
}
.sport-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
line-height: 1;
margin-bottom: var(--space-2xs);
}
.sport-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section — Gymnastics */
.sport-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #F3E5F5 100%);
position: relative;
}
.sport-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, var(--color-accent) 50%, transparent 90%);
opacity: 0.3;
}
.sport-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.sport-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
margin: 0 auto var(--space-xl);
line-height: 1.8;
}
.sport-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="sport-hero">
<div class="container">
<div class="sport-hero__inner">
<div data-reveal>
<span class="sport-hero__eyebrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="3"/><path d="M12 8v8"/><path d="M8 20l4-4 4 4"/><path d="M6 12h12"/></svg>
مصمم خصيصاً لأكاديميات الجمباز
</span>
<h1 class="sport-hero__title">أكاديميتك تحتاج نظام <span class="sport-hero__title-accent">يفهم الأجهزة والمستويات</span></h1>
<p class="sport-hero__desc">إدارة أكاديمية الجمباز أصبحت أسهل — جدولة الأجهزة، متطلبات السلامة حسب العمر، مستويات تقدم اللاعبين، وتواصل أولياء الأمور — كل ذلك من نظام واحد متكامل.</p>
<div class="sport-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص للجمباز</a>
<a href="#features" class="btn btn--secondary btn--large">شوف النظام</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي لأكاديمية الجمباز" loading="eager">
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points — Gymnastics Specific -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-error-bg); color: var(--color-error); border-color: rgba(185,28,28,0.2);">المشاكل اليومية</span>
<h2 class="section-header__title">كل يوم نفس الكابوس</h2>
<p class="section-header__desc">أكاديميات الجمباز تعاني من مشاكل فريدة لا تحلها الأنظمة العادية. هل تعرف هذه المشاكل؟</p>
</div>
<div class="sport-pain__grid" data-reveal="100">
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/></svg>
</div>
<h3 class="sport-pain-card__title">جدولة الأجهزة المتعددة</h3>
<p class="sport-pain-card__text">جدولة أجهزة الأرضي والقفز والعارضة والمتوازي عبر فئات عمرية ومستويات مهارة مختلفة بدون تعارضات — كابوس يومي بدون نظام ذكي.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M12 8v4"/><circle cx="12" cy="16" r="1"/></svg>
</div>
<h3 class="sport-pain-card__title">متطلبات السلامة حسب العمر</h3>
<p class="sport-pain-card__text">الحد الأقصى لحجم المجموعة يختلف بالعمر، وبعض الأجهزة غير مناسبة للأطفال الصغار. بدون ضوابط تلقائية — السلامة مسؤولية يدوية.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20h20"/><path d="M5 20V8l4-4 4 4v12"/><path d="M13 20V12l4-4 4 4v8"/><path d="M9 12h2"/><path d="M9 16h2"/></svg>
</div>
<h3 class="sport-pain-card__title">تتبع مستويات المهارة</h3>
<p class="sport-pain-card__text">تتبع تقدم كل لاعب عبر أجهزة متعددة — من مبتدئ إلى متقدم إلى تنافسي — لكل جهاز على حدة. الدفاتر الورقية لا تكفي.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<h3 class="sport-pain-card__title">تواصل أولياء الأمور</h3>
<p class="sport-pain-card__text">الأهالي يريدون معرفة تقدم أبنائهم، نسبة الحضور، ومتى يكونون جاهزين للمستوى التالي. بدون نظام — كل هذا يضيع في المحادثات اليومية.</p>
</div>
</div>
</div>
</section>
<!-- Before / After Comparison -->
<section class="section">
<div class="container">
<div class="sport-comparison" data-reveal>
<div class="sport-comparison__before">
<h3 class="sport-comparison__title">قبل El-Captain</h3>
<ul class="sport-comparison__list">
<li>جداول ورقية معقدة لكل جهاز على حدة</li>
<li>لا طريقة فعّالة للحد من أحجام المجموعات</li>
<li>أولياء الأمور يحصلون على أخبار أبنائهم فقط وقت الاستلام</li>
<li>تقييمات المهارات تضيع في دفاتر ملاحظات</li>
<li>لا رؤية واضحة لأنماط الحضور والانتظام</li>
</ul>
</div>
<div class="sport-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="sport-comparison__after">
<h3 class="sport-comparison__title">بعد El-Captain</h3>
<ul class="sport-comparison__list">
<li>جدولة رقمية للأجهزة مع حدود سعة تلقائية</li>
<li>فحص تلقائي للعمر والمستوى عند التسجيل</li>
<li>إشعارات لأولياء الأمور بعد كل جلسة تدريبية</li>
<li>تتبع رقمي لمستويات المهارة عبر كل الأجهزة</li>
<li>تحليلات حضور مفصّلة لكل لاعب</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Feature 1: Weekly Schedule per Apparatus -->
<section class="section" id="features" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>جدول أسبوعي لكل جهاز ومستوى</h2>
<p>شاهد جميع الأجهزة — الأرضي، القفز، عارضة التوازن، المتوازي، الترامبولين — مع كل المجموعات وكل الفترات الزمنية في عرض واحد. حدود السعة مُطبّقة تلقائياً لكل جهاز.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">جدولة حسب الجهاز</div>
<div class="grid-feature-item__desc">كل جهاز له جدوله الخاص مع الفترات الزمنية والمجموعات المخصصة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">حدود السعة لكل فترة</div>
<div class="grid-feature-item__desc">النظام يمنع تجاوز الحد الأقصى للاعبين على كل جهاز في كل وقت.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">ترميز بالألوان حسب المستوى</div>
<div class="grid-feature-item__desc">مبتدئ، متوسط، متقدم، تنافسي — كل مستوى بلون مميز في الجدول.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">منع التعارضات</div>
<div class="grid-feature-item__desc">لا يمكن حجز نفس الجهاز لمجموعتين في نفس الوقت. النظام يمنع ذلك تلقائياً.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي لأجهزة الجمباز" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 2: Group Management by Age & Level (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>مجموعات مُقسّمة بالعمر والمستوى</h2>
<p>تنظيم اللاعبين في مجموعات حسب العمر ومستوى المهارة — مبتدئ، متوسط، متقدم، تنافسي — مع نسب مدرب-إلى-لاعب مناسبة لكل فئة عمرية وكل مستوى.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تصنيف حسب العمر</div>
<div class="grid-feature-item__desc">فئات عمرية محددة مع ضوابط سلامة مختلفة لكل فئة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20h20"/><path d="M5 20V8l4-4 4 4v12"/><path d="M13 20V12l4-4 4 4v8"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تجميع حسب المستوى</div>
<div class="grid-feature-item__desc">مبتدئ، متوسط، متقدم، تنافسي — كل مستوى في مجموعته المناسبة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">نسب المدربين للاعبين</div>
<div class="grid-feature-item__desc">تعيين مدربين بنسب مناسبة — عدد أقل من اللاعبين للمبتدئين الصغار.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">ترقية بين المستويات</div>
<div class="grid-feature-item__desc">نقل اللاعبين للمستوى التالي بضغطة واحدة مع تحديث الجدول تلقائياً.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/groups.png" alt="إدارة مجموعات الجمباز حسب العمر والمستوى" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 3: Attendance with Check-in/out -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>حضور رقمي مع تسجيل الدخول والخروج</h2>
<p>تتبع دقيق للحضور مع أوقات تسجيل الدخول والخروج — أمر بالغ الأهمية لسلامة الأطفال في الجمباز. أولياء الأمور يتلقون إشعاراً عند وصول الطفل ومغادرته.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تسجيل دخول وخروج رقمي</div>
<div class="grid-feature-item__desc">تسجيل لحظي بالوقت الدقيق عند وصول ومغادرة كل لاعب.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">إشعار ولي الأمر عند الوصول</div>
<div class="grid-feature-item__desc">رسالة فورية لولي الأمر لحظة تسجيل دخول الطفل للأكاديمية.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تنبيهات الغياب</div>
<div class="grid-feature-item__desc">تنبيه تلقائي عند الغياب المتكرر مع إشعار لولي الأمر والإدارة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تقارير الحضور</div>
<div class="grid-feature-item__desc">تقارير مفصّلة بنسبة الحضور لكل لاعب ولكل مجموعة شهرياً.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/attendance.png" alt="نظام تسجيل الحضور الرقمي" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 4: Guardian Communication (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>تواصل مباشر مع أولياء الأمور</h2>
<p>إبقاء أولياء الأمور على اطلاع دائم برسائل تلقائية حول الحضور، التقدم في المستويات، تغييرات الجدول، والفعاليات القادمة — بدون جهد إضافي من المدربين.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">إشعارات حضور تلقائية</div>
<div class="grid-feature-item__desc">رسالة تلقائية لولي الأمر عند تسجيل الحضور أو الغياب.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">رسائل جماعية لتغيير الجدول</div>
<div class="grid-feature-item__desc">إرسال رسالة واحدة لكل أولياء أمور مجموعة عند أي تغيير في الموعد.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20h20"/><path d="M5 20V8l4-4 4 4v12"/><path d="M13 20V12l4-4 4 4v8"/><path d="M9 12h2"/><path d="M9 16h2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تحديثات التقدم الفردية</div>
<div class="grid-feature-item__desc">تقرير دوري لكل ولي أمر عن تقدم ابنه في كل جهاز ومستوى.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تذكيرات الفعاليات</div>
<div class="grid-feature-item__desc">تذكير تلقائي قبل البطولات والعروض والاختبارات بوقت كافٍ.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/bulk-messages.png" alt="نظام التواصل مع أولياء الأمور" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-stats" data-reveal>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+14</div>
<div class="sport-stat__label">وحدة متكاملة</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+250</div>
<div class="sport-stat__label">شاشة إدارية</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">100%</div>
<div class="sport-stat__label">عربي بالكامل</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">0</div>
<div class="sport-stat__label">رسائل ضائعة لأولياء الأمور</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="sport-cta">
<div class="container" data-reveal>
<h2 class="sport-cta__title">جاهز تنظّم أكاديميتك؟</h2>
<p class="sport-cta__desc">احجز عرض خاص لأكاديميات الجمباز. نريك النظام على أجهزة ومستويات مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="sport-cta__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لأكاديميات الجمباز</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--secondary btn--large" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-inline-end: 6px;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/index.html
View file @ 067dce8d
......@@ -5,12 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain - نظام إدارة الأكاديميات الرياضية</title>
<meta name="description" content="El-Captain نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية. عربي بالكامل، مصمم للسوق المصري.">
<meta property="og:title" content="El-Captain - نظام إدارة الأكاديميات الرياضية">
<meta property="og:description" content="نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<body data-sticky-cta data-exit-intent>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
......@@ -79,6 +85,30 @@
</div>
</section>
<!-- Social Proof Stats -->
<section class="social-proof" data-reveal>
<div class="container">
<div class="social-proof__grid">
<div class="social-proof__stat">
<span class="social-proof__number" data-count="32" data-count-suffix="+">0+</span>
<span class="social-proof__label">أكاديمية تستخدم النظام</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="15000" data-count-suffix="+">0+</span>
<span class="social-proof__label">مشترك يُدار عبر المنصة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="50000" data-count-suffix="+">0+</span>
<span class="social-proof__label">حصة تدريبية مسجلة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="2" data-count-suffix="M+ ج.م">0M+ ج.م</span>
<span class="social-proof__label">تم تحصيلها عبر النظام</span>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section section--muted">
<div class="container">
......@@ -465,6 +495,59 @@
</div>
</section>
<!-- Testimonials -->
<section class="section testimonials">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">ماذا يقول عملاؤنا</h2>
</div>
<div class="testimonials__grid" data-reveal="200">
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"النظام وفّر علينا ساعتين يومياً في المتابعة. قبل كده كنا بنضيع وقت كبير في Excel والورق."</p>
<div class="testimonial-card__author">
<strong>أحمد محمود</strong>
<span>مدير أكاديمية النجوم الرياضية</span>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"أخيراً نظام بيفهم شغل الأكاديميات. التقارير المالية والحضور اللحظي غيّروا طريقة إدارتنا تماماً."</p>
<div class="testimonial-card__author">
<strong>محمد السيد</strong>
<span>مؤسس أكاديمية الأبطال للسباحة</span>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"الفترة التجريبية كانت كافية إننا نتأكد إن النظام يناسبنا. الدعم الفني ممتاز وبيرد بسرعة."</p>
<div class="testimonial-card__author">
<strong>سارة حسن</strong>
<span>مديرة أكاديمية الأمل للجمباز</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
......
public/js/main.js
View file @ 067dce8d
......@@ -12,13 +12,21 @@ document.addEventListener('DOMContentLoaded', () => {
initFormValidation();
initWhatsAppFAB();
initCardHover();
initStickyCTA();
initExitIntent();
initBackToTop();
initPricingCalc();
initMicroInteractions();
initPageTransitions();
initSocialProof();
injectRevealStyles();
injectDynamicStyles();
});
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
1. NAV SHADOW ON SCROLL
Add .nav--scrolled when page scrolls past 50px
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initNav() {
const nav = document.querySelector('.nav');
if (!nav) return;
......@@ -41,23 +49,34 @@ function initNav() {
if (window.scrollY > 50) nav.classList.add('nav--scrolled');
}
/* ─────────────────────────────────────────────
2. MOBILE NAV TOGGLE
Hamburger opens/closes #navLinks
───────────────────────────────────────────── */
/* ═══════════════════════════════════════════════
2. MOBILE NAV TOGGLE (Enhanced with Drawer Animation)
Hamburger opens/closes #navLinks with slide-in drawer + backdrop
═══════════════════════════════════════════════ */
function initMobileMenu() {
const toggle = document.querySelector('.nav__toggle');
const links = document.getElementById('navLinks') || document.querySelector('.nav__links');
if (!toggle || !links) return;
// Create backdrop overlay
let backdrop = document.querySelector('.nav-backdrop');
if (!backdrop) {
backdrop = document.createElement('div');
backdrop.className = 'nav-backdrop';
backdrop.setAttribute('aria-hidden', 'true');
document.body.appendChild(backdrop);
}
const open = () => {
links.classList.add('nav__links--open');
backdrop.classList.add('nav-backdrop--visible');
toggle.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden';
};
const close = () => {
links.classList.remove('nav__links--open');
backdrop.classList.remove('nav-backdrop--visible');
toggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
};
......@@ -69,6 +88,9 @@ function initMobileMenu() {
isOpen() ? close() : open();
});
// Close on backdrop click
backdrop.addEventListener('click', close);
// Close when clicking a nav link
links.addEventListener('click', (e) => {
const target = e.target.closest('a');
......@@ -82,17 +104,17 @@ function initMobileMenu() {
// Close when clicking outside the nav
document.addEventListener('click', (e) => {
if (isOpen() && !links.contains(e.target) && !toggle.contains(e.target)) {
if (isOpen() && !links.contains(e.target) && !toggle.contains(e.target) && !backdrop.contains(e.target)) {
close();
}
});
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
3. SCROLL REVEAL ANIMATIONS
[data-reveal] elements fade in on scroll
data-reveal value = delay in ms
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initReveal() {
const elements = document.querySelectorAll('[data-reveal]');
if (!elements.length) return;
......@@ -150,11 +172,11 @@ function injectRevealStyles() {
document.head.appendChild(style);
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
4. COUNTER ANIMATION
[data-count] elements count from 0 to target
[data-count-suffix] appends suffix (e.g. "+", "%")
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initCounters() {
const counters = document.querySelectorAll('[data-count]');
if (!counters.length) return;
......@@ -256,10 +278,10 @@ function animateStatValue(el) {
requestAnimationFrame(update);
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
5. SMOOTH SCROLL FOR ANCHOR LINKS
Accounts for sticky nav height offset
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initSmoothScroll() {
document.addEventListener('click', (e) => {
const link = e.target.closest('a[href^="#"]');
......@@ -281,11 +303,11 @@ function initSmoothScroll() {
});
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
6. FORM VALIDATION (Contact page)
Required fields + phone validation
All error messages in Arabic
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initFormValidation() {
const forms = document.querySelectorAll('.contact-form, form[data-validate]');
if (!forms.length) return;
......@@ -391,10 +413,10 @@ function clearFieldError(field) {
if (errorEl) errorEl.remove();
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
7. WHATSAPP FAB ENTRANCE ANIMATION
Scale up from 0 after 3 seconds
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initWhatsAppFAB() {
const fab = document.querySelector('.whatsapp-fab, [data-fab="whatsapp"]');
if (!fab) return;
......@@ -410,10 +432,10 @@ function initWhatsAppFAB() {
}, 3000);
}
/* ─────────────────────────────────────────────
/* ═══════════════════════════════════════════════
8. CARD HOVER GLOW EFFECT
Tracks mouse position for radial gradient
───────────────────────────────────────────── */
═══════════════════════════════════════════════ */
function initCardHover() {
const cards = document.querySelectorAll('.module-card, .feature-card, .pain-point');
......@@ -428,3 +450,803 @@ function initCardHover() {
card.addEventListener('mousemove', update);
});
}
/* ═══════════════════════════════════════════════
9. STICKY CTA BAR
Shows fixed bottom bar after 600px scroll on homepage.
Only on pages with [data-sticky-cta] on body.
Remembers dismissal via sessionStorage.
═══════════════════════════════════════════════ */
function initStickyCTA() {
if (!document.body.hasAttribute('data-sticky-cta')) return;
if (sessionStorage.getItem('sticky-cta-closed') === '1') return;
// Create the CTA bar
const bar = document.createElement('div');
bar.className = 'sticky-cta';
bar.setAttribute('role', 'complementary');
bar.setAttribute('aria-label', 'عرض تجريبي');
bar.innerHTML = `
<div class="sticky-cta__inner">
<a href="#pricing" class="sticky-cta__btn btn">ابدأ تجربتك المجانية</a>
<button class="sticky-cta__close" aria-label="إغلاق" type="button">&times;</button>
</div>
`;
document.body.appendChild(bar);
// Close button
bar.querySelector('.sticky-cta__close').addEventListener('click', () => {
bar.classList.remove('sticky-cta--visible');
sessionStorage.setItem('sticky-cta-closed', '1');
setTimeout(() => bar.remove(), 400);
});
// Show/hide on scroll
let ticking = false;
const updateVisibility = () => {
bar.classList.toggle('sticky-cta--visible', window.scrollY > 600);
ticking = false;
};
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateVisibility);
ticking = true;
}
}, { passive: true });
// Check on load
if (window.scrollY > 600) bar.classList.add('sticky-cta--visible');
}
/* ═══════════════════════════════════════════════
10. EXIT-INTENT POPUP
Desktop only — triggers when mouse leaves viewport top.
Shows modal with WhatsApp booking form.
Only once per session. Only on pages with [data-exit-intent].
═══════════════════════════════════════════════ */
function initExitIntent() {
if (!document.body.hasAttribute('data-exit-intent')) return;
if (sessionStorage.getItem('exit-intent-shown') === '1') return;
// Skip on touch devices
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouch) return;
const whatsappNumber = document.body.dataset.exitIntent || '201000000000';
const showPopup = (e) => {
// Only trigger when mouse leaves from the top
if (e.clientY > 10) return;
sessionStorage.setItem('exit-intent-shown', '1');
document.removeEventListener('mouseleave', showPopup);
// Create modal
const modal = document.createElement('div');
modal.className = 'exit-modal';
modal.setAttribute('role', 'dialog');
modal.setAttribute('aria-modal', 'true');
modal.setAttribute('aria-labelledby', 'exit-modal-title');
modal.innerHTML = `
<div class="exit-modal__backdrop"></div>
<div class="exit-modal__content">
<button class="exit-modal__close" aria-label="إغلاق" type="button">&times;</button>
<h2 id="exit-modal-title" class="exit-modal__title">قبل ما تمشي...</h2>
<p class="exit-modal__subtitle">احجز عرض تجريبي مجاني في 30 ثانية</p>
<form class="exit-modal__form" id="exitIntentForm">
<div class="exit-modal__field">
<input
type="tel"
class="exit-modal__input"
placeholder="رقم الموبايل (01xxxxxxxxx)"
dir="ltr"
required
pattern="01[0-9]{9}"
maxlength="11"
/>
</div>
<button type="submit" class="exit-modal__submit btn">احجز العرض التجريبي</button>
</form>
</div>
`;
document.body.appendChild(modal);
// Animate in
requestAnimationFrame(() => {
modal.classList.add('exit-modal--visible');
});
// Close handlers
const closeModal = () => {
modal.classList.remove('exit-modal--visible');
setTimeout(() => modal.remove(), 300);
};
modal.querySelector('.exit-modal__close').addEventListener('click', closeModal);
modal.querySelector('.exit-modal__backdrop').addEventListener('click', closeModal);
document.addEventListener('keydown', function handler(ev) {
if (ev.key === 'Escape') {
closeModal();
document.removeEventListener('keydown', handler);
}
});
// Form submit — open WhatsApp with pre-filled message
modal.querySelector('#exitIntentForm').addEventListener('submit', (ev) => {
ev.preventDefault();
const phone = modal.querySelector('input[type="tel"]').value.trim();
if (!phone || phone.length !== 11 || !phone.startsWith('01')) return;
const message = encodeURIComponent(`مرحبا، أنا مهتم بعرض تجريبي مجاني. رقمي: ${phone}`);
window.open(`https://wa.me/${whatsappNumber}?text=${message}`, '_blank');
closeModal();
});
};
// Delay activation by 5 seconds to avoid false triggers
setTimeout(() => {
document.addEventListener('mouseleave', showPopup);
}, 5000);
}
/* ═══════════════════════════════════════════════
11. BACK TO TOP BUTTON
Appears after 500px scroll. Smooth scroll to top.
Positioned bottom-left (visually bottom-right in RTL).
═══════════════════════════════════════════════ */
function initBackToTop() {
const btn = document.createElement('button');
btn.className = 'back-to-top';
btn.setAttribute('aria-label', 'العودة للأعلى');
btn.setAttribute('type', 'button');
btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 13 10 8 5 13"/></svg>`;
document.body.appendChild(btn);
let ticking = false;
const updateVisibility = () => {
btn.classList.toggle('back-to-top--visible', window.scrollY > 500);
ticking = false;
};
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateVisibility);
ticking = true;
}
}, { passive: true });
// Check on load
if (window.scrollY > 500) btn.classList.add('back-to-top--visible');
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
/* ═══════════════════════════════════════════════
12. PRICING CALCULATOR
Range slider for monthly collections (10,000–500,000 EGP).
Shows calculated cost per plan. Highlights cheapest.
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: 'starter', name: 'المبتدئ', monthlyFee: 500, platformPercent: 3.0 },
{ id: 'growth', name: 'النمو', monthlyFee: 1200, platformPercent: 2.0 },
{ id: 'professional', name: 'الاحترافي', monthlyFee: 2500, platformPercent: 1.0 },
{ id: 'enterprise', name: 'المؤسسات', monthlyFee: 5000, platformPercent: 0.5 },
];
// 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 */ }
}
const minCollections = 10000;
const maxCollections = 500000;
const step = 5000;
container.innerHTML = `
<div class="pricing-calc">
<label class="pricing-calc__label" for="collectionsSlider">
حجم التحصيلات الشهرية: <strong class="pricing-calc__value" id="calcValue">${formatEGP(minCollections)}</strong>
</label>
<input
type="range"
id="collectionsSlider"
class="pricing-calc__slider"
min="${minCollections}"
max="${maxCollections}"
step="${step}"
value="${minCollections}"
dir="ltr"
/>
<div class="pricing-calc__range-labels">
<span>${formatEGP(minCollections)}</span>
<span>${formatEGP(maxCollections)}</span>
</div>
<div class="pricing-calc__results" id="calcResults"></div>
</div>
`;
const slider = container.querySelector('#collectionsSlider');
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,
totalCost: plan.monthlyFee + (collections * plan.platformPercent / 100),
}));
// Find cheapest
const minCost = Math.min(...results.map(r => r.totalCost));
resultsContainer.innerHTML = results.map(r => `
<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>
</div>
<div class="pricing-calc__plan-total">${formatEGP(r.totalCost)}</div>
${r.totalCost === minCost ? '<span class="pricing-calc__badge">الأوفر</span>' : ''}
</div>
`).join('');
}
slider.addEventListener('input', () => {
const val = parseInt(slider.value);
valueDisplay.textContent = formatEGP(val);
calculate(val);
});
// Initial calculation
calculate(minCollections);
}
/* ═══════════════════════════════════════════════
13. MICRO-INTERACTIONS
Subtle scale on button press, input glow, card lift on hover
═══════════════════════════════════════════════ */
function initMicroInteractions() {
// Button press effect
document.addEventListener('mousedown', (e) => {
const btn = e.target.closest('.btn');
if (btn) btn.classList.add('btn--pressed');
});
document.addEventListener('mouseup', () => {
document.querySelectorAll('.btn--pressed').forEach(b => b.classList.remove('btn--pressed'));
});
document.addEventListener('mouseleave', () => {
document.querySelectorAll('.btn--pressed').forEach(b => b.classList.remove('btn--pressed'));
}, true);
// Input focus glow — handled via CSS class
document.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select')) {
e.target.classList.add('input--focused');
}
});
document.addEventListener('focusout', (e) => {
if (e.target.matches('input, textarea, select')) {
e.target.classList.remove('input--focused');
}
});
// Card hover lift
const hoverCards = document.querySelectorAll('.plan-card, .pain-card, .feature-card, .module-card');
hoverCards.forEach(card => {
card.addEventListener('mouseenter', () => card.classList.add('card--lifted'));
card.addEventListener('mouseleave', () => card.classList.remove('card--lifted'));
});
}
/* ═══════════════════════════════════════════════
14. PAGE TRANSITIONS (View Transitions API)
Intercept internal link clicks for smooth fade transitions.
Only if browser supports document.startViewTransition.
═══════════════════════════════════════════════ */
function initPageTransitions() {
if (!document.startViewTransition) return;
document.addEventListener('click', (e) => {
const link = e.target.closest('a[href]');
if (!link) return;
const href = link.getAttribute('href');
if (!href) return;
// Skip anchor links, external links, target=_blank, downloads
if (href.startsWith('#')) return;
if (link.target === '_blank') return;
if (link.hasAttribute('download')) return;
if (link.dataset.noTransition !== undefined) return;
// Check if internal link (same origin)
try {
const url = new URL(href, window.location.origin);
if (url.origin !== window.location.origin) return;
} catch {
return;
}
e.preventDefault();
document.startViewTransition(() => {
window.location.href = href;
});
});
}
/* ═══════════════════════════════════════════════
15. SOCIAL PROOF COUNTER
[data-social-proof] elements get animated count-up
with a pulse animation on completion.
═══════════════════════════════════════════════ */
function initSocialProof() {
const elements = document.querySelectorAll('[data-social-proof]');
if (!elements.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animateSocialProof(entry.target);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.5 }
);
elements.forEach(el => observer.observe(el));
}
function animateSocialProof(el) {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
el.classList.add('social-proof--complete');
return;
}
const target = parseFloat(el.dataset.socialProof);
const suffix = el.dataset.socialProofSuffix || '';
const prefix = el.dataset.socialProofPrefix || '';
if (isNaN(target)) return;
const duration = 2200;
const start = performance.now();
const isInt = Number.isInteger(target);
function easeOut(t) {
return 1 - Math.pow(1 - t, 3);
}
function update(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const eased = easeOut(progress);
const current = eased * target;
el.textContent = prefix + (isInt ? Math.round(current) : current.toFixed(1)) + suffix;
if (progress < 1) {
requestAnimationFrame(update);
} else {
// Pulse animation on completion
el.classList.add('social-proof--complete');
}
}
el.textContent = prefix + '0' + suffix;
requestAnimationFrame(update);
}
/* ═══════════════════════════════════════════════
DYNAMIC STYLES INJECTION
All CSS for JS-created elements in one place
═══════════════════════════════════════════════ */
function injectDynamicStyles() {
const style = document.createElement('style');
style.id = 'dynamic-js-styles';
style.textContent = `
/* ── Mobile Menu Drawer ── */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0);
z-index: 998;
pointer-events: none;
transition: background 0.3s ease;
}
.nav-backdrop--visible {
background: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
@media (max-width: 768px) {
.nav__links {
position: fixed;
top: 0;
inset-inline-end: 0;
width: 280px;
height: 100vh;
height: 100dvh;
background: var(--color-surface, #fff);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
overflow-y: auto;
padding-top: 4rem;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
[dir="rtl"] .nav__links {
transform: translateX(-100%);
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}
.nav__links--open {
transform: translateX(0) !important;
}
}
/* ── Sticky CTA Bar ── */
.sticky-cta {
position: fixed;
bottom: 0;
inset-inline: 0;
z-index: 990;
background: var(--color-primary, #1e3a5f);
padding: 0.75rem 1rem;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.sticky-cta--visible {
transform: translateY(0);
}
.sticky-cta__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.sticky-cta__btn {
background: var(--color-accent, #f59e0b);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: transform 0.2s, box-shadow 0.2s;
}
.sticky-cta__btn:hover {
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.sticky-cta__close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.sticky-cta__close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
/* ── Exit Intent Modal ── */
.exit-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.exit-modal--visible {
opacity: 1;
pointer-events: auto;
}
.exit-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.exit-modal__content {
position: relative;
background: var(--color-surface, #fff);
border-radius: 16px;
padding: 2.5rem 2rem;
max-width: 420px;
width: 90%;
text-align: center;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.exit-modal--visible .exit-modal__content {
transform: scale(1) translateY(0);
}
.exit-modal__close {
position: absolute;
top: 0.75rem;
inset-inline-end: 0.75rem;
background: none;
border: none;
font-size: 1.75rem;
color: var(--color-text-muted, #666);
cursor: pointer;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: color 0.2s;
}
.exit-modal__close:hover {
color: var(--color-text, #333);
}
.exit-modal__title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--color-text, #1e293b);
}
.exit-modal__subtitle {
font-size: 1rem;
color: var(--color-text-muted, #64748b);
margin-bottom: 1.5rem;
}
.exit-modal__field {
margin-bottom: 1rem;
}
.exit-modal__input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid var(--color-border, #e2e8f0);
border-radius: 8px;
font-size: 1rem;
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
}
.exit-modal__input:focus {
outline: none;
border-color: var(--color-primary, #1e3a5f);
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.exit-modal__submit {
width: 100%;
padding: 0.85rem 1.5rem;
background: var(--color-primary, #1e3a5f);
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.exit-modal__submit:hover {
background: var(--color-primary-dark, #15294a);
transform: translateY(-1px);
}
/* ── Back to Top Button ── */
.back-to-top {
position: fixed;
bottom: 6rem;
inset-inline-start: 1.5rem;
z-index: 980;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary, #1e3a5f);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.back-to-top--visible {
opacity: 1;
transform: scale(1);
}
.back-to-top:hover {
background: var(--color-primary-dark, #15294a);
transform: scale(1.1);
}
.back-to-top:active {
transform: scale(0.95);
}
/* ── Pricing Calculator ── */
.pricing-calc {
padding: 1.5rem;
}
.pricing-calc__label {
display: block;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--color-text, #1e293b);
}
.pricing-calc__value {
color: var(--color-primary, #1e3a5f);
font-size: 1.25rem;
}
.pricing-calc__slider {
width: 100%;
height: 8px;
border-radius: 4px;
appearance: none;
background: var(--color-border, #e2e8f0);
outline: none;
cursor: pointer;
}
.pricing-calc__slider::-webkit-slider-thumb {
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-primary, #1e3a5f);
cursor: pointer;
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
transition: transform 0.2s;
}
.pricing-calc__slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.pricing-calc__slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-primary, #1e3a5f);
cursor: pointer;
border: none;
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
}
.pricing-calc__range-labels {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--color-text-muted, #64748b);
margin-top: 0.5rem;
margin-bottom: 1.5rem;
}
.pricing-calc__results {
display: grid;
gap: 0.75rem;
}
.pricing-calc__plan {
position: relative;
padding: 1rem 1.25rem;
border: 2px solid var(--color-border, #e2e8f0);
border-radius: 12px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.pricing-calc__plan--cheapest {
border-color: var(--color-primary, #1e3a5f);
box-shadow: 0 4px 16px rgba(30, 58, 95, 0.12);
transform: scale(1.02);
}
.pricing-calc__plan-name {
font-weight: 700;
font-size: 1rem;
margin-bottom: 0.25rem;
color: var(--color-text, #1e293b);
}
.pricing-calc__plan-breakdown {
display: flex;
gap: 1rem;
font-size: 0.85rem;
color: var(--color-text-muted, #64748b);
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.pricing-calc__plan-total {
font-size: 1.2rem;
font-weight: 800;
color: var(--color-primary, #1e3a5f);
}
.pricing-calc__badge {
position: absolute;
top: -0.6rem;
inset-inline-end: 1rem;
background: var(--color-accent, #f59e0b);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 0.15rem 0.6rem;
border-radius: 20px;
}
/* ── Micro-Interactions ── */
.btn--pressed {
transform: scale(0.97) !important;
}
.btn {
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.input--focused {
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12) !important;
border-color: var(--color-primary, #1e3a5f) !important;
}
.card--lifted {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}
.plan-card,
.pain-card,
.feature-card,
.module-card {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
/* ── Social Proof Pulse ── */
.social-proof--complete {
animation: socialProofPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes socialProofPulse {
0% { transform: scale(1); }
30% { transform: scale(1.15); }
60% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* ── View Transitions ── */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fadeOut 0.2s ease-out;
}
::view-transition-new(root) {
animation: fadeIn 0.2s ease-in;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
`;
document.head.appendChild(style);
}
public/manifest.json 0 → 100644
View file @ 067dce8d
{
"name": "El-Captain",
"short_name": "EC",
"description": "نظام إدارة الأكاديميات الرياضية",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#1B2B4B",
"background_color": "#ffffff",
"lang": "ar",
"dir": "rtl",
"icons": [
{
"src": "/assets/images/logo-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/logo-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
public/martial-arts.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 يحل مشكلة تتبع الأحزمة والترقيات وجدولة امتحانات الترقي وإدارة بطولات الكاراتيه والجودو والتايكوندو.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* ═══════════════════════════════════════════════════════════
Martial Arts Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Sport Hero — warm dojo-inspired background */
.sport-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #FFF3E0 0%, #FFF8F0 40%, var(--bg-body) 100%);
}
.sport-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(201, 149, 43, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(201, 149, 43, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.sport-hero::after {
content: '';
position: absolute;
bottom: -50%;
inset-inline: -10%;
height: 100%;
background: radial-gradient(ellipse at 50% 100%, rgba(201, 149, 43, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.sport-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.sport-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.sport-hero__actions {
justify-content: center;
}
}
.sport-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(201, 149, 43, 0.08);
border: 1px solid rgba(201, 149, 43, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-gold-dark);
margin-bottom: var(--space-md);
}
.sport-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
line-height: 1.25;
margin-bottom: var(--space-md);
}
.sport-hero__title-accent {
color: var(--color-accent);
position: relative;
}
.sport-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
max-width: 560px;
margin-bottom: var(--space-xl);
}
.sport-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Martial Arts Specific */
.sport-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.sport-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.sport-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.sport-pain-card::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
width: 4px;
height: 100%;
background: var(--color-error);
border-radius: 0 4px 4px 0;
}
.sport-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-error-bg);
color: var(--color-error);
display: grid;
place-items: center;
margin-bottom: var(--space-md);
font-size: 1.5rem;
}
.sport-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.sport-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Feature Highlight Section */
.sport-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.sport-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.sport-feature,
.sport-feature--reverse {
grid-template-columns: 1fr;
}
.sport-feature--reverse .sport-feature__visual {
order: 0;
}
}
.sport-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.sport-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Comparison Before/After */
.sport-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
align-items: center;
}
@media (max-width: 768px) {
.sport-comparison {
grid-template-columns: 1fr;
}
.sport-comparison__arrow {
transform: rotate(90deg);
}
}
.sport-comparison__before,
.sport-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.sport-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.sport-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.sport-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
font-weight: 800;
}
.sport-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.sport-comparison__before .sport-comparison__title {
color: var(--color-error);
}
.sport-comparison__after .sport-comparison__title {
color: var(--color-success);
}
.sport-comparison__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.sport-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: var(--space-xs);
}
.sport-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
margin-top: 0.55em;
border-radius: 50%;
flex-shrink: 0;
}
.sport-comparison__before .sport-comparison__list li::before {
background: var(--color-error);
}
.sport-comparison__after .sport-comparison__list li::before {
background: var(--color-success);
}
/* Stats banner */
.sport-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--color-primary);
border-radius: var(--radius-xl);
color: var(--ink-on-dark);
}
.sport-stat {
text-align: center;
}
.sport-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
line-height: 1;
margin-bottom: var(--space-2xs);
}
.sport-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section */
.sport-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #FFF8F0 100%);
position: relative;
}
.sport-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, var(--color-accent) 50%, transparent 90%);
opacity: 0.3;
}
.sport-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.sport-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
margin: 0 auto var(--space-xl);
line-height: 1.8;
}
.sport-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Grid feature highlight bullets */
.grid-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
}
.grid-feature-item:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.grid-feature-item__icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.grid-feature-item__icon svg {
width: 1rem;
height: 1rem;
}
.grid-feature-item__text {
flex: 1;
}
.grid-feature-item__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 2px;
}
.grid-feature-item__desc {
font-size: var(--text-xs);
color: var(--ink-secondary);
line-height: 1.6;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="sport-hero">
<div class="container">
<div class="sport-hero__inner">
<div data-reveal>
<span class="sport-hero__eyebrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
مصمم خصيصاً لأكاديميات الفنون القتالية
</span>
<h1 class="sport-hero__title">أكاديميتك تحتاج نظام <span class="sport-hero__title-accent">يفهم الأحزمة والترقيات</span></h1>
<p class="sport-hero__desc">إدارة تقدم اللاعبين عبر الأحزمة، جدولة امتحانات الترقي، تنظيم البطولات، وإدارة تخصصات متعددة (كاراتيه، جودو، تايكوندو) تحت سقف واحد — كل ذلك من نظام واحد متكامل.</p>
<div class="sport-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص للفنون القتالية</a>
<a href="#features" class="btn btn--secondary btn--large">شوف النظام</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/programs.png" alt="إدارة برامج الفنون القتالية المتعددة" loading="eager">
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points — Martial Arts Specific -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-error-bg); color: var(--color-error); border-color: rgba(185,28,28,0.2);">المشاكل اليومية</span>
<h2 class="section-header__title">كل يوم نفس الكابوس</h2>
<p class="section-header__desc">أكاديميات الفنون القتالية تعاني من مشاكل فريدة لا تحلها الأنظمة العادية. هل تعرف هذه المشاكل؟</p>
</div>
<div class="sport-pain__grid" data-reveal="100">
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3 class="sport-pain-card__title">تتبع الأحزمة لمئات اللاعبين</h3>
<p class="sport-pain-card__text">مئات اللاعبين في تخصصات مختلفة، كل واحد في مستوى مختلف. سجلات ورقية ضائعة. مين حزامه إيه؟ مين مستحق يمتحن؟ لا أحد يعرف بدقة.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/></svg>
</div>
<h3 class="sport-pain-card__title">جدولة امتحانات الترقي</h3>
<p class="sport-pain-card__text">تحديد مين مؤهل للامتحان بناءً على نسبة الحضور والمدة الزمنية. حسابات يدوية مرهقة وأخطاء تؤدي لترقي لاعبين غير مستحقين.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<h3 class="sport-pain-card__title">تخصصات متعددة تحت سقف واحد</h3>
<p class="sport-pain-card__text">كاراتيه الصبح، جودو بالليل، تايكوندو آخر الأسبوع — نفس الصالة ونفس الأوقات. تضاربات في الجدول وفوضى في الحجوزات بدون نظام واحد يجمع كل شيء.</p>
</div>
<div class="sport-pain-card">
<div class="sport-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/><path d="M12 3v12"/><path d="M5 21h14"/></svg>
</div>
<h3 class="sport-pain-card__title">فوضى التسجيل في البطولات</h3>
<p class="sport-pain-card__text">مين مؤهل للبطولة؟ مين دفع رسوم الاشتراك؟ مين نسبة حضوره كافية؟ كل بطولة تحتاج أيام من التحقق اليدوي والاتصالات مع أولياء الأمور.</p>
</div>
</div>
</div>
</section>
<!-- Before / After Comparison -->
<section class="section">
<div class="container">
<div class="sport-comparison" data-reveal>
<div class="sport-comparison__before">
<h3 class="sport-comparison__title">قبل El-Captain</h3>
<ul class="sport-comparison__list">
<li>سجلات أحزمة ورقية تضيع أو تتلف</li>
<li>دفاتر حضور يدوية بدون تحليل</li>
<li>لا تتبع لمن يستحق امتحان الترقي</li>
<li>أولياء الأمور يسألون: "امتى امتحان الحزام الجاي؟"</li>
<li>أنظمة منفصلة لكل رياضة قتالية</li>
</ul>
</div>
<div class="sport-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="sport-comparison__after">
<h3 class="sport-comparison__title">بعد El-Captain</h3>
<ul class="sport-comparison__list">
<li>تتبع رقمي لتقدم كل لاعب عبر الأحزمة</li>
<li>فحص تلقائي لاستحقاق امتحان الترقي</li>
<li>نظام موحد لكل التخصصات القتالية</li>
<li>بوابة أولياء أمور مع رؤية واضحة للتقدم</li>
<li>تقارير جاهزة للبطولات والمنافسات</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Feature Section 1: Programs & Disciplines -->
<section class="section" id="features" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>برامج متعددة تحت سقف واحد</h2>
<p>أدر الكاراتيه والجودو والتايكوندو (أو أي تخصص قتالي آخر) كبرامج منفصلة بأنظمة أحزمة ومناهج وكوادر تدريبية خاصة بكل واحد — كل ذلك من منصة واحدة متكاملة.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">برنامج منفصل لكل تخصص</div>
<div class="grid-feature-item__desc">كاراتيه، جودو، تايكوندو — كل واحد ببرنامجه ومنهجه وأهدافه الخاصة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تتبع مستويات وأحزمة</div>
<div class="grid-feature-item__desc">نظام أحزمة مرن يناسب أي تخصص — من الأبيض للأسود وما بينهم.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">جداول خاصة بكل برنامج</div>
<div class="grid-feature-item__desc">مواعيد تدريب منفصلة لكل تخصص مع منع التضاربات تلقائياً.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M9 3v18"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">إدارة مساحات مشتركة</div>
<div class="grid-feature-item__desc">صالة واحدة تخدم عدة تخصصات — النظام ينظم الحجز ويمنع التعارض.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/programs.png" alt="إدارة البرامج التدريبية المتعددة" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature Section 2: Enrollment & Classification (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>تصنيف اللاعبين حسب المستوى والحزام</h2>
<p>صنّف لاعبيك حسب مستوى الحزام في كل تخصص. تتبع تسجيلهم في البرامج المختلفة، وأدر ترقياتهم بسجل تاريخي كامل لكل ترقية ونتيجة امتحان.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تصنيف حسب الحزام</div>
<div class="grid-feature-item__desc">كل لاعب مصنف بحزامه الحالي مع إمكانية الفلترة والبحث بالمستوى.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تسجيل في كل برنامج</div>
<div class="grid-feature-item__desc">لاعب واحد يمكن أن يكون مسجلاً في الكاراتيه والجودو معاً بمستويات مختلفة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">فحص المتطلبات المسبقة</div>
<div class="grid-feature-item__desc">النظام يتحقق من استيفاء شروط الترقي قبل السماح بالتسجيل في الامتحان.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 16l4-8 4 5 4-10"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">سجل ترقيات كامل</div>
<div class="grid-feature-item__desc">تاريخ كل ترقية محفوظ — من أي حزام لأي حزام، ومتى، ونتيجة الامتحان.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/enrollments.png" alt="تسجيل وتصنيف اللاعبين" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature Section 3: Participant Management -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="sport-feature" data-reveal>
<div class="sport-feature__text">
<h2>ملف شامل لكل لاعب</h2>
<p>ملف متكامل لكل لاعب يعرض تاريخ الأحزمة، سجل الحضور، مشاركاته في البطولات، وحالته المالية. كل المعلومات في مكان واحد لاتخاذ قرارات سريعة ودقيقة.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">بيانات شخصية + ولي الأمر</div>
<div class="grid-feature-item__desc">بيانات اللاعب الكاملة مع ربط ولي الأمر وبيانات التواصل والطوارئ.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">خط زمني لتقدم الأحزمة</div>
<div class="grid-feature-item__desc">عرض بصري لرحلة اللاعب من الحزام الأبيض حتى مستواه الحالي.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">نسبة الحضور</div>
<div class="grid-feature-item__desc">نسبة حضور دقيقة لكل برنامج — شرط أساسي لاستحقاق الترقي.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">الحالة المالية والمدفوعات</div>
<div class="grid-feature-item__desc">رصيد المحفظة، الفواتير المستحقة، وتاريخ المدفوعات — كل شيء واضح.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/participants-list.png" alt="قائمة اللاعبين وملفاتهم الشاملة" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature Section 4: Activities & Events (reversed) -->
<section class="section">
<div class="container">
<div class="sport-feature sport-feature--reverse" data-reveal>
<div class="sport-feature__text">
<h2>بطولات وامتحانات الترقي</h2>
<p>نظّم امتحانات الأحزمة والبطولات من مكان واحد — حدد الموعد، تحقق من الأهلية تلقائياً، أدر التسجيلات، وتابع النتائج. كل شيء موثق ومحفوظ.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">جدولة امتحانات الترقي</div>
<div class="grid-feature-item__desc">حدد موعد الامتحان والنظام يحسب تلقائياً من يستحق المشاركة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">فحص الأهلية تلقائياً</div>
<div class="grid-feature-item__desc">نسبة الحضور كافية؟ المدة الزمنية من آخر ترقي مستوفاة؟ النظام يتحقق.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تسجيل في البطولات</div>
<div class="grid-feature-item__desc">تسجيل اللاعبين المؤهلين مع تحصيل الرسوم وإصدار الفواتير تلقائياً.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 21h8"/><path d="M12 17V3"/><path d="M17 8l-5-5-5 5"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تتبع النتائج</div>
<div class="grid-feature-item__desc">نتائج الامتحانات والبطولات محفوظة في ملف اللاعب ومرتبطة بترقياته.</div>
</div>
</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/activities.png" alt="إدارة البطولات وامتحانات الترقي" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<section class="section">
<div class="container">
<div class="sport-stats" data-reveal>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+14</div>
<div class="sport-stat__label">وحدة متكاملة</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+250</div>
<div class="sport-stat__label">شاشة إدارية</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">100%</div>
<div class="sport-stat__label">عربي بالكامل</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">3+</div>
<div class="sport-stat__label">كاراتيه، جودو، تايكوندو</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="sport-cta">
<div class="container" data-reveal>
<h2 class="sport-cta__title">جاهز تنظّم أكاديميتك؟</h2>
<p class="sport-cta__desc">احجز عرض خاص لأكاديميات الفنون القتالية. نريك النظام على أحزمة وبرامج مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="sport-cta__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لأكاديميات الفنون القتالية</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--secondary btn--large" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-inline-end: 6px;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/partners.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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. عمولات مجزية على الإحالات، دعم مخصص، تسويق مشترك، وشهادات معتمدة. ثلاث مستويات شراكة تناسب حجم عملك.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<style>
/* ═══════════════════════════════════════════════════════════
Partners Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Partner Hero */
.partner-hero {
padding-top: 120px;
padding-bottom: 80px;
text-align: center;
background: linear-gradient(180deg, #F0F4F8 0%, var(--bg-body) 100%);
position: relative;
overflow: hidden;
}
.partner-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(0.4 0.05 240 / 0.04) 1px, transparent 1px),
linear-gradient(90deg, oklch(0.4 0.05 240 / 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.partner-hero__content {
position: relative;
z-index: 1;
}
.partner-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 6px 16px;
background: var(--color-accent-ghost);
color: var(--color-accent-dark);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
margin-bottom: var(--space-lg);
}
.partner-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.partner-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 55ch;
margin: 0 auto;
line-height: 1.8;
}
/* Who it's for — audience cards */
.audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
@media (max-width: 768px) {
.audience-grid {
grid-template-columns: 1fr;
}
}
.audience-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.audience-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
}
.audience-card__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-md);
border-radius: var(--radius-lg);
display: grid;
place-items: center;
background: var(--color-accent-ghost);
color: var(--color-accent-dark);
}
.audience-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.audience-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* Benefits section */
.benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 640px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.benefit-item__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: grid;
place-items: center;
flex-shrink: 0;
background: oklch(0.93 0.05 155);
color: oklch(0.40 0.15 155);
}
.benefit-item__text {
flex: 1;
}
.benefit-item__title {
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 4px;
}
.benefit-item__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* Partner Tiers Grid */
.tiers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
align-items: stretch;
}
@media (max-width: 900px) {
.tiers-grid {
grid-template-columns: 1fr;
}
}
.tier-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
}
.tier-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
}
.tier-card--featured {
border-color: var(--color-accent);
border-width: 2px;
box-shadow: 0 8px 32px oklch(0.55 0.15 200 / 0.12);
}
.tier-card--featured:hover {
box-shadow: 0 16px 48px oklch(0.55 0.15 200 / 0.18);
}
.tier-card__badge {
position: absolute;
top: -12px;
inset-inline-start: 50%;
transform: translateX(50%);
padding: 4px 16px;
background: var(--color-accent);
color: white;
font-size: var(--text-xs);
font-weight: 700;
border-radius: var(--radius-full);
white-space: nowrap;
}
[dir="rtl"] .tier-card__badge {
transform: translateX(50%);
}
.tier-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
display: grid;
place-items: center;
margin-bottom: var(--space-md);
}
.tier-card__icon--referral {
background: oklch(0.93 0.05 230);
color: oklch(0.45 0.15 230);
}
.tier-card__icon--certified {
background: oklch(0.93 0.06 80);
color: oklch(0.45 0.14 80);
}
.tier-card__icon--strategic {
background: oklch(0.93 0.05 155);
color: oklch(0.40 0.15 155);
}
.tier-card__name {
font-size: var(--text-lg);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.tier-card__desc {
font-size: var(--text-sm);
color: var(--ink-muted);
margin-bottom: var(--space-lg);
line-height: 1.7;
}
.tier-card__features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl);
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.tier-card__features li {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
}
.tier-card__features li::before {
content: '';
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
background: oklch(0.93 0.05 170);
border-radius: var(--radius-full);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23178a5b' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.tier-card__cta {
margin-top: auto;
}
.tier-card__cta .btn {
width: 100%;
text-align: center;
justify-content: center;
}
/* Partner CTA section */
.partner-cta {
text-align: center;
max-width: 650px;
margin: 0 auto;
}
.partner-cta__title {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.partner-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-xl);
}
.partner-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="partner-hero">
<div class="container partner-hero__content" data-reveal>
<span class="partner-hero__badge">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
انضم لشبكة شركائنا
</span>
<h1 class="partner-hero__title">برنامج الشراكة</h1>
<p class="partner-hero__desc">اشترك في برنامج شراكة El-Captain واكسب عمولات مجزية على كل إحالة ناجحة. دعم مخصص وتسويق مشترك وفرص نمو حقيقية لعملك.</p>
</div>
</section>
<!-- Who It's For -->
<section class="section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">لمن هذا البرنامج؟</span>
<h2 class="section-header__title">شراكة مصممة لخبراء المجال</h2>
<p class="section-header__desc">سواء كنت مستشار رياضي، مدرب بخبرة واسعة، أو مقدم خدمات تقنية — لدينا مسار شراكة يناسبك.</p>
</div>
<div class="audience-grid" data-reveal="200">
<!-- Sports Consultants -->
<div class="audience-card">
<div class="audience-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
<rect x="9" y="3" width="6" height="4" rx="1"/>
<path d="M9 14l2 2 4-4"/>
</svg>
</div>
<h3 class="audience-card__title">مستشارو الرياضة</h3>
<p class="audience-card__desc">إذا كنت تقدم استشارات للأكاديميات والأندية الرياضية، أضف El-Captain كحل تقني متكامل ضمن خدماتك واكسب عمولة على كل عقد.</p>
</div>
<!-- Trainers & Academies -->
<div class="audience-card">
<div class="audience-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3 class="audience-card__title">المدربون والأكاديميات</h3>
<p class="audience-card__desc">مدربون يعرفون زملاءهم ومديري أكاديميات أخرى. أحل زميلك على النظام واحصل على عمولة مستمرة طوال فترة اشتراكه.</p>
</div>
<!-- IT Service Providers -->
<div class="audience-card">
<div class="audience-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="8" rx="2"/>
<rect x="2" y="14" width="20" height="8" rx="2"/>
<circle cx="6" cy="6" r="1" fill="currentColor"/>
<circle cx="6" cy="18" r="1" fill="currentColor"/>
<path d="M10 6h8"/>
<path d="M10 18h8"/>
</svg>
</div>
<h3 class="audience-card__title">مقدمو خدمات تكنولوجيا المعلومات</h3>
<p class="audience-card__desc">شركات IT التي تخدم القطاع الرياضي. أضف El-Captain لمحفظة حلولك وقدّم لعملائك نظام إدارة متكامل مع دعم تقني منك.</p>
</div>
</div>
</div>
</section>
<!-- Benefits -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">مزايا الشراكة</span>
<h2 class="section-header__title">لماذا تنضم لبرنامج الشراكة؟</h2>
<p class="section-header__desc">مزايا حقيقية تدعم نمو عملك وتزيد دخلك</p>
</div>
<div class="benefits-grid" data-reveal="200">
<!-- Commission -->
<div class="benefit-item">
<div class="benefit-item__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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 class="benefit-item__text">
<div class="benefit-item__title">عمولة على كل إحالة ناجحة</div>
<p class="benefit-item__desc">احصل على نسبة من اشتراك كل عميل تحيله طوال فترة تعاقده مع El-Captain.</p>
</div>
</div>
<!-- Support -->
<div class="benefit-item">
<div class="benefit-item__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</div>
<div class="benefit-item__text">
<div class="benefit-item__title">دعم فني مخصص</div>
<p class="benefit-item__desc">فريق دعم خاص بالشركاء يساعدك في تجهيز العروض وحل أي مشكلة تقنية لعملائك.</p>
</div>
</div>
<!-- Co-marketing -->
<div class="benefit-item">
<div class="benefit-item__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 2L11 13"/>
<path d="M22 2L15 22 11 13 2 9l20-7z"/>
</svg>
</div>
<div class="benefit-item__text">
<div class="benefit-item__title">تسويق مشترك</div>
<p class="benefit-item__desc">مواد تسويقية جاهزة، ذكر في موقعنا، وحملات مشتركة تزيد وصولك لعملاء جدد.</p>
</div>
</div>
<!-- Training -->
<div class="benefit-item">
<div class="benefit-item__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="4" y="4" width="16" height="16" rx="2"/>
<path d="M9 9h6v6H9z"/>
<path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/>
</svg>
</div>
<div class="benefit-item__text">
<div class="benefit-item__title">تدريب وشهادات</div>
<p class="benefit-item__desc">تدريب مجاني على النظام وشهادات معتمدة تعزز مصداقيتك أمام عملائك.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Partner Tiers -->
<section class="section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">مستويات الشراكة</span>
<h2 class="section-header__title">اختر المستوى المناسب لك</h2>
<p class="section-header__desc">ثلاث مستويات شراكة مصممة لتناسب حجم عملك وطبيعة نشاطك</p>
</div>
<div class="tiers-grid" data-reveal="200">
<!-- Tier 1: Referral Partner -->
<div class="tier-card">
<div class="tier-card__icon tier-card__icon--referral">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
</div>
<h3 class="tier-card__name">شريك مُحيل</h3>
<p class="tier-card__desc">المستوى الأساسي. أحل عملاء واكسب عمولة على كل اشتراك ناجح دون أي التزامات.</p>
<ul class="tier-card__features">
<li>عمولة 10% من اشتراك العميل</li>
<li>رابط إحالة خاص بك</li>
<li>لوحة تتبع الإحالات</li>
<li>مواد تسويقية جاهزة</li>
<li>دعم عبر البريد الإلكتروني</li>
<li>بدون حد أدنى للإحالات</li>
</ul>
<div class="tier-card__cta">
<a href="contact.html" class="btn btn--secondary btn--large">سجّل كشريك محيل</a>
</div>
</div>
<!-- Tier 2: Certified Partner -->
<div class="tier-card tier-card--featured">
<span class="tier-card__badge">الأكثر طلباً</span>
<div class="tier-card__icon tier-card__icon--certified">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 15l-2 5l1.5-3h1l1.5 3l-2-5z"/>
<circle cx="12" cy="9" r="6"/>
<path d="M8.21 13.89L7 23l5-3 5 3-1.21-9.12"/>
</svg>
</div>
<h3 class="tier-card__name">شريك معتمد</h3>
<p class="tier-card__desc">للمحترفين. تدريب متقدم على النظام وعمولة أعلى مع فرص تسويق مشترك.</p>
<ul class="tier-card__features">
<li>عمولة 15% من اشتراك العميل</li>
<li>شهادة شريك معتمد</li>
<li>تدريب كامل على النظام</li>
<li>حملات تسويقية مشتركة</li>
<li>ذكر في صفحة الشركاء</li>
<li>دعم فني أولوية</li>
<li>مواد بيع مخصصة باسمك</li>
<li>تقارير أداء شهرية</li>
</ul>
<div class="tier-card__cta">
<a href="contact.html" class="btn btn--primary btn--large">قدّم طلب شراكة معتمدة</a>
</div>
</div>
<!-- Tier 3: Strategic Partner -->
<div class="tier-card">
<div class="tier-card__icon tier-card__icon--strategic">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
</div>
<h3 class="tier-card__name">شريك استراتيجي</h3>
<p class="tier-card__desc">أعلى مستوى. مدير حساب مخصص، حلول مخصصة لعملائك، وأعلى نسبة عمولة.</p>
<ul class="tier-card__features">
<li>عمولة 20% من اشتراك العميل</li>
<li>مدير حساب مخصص</li>
<li>حلول مخصصة لعملائك</li>
<li>أولوية في الميزات الجديدة</li>
<li>لقاءات استراتيجية شهرية</li>
<li>تخصيص واجهة النظام (White-label)</li>
<li>دعم فني على مدار الساعة</li>
<li>حصرية جغرافية (اختياري)</li>
<li>مشاركة في خطة التطوير</li>
</ul>
<div class="tier-card__cta">
<a href="contact.html" class="btn btn--secondary btn--large">تواصل لشراكة استراتيجية</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="section section--muted">
<div class="container">
<div class="partner-cta" data-reveal>
<h2 class="partner-cta__title">جاهز تبدأ رحلة الشراكة؟</h2>
<p class="partner-cta__desc">سجّل اهتمامك الآن وسيتواصل معك فريقنا خلال 24 ساعة لمناقشة تفاصيل الشراكة وتحديد المستوى المناسب لعملك.</p>
<div class="partner-cta__actions">
<a href="contact.html" class="btn btn--primary btn--large">قدّم طلب شراكة</a>
<a href="https://wa.me/201XXXXXXXXX" target="_blank" rel="noopener" class="btn btn--secondary btn--large" style="display: inline-flex; align-items: center; gap: 8px;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="color: oklch(0.45 0.18 145);"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
استفسر عبر WhatsApp
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من تسجيل المشترك حتى التقارير المالية الشهرية.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="features.html#members" class="footer__link">العضويات</a>
<a href="features.html#sports" class="footer__link">الأنشطة الرياضية</a>
<a href="features.html#pool" class="footer__link">حمامات السباحة</a>
<a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/pricing.html
View file @ 067dce8d
......@@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الباقات والأسعار - El-Captain</title>
<meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة. فترة تجريبية مجانية لكل الباقات.">
<meta property="og:title" content="الباقات والأسعار - El-Captain">
<meta property="og:description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة.">
<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">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/pricing.html">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
......@@ -586,6 +592,29 @@
</div>
</section>
<!-- Pricing Calculator -->
<section class="section" id="calculator">
<div class="container" style="max-width: 700px;">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">احسب تكلفتك الشهرية</h2>
<p class="section-header__desc">حرّك المؤشر لمعرفة أي باقة أوفر لحجم تحصيلاتك</p>
</div>
<div id="pricing-calculator" data-reveal="100">
<div style="margin-bottom: var(--space-lg);">
<label style="display: block; font-weight: 600; margin-bottom: var(--space-sm); color: var(--ink-primary);">تحصيلاتك الشهرية المتوقعة:</label>
<input type="range" id="calc-slider" min="10000" max="500000" step="5000" value="50000" style="width: 100%; accent-color: var(--color-accent);">
<div style="display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2xs);">
<span dir="ltr">10,000 ج.م</span>
<span id="calc-current" dir="ltr" style="font-weight: 700; color: var(--color-accent-dark); font-size: var(--text-base);">50,000 ج.م</span>
<span dir="ltr">500,000 ج.م</span>
</div>
</div>
<div id="calc-results" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md);"></div>
<p id="calc-recommendation" style="text-align: center; margin-top: var(--space-lg); font-weight: 600; color: var(--color-accent-dark);"></p>
</div>
</div>
</section>
<!-- Value Strip -->
<section class="section" style="padding-top: 0;">
<div class="container" data-reveal>
......
public/privacy.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 لإدارة الأكاديميات الرياضية. تعرف على كيفية جمع واستخدام وحماية بياناتك.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo"><span class="nav__logo-mark">EC</span><span>El-Captain</span></a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
</button>
</div>
</nav>
<section class="module-hero">
<div class="container">
<nav class="breadcrumb" aria-label="التنقل التفصيلي">
<a href="/">الرئيسية</a>
<span class="breadcrumb__sep">/</span>
<span>سياسة الخصوصية</span>
</nav>
<h1 class="module-hero__title">سياسة الخصوصية</h1>
<p class="module-hero__subtitle">التزامنا بحماية بياناتك وخصوصيتك</p>
</div>
</section>
<section class="legal-content">
<div class="container legal-content__wrapper">
<p class="legal-content__intro">
نلتزم في El-Captain بحماية خصوصية مستخدمينا وبياناتهم الشخصية. توضح هذه السياسة كيفية جمع البيانات واستخدامها وتخزينها وحمايتها عند استخدامك لنظام إدارة الأكاديميات الرياضية الخاص بنا. باستخدامك للنظام، فإنك توافق على الممارسات الموضحة في هذه السياسة.
</p>
<article class="legal-content__section">
<h2 class="legal-content__heading">جمع البيانات</h2>
<p class="legal-content__text">
نقوم بجمع البيانات الضرورية لتقديم خدماتنا بأعلى جودة ممكنة. تشمل البيانات التي نجمعها:
</p>
<ul class="legal-content__list">
<li>البيانات الشخصية: الاسم الكامل، البريد الإلكتروني، رقم الهاتف، وتاريخ الميلاد</li>
<li>بيانات الأكاديمية: اسم الأكاديمية، العنوان، بيانات الفروع، والبيانات التشغيلية</li>
<li>بيانات المشتركين: سجلات الحضور، الاشتراكات، المدفوعات، والتقييمات</li>
<li>بيانات الاستخدام: سجلات الدخول، الصفحات المستخدمة، ومدة الجلسات</li>
<li>البيانات التقنية: عنوان IP، نوع المتصفح، ونظام التشغيل</li>
</ul>
<p class="legal-content__text">
لا نقوم بجمع أي بيانات غير ضرورية لتشغيل النظام، ولا نطلب معلومات حساسة إلا عند الحاجة المباشرة لتقديم الخدمة.
</p>
</article>
<article class="legal-content__section">
<h2 class="legal-content__heading">استخدام البيانات</h2>
<p class="legal-content__text">
نستخدم البيانات المجمعة للأغراض التالية:
</p>
<ul class="legal-content__list">
<li>تقديم الخدمة: تشغيل النظام وإدارة حسابات الأكاديميات والمشتركين وتنفيذ العمليات اليومية</li>
<li>تحسين الخدمة: تحليل أنماط الاستخدام لتطوير واجهة المستخدم وإضافة مزايا جديدة تلبي احتياجاتكم</li>
<li>الدعم الفني: الرد على استفساراتكم وحل المشكلات التقنية بشكل فعال وسريع</li>
<li>التواصل: إرسال إشعارات مهمة متعلقة بالخدمة مثل تحديثات النظام أو تغييرات الشروط</li>
<li>الأمان: مراقبة النشاط المشبوه وحماية الحسابات من الاختراق أو الاستخدام غير المصرح به</li>
<li>التقارير: إنشاء تقارير إحصائية مجمعة لا تحدد هوية الأفراد لتحسين جودة الخدمة</li>
</ul>
</article>
<article class="legal-content__section">
<h2 class="legal-content__heading">تخزين وأمان البيانات</h2>
<p class="legal-content__text">
نأخذ أمان بياناتك على محمل الجد ونطبق أعلى معايير الحماية المتاحة:
</p>
<ul class="legal-content__list">
<li>تشفير SSL/TLS: جميع البيانات المنقولة بين جهازك وخوادمنا مشفرة بالكامل باستخدام بروتوكول SSL مما يمنع أي طرف ثالث من اعتراضها</li>
<li>نسخ احتياطي يومي: يتم إجراء نسخ احتياطي تلقائي لجميع البيانات بشكل يومي مع الاحتفاظ بنسخ متعددة في مواقع جغرافية مختلفة</li>
<li>خوادم آمنة: يتم تخزين البيانات على خوادم AWS محمية بجدران نارية متقدمة وأنظمة كشف التسلل</li>
<li>التحكم في الوصول: نظام صلاحيات متعدد المستويات يضمن وصول كل مستخدم فقط للبيانات المصرح له بالاطلاع عليها</li>
<li>تشفير البيانات الحساسة: كلمات المرور والبيانات المالية مشفرة في قاعدة البيانات ولا يمكن قراءتها حتى من قبل فريقنا التقني</li>
<li>المراقبة المستمرة: نظام مراقبة يعمل على مدار الساعة لاكتشاف أي نشاط غير طبيعي والتعامل معه فوريا</li>
</ul>
</article>
<article class="legal-content__section">
<h2 class="legal-content__heading">الأطراف الثالثة</h2>
<p class="legal-content__text">
نحن لا نبيع بياناتك الشخصية لأي طرف ثالث تحت أي ظرف من الظروف. قد نشارك بيانات محدودة مع الأطراف التالية فقط عند الضرورة:
</p>
<ul class="legal-content__list">
<li>معالجات الدفع: نشارك البيانات الضرورية فقط لإتمام عمليات الدفع الإلكتروني بشكل آمن، وهذه الجهات ملتزمة بمعايير PCI DSS لأمان البيانات المالية</li>
<li>خدمات الاستضافة: مزود خدمة الاستضافة يستضيف البيانات فقط ولا يملك حق الوصول لمحتواها</li>
<li>الجهات القانونية: قد نضطر للإفصاح عن بيانات في حالة صدور أمر قضائي أو طلب رسمي من جهة حكومية مختصة</li>
</ul>
<p class="legal-content__text">
لا نستخدم بياناتك لأغراض إعلانية ولا نشاركها مع شركات تسويق أو إعلان. كل طرف ثالث نتعامل معه ملزم باتفاقيات صارمة لحماية البيانات.
</p>
</article>
<article class="legal-content__section">
<h2 class="legal-content__heading">حقوق المستخدم</h2>
<p class="legal-content__text">
نحترم حقوقك الكاملة فيما يتعلق ببياناتك الشخصية. يحق لك:
</p>
<ul class="legal-content__list">
<li>حق الوصول: طلب نسخة كاملة من جميع البيانات الشخصية المخزنة لديك في النظام</li>
<li>حق التصحيح: تعديل أو تحديث أي بيانات شخصية غير دقيقة أو قديمة</li>
<li>حق الحذف: طلب حذف بياناتك الشخصية بالكامل من أنظمتنا مع مراعاة الالتزامات القانونية التي قد تتطلب الاحتفاظ ببعض السجلات</li>
<li>حق تصدير البيانات: الحصول على نسخة من بياناتك بتنسيق قابل للقراءة والنقل لاستخدامها مع خدمات أخرى</li>
<li>حق الاعتراض: الاعتراض على معالجة بياناتك لأغراض معينة وسحب موافقتك في أي وقت</li>
<li>حق التقييد: طلب تقييد معالجة بياناتك في حالات محددة مع الإبقاء على تخزينها</li>
</ul>
<p class="legal-content__text">
لممارسة أي من هذه الحقوق، يرجى التواصل معنا عبر القنوات الموضحة أدناه. سنستجيب لطلبك خلال 30 يوم عمل كحد أقصى.
</p>
</article>
<article class="legal-content__section">
<h2 class="legal-content__heading">التواصل</h2>
<p class="legal-content__text">
إذا كانت لديك أي أسئلة أو استفسارات بخصوص سياسة الخصوصية أو كيفية التعامل مع بياناتك، يسعدنا التواصل معك:
</p>
<ul class="legal-content__list">
<li>البريد الإلكتروني: privacy@el-captain.com</li>
<li>الهاتف: تواصل معنا عبر صفحة الاتصال</li>
<li>نموذج الاتصال: يمكنك استخدام <a href="contact.html">صفحة تواصل معنا</a> لإرسال استفسارك</li>
</ul>
<p class="legal-content__text">
فريقنا المختص بحماية البيانات متاح للرد على استفساراتكم خلال أيام العمل من الأحد إلى الخميس، من الساعة 9 صباحا حتى 5 مساء بتوقيت القاهرة.
</p>
</article>
<p class="legal-content__update">آخر تحديث: يوليو 2026</p>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html" class="footer__link">المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="pricing.html" class="footer__link">الباقات والأسعار</a>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<a href="about.html" class="footer__link">من نحن</a>
<a href="faq.html" class="footer__link">الأسئلة الشائعة</a>
<a href="blog.html" class="footer__link">المدونة</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض تجريبي</a>
<a href="https://wa.me/201000000000" class="footer__link" target="_blank">WhatsApp</a>
<a href="terms.html" class="footer__link">الشروط والأحكام</a>
<a href="privacy.html" class="footer__link">سياسة الخصوصية</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<a href="https://wa.me/201000000000" target="_blank" class="whatsapp-fab" aria-label="تواصل عبر WhatsApp">
<svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/robots.txt 0 → 100644
View file @ 067dce8d
User-agent: *
Allow: /
Sitemap: https://el-captain-website.caprover.al-arcade.com/sitemap.xml
public/sitemap.xml 0 → 100644
View file @ 067dce8d
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/index.html</loc>
<priority>1.0</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/features.html</loc>
<priority>0.9</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/pricing.html</loc>
<priority>0.9</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/swimming.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/contact.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/about.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/blog.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/compare.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/changelog.html</loc>
<priority>0.6</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/football.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/martial-arts.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/gymnastics.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/faq.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/terms.html</loc>
<priority>0.4</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/privacy.html</loc>
<priority>0.4</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/partners.html</loc>
<priority>0.7</priority>
</url>
</urlset>
public/terms.html 0 → 100644
View file @ 067dce8d
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<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 لإدارة الأكاديميات الرياضية">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero / Breadcrumb -->
<section class="section" style="padding-block: var(--space-16) var(--space-8); background: var(--surface-secondary);">
<div class="container">
<nav aria-label="مسار التصفح" style="margin-block-end: var(--space-4); font-size: 0.875rem; color: var(--ink-tertiary);">
<a href="/" style="color: var(--ink-tertiary); text-decoration: none;">الرئيسية</a>
<span style="margin-inline: var(--space-2);">/</span>
<span style="color: var(--ink-primary);">الشروط والأحكام</span>
</nav>
<h1 style="font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--ink-primary);">الشروط والأحكام</h1>
<p style="margin-block-start: var(--space-3); color: var(--ink-secondary); font-size: 1.05rem;">آخر تحديث: يوليو 2026</p>
</div>
</section>
<!-- Legal Content -->
<section class="section">
<div class="container" style="max-width: 800px;">
<article class="legal-content" style="font-size: 1rem; line-height: 1.8; color: var(--ink-secondary);">
<p style="margin-block-end: var(--space-8); padding: var(--space-4); background: var(--surface-secondary); border-radius: var(--radius-md); border-inline-start: 4px solid var(--brand-primary);">
باستخدامك لنظام El-Captain فإنك توافق على الشروط والأحكام التالية. يرجى قراءتها بعناية قبل الاشتراك أو استخدام أي من خدماتنا.
</p>
<!-- 1. شروط الاستخدام -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">1. شروط الاستخدام</h2>
<p style="margin-block-end: var(--space-3);">
نظام El-Captain متاح للأكاديميات الرياضية والأندية ومراكز اللياقة البدنية المسجلة قانونياً في جمهورية مصر العربية. يجب أن يكون المستخدم المسؤول عن الحساب شخصاً بالغاً (18 سنة أو أكثر) مخولاً بالتوقيع نيابة عن المنشأة.
</p>
<p style="margin-block-end: var(--space-3);">
يتحمل صاحب الحساب المسؤولية الكاملة عن جميع الأنشطة التي تتم من خلال حسابه، بما في ذلك إدارة صلاحيات المستخدمين الفرعيين. يلتزم المستخدم بالحفاظ على سرية بيانات الدخول وعدم مشاركتها مع أطراف غير مصرح لها.
</p>
<p>
يحق لنا تعليق أو إنهاء الحساب في حالة مخالفة هذه الشروط أو استخدام النظام لأغراض غير مشروعة أو الإضرار بالبنية التحتية للخدمة.
</p>
</div>
<!-- 2. الاشتراك والدفع -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">2. الاشتراك والدفع</h2>
<p style="margin-block-end: var(--space-3);">
يتوفر النظام بخطط اشتراك شهرية وسنوية. تبدأ دورة الفوترة من تاريخ تفعيل الاشتراك ويتم التجديد تلقائياً ما لم يتم الإلغاء قبل انتهاء الدورة الحالية بسبعة (7) أيام على الأقل.
</p>
<p style="margin-block-end: var(--space-3);">
جميع الأسعار المعروضة بالجنيه المصري وتشمل ضريبة القيمة المضافة حيثما ينطبق. يتم الدفع عن طريق التحويل البنكي أو البطاقات الائتمانية أو المحافظ الإلكترونية المعتمدة.
</p>
<p>
في حالة فشل عملية الدفع التلقائي، سيتم إرسال إشعار للمستخدم مع فترة سماح مدتها خمسة (5) أيام عمل. بعد انقضاء فترة السماح دون سداد، قد يتم تقييد الوصول إلى النظام حتى تسوية المبلغ المستحق.
</p>
</div>
<!-- 3. ملكية البيانات -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">3. ملكية البيانات</h2>
<p style="margin-block-end: var(--space-3);">
تظل جميع البيانات التي يدخلها المستخدم (بيانات المشتركين، السجلات المالية، تقارير الحضور، وغيرها) ملكاً حصرياً للأكاديمية أو المنشأة المشتركة. لا يحق لنا استخدام هذه البيانات لأي غرض تجاري خارج نطاق تقديم الخدمة.
</p>
<p style="margin-block-end: var(--space-3);">
نلتزم بتطبيق أعلى معايير حماية البيانات وتشفيرها أثناء النقل والتخزين. يتم الاحتفاظ بنسخ احتياطية يومية تلقائية لضمان عدم فقدان البيانات.
</p>
<p>
يحق للمستخدم في أي وقت طلب نسخة كاملة من بياناته بصيغة قابلة للقراءة (CSV أو JSON)، وسيتم تسليمها خلال خمسة (5) أيام عمل من تاريخ الطلب.
</p>
</div>
<!-- 4. إلغاء الاشتراك -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">4. إلغاء الاشتراك</h2>
<p style="margin-block-end: var(--space-3);">
يمكن للمستخدم إلغاء اشتراكه في أي وقت من خلال لوحة التحكم أو بالتواصل مع فريق الدعم. يسري الإلغاء في نهاية دورة الفوترة الحالية، ويظل بإمكان المستخدم الوصول إلى النظام حتى ذلك التاريخ.
</p>
<p style="margin-block-end: var(--space-3);">
عند الإلغاء، يحق للمستخدم طلب تصدير جميع بياناته خلال ثلاثين (30) يوماً من تاريخ انتهاء الاشتراك. بعد هذه المدة، سيتم حذف البيانات نهائياً من خوادمنا وفقاً لسياسة الاحتفاظ بالبيانات.
</p>
<p>
لا يتم رد المبالغ المدفوعة عن الفترة المتبقية من الاشتراك السنوي إلا في حالات الإخلال الجوهري من طرفنا بالتزامات تقديم الخدمة.
</p>
</div>
<!-- 5. حدود المسؤولية -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">5. حدود المسؤولية</h2>
<p style="margin-block-end: var(--space-3);">
يُقدَّم النظام "كما هو" ونسعى لتحقيق نسبة تشغيل لا تقل عن 99.5% شهرياً. في حالة حدوث أعطال تتجاوز هذا الحد، يحق للمستخدم الحصول على تعويض نسبي من رسوم الاشتراك.
</p>
<p style="margin-block-end: var(--space-3);">
لا نتحمل المسؤولية عن أي خسائر مباشرة أو غير مباشرة ناتجة عن انقطاع الخدمة لأسباب خارجة عن إرادتنا، بما في ذلك أعطال مزودي الاستضافة، أو هجمات إلكترونية، أو قرارات حكومية.
</p>
<p>
تقتصر مسؤوليتنا القصوى في جميع الأحوال على المبلغ المدفوع من المستخدم خلال الأشهر الثلاثة السابقة لتاريخ المطالبة.
</p>
</div>
<!-- 6. القانون الحاكم -->
<div style="margin-block-end: var(--space-10);">
<h2 style="font-size: 1.35rem; font-weight: 700; color: var(--ink-primary); margin-block-end: var(--space-4);">6. القانون الحاكم</h2>
<p style="margin-block-end: var(--space-3);">
تخضع هذه الشروط والأحكام لقوانين جمهورية مصر العربية وتُفسَّر وفقاً لها. في حالة نشوء أي نزاع يتعلق بهذه الاتفاقية، يتم اللجوء أولاً إلى التسوية الودية خلال ثلاثين (30) يوماً.
</p>
<p>
في حالة عدم التوصل إلى تسوية ودية، تختص المحاكم الاقتصادية في القاهرة بالفصل في النزاع. يقر الطرفان بأن اللغة العربية هي اللغة المعتمدة لتفسير هذه الاتفاقية.
</p>
</div>
<!-- Contact -->
<div style="padding: var(--space-6); background: var(--surface-secondary); border-radius: var(--radius-md); text-align: center;">
<p style="color: var(--ink-primary); font-weight: 600; margin-block-end: var(--space-2);">لديك استفسار حول الشروط والأحكام؟</p>
<p style="margin-block-end: var(--space-4);">فريقنا القانوني جاهز للإجابة على أي تساؤلات.</p>
<a href="contact.html" style="display: inline-block; padding: var(--space-3) var(--space-6); background: var(--brand-primary); color: #fff; border-radius: var(--radius-md); text-decoration: none; font-weight: 600;">تواصل معنا</a>
</div>
</article>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من تسجيل المشترك حتى التقارير المالية الشهرية.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="features.html#members" class="footer__link">العضويات</a>
<a href="features.html#sports" class="footer__link">الأنشطة الرياضية</a>
<a href="features.html#pool" class="footer__link">حمامات السباحة</a>
<a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script>
</body>
</html>
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