Skip to content

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

Major site overhaul: new homepage, FAQ, P0 marketing fixes 

- Homepage: rewrite with Problem/Why/Before-After/Trust sections
- Pricing FAQ: replace 8 questions with comprehensive 14-question FAQ
- Remove "bank-level security" claim, fix trial days to 14
- Reframe 250K value anchor as "traditional purchase cost"
- Remove superlative claims (أقوى) from sport pages
- Update faq.html trial reference
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent e62f40cc
Hide whitespace changes
Inline Side-by-side
Showing with 517 additions and 132 deletions
public/css/home.css
View file @ 8f81e99b
/* ============================================================
El Captain — Homepage
Simple. Coherent. Normal proportions. Hero with image.
Hero · Problem · Why Us · Before/After · Trust · Showcase · CTA
============================================================ */
/* --- Hero -------------------------------------------------------- */
.hero {
padding-block: calc(var(--nav-height) + 3rem) 3rem;
padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-2xl);
}
.hero > .container {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 3rem;
gap: var(--space-2xl);
align-items: center;
}
.hero__content h1 {
font-size: 2rem;
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1.3;
line-height: 1.25;
color: var(--ink-primary);
margin-block-end: 0.875rem;
margin-block-end: var(--space-md);
}
.hero__content p {
font-size: 1rem;
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.7;
margin-block-end: 1.5rem;
max-width: 44ch;
line-height: var(--leading-relaxed);
margin-block-end: var(--space-lg);
max-width: 48ch;
}
.hero__actions {
display: flex;
gap: 0.75rem;
gap: var(--space-sm);
flex-wrap: wrap;
}
.hero__image {
border-radius: 10px;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
box-shadow: var(--shadow-lg);
}
.hero__image img {
......@@ -54,10 +54,10 @@
@media (max-width: 768px) {
.hero > .container {
grid-template-columns: 1fr;
gap: 2rem;
gap: var(--space-xl);
}
.hero__content h1 {
font-size: 1.625rem;
font-size: var(--text-3xl);
}
.hero__image {
max-width: 500px;
......@@ -65,102 +65,337 @@
}
/* --- Features ---------------------------------------------------- */
/* --- Problem Section --------------------------------------------- */
.features {
padding-block: 3.5rem;
.problem {
padding-block: var(--space-section);
background: var(--bg-muted);
}
.features h2 {
font-size: 1.5rem;
.problem h2 {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: 2rem;
margin-block-end: var(--space-xl);
text-align: center;
}
.problem__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-md);
max-width: 900px;
margin-inline: auto;
}
.problem__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
text-align: center;
transition: box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.problem__item:hover {
border-color: var(--color-error);
box-shadow: 0 2px 12px rgba(185, 28, 28, 0.08);
}
.features__grid {
.problem__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-error-bg);
color: var(--color-error);
display: grid;
place-items: center;
flex-shrink: 0;
}
.problem__item span {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
@media (max-width: 900px) {
.problem__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 520px) {
.problem__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Why Us Section ---------------------------------------------- */
.why-us {
padding-block: var(--space-section);
}
.why-us h2 {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: var(--space-xl);
text-align: center;
}
.why-us__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
gap: var(--space-lg);
}
.feature {
padding: 1.25rem;
.why-us__card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
transition: box-shadow 200ms ease, border-color 200ms ease;
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);
}
.feature:hover {
border-color: var(--color-accent);
box-shadow: 0 2px 12px rgba(8, 145, 178, 0.08);
.why-us__card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.feature__icon {
width: 2.25rem;
height: 2.25rem;
.why-us__card-icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
border-radius: 8px;
color: var(--color-accent);
display: grid;
place-items: center;
margin-block-end: 0.875rem;
color: var(--color-accent);
margin-block-end: var(--space-md);
}
.feature h3 {
font-size: 0.9375rem;
.why-us__card h3 {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 0.375rem;
margin-block-end: var(--space-xs);
}
.feature p {
font-size: 0.8125rem;
.why-us__card p {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
line-height: var(--leading-relaxed);
max-width: none;
}
@media (max-width: 900px) {
.features__grid { grid-template-columns: repeat(2, 1fr); }
.why-us__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.features__grid { grid-template-columns: 1fr; }
.why-us__grid {
grid-template-columns: 1fr;
}
}
/* --- Before / After Section -------------------------------------- */
.before-after {
padding-block: var(--space-section);
background: var(--bg-muted);
}
.before-after h2 {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: var(--space-xl);
text-align: center;
}
.before-after__table {
max-width: 700px;
margin-inline: auto;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.before-after__header {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--color-primary);
}
.before-after__label {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-sm);
font-weight: 700;
text-align: center;
color: var(--ink-on-dark);
}
.before-after__label--before {
background: rgba(185, 28, 28, 0.15);
}
.before-after__label--after {
background: rgba(16, 135, 90, 0.15);
}
.before-after__row {
display: grid;
grid-template-columns: 1fr 1fr;
border-block-start: 1px solid var(--border-subtle);
}
.before-after__cell {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-sm);
font-weight: 500;
text-align: center;
line-height: var(--leading-snug);
}
.before-after__cell--before {
color: var(--color-error);
background: rgba(185, 28, 28, 0.03);
}
.before-after__cell--after {
color: var(--color-success);
background: rgba(16, 135, 90, 0.03);
font-weight: 600;
}
@media (max-width: 520px) {
.before-after__cell,
.before-after__label {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-xs);
}
}
/* --- Trust Section ----------------------------------------------- */
.trust {
padding-block: var(--space-section);
}
.trust h2 {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: var(--space-xl);
text-align: center;
}
.trust__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: 900px;
margin-inline: auto;
}
.trust__item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.trust__item:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.trust__item-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.trust__item span {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
@media (max-width: 768px) {
.trust__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.trust__grid {
grid-template-columns: 1fr;
}
}
/* --- Showcase ---------------------------------------------------- */
.showcase {
padding-block: 3.5rem;
padding-block: var(--space-section);
background: var(--bg-muted);
}
.showcase h2 {
font-size: 1.5rem;
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: 1.5rem;
margin-block-end: var(--space-xl);
text-align: center;
}
.showcase__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
gap: var(--space-md);
}
.showcase__grid figure {
margin: 0;
border-radius: 8px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
transition: box-shadow 200ms ease;
transition: box-shadow var(--duration-normal) var(--ease-out);
}
.showcase__grid figure:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
box-shadow: var(--shadow-md);
}
.showcase__grid img {
......@@ -170,44 +405,46 @@
}
.showcase__grid figcaption {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-secondary);
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 600px) {
.showcase__grid { grid-template-columns: 1fr; }
.showcase__grid {
grid-template-columns: 1fr;
}
}
/* --- CTA --------------------------------------------------------- */
.cta {
padding-block: 3.5rem;
padding-block: var(--space-section);
background: var(--color-primary);
text-align: center;
}
.cta h2 {
font-size: 1.5rem;
font-size: var(--text-3xl);
font-weight: 800;
color: #fff;
margin-block-end: 0.5rem;
margin-block-end: var(--space-sm);
}
.cta > .container > p {
font-size: 0.9375rem;
font-size: var(--text-lg);
color: rgba(255,255,255,0.75);
margin-block-end: 1.5rem;
margin-block-end: var(--space-xl);
max-width: none;
}
.cta__actions {
display: flex;
justify-content: center;
gap: 0.75rem;
gap: var(--space-sm);
flex-wrap: wrap;
}
......@@ -218,13 +455,26 @@
border-color: #fff;
box-shadow: none;
}
.cta .btn--primary:hover {
background: var(--bg-muted);
color: var(--color-primary);
}
/* Override secondary button on dark CTA */
.cta .btn--secondary {
color: #fff;
border-color: rgba(255,255,255,0.4);
}
.cta .btn--secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.7);
color: #fff;
}
/* --- Footer ------------------------------------------------------ */
/* --- Footer (page-level overrides) ------------------------------- */
.footer {
padding-block: 2.5rem 1.5rem;
......
public/faq.html
View file @ 8f81e99b
......@@ -259,7 +259,7 @@
هل يوجد فترة تجريبية مجانية؟
</summary>
<div class="faq-item__answer">
<p>نعم، 10 أيام تجريبية مجانية لكل الباقات بدون بطاقة ائتمان.</p>
<p>نعم، 14 يوم تجريبية مجانية لكل الباقات بدون بطاقة ائتمان.</p>
</div>
</details>
......
public/football.html
View file @ 8f81e99b
......@@ -783,7 +783,7 @@
<!-- Grid Feature Details -->
<div class="football-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="football-feature__text">
<h2>أقوى نظام لإدارة الملاعب في السوق</h2>
<h2>نظام متطور لإدارة الملاعب</h2>
<p>صُمم هذا النظام من الصفر لحل مشكلة التضارب. كل ملعب في أكاديميتك له خانة في الشبكة. كل فترة زمنية لها صف. اضغط أو اسحب لتخصيص المجموعة — والنظام يمنع أي تعارض فوراً.</p>
<div class="grid-features">
<div class="grid-feature-item">
......
public/index.html
View file @ 8f81e99b
......@@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain — نظام إدارة الأكاديميات الرياضية</title>
<meta name="description" content="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن.">
<meta name="description" content="منصة تشغيل رقمية تجمع الإدارة، المالية، التشغيل وتجربة اللاعبين وأولياء الأمور في مكان واحد.">
<meta property="og:title" content="El-Captain — نظام إدارة الأكاديميات الرياضية">
<meta property="og:description" content="نظام ERP متكامل للأكاديميات الرياضية: مشتركين، مالية، حضور، جداول، مخازن. كل اللي أكاديميتك محتاجاه في مكان واحد.">
<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">
......@@ -46,11 +46,11 @@
<section class="hero">
<div class="container">
<div class="hero__content">
<h1>نظام إدارة متكامل للأكاديميات الرياضية</h1>
<p>سجّل المشتركين، تابع الحضور، أصدر الفواتير، ونظّم الجداول — كل ده من مكان واحد. مبني بالعربي للسوق المصري.</p>
<h1>كبّر أكاديميتك بدون ما تكبر الفوضى معاها</h1>
<p>منصة تشغيل رقمية تجمع الإدارة، المالية، التشغيل وتجربة اللاعبين وأولياء الأمور في مكان واحد.</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary">جرّب مجاناً 10 أيام</a>
<a href="features.html" class="btn btn--secondary">اعرف أكتر</a>
<a href="contact.html" class="btn btn--primary">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary">شاهد كيف يعمل</a>
</div>
</div>
<div class="hero__image">
......@@ -59,52 +59,166 @@
</div>
</section>
<!-- Features -->
<section class="features">
<!-- Problem Section -->
<section class="problem">
<div class="container">
<h2>كل اللي أكاديميتك محتاجاه</h2>
<div class="features__grid">
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" 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>
<h2>هل أكاديميتك لسّه بتعتمد على...</h2>
<div class="problem__grid">
<div class="problem__item">
<div class="problem__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<h3>إدارة المشتركين</h3>
<p>ملفات كاملة، أولياء أمور، تصنيفات، وسجل نشاط لكل مشترك.</p>
<span>Excel ودفاتر</span>
</div>
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
<div class="problem__item">
<div class="problem__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<h3>المالية والفواتير</h3>
<p>فواتير تلقائية، أقساط، محافظ إلكترونية، وقيد مزدوج.</p>
<span>WhatsApp للمتابعة</span>
</div>
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 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 class="problem__item">
<div class="problem__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<h3>الحضور والغياب</h3>
<p>تسجيل من الموبايل، حساب التأخير، وتنبيهات للغياب المتكرر.</p>
<span>حضور يدوي</span>
</div>
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" 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 class="problem__item">
<div class="problem__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<h3>الجداول والبرامج</h3>
<p>جدول أسبوعي، مجموعات، حصص تلقائية، وتعيين المدربين.</p>
<span>جداول متعارضة</span>
</div>
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
<div class="problem__item">
<div class="problem__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<h3>المخازن</h3>
<p>تتبع المنتجات، حركات الإدخال والصرف، جرد، وأوامر شراء.</p>
<span>حسابات منفصلة</span>
</div>
<div class="feature">
<div class="feature__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
</div>
</div>
</section>
<!-- Why El-Captain -->
<section class="why-us">
<div class="container">
<h2>لماذا الأكاديميات تختار El-Captain؟</h2>
<div class="why-us__grid">
<div class="why-us__card">
<div class="why-us__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"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<h3>رؤية كاملة</h3>
<p>اعرف ما يحدث في الأكاديمية لحظة بلحظة</p>
</div>
<div class="why-us__card">
<div class="why-us__card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<h3>تحكم مالي</h3>
<p>تابع التحصيلات والمصروفات والاشتراكات والمديونيات</p>
</div>
<div class="why-us__card">
<div class="why-us__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>تجربة أفضل لولي الأمر</h3>
<p>حضور، مدفوعات، جداول وإشعارات</p>
</div>
<div class="why-us__card">
<div class="why-us__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"/></svg>
</div>
<h3>الموارد البشرية</h3>
<p>بيانات الموظفين، المدربين، حساب المرتبات، والتقييمات.</p>
<h3>إدارة الموارد</h3>
<p>ملاعب، حارات، منشآت وجداول بدون تعارض</p>
</div>
<div class="why-us__card">
<div class="why-us__card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>جاهز للنمو</h3>
<p>إدارة أكثر من فرع من منصة واحدة</p>
</div>
</div>
</div>
</section>
<!-- Before / After -->
<section class="before-after">
<div class="container">
<h2>قبل وبعد El-Captain</h2>
<div class="before-after__table">
<div class="before-after__header">
<span class="before-after__label before-after__label--before">قبل</span>
<span class="before-after__label before-after__label--after">بعد</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">Excel ودفاتر</span>
<span class="before-after__cell before-after__cell--after">نظام مركزي</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">حضور يدوي</span>
<span class="before-after__cell before-after__cell--after">حضور رقمي</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">متابعة عبر WhatsApp</span>
<span class="before-after__cell before-after__cell--after">إشعارات تلقائية</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">جداول متعارضة</span>
<span class="before-after__cell before-after__cell--after">كشف تعارض تلقائي</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">حسابات منفصلة</span>
<span class="before-after__cell before-after__cell--after">مالية متكاملة</span>
</div>
<div class="before-after__row">
<span class="before-after__cell before-after__cell--before">لا تعرف الأداء</span>
<span class="before-after__cell before-after__cell--after">Dashboard لحظي</span>
</div>
</div>
</div>
</section>
<!-- Trust Section -->
<section class="trust">
<div class="container">
<h2>لماذا تثق في El-Captain؟</h2>
<div class="trust__grid">
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><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>
<span>مصمم للسوق المصري والعربي</span>
</div>
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" 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>
<span>دعم فني بالعربي</span>
</div>
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
</div>
<span>نسخ احتياطي يومي</span>
</div>
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</div>
<span>صلاحيات دقيقة</span>
</div>
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" 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>
<span>Audit Log</span>
</div>
<div class="trust__item">
<div class="trust__item-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<span>تحديثات مستمرة</span>
</div>
</div>
</div>
......@@ -139,13 +253,10 @@
<section class="cta">
<div class="container">
<h2>ابدأ تجربتك المجانية</h2>
<p>10 أيام كاملة. بدون بطاقة ائتمان. بدون التزام.</p>
<p>14 يوم كاملة. بدون بطاقة ائتمان. بدون التزام.</p>
<div class="cta__actions">
<a href="contact.html" class="btn btn--primary btn--lg">ابدأ دلوقتي</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--whatsapp" target="_blank" rel="noopener">
<svg width="18" height="18" 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>
<a href="contact.html" class="btn btn--primary btn--lg">احجز عرض تجريبي مجاني</a>
<a href="contact.html" class="btn btn--secondary btn--lg">اسأل خبيرًا</a>
</div>
</div>
</section>
......
public/martial-arts.html
View file @ 8f81e99b
......@@ -764,7 +764,7 @@
<!-- Belt Feature Details -->
<div class="ma-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="ma-feature__text">
<h2>أقوى نظام لمتابعة تقدم اللاعبين</h2>
<h2>نظام متطور لمتابعة تقدم اللاعبين</h2>
<p>صُمم هذا النظام من الصفر لحل مشكلة فوضى الأحزمة. كل لاعب له مسار واضح من الحزام الأبيض حتى الأسود. النظام يتابع الحضور والمدة الزمنية ويحدد تلقائياً من يستحق الامتحان.</p>
<div class="grid-features">
<div class="grid-feature-item">
......
public/pricing.html
View file @ 8f81e99b
......@@ -4,7 +4,7 @@
<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 لإدارة الأكاديميات الرياضية. 3 خطط حسب حجم أكاديميتك — اشتراك شهري ثابت + نسبة تشغيل بسيطة. فترة تجريبية 10 أيام مجانية.">
<meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 3 خطط حسب حجم أكاديميتك — اشتراك شهري ثابت + نسبة تشغيل بسيطة. فترة تجريبية 14 يوم مجانية.">
<meta property="og:title" content="الباقات والأسعار - El-Captain">
<meta property="og:description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 3 خطط حسب حجم أكاديميتك — اشتراك شهري ثابت + نسبة تشغيل بسيطة. أوائل المشتركين يقفلون على السعر للأبد.">
<meta property="og:type" content="website">
......@@ -494,7 +494,7 @@
<!-- Value Frame Banner -->
<div class="value-frame" data-reveal>
<div class="value-frame__headline">سعر النظام ٢٥٠,٠٠٠ ج.م — أول ٣٠ مشترك يبدأوا برسوم الدعم والاستضافة فقط</div>
<div class="value-frame__headline">القيمة التقديرية للنظام عند الشراء التقليدي ٢٥٠,٠٠٠ ج.م — مع El-Captain تبدأ باشتراك بسيط فقط</div>
<div class="value-frame__sub">ابدأ بنسبة تشغيل فقط (٠ ج.م شهرياً) أو اختار باقة ثابتة بنسبة أقل كلما كبرت</div>
<div class="value-frame__early">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
......@@ -827,7 +827,7 @@
<td>7 أيام</td>
<td>7 أيام</td>
<td class="featured-col">14 يوم</td>
<td>10 أيام</td>
<td>14 يوم</td>
</tr>
<tr>
<td>اشتراك سنوي (١٠ شهور)</td>
......@@ -907,7 +907,7 @@
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>SSL + تشفير البيانات</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">أمان على مستوى البنوك</span></div>
<div><strong>حماية متقدمة للبيانات</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">تشفير، نسخ احتياطي، وصلاحيات دقيقة</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
......@@ -925,41 +925,65 @@
<section class="section section--muted">
<div class="container" style="max-width: 800px;">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">أسئلة شائعة عن التسعير</h2>
<h2 class="section-header__title">أسئلة شائعة</h2>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-md);" data-reveal="200">
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هي "نسبة التشغيل" بالضبط؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نسبة بسيطة تُحسب من إجمالي المدفوعات التي تحصّلها عبر النظام (اشتراكات اللاعبين، مبيعات المنتجات، إلخ). هي رسوم تشغيل تغطي تكاليف الاستضافة والصيانة والتطوير المستمر. مثلاً: إذا حصّلت 100,000 ج.م في الشهر على الباقة المتوسطة (5%)، تكون نسبة التشغيل 5,000 ج.م فقط.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يمكنني نقل بيانات الأكاديمية الحالية إلى النظام؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يمكنكم تزويدنا بالبيانات الحالية بأي صيغة إلكترونية متاحة، مثل Excel أو CSV، وسيقوم فريقنا بمراجعتها وتجهيزها ورفعها إلى النظام. نحن نحرص على تقديم الدعم الكامل خلال مرحلة الانتقال.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يتم تقديم الدعم الفني؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يوفر فريق الدعم الفني المساندة المستمرة، مع إعطاء الأولوية للمشكلات التي تؤثر بشكل مباشر على العمليات الأساسية للأكاديمية.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كم يستغرق تجهيز وتشغيل حساب الأكاديمية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">عند توفر البيانات بصورة إلكترونية ومنظمة، يمكن تجهيز الحساب خلال ساعة. وتختلف المدة بحسب حجم البيانات ومدى جاهزيتها.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحصل على تحديثات النظام الجديدة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. يتم تطوير النظام بصورة مستمرة، وعند إطلاق تحديثات عامة يتم إتاحتها للمشتركين وفقًا لشروط الباقة.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني طلب تطوير أو تخصيص خاص للنظام؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. المشتركون في الباقات السنوية مثل Professional يمكنهم طلب تحسينات ضمن نطاق الوظائف الأساسية. التخصيصات الخاصة يتم تقييمها فنيًا وتجاريًا بشكل مستقل.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد حد أقصى لعدد اللاعبين؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا نضع حدًا مصطنعًا لعدد اللاعبين. يتم تحديد حدود الاستخدام وفقًا للبنية التحتية والباقة المتعاقد عليها. النظام ينمو مع نمو الأكاديمية.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كم عدد الفروع التي يمكنني إدارتها؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يمكن للنظام دعم إدارة عدة فروع من خلال منصة واحدة، مع متابعة البيانات والعمليات وفق الصلاحيات المعتمدة.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف أختار الباقة المناسبة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">ابدأ بـ "نسبة تشغيل فقط" لو مش عايز اشتراك شهري ثابت، أو اختار Starter / Enterprise / Professional حسب حجمك وتحصيلاتك. كلما زادت الباقة، قلّت نسبة التشغيل — استخدم الحاسبة أدناه لتعرف الأوفر لحالتك.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل بيانات الأكاديمية ملك لنا؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. بيانات الأكاديمية تظل تحت ملكيتها وفقًا للعقد. يمكن تصدير البيانات بصيغ متعددة في أي وقت.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل فيه باقة مجانية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا يوجد باقة مجانية، لكن كل الباقات فيها 14 يوم تجربة مجانية كاملة بدون أي التزام (Enterprise 30 يوم). بعد التجربة تختار الباقة اللي تناسبك.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكن تحديد صلاحيات مختلفة لكل مستخدم؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. يمكن إنشاء مستخدمين متعددين وتحديد الصلاحيات لكل دور: مدير الأكاديمية، مدير الفرع، المحاسب، المدرب، موظف الاستقبال.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هو عرض "أوائل المشتركين"؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">أوائل المشتركين (أول ٣٠ أكاديمية) يقفلون على السعر الحالي للأبد — حتى لو زادت الأسعار لاحقاً. السعر المعروض اليوم هو سعرك الدائم.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يتم تدريب فريق الأكاديمية على استخدام النظام؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. نساعد فريق الأكاديمية خلال مرحلة التشغيل على فهم النظام واستخدام الوظائف الأساسية مع تقديم الدعم خلال فترة الانتقال.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل الاشتراك السنوي أوفر؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الاشتراك السنوي يوفر لك ما يعادل شهرين أو أكثر مقارنة بالدفع الشهري. بالإضافة لدومين خاص مجاني لموقع أكاديميتك.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث إذا أردنا التوسع مستقبلًا؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">النظام مصمم ليواكب نمو الأكاديمية. يمكنكم إضافة لاعبين وفروع وعمليات جديدة دون الحاجة لتغيير النظام.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث بعد انتهاء الفترة التجريبية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بعد انتهاء الفترة التجريبية (14 يوم أو 30 يوم لـ Enterprise)، يتوقف النظام مؤقتاً حتى تفعّل الاشتراك. بياناتك تبقى محفوظة ولا تُحذف — يمكنك العودة في أي وقت.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكن ربط النظام بأجهزة أخرى؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. النظام قابل للتكامل مع أجهزة البصمة والبوابات الإلكترونية وفق الإمكانيات المتاحة.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحتاج أجهزة خاصة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل ويعمل من أي متصفح (كمبيوتر، تابلت، موبايل). لا حاجة لسيرفرات أو تثبيت برامج. والنظام ينشئ لك موقع إلكتروني تلقائياً عند التفعيل.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يتم تأمين بيانات الأكاديمية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعتمد على إدارة صلاحيات الوصول، حماية حسابات المستخدمين، تشفير البيانات، النسخ الاحتياطي اليومي، ومراقبة العمليات. يتم تطوير إجراءات الحماية بصورة مستمرة.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني التنقل بين الباقات؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الترقية فورية والتخفيض يبدأ من الشهر القادم. لا فقد لأي بيانات في كلا الحالتين.</p>
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث إذا قررنا إيقاف الاشتراك؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">تتم إجراءات إنهاء الاشتراك وفق الشروط المتفق عليها. بياناتكم تبقى متاحة للتصدير. العلاقة واضحة وشفافة منذ البداية.</p>
</div>
</div>
</div>
......
public/swimming.html
View file @ 8f81e99b
......@@ -749,7 +749,7 @@
<!-- Grid Feature Details -->
<div class="swim-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="swim-feature__text">
<h2>أقوى نظام لإدارة المساحات في السوق</h2>
<h2>نظام متطور لإدارة المساحات</h2>
<p>صُمم هذا النظام من الصفر لحل مشكلة التضارب. كل حارة في حمام السباحة لها خانة في الشبكة. كل فترة زمنية لها صف. اضغط أو اسحب لتخصيص المجموعة — والنظام يمنع أي تعارض فوراً.</p>
<div class="grid-features">
<div class="grid-feature-item">
......
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