Skip to content

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

Full rewrite of football page + fix nav to include all sport links 

Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 5b6b0405
Hide whitespace changes
Inline Side-by-side
Showing with 1150 additions and 587 deletions
public/football.html
View file @ aa4a9412
......@@ -3,8 +3,8 @@
<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 يحل مشكلة تنظيم الفئات العمرية وجداول الملاعب وتتبع حضور اللاعبين. نظام ذكي يدير أكاديمية كرة القدم بالكامل.">
<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">
......@@ -15,37 +15,38 @@
Football Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Sport Hero — football pitch-inspired background */
.sport-hero {
/* Football Hero — pitch-inspired background */
.pitch-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 40%, var(--bg-body) 100%);
background: linear-gradient(180deg, #dcfce7 0%, #f0fdf4 40%, var(--bg-body) 100%);
}
.sport-hero::before {
.pitch-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);
linear-gradient(rgba(22, 163, 74, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(22, 163, 74, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.sport-hero::after {
/* Grass texture effect in background */
.pitch-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%);
background: radial-gradient(ellipse at 50% 100%, rgba(22, 163, 74, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.sport-hero__inner {
.pitch-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
......@@ -55,30 +56,30 @@
}
@media (max-width: 900px) {
.sport-hero__inner {
.pitch-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.sport-hero__actions {
.pitch-hero__actions {
justify-content: center;
}
}
.sport-hero__eyebrow {
.pitch-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);
background: rgba(22, 163, 74, 0.08);
border: 1px solid rgba(22, 163, 74, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: #2E7D32;
color: #15803d;
margin-bottom: var(--space-md);
}
.sport-hero__title {
.pitch-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
......@@ -86,12 +87,12 @@
margin-bottom: var(--space-md);
}
.sport-hero__title-accent {
color: #2E7D32;
.pitch-hero__title-accent {
color: #16a34a;
position: relative;
}
.sport-hero__desc {
.pitch-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
......@@ -99,20 +100,20 @@
margin-bottom: var(--space-xl);
}
.sport-hero__actions {
.pitch-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Football Specific */
.sport-pain__grid {
.football-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.sport-pain-card {
.football-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
......@@ -123,13 +124,13 @@
transition: all 0.3s ease;
}
.sport-pain-card:hover {
.football-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.sport-pain-card::before {
.football-pain-card::before {
content: '';
position: absolute;
top: 0;
......@@ -140,7 +141,7 @@
border-radius: 0 4px 4px 0;
}
.sport-pain-card__icon {
.football-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
......@@ -152,46 +153,167 @@
font-size: 1.5rem;
}
.sport-pain-card__title {
.football-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.sport-pain-card__text {
.football-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Pitch Grid Visualization */
.pitch-grid {
display: grid;
gap: 3px;
background: var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
padding: 3px;
border: 1px solid var(--border-subtle);
}
.pitch-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.pitch-grid__cell {
aspect-ratio: 1.5;
background: var(--bg-surface);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 600;
color: var(--ink-muted);
transition: all 0.2s ease;
min-height: 48px;
padding: var(--space-xs);
text-align: center;
}
.pitch-grid__cell--occupied {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
border: 1px solid rgba(22, 163, 74, 0.3);
}
.pitch-grid__cell--conflict {
background: var(--color-error-bg);
color: var(--color-error);
border: 1px solid rgba(185, 28, 28, 0.3);
animation: conflict-pulse 2s ease-in-out infinite;
}
.pitch-grid__cell--available {
background: var(--color-success-bg);
color: var(--color-success);
}
@keyframes conflict-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Pitch Schedule Mini-Visualization */
.pitch-schedule {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-muted);
border-radius: var(--radius-lg);
padding: var(--space-md);
border: 1px solid var(--border-subtle);
}
.pitch-schedule__row {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-sm);
align-items: center;
}
.pitch-schedule__time {
font-size: var(--text-xs);
font-weight: 600;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
direction: ltr;
text-align: center;
}
.pitch-schedule__block {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pitch-schedule__block--u8 {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
border: 1px solid rgba(22, 163, 74, 0.25);
}
.pitch-schedule__block--u12 {
background: rgba(27, 43, 75, 0.08);
color: var(--color-primary);
border: 1px solid rgba(27, 43, 75, 0.2);
}
.pitch-schedule__block--u16 {
background: rgba(201, 149, 43, 0.08);
color: var(--color-gold-dark);
border: 1px solid rgba(201, 149, 43, 0.25);
}
.pitch-schedule__block--first {
background: rgba(139, 92, 246, 0.08);
color: #7c3aed;
border: 1px solid rgba(139, 92, 246, 0.25);
}
.pitch-schedule__block--empty {
background: var(--bg-surface);
color: var(--ink-placeholder);
border: 1px dashed var(--border-default);
}
/* Feature Highlight Section */
.sport-feature {
.football-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.sport-feature--reverse {
.football-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.sport-feature--reverse .sport-feature__visual {
.football-feature--reverse .football-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.sport-feature,
.sport-feature--reverse {
.football-feature,
.football-feature--reverse {
grid-template-columns: 1fr;
}
.sport-feature--reverse .sport-feature__visual {
.football-feature--reverse .football-feature__visual {
order: 0;
}
}
.sport-feature__text h2 {
.football-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
......@@ -199,15 +321,61 @@
line-height: 1.3;
}
.sport-feature__text p {
.football-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Squad Cards */
.squad-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: var(--space-md);
}
.squad-card {
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
text-align: center;
transition: all 0.2s ease;
}
.squad-card:hover {
border-color: #16a34a;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.squad-card__icon {
width: 3rem;
height: 3rem;
margin: 0 auto var(--space-md);
border-radius: var(--radius-md);
background: rgba(22, 163, 74, 0.08);
color: #16a34a;
display: grid;
place-items: center;
}
.squad-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.squad-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
}
/* Comparison Before/After */
.sport-comparison {
.football-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
......@@ -215,52 +383,52 @@
}
@media (max-width: 768px) {
.sport-comparison {
.football-comparison {
grid-template-columns: 1fr;
}
.sport-comparison__arrow {
.football-comparison__arrow {
transform: rotate(90deg);
}
}
.sport-comparison__before,
.sport-comparison__after {
.football-comparison__before,
.football-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.sport-comparison__before {
.football-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.sport-comparison__after {
.football-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.sport-comparison__arrow {
.football-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
color: #16a34a;
font-weight: 800;
}
.sport-comparison__title {
.football-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.sport-comparison__before .sport-comparison__title {
.football-comparison__before .football-comparison__title {
color: var(--color-error);
}
.sport-comparison__after .sport-comparison__title {
.football-comparison__after .football-comparison__title {
color: var(--color-success);
}
.sport-comparison__list {
.football-comparison__list {
list-style: none;
padding: 0;
margin: 0;
......@@ -269,7 +437,7 @@
gap: var(--space-sm);
}
.sport-comparison__list li {
.football-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
......@@ -278,7 +446,7 @@
gap: var(--space-xs);
}
.sport-comparison__list li::before {
.football-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
......@@ -287,16 +455,16 @@
flex-shrink: 0;
}
.sport-comparison__before .sport-comparison__list li::before {
.football-comparison__before .football-comparison__list li::before {
background: var(--color-error);
}
.sport-comparison__after .sport-comparison__list li::before {
.football-comparison__after .football-comparison__list li::before {
background: var(--color-success);
}
/* Stats banner */
.sport-stats {
.football-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
......@@ -306,49 +474,49 @@
color: var(--ink-on-dark);
}
.sport-stat {
.football-stat {
text-align: center;
}
.sport-stat__number {
.football-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
color: #86efac;
line-height: 1;
margin-bottom: var(--space-2xs);
}
.sport-stat__label {
.football-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section — Football */
.sport-cta {
.football-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #E8F5E9 100%);
background: linear-gradient(180deg, var(--bg-body) 0%, #dcfce7 100%);
position: relative;
}
.sport-cta::before {
.football-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, #2E7D32 50%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, #16a34a 50%, transparent 90%);
opacity: 0.3;
}
.sport-cta__title {
.football-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.sport-cta__desc {
.football-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
......@@ -356,7 +524,7 @@
line-height: 1.8;
}
.sport-cta__actions {
.football-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
......@@ -382,7 +550,7 @@
}
.grid-feature-item:hover {
border-color: var(--border-accent);
border-color: #16a34a;
box-shadow: var(--shadow-sm);
}
......@@ -390,8 +558,8 @@
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
background: rgba(22, 163, 74, 0.08);
color: #16a34a;
display: grid;
place-items: center;
flex-shrink: 0;
......@@ -418,6 +586,47 @@
color: var(--ink-secondary);
line-height: 1.6;
}
/* Screenshots dual */
.screenshots-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
@media (max-width: 768px) {
.screenshots-dual {
grid-template-columns: 1fr;
}
}
/* Sport Notice */
.sport-notice {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-xl);
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.15);
border-radius: var(--radius-xl);
margin-top: var(--space-2xl);
}
.sport-notice__icon {
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.sport-notice__text {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
}
.sport-notice__text strong {
color: var(--ink-primary);
}
</style>
</head>
<body>
......@@ -449,25 +658,25 @@
</nav>
<!-- Hero -->
<section class="sport-hero">
<section class="pitch-hero">
<div class="container">
<div class="sport-hero__inner">
<div class="pitch-hero__inner">
<div data-reveal>
<span class="sport-hero__eyebrow">
<span class="pitch-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">
<h1 class="pitch-hero__title">أكاديمية كرة قدم محترفة تحتاج نظام <span class="pitch-hero__title-accent">يفهم الملاعب والمجموعات</span></h1>
<p class="pitch-hero__desc">إدارة الملاعب، الفئات العمرية، الفرق، البطولات، الحضور، والمدفوعات — كلها في نظام واحد متكامل مبني خصيصاً لأكاديميات كرة القدم.</p>
<div class="pitch-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لكرة القدم</a>
<a href="#group-management" class="btn btn--secondary btn--large">شوف النظام</a>
<a href="#grid-system" 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">
<img src="screenshots/app/dashboard.png" alt="لوحة تحكم إدارة أكاديمية كرة القدم" loading="eager">
</div>
</div>
</div>
......@@ -480,40 +689,40 @@
<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>
<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 class="football-pain__grid" data-reveal="100">
<div class="football-pain-card">
<div class="football-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
</div>
<h3 class="sport-pain-card__title">فوضى الفئات العمرية</h3>
<p class="sport-pain-card__text">تحت 10، تحت 12، شباب، أولى — كل فئة بجدول مختلف ومدرب مختلف. تنظيمها على الورق كابوس يومي يزداد تعقيداً مع كل موسم جديد.</p>
<h3 class="football-pain-card__title">تضارب حجوزات الملاعب</h3>
<p class="football-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" 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 class="football-pain-card">
<div class="football-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">ملعبين أو ثلاثة يتنافس عليهم 8 مجموعات. مجموعة تصل فتجد الملعب مشغول. جدول يتغير أسبوعياً بدون إبلاغ المدربين أو الأهالي.</p>
<h3 class="football-pain-card__title">متابعة لاعبين بدون نظام</h3>
<p class="football-pain-card__text">+200 لاعب موزعين على فئات عمرية (U8، U10، U12...). مين دفع؟ مين حضر؟ مين غاب أسبوعين؟ كشوف ورقية وفوضى بلا نهاية.</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 class="football-pain-card">
<div class="football-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>
<h3 class="football-pain-card__title">أولياء الأمور يسألون كل يوم</h3>
<p class="football-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 class="football-pain-card">
<div class="football-pain-card__icon">
<svg width="24" height="24" 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>
<h3 class="sport-pain-card__title">فوضى مالية</h3>
<p class="sport-pain-card__text">رسوم مختلفة لكل فريق، رعايات، تكاليف بطولات — كلها مختلطة. لا تعرف ربحية كل فئة ولا المتأخرين عن الدفع ولا المصروفات الحقيقية.</p>
<h3 class="football-pain-card__title">لا تعرف ربحية كل ملعب</h3>
<p class="football-pain-card__text">أي ملعب يكسب أكتر؟ أي فترة زمنية فاضية؟ كم تكلفة تشغيل كل ملعب؟ لا بيانات — مجرد تخمينات وقرارات عشوائية.</p>
</div>
</div>
</div>
......@@ -522,51 +731,68 @@
<!-- 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>
<div class="football-comparison" data-reveal>
<div class="football-comparison__before">
<h3 class="football-comparison__title">قبل El-Captain</h3>
<ul class="football-comparison__list">
<li>جدول ورقي على الحائط يتغير كل أسبوع</li>
<li>تضارب يُكتشف لحظة وصول الفريق للملعب</li>
<li>كشوف حضور يدوية تضيع وتتلف</li>
<li>أولياء الأمور يتصلون بالاستقبال يومياً</li>
<li>لا تتبع للإيرادات لكل ملعب أو فترة</li>
</ul>
</div>
<div class="sport-comparison__arrow">
<div class="football-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5"/><path d="M12 5l-7 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>
<div class="football-comparison__after">
<h3 class="football-comparison__title">بعد El-Captain</h3>
<ul class="football-comparison__list">
<li>شبكة بصرية لكل ملعب وكل فترة زمنية</li>
<li>منع التضارب تلقائياً قبل ما يحصل</li>
<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);">
<!-- Grid System — THE Hero Feature -->
<section class="section" id="grid-system" 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="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: rgba(22, 163, 74, 0.08); color: #15803d; border-color: rgba(22, 163, 74, 0.2);">الميزة الأساسية</span>
<h2 class="section-header__title">نظام شبكة الملاعب البصري</h2>
<p class="section-header__desc">كل ملعب خانة. كل فترة زمنية صف. خصّص الفريق واسحبه — النظام يمنع التضارب تلقائياً.</p>
</div>
<!-- Big Screenshot -->
<div class="screenshots-dual" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-empty.png" alt="شبكة الملاعب فارغة — جاهزة للتخصيص" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-assigned.png" alt="شبكة الملاعب بعد تخصيص المجموعات" loading="lazy">
</div>
</div>
<!-- Grid Feature Details -->
<div class="football-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="football-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="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>
<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 class="grid-feature-item__title">شبكة بصرية</div>
<div class="grid-feature-item__desc">كل ملعب خانة ملونة بلون الفئة العمرية. الأخضر = مشغول. الأبيض = فارغ. لا لبس.</div>
</div>
</div>
<div class="grid-feature-item">
......@@ -574,248 +800,309 @@
<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 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>
<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 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>
<svg 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="grid-feature-item__text">
<div class="grid-feature-item__title">ترقية بين المجموعات</div>
<div class="grid-feature-item__desc">عند نهاية الموسم أو تقدم اللاعب — انقله للمجموعة الأعلى مع الاحتفاظ بكامل سجله.</div>
<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 class="football-feature__visual">
<!-- Mini pitch schedule visualization -->
<div class="pitch-schedule">
<div style="font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-md); font-size: var(--text-base);">ملعب 1 — جدول اليوم</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">3:00</span>
<span class="pitch-schedule__block pitch-schedule__block--u8">تحت 8 سنوات</span>
</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">4:00</span>
<span class="pitch-schedule__block pitch-schedule__block--u8">تحت 10 سنوات</span>
</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">5:00</span>
<span class="pitch-schedule__block pitch-schedule__block--u12">تحت 12 سنة</span>
</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">6:00</span>
<span class="pitch-schedule__block pitch-schedule__block--u16">تحت 16 سنة</span>
</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">7:00</span>
<span class="pitch-schedule__block pitch-schedule__block--empty">متاح للحجز</span>
</div>
<div class="pitch-schedule__row">
<span class="pitch-schedule__time">8:00</span>
<span class="pitch-schedule__block pitch-schedule__block--first">الفريق الأول</span>
</div>
</div>
<!-- Pitch utilization mini-grid -->
<div style="margin-top: var(--space-lg);">
<div style="font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-sm); font-size: var(--text-sm);">نسبة إشغال الملاعب اليوم</div>
<div class="pitch-grid pitch-grid--3">
<div class="pitch-grid__cell pitch-grid__cell--occupied">ملعب 1<br>90%</div>
<div class="pitch-grid__cell pitch-grid__cell--occupied">ملعب 2<br>75%</div>
<div class="pitch-grid__cell pitch-grid__cell--available">ملعب صغير<br>40%</div>
</div>
<div style="display: flex; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted);">
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:#16a34a;"></span> مشغول > 60%</span>
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:var(--color-success);"></span> متاح < 60%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Feature 2: Attendance Tracking (reversed) -->
<!-- Weekly Schedule Screenshot -->
<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 class="football-feature football-feature--reverse" data-reveal>
<div class="football-feature__text">
<h2>جدول أسبوعي ذكي لكل الملاعب</h2>
<p>شاهد الأسبوع كاملاً في لمحة واحدة. كل فئة عمرية بلون مختلف. اضغط على أي خانة لمعرفة التفاصيل أو لإجراء تعديل فوري.</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 class="sport-feature__visual">
<div class="football-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/attendance.png" alt="تسجيل الحضور الرقمي للاعبين" loading="lazy">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي لملاعب كرة القدم" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature 3: Weekly Schedule -->
<!-- Teams & Squads Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: rgba(22, 163, 74, 0.08); color: #15803d; border-color: rgba(22, 163, 74, 0.2);">الفرق والفئات</span>
<h2 class="section-header__title">إدارة الفئات العمرية والفرق — بنظام محترف</h2>
<p class="section-header__desc">تصنيف تلقائي بسنة الميلاد، سعة قصوى لكل مجموعة، قائمة انتظار ذكية، وترقية اللاعبين بين المستويات بضغطة زر.</p>
</div>
<div class="squad-cards" data-reveal="100">
<div class="squad-card">
<div class="squad-card__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"/></svg>
</div>
<h3 class="squad-card__title">U8</h3>
<p class="squad-card__desc">تحت 8 سنوات — تدريبات مهارية أساسية</p>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي للملاعب والمجموعات" loading="lazy">
<div class="squad-card">
<div class="squad-card__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"/></svg>
</div>
<h3 class="squad-card__title">U10</h3>
<p class="squad-card__desc">تحت 10 سنوات — بناء أساسيات اللعب</p>
</div>
<div class="squad-card">
<div class="squad-card__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>
</div>
<h3 class="squad-card__title">U12</h3>
<p class="squad-card__desc">تحت 12 سنة — تكتيك ولعب جماعي</p>
</div>
<div class="squad-card">
<div class="squad-card__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>
</div>
<h3 class="squad-card__title">U14</h3>
<p class="squad-card__desc">تحت 14 سنة — إعداد للمنافسات</p>
</div>
<div class="squad-card">
<div class="squad-card__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>
</div>
<h3 class="squad-card__title">U16</h3>
<p class="squad-card__desc">تحت 16 سنة — تطوير متقدم</p>
</div>
<div class="squad-card">
<div class="squad-card__icon">
<svg width="22" height="22" 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>
<h3 class="squad-card__title">الفريق الأول</h3>
<p class="squad-card__desc">المستوى الاحترافي — بطولات ومنافسات</p>
</div>
</div>
<!-- Squad management features -->
<div style="margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="200">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap;">
<span style="font-weight: 700; font-size: var(--text-lg); color: var(--ink-primary);">إدارة ذكية للفرق</span>
<span class="badge badge--accent" style="background: rgba(22, 163, 74, 0.1); color: #15803d; border-color: rgba(22, 163, 74, 0.2);">تلقائي</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-lg);">
<div>
<div style="font-weight: 600; color: var(--ink-primary); margin-bottom: var(--space-xs); font-size: var(--text-sm);">تصنيف بسنة الميلاد</div>
<div style="font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.7;">عند تسجيل لاعب جديد — النظام يقترح المجموعة المناسبة بناءً على تاريخ ميلاده تلقائياً.</div>
</div>
<div>
<div style="font-weight: 600; color: var(--ink-primary); margin-bottom: var(--space-xs); font-size: var(--text-sm);">سعة قصوى وقائمة انتظار</div>
<div style="font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.7;">حدد العدد الأقصى لكل مجموعة. عند الامتلاء — قائمة انتظار تلقائية بالأولوية.</div>
</div>
<div>
<div style="font-weight: 600; color: var(--ink-primary); margin-bottom: var(--space-xs); font-size: var(--text-sm);">ترقية بين المستويات</div>
<div style="font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.7;">انقل اللاعب من U10 إلى U12 بضغطة — مع الاحتفاظ بكامل سجله وتاريخه.</div>
</div>
</div>
</div>
</div>
</section>
<!-- Feature 4: Player Management (reversed) -->
<!-- Financial Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-primary-ghost); color: var(--color-primary-light); border-color: rgba(27,43,75,0.2);">الرؤية المالية</span>
<h2 class="section-header__title">اعرف ربحية كل ملعب ووقت</h2>
<p class="section-header__desc">تسعير مختلف لكل فئة عمرية ومستوى. خصومات الأشقاء محسوبة تلقائياً. تقارير إيرادات لكل ملعب وكل فترة.</p>
</div>
<div class="football-feature" data-reveal="100">
<div class="football-feature__text">
<h2>كل جنيه في مكانه الصحيح</h2>
<p>النظام يفصل بين إيرادات كل فئة عمرية وكل برنامج. تعرف بالضبط كم يكسب كل ملعب في كل فترة زمنية، ومن المتأخرين عن الدفع.</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 class="module-detail__list-item">محاسبة قيد مزدوج لكل عملية مالية</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="football-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/participants-list.png" alt="قائمة اللاعبين وملفاتهم الشاملة" loading="lazy">
<img src="screenshots/app/financial-overview.png" alt="التقارير المالية لأكاديمية كرة القدم" loading="lazy">
</div>
</div>
</div>
<!-- Pricing screenshot -->
<div style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="football-feature football-feature--reverse">
<div class="football-feature__text">
<h2>تسعير ذكي لكل برنامج تدريب</h2>
<p>سعر مختلف لتدريب الناشئين عن الشباب عن الفريق الأول. خصومات الأشقاء والتسجيل المبكر تُطبّق تلقائياً بدون تدخل يدوي.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تحت 8 وتحت 10 — سعر مخفض (تدريب مهاري)</div>
<div class="module-detail__list-item">تحت 12 وتحت 14 — سعر قياسي (تكتيك ومنافسات)</div>
<div class="module-detail__list-item">تحت 16 والفريق الأول — سعر متميز (إعداد احترافي)</div>
<div class="module-detail__list-item">خصم الأشقاء وخصم التسجيل المبكر تلقائياً</div>
</div>
</div>
<div class="football-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/pricing.png" alt="تسعير برامج كرة القدم المختلفة" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<!-- Full System Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag">النظام الكامل</span>
<h2 class="section-header__title">كرة القدم جزء من نظام ERP كامل</h2>
<p class="section-header__desc">إدارة الملاعب ليست كل شيء. El-Captain يدير أكاديميتك بالكامل — لاعبين، مالية، حضور، مخازن، موارد بشرية، وأكثر.</p>
</div>
<div class="football-feature" data-reveal="100">
<div class="football-feature__text">
<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 class="module-detail__list-item">إدارة المنتجات والمخازن (أحذية، كور، ملابس)</div>
<div class="module-detail__list-item">نقطة بيع (POS) للمبيعات اليومية</div>
<div class="module-detail__list-item">رواتب المدربين والموظفين</div>
<div class="module-detail__list-item">تقارير شاملة وتصدير Excel</div>
<div class="module-detail__list-item">صلاحيات دقيقة — كل موظف يرى فقط ما يخصه</div>
</div>
</div>
<div class="football-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/dashboard.png" alt="لوحة تحكم النظام الكامل" loading="lazy">
</div>
</div>
</div>
<!-- Stats -->
<div class="football-stats" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="football-stat">
<div class="football-stat__number" dir="ltr">+14</div>
<div class="football-stat__label">وحدة متكاملة</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+250</div>
<div class="sport-stat__label">شاشة إدارية</div>
<div class="football-stat">
<div class="football-stat__number" dir="ltr">+250</div>
<div class="football-stat__label">شاشة إدارية</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">100%</div>
<div class="sport-stat__label">عربي بالكامل</div>
<div class="football-stat">
<div class="football-stat__number">100%</div>
<div class="football-stat__label">عربي بالكامل</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">0</div>
<div class="sport-stat__label">تضاربات في الجدول</div>
<div class="football-stat">
<div class="football-stat__number">0</div>
<div class="football-stat__label">تضاربات في الحجوزات</div>
</div>
</div>
</div>
</section>
<!-- "Fits Any Academy" Notice -->
<!-- Sport Notice -->
<section class="section">
<div class="container">
<div class="sport-notice" data-reveal style="display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-xl); background: rgba(8, 145, 178, 0.06); border: 1px solid rgba(8, 145, 178, 0.15); border-radius: var(--radius-xl);">
<span style="font-size: 1.5rem; flex-shrink: 0;">💡</span>
<div style="font-size: var(--text-base); color: var(--ink-secondary); line-height: 1.8;">
<strong style="color: var(--ink-primary);">كرة القدم هنا مجرد مثال</strong> — النظام يناسب أي أكاديمية رياضية: سباحة، كاراتيه، جمباز، تنس، أو أي نشاط. إحنا بنفهم التحديات اللي بتواجه أكاديميتك ونقدملك حلول حقيقية مبنية على خبرتنا في السوق الرياضي.
<div class="sport-notice" data-reveal>
<div class="sport-notice__icon">💡</div>
<div class="sport-notice__text">
<strong>ملاحظة:</strong> كرة القدم هنا مجرد مثال — النظام يناسب أي أكاديمية رياضية: سباحة، كاراتيه، جمباز، تنس، أو أي نشاط. إحنا بنفهم التحديات اللي بتواجه أكاديميتك ونقدملك حلول حقيقية.
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="sport-cta">
<section class="football-cta">
<div class="container" data-reveal>
<h2 class="sport-cta__title">جاهز تنظّم أكاديميتك؟</h2>
<p class="sport-cta__desc">احجز عرض خاص لأكاديميات كرة القدم. نريك النظام على فئات ومجموعات مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="sport-cta__actions">
<h2 class="football-cta__title">جاهز تودّع فوضى الملاعب؟</h2>
<p class="football-cta__desc">احجز عرض خاص لأكاديميات كرة القدم. نريك النظام على ملاعب ومجموعات مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="football-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>
......@@ -854,6 +1141,7 @@
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="football.html" class="footer__link">أكاديميات كرة القدم</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
......
public/martial-arts.html
View file @ aa4a9412
......@@ -3,8 +3,8 @@
<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 يحل مشكلة تتبع الأحزمة والترقيات وجدولة امتحانات الترقي وإدارة بطولات الكاراتيه والجودو والتايكوندو.">
<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">
......@@ -12,40 +12,40 @@
<style>
/* ═══════════════════════════════════════════════════════════
Martial Arts Page — Custom Styles
Martial Arts Page — Custom Styles (Deep Red/Crimson Theme)
═══════════════════════════════════════════════════════════ */
/* Sport Hero — warm dojo-inspired background */
.sport-hero {
/* Martial Arts Hero — dojo-inspired background */
.ma-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #FFF3E0 0%, #FFF8F0 40%, var(--bg-body) 100%);
background: linear-gradient(180deg, #fef2f2 0%, #fef7f7 40%, var(--bg-body) 100%);
}
.sport-hero::before {
.ma-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);
linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.sport-hero::after {
.ma-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%);
background: radial-gradient(ellipse at 50% 100%, rgba(220, 38, 38, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.sport-hero__inner {
.ma-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
......@@ -55,30 +55,30 @@
}
@media (max-width: 900px) {
.sport-hero__inner {
.ma-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.sport-hero__actions {
.ma-hero__actions {
justify-content: center;
}
}
.sport-hero__eyebrow {
.ma-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);
background: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-gold-dark);
color: #991b1b;
margin-bottom: var(--space-md);
}
.sport-hero__title {
.ma-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
......@@ -86,12 +86,12 @@
margin-bottom: var(--space-md);
}
.sport-hero__title-accent {
color: var(--color-accent);
.ma-hero__title-accent {
color: #dc2626;
position: relative;
}
.sport-hero__desc {
.ma-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
......@@ -99,20 +99,20 @@
margin-bottom: var(--space-xl);
}
.sport-hero__actions {
.ma-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Martial Arts Specific */
.sport-pain__grid {
.ma-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.sport-pain-card {
.ma-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
......@@ -123,13 +123,13 @@
transition: all 0.3s ease;
}
.sport-pain-card:hover {
.ma-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.sport-pain-card::before {
.ma-pain-card::before {
content: '';
position: absolute;
top: 0;
......@@ -140,7 +140,7 @@
border-radius: 0 4px 4px 0;
}
.sport-pain-card__icon {
.ma-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
......@@ -152,46 +152,149 @@
font-size: 1.5rem;
}
.sport-pain-card__title {
.ma-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.sport-pain-card__text {
.ma-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Belt Progression Visualization */
.belt-grid {
display: grid;
gap: 3px;
background: var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
padding: 3px;
border: 1px solid var(--border-subtle);
}
.belt-grid--progression {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.belt-grid__cell {
aspect-ratio: 2/1;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 700;
transition: all 0.2s ease;
min-height: 48px;
text-align: center;
padding: 4px;
}
.belt-grid__cell--white { background: #f5f5f5; color: #374151; border: 1px solid #e5e7eb; }
.belt-grid__cell--yellow { background: #fef9c3; color: #854d0e; border: 1px solid #eab308; }
.belt-grid__cell--orange { background: #fff7ed; color: #9a3412; border: 1px solid #f97316; }
.belt-grid__cell--green { background: #f0fdf4; color: #166534; border: 1px solid #16a34a; }
.belt-grid__cell--blue { background: #eff6ff; color: #1e40af; border: 1px solid #2563eb; }
.belt-grid__cell--brown { background: #fef3c7; color: #78350f; border: 1px solid #92400e; }
.belt-grid__cell--black { background: #1f2937; color: #f9fafb; border: 1px solid #374151; }
.belt-grid__cell--current { box-shadow: 0 0 0 3px #dc2626; transform: scale(1.05); z-index: 1; position: relative; }
/* Student Belt Card */
.student-belt-card {
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
margin-top: var(--space-lg);
}
.student-belt-card__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
}
.student-belt-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(220, 38, 38, 0.08);
display: grid;
place-items: center;
font-size: 1.25rem;
color: #dc2626;
flex-shrink: 0;
}
.student-belt-card__name {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
}
.student-belt-card__belt {
font-size: var(--text-sm);
color: var(--ink-secondary);
}
.student-belt-card__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-md);
}
.student-belt-card__stat {
text-align: center;
padding: var(--space-sm);
background: var(--bg-muted);
border-radius: var(--radius-md);
}
.student-belt-card__stat-value {
font-size: var(--text-lg);
font-weight: 800;
color: #dc2626;
}
.student-belt-card__stat-label {
font-size: var(--text-xs);
color: var(--ink-secondary);
margin-top: 2px;
}
/* Feature Highlight Section */
.sport-feature {
.ma-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.sport-feature--reverse {
.ma-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.sport-feature--reverse .sport-feature__visual {
.ma-feature--reverse .ma-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.sport-feature,
.sport-feature--reverse {
.ma-feature,
.ma-feature--reverse {
grid-template-columns: 1fr;
}
.sport-feature--reverse .sport-feature__visual {
.ma-feature--reverse .ma-feature__visual {
order: 0;
}
}
.sport-feature__text h2 {
.ma-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
......@@ -199,15 +302,61 @@
line-height: 1.3;
}
.sport-feature__text p {
.ma-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Grading Cards */
.grading-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: var(--space-md);
}
.grading-card {
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
text-align: center;
transition: all 0.2s ease;
}
.grading-card:hover {
border-color: #dc2626;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.grading-card__icon {
width: 3rem;
height: 3rem;
margin: 0 auto var(--space-md);
border-radius: var(--radius-md);
background: rgba(220, 38, 38, 0.08);
color: #dc2626;
display: grid;
place-items: center;
}
.grading-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.grading-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
}
/* Comparison Before/After */
.sport-comparison {
.ma-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
......@@ -215,52 +364,52 @@
}
@media (max-width: 768px) {
.sport-comparison {
.ma-comparison {
grid-template-columns: 1fr;
}
.sport-comparison__arrow {
.ma-comparison__arrow {
transform: rotate(90deg);
}
}
.sport-comparison__before,
.sport-comparison__after {
.ma-comparison__before,
.ma-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.sport-comparison__before {
.ma-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.sport-comparison__after {
.ma-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.sport-comparison__arrow {
.ma-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
color: #dc2626;
font-weight: 800;
}
.sport-comparison__title {
.ma-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.sport-comparison__before .sport-comparison__title {
.ma-comparison__before .ma-comparison__title {
color: var(--color-error);
}
.sport-comparison__after .sport-comparison__title {
.ma-comparison__after .ma-comparison__title {
color: var(--color-success);
}
.sport-comparison__list {
.ma-comparison__list {
list-style: none;
padding: 0;
margin: 0;
......@@ -269,7 +418,7 @@
gap: var(--space-sm);
}
.sport-comparison__list li {
.ma-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
......@@ -278,7 +427,7 @@
gap: var(--space-xs);
}
.sport-comparison__list li::before {
.ma-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
......@@ -287,16 +436,16 @@
flex-shrink: 0;
}
.sport-comparison__before .sport-comparison__list li::before {
.ma-comparison__before .ma-comparison__list li::before {
background: var(--color-error);
}
.sport-comparison__after .sport-comparison__list li::before {
.ma-comparison__after .ma-comparison__list li::before {
background: var(--color-success);
}
/* Stats banner */
.sport-stats {
.ma-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
......@@ -306,49 +455,49 @@
color: var(--ink-on-dark);
}
.sport-stat {
.ma-stat {
text-align: center;
}
.sport-stat__number {
.ma-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
color: #fca5a5;
line-height: 1;
margin-bottom: var(--space-2xs);
}
.sport-stat__label {
.ma-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section */
.sport-cta {
/* CTA Section — Martial Arts */
.ma-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #FFF8F0 100%);
background: linear-gradient(180deg, var(--bg-body) 0%, #fef2f2 100%);
position: relative;
}
.sport-cta::before {
.ma-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, var(--color-accent) 50%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, #dc2626 50%, transparent 90%);
opacity: 0.3;
}
.sport-cta__title {
.ma-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.sport-cta__desc {
.ma-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
......@@ -356,7 +505,7 @@
line-height: 1.8;
}
.sport-cta__actions {
.ma-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
......@@ -382,7 +531,7 @@
}
.grid-feature-item:hover {
border-color: var(--border-accent);
border-color: #dc2626;
box-shadow: var(--shadow-sm);
}
......@@ -390,8 +539,8 @@
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
background: rgba(220, 38, 38, 0.08);
color: #dc2626;
display: grid;
place-items: center;
flex-shrink: 0;
......@@ -418,6 +567,47 @@
color: var(--ink-secondary);
line-height: 1.6;
}
/* Screenshots dual */
.screenshots-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
@media (max-width: 768px) {
.screenshots-dual {
grid-template-columns: 1fr;
}
}
/* Sport Notice */
.sport-notice {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-xl);
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.2);
border-radius: var(--radius-xl);
margin-top: var(--space-2xl);
}
.sport-notice__icon {
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.sport-notice__text {
font-size: var(--text-sm);
color: #1e40af;
line-height: 1.8;
}
.sport-notice__text strong {
color: #1e3a8a;
}
</style>
</head>
<body>
......@@ -449,25 +639,25 @@
</nav>
<!-- Hero -->
<section class="sport-hero">
<section class="ma-hero">
<div class="container">
<div class="sport-hero__inner">
<div class="ma-hero__inner">
<div data-reveal>
<span class="sport-hero__eyebrow">
<span class="ma-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">
<h1 class="ma-hero__title">أكاديمية فنون قتالية تحتاج نظام <span class="ma-hero__title-accent">يفهم الأحزمة والترقيات</span></h1>
<p class="ma-hero__desc">متابعة تقدم اللاعبين عبر الأحزمة، جدولة امتحانات الترقي، إدارة رياضات قتالية متعددة تحت سقف واحد، الحضور المنتظم، وسجلات البطولات — كل ذلك من نظام واحد.</p>
<div class="ma-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص للفنون القتالية</a>
<a href="#features" class="btn btn--secondary btn--large">شوف النظام</a>
<a href="#belt-system" 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">
<img src="screenshots/app/dashboard.png" alt="لوحة تحكم أكاديمية الفنون القتالية" loading="eager">
</div>
</div>
</div>
......@@ -483,37 +673,37 @@
<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">
<div class="ma-pain__grid" data-reveal="100">
<div class="ma-pain-card">
<div class="ma-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>
<h3 class="ma-pain-card__title">متابعة ترقيات الأحزمة يدوياً</h3>
<p class="ma-pain-card__text">150 لاعب × 9 أحزمة = فوضى. مين جاهز يمتحن؟ مين ناقصه حصص؟ كشاكيل ورقية ضايعة.</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 class="ma-pain-card">
<div class="ma-pain-card__icon">
<svg width="24" height="24" 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>
<h3 class="sport-pain-card__title">جدولة امتحانات الترقي</h3>
<p class="sport-pain-card__text">تحديد مين مؤهل للامتحان بناءً على نسبة الحضور والمدة الزمنية. حسابات يدوية مرهقة وأخطاء تؤدي لترقي لاعبين غير مستحقين.</p>
<h3 class="ma-pain-card__title">فصول مختلطة المستويات</h3>
<p class="ma-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 class="ma-pain-card">
<div class="ma-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="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>
<h3 class="sport-pain-card__title">تخصصات متعددة تحت سقف واحد</h3>
<p class="sport-pain-card__text">كاراتيه الصبح، جودو بالليل، تايكوندو آخر الأسبوع — نفس الصالة ونفس الأوقات. تضاربات في الجدول وفوضى في الحجوزات بدون نظام واحد يجمع كل شيء.</p>
<h3 class="ma-pain-card__title">رياضات متعددة تحت سقف واحد</h3>
<p class="ma-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 class="ma-pain-card">
<div class="ma-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>
<h3 class="ma-pain-card__title">غياب بدون متابعة</h3>
<p class="ma-pain-card__text">لاعب غاب 3 أسابيع ومحدش عرف. بعد شهر اكتشفوا إنه سابهم. فرصة ضائعة لاستعادته.</p>
</div>
</div>
</div>
......@@ -522,302 +712,385 @@
<!-- 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>
<div class="ma-comparison" data-reveal>
<div class="ma-comparison__before">
<h3 class="ma-comparison__title">قبل El-Captain</h3>
<ul class="ma-comparison__list">
<li>سجلات أحزمة في Excel أو دفاتر ورقية</li>
<li>فصول مختلطة المستويات بدون تقسيم</li>
<li>ولي الأمر يسأل: "امتى امتحان الحزام الجاي؟"</li>
<li>حضور بدون متابعة أو إنذارات</li>
<li>رياضات متعددة = أنظمة منفصلة أو فوضى</li>
</ul>
</div>
<div class="sport-comparison__arrow">
<div class="ma-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5"/><path d="M12 5l-7 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>
<div class="ma-comparison__after">
<h3 class="ma-comparison__title">بعد El-Captain</h3>
<ul class="ma-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);">
<!-- Belt Progression System — THE Hero Feature -->
<section class="section" id="belt-system" 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="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.2);">الميزة الأساسية</span>
<h2 class="section-header__title">نظام متابعة الأحزمة والترقيات</h2>
<p class="section-header__desc">كل حزام مرحلة. كل لاعب له مسار واضح. النظام يتابع التقدم ويحدد الجاهزين للامتحان تلقائياً.</p>
</div>
<!-- Big Screenshot -->
<div class="screenshots-dual" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-empty.png" alt="نظام تتبع الأحزمة — عرض فارغ" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-assigned.png" alt="نظام تتبع الأحزمة — مع تخصيص اللاعبين" loading="lazy">
</div>
</div>
<!-- Belt Feature Details -->
<div class="ma-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="ma-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>
<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 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>
<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 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>
<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 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>
<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"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">إدارة مساحات مشتركة</div>
<div class="grid-feature-item__desc">صالة واحدة تخدم عدة تخصصات — النظام ينظم الحجز ويمنع التعارض.</div>
<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 class="ma-feature__visual">
<!-- Belt Progression Visualization -->
<div style="font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-md); font-size: var(--text-base);">مسار الأحزمة — كاراتيه</div>
<div class="belt-grid belt-grid--progression">
<div class="belt-grid__cell belt-grid__cell--white">أبيض</div>
<div class="belt-grid__cell belt-grid__cell--yellow">أصفر</div>
<div class="belt-grid__cell belt-grid__cell--orange">برتقالي</div>
<div class="belt-grid__cell belt-grid__cell--green belt-grid__cell--current">أخضر</div>
<div class="belt-grid__cell belt-grid__cell--blue">أزرق</div>
<div class="belt-grid__cell belt-grid__cell--brown">بني</div>
<div class="belt-grid__cell belt-grid__cell--black">أسود 1</div>
<div class="belt-grid__cell belt-grid__cell--black">أسود 2</div>
<div class="belt-grid__cell belt-grid__cell--black">أسود 3</div>
</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>
<!-- Sample Student Card -->
<div class="student-belt-card">
<div class="student-belt-card__header">
<div class="student-belt-card__avatar">
<svg width="24" height="24" 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 class="student-belt-card__name">أحمد محمد</div>
<div class="student-belt-card__belt">كاراتيه — حزام أخضر</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 class="student-belt-card__stats">
<div class="student-belt-card__stat">
<div class="student-belt-card__stat-value">87%</div>
<div class="student-belt-card__stat-label">نسبة الحضور</div>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تسجيل في كل برنامج</div>
<div class="grid-feature-item__desc">لاعب واحد يمكن أن يكون مسجلاً في الكاراتيه والجودو معاً بمستويات مختلفة.</div>
<div class="student-belt-card__stat">
<div class="student-belt-card__stat-value" dir="ltr">2026/08/15</div>
<div class="student-belt-card__stat-label">موعد الامتحان القادم</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 class="student-belt-card__stat">
<div class="student-belt-card__stat-value">12</div>
<div class="student-belt-card__stat-label">حصة متبقية للأهلية</div>
</div>
</div>
</div>
<!-- Belt legend -->
<div style="display: flex; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted); flex-wrap: wrap;">
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:#dc2626;box-shadow: 0 0 0 2px rgba(220,38,38,0.3);"></span> الحزام الحالي</span>
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:#16a34a;"></span> مؤهل للامتحان</span>
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:var(--ink-muted);"></span> غير مؤهل بعد</span>
</div>
</div>
</div>
</div>
</section>
<div class="sport-feature__visual">
<!-- Weekly Schedule Screenshot -->
<section class="section">
<div class="container">
<div class="ma-feature ma-feature--reverse" data-reveal>
<div class="ma-feature__text">
<h2>جدول أسبوعي لكل الرياضات القتالية</h2>
<p>شاهد الأسبوع كاملاً في لمحة واحدة. كل رياضة بلون مختلف. كل مستوى بمجموعته. اضغط على أي خانة لمعرفة التفاصيل أو لإجراء تعديل فوري.</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 class="ma-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/enrollments.png" alt="تسجيل وتصنيف اللاعبين" loading="lazy">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي لأكاديمية الفنون القتالية" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Feature Section 3: Participant Management -->
<!-- Grading & Belt Exam Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.2);">الامتحانات والترقيات</span>
<h2 class="section-header__title">إدارة امتحانات الأحزمة — من الجدولة للشهادة</h2>
<p class="section-header__desc">جدولة امتحانات الترقي، تحديد المؤهلين تلقائياً، إدارة لجنة التحكيم، وإصدار الشهادات — كل شيء في مكان واحد.</p>
</div>
<div class="grading-cards" data-reveal="100">
<div class="grading-card">
<div class="grading-card__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"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg>
</div>
<h3 class="grading-card__title">جدولة الامتحانات</h3>
<p class="grading-card__desc">حدد موعد الامتحان والنظام يحسب تلقائياً من يستحق المشاركة بناءً على الحضور والمدة.</p>
</div>
<div class="sport-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/participants-list.png" alt="قائمة اللاعبين وملفاتهم الشاملة" loading="lazy">
<div class="grading-card">
<div class="grading-card__icon">
<svg width="22" height="22" 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="grading-card__title">متطلبات مسبقة لكل حزام</h3>
<p class="grading-card__desc">حد أدنى للحضور لكل مستوى. النظام يمنع التسجيل في الامتحان لمن لم يستوفِ الشروط.</p>
</div>
<div class="grading-card">
<div class="grading-card__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>
</div>
<h3 class="grading-card__title">إدارة لجنة التحكيم</h3>
<p class="grading-card__desc">تعيين المحكمين لكل امتحان مع توثيق تقييماتهم ونتائج كل لاعب بالتفصيل.</p>
</div>
<div class="grading-card">
<div class="grading-card__icon">
<svg width="22" height="22" 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>
<h3 class="grading-card__title">إشعار تلقائي بالأهلية</h3>
<p class="grading-card__desc">عندما يستوفي اللاعب شروط الترقي — يُخطر المدرب وولي الأمر تلقائياً بموعد الامتحان.</p>
</div>
<div class="grading-card">
<div class="grading-card__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"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="M9 15h6"/></svg>
</div>
<h3 class="grading-card__title">إصدار الشهادات</h3>
<p class="grading-card__desc">شهادة ترقي رقمية تُصدر تلقائياً عند النجاح. قابلة للطباعة ومحفوظة في ملف اللاعب.</p>
</div>
</div>
<!-- Grading example -->
<div style="margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="200">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap;">
<span style="font-weight: 700; font-size: var(--text-lg); color: var(--ink-primary);">امتحان ترقي — حزام أخضر</span>
<span class="badge badge--accent" style="background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.2);">قادم</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md);">
<div style="padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-md); text-align: center;">
<div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">التاريخ</div>
<div style="font-weight: 700; color: var(--ink-primary);" dir="ltr">2026/08/15</div>
</div>
<div style="padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-md); text-align: center;">
<div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">المؤهلون</div>
<div style="font-weight: 700; color: #dc2626;">18 لاعب</div>
</div>
<div style="padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-md); text-align: center;">
<div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">الحد الأدنى للحضور</div>
<div style="font-weight: 700; color: var(--ink-primary);">80%</div>
</div>
<div style="padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-md); text-align: center;">
<div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">لجنة التحكيم</div>
<div style="font-weight: 700; color: var(--ink-primary);">3 محكمين</div>
</div>
</div>
<div style="display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-secondary);">
<span><strong style="color: var(--ink-primary);">الرياضة:</strong> كاراتيه</span>
<span><strong style="color: var(--ink-primary);">من:</strong> حزام برتقالي</span>
<span><strong style="color: var(--ink-primary);">إلى:</strong> حزام أخضر</span>
<span><strong style="color: var(--ink-primary);">الرسوم:</strong> 250 ج.م</span>
</div>
</div>
</div>
</section>
<!-- Feature Section 4: Activities & Events (reversed) -->
<!-- Financial Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-primary-ghost); color: var(--color-primary-light); border-color: rgba(27,43,75,0.2);">الرؤية المالية</span>
<h2 class="section-header__title">تسعير ذكي يفهم مستويات الأحزمة</h2>
<p class="section-header__desc">سعر مختلف لكل مستوى. رسوم امتحانات منفصلة. مبيعات المعدات والزي. كل جنيه في مكانه.</p>
</div>
<div class="ma-feature" data-reveal="100">
<div class="ma-feature__text">
<h2>كل جنيه في مكانه الصحيح</h2>
<p>النظام يفصل بين اشتراكات التدريب ورسوم الامتحانات ومبيعات المعدات. تعرف بالضبط كم تكسب من كل مستوى ومن كل نوع نشاط.</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 class="module-detail__list-item">محاسبة قيد مزدوج لكل عملية مالية</div>
</div>
</div>
<div class="sport-feature__visual">
<div class="ma-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/activities.png" alt="إدارة البطولات وامتحانات الترقي" loading="lazy">
<img src="screenshots/app/financial-overview.png" alt="التقارير المالية لأكاديمية الفنون القتالية" loading="lazy">
</div>
</div>
</div>
<!-- Pricing screenshot -->
<div style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="ma-feature ma-feature--reverse">
<div class="ma-feature__text">
<h2>تسعير مرن لكل برنامج ومستوى</h2>
<p>سعر مختلف لكاراتيه المبتدئين عن المتقدمين. رسوم الامتحان تُضاف تلقائياً. عروض موسمية وخصومات تُطبّق بدون تدخل يدوي.</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>
</div>
<div class="ma-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/pricing.png" alt="تسعير برامج الفنون القتالية المختلفة" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<section class="section">
<!-- Full System Section -->
<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 class="section-header section-header--center" data-reveal>
<span class="section-header__tag">النظام الكامل</span>
<h2 class="section-header__title">الفنون القتالية جزء من نظام ERP كامل</h2>
<p class="section-header__desc">إدارة الأحزمة ليست كل شيء. El-Captain يدير أكاديميتك بالكامل — لاعبين، مالية، حضور، مخازن، موارد بشرية، وأكثر.</p>
</div>
<div class="ma-feature" data-reveal="100">
<div class="ma-feature__text">
<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 class="module-detail__list-item">إدارة المنتجات والمخازن (زي، أحزمة، واقيات، قفازات)</div>
<div class="module-detail__list-item">نقطة بيع (POS) للمبيعات اليومية</div>
<div class="module-detail__list-item">رواتب المدربين والموظفين</div>
<div class="module-detail__list-item">تقارير شاملة وتصدير Excel</div>
<div class="module-detail__list-item">صلاحيات دقيقة — كل موظف يرى فقط ما يخصه</div>
</div>
</div>
<div class="ma-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/dashboard.png" alt="لوحة تحكم النظام الكامل" loading="lazy">
</div>
</div>
</div>
<!-- Stats -->
<div class="ma-stats" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="ma-stat">
<div class="ma-stat__number" dir="ltr">+14</div>
<div class="ma-stat__label">وحدة متكاملة</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">+250</div>
<div class="sport-stat__label">شاشة إدارية</div>
<div class="ma-stat">
<div class="ma-stat__number" dir="ltr">+250</div>
<div class="ma-stat__label">شاشة إدارية</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number">100%</div>
<div class="sport-stat__label">عربي بالكامل</div>
<div class="ma-stat">
<div class="ma-stat__number">100%</div>
<div class="ma-stat__label">عربي بالكامل</div>
</div>
<div class="sport-stat">
<div class="sport-stat__number" dir="ltr">3+</div>
<div class="sport-stat__label">كاراتيه، جودو، تايكوندو</div>
<div class="ma-stat">
<div class="ma-stat__number">9</div>
<div class="ma-stat__label">أحزمة مدعومة لكل رياضة</div>
</div>
</div>
</div>
</section>
<!-- "Fits Any Academy" Notice -->
<!-- Sport Notice -->
<section class="section">
<div class="container">
<div class="sport-notice" data-reveal style="display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-xl); background: rgba(8, 145, 178, 0.06); border: 1px solid rgba(8, 145, 178, 0.15); border-radius: var(--radius-xl);">
<span style="font-size: 1.5rem; flex-shrink: 0;">💡</span>
<div style="font-size: var(--text-base); color: var(--ink-secondary); line-height: 1.8;">
<strong style="color: var(--ink-primary);">الفنون القتالية هنا مجرد مثال</strong> — النظام يناسب أي أكاديمية رياضية: سباحة، كرة قدم، جمباز، تنس، أو أي نشاط. إحنا بنفهم التحديات اللي بتواجه أكاديميتك ونقدملك حلول حقيقية مبنية على خبرتنا في السوق الرياضي.
<div class="sport-notice" data-reveal>
<div class="sport-notice__icon">💡</div>
<div class="sport-notice__text">
<strong>ملاحظة:</strong> الفنون القتالية هنا مجرد مثال — النظام يناسب أي أكاديمية رياضية: سباحة، كرة قدم، جمباز، تنس، أو أي نشاط. إحنا بنفهم التحديات اللي بتواجه أكاديميتك ونقدملك حلول حقيقية.
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="sport-cta">
<section class="ma-cta">
<div class="container" data-reveal>
<h2 class="sport-cta__title">جاهز تنظّم أكاديميتك؟</h2>
<p class="sport-cta__desc">احجز عرض خاص لأكاديميات الفنون القتالية. نريك النظام على أحزمة وبرامج مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="sport-cta__actions">
<h2 class="ma-cta__title">جاهز تنظّم أحزمة أكاديميتك؟</h2>
<p class="ma-cta__desc">احجز عرض خاص لأكاديميات الفنون القتالية. نريك النظام على أحزمة وبرامج مشابهة لأكاديميتك — مجاناً بدون أي التزام.</p>
<div class="ma-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>
......@@ -856,6 +1129,8 @@
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="football.html" class="footer__link">أكاديميات كرة القدم</a>
<a href="martial-arts.html" class="footer__link">أكاديميات الفنون القتالية</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment