Add Champion Path, Training Method, Extra Services sections and program skill bars

Continuing the competitor-inspired additions:
- Champion Path: U4-U18 development roadmap with a connecting timeline, styled after the existing stats-path visual language
- Training Method: 3-card section on warm-up safety, fitness tracking, and growth-stage-aware planning (kept generic/honest, no trademarked-protocol claims)
- Extra Services: private coaching, seasonal camps, sports birthdays, facility rental — each links to a pre-filled WhatsApp inquiry since these aren't yet fixed bookable products
- Skill bars: added 3 illustrative stat bars (e.g. technique/fitness/discipline) to each of the 9 sport program cards
This commit is contained in:
Line INK
2026-08-27 22:43:02 +03:00
parent 0ce8d23f55
commit bcd5f2b5b3

View File

@@ -267,6 +267,86 @@
.join-arrow{display:none;} .join-arrow{display:none;}
} }
/* ===== SKILL BARS (on program cards) ===== */
.skill-bars{margin:14px 0 18px;display:grid;gap:9px;}
.skill-bar-row{display:flex;align-items:center;gap:10px;}
.skill-bar-row .skill-label{font-size:11px;color:var(--gray);width:52px;flex-shrink:0;}
.skill-bar-track{flex:1;height:5px;border-radius:3px;background:rgba(11,36,71,.08);overflow:hidden;}
.skill-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent,var(--orange)),var(--gold));width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.skill-bar-row .skill-val{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;color:var(--navy);width:22px;text-align:end;flex-shrink:0;}
/* ===== CHAMPION PATH ===== */
#champion-path{background:var(--surface);}
.path-track{position:relative;margin-top:64px;}
.path-line{
position:absolute;top:34px;inset-inline-start:5%;inset-inline-end:5%;height:3px;
background:repeating-linear-gradient(90deg, var(--orange) 0 10px, transparent 10px 20px);
z-index:0;
}
.path-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1;}
.path-stage{text-align:center;}
.path-marker{
width:68px;height:68px;border-radius:50%;margin:0 auto 22px;
background:linear-gradient(150deg,var(--navy),var(--navy-deep));
border:3px solid var(--orange);
display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 26px -12px rgba(11,36,71,.4);
transition:transform .3s ease;
}
.path-stage:hover .path-marker{transform:translateY(-6px) scale(1.05);}
.path-marker svg{width:28px;height:28px;color:var(--gold-light);}
.path-age{
display:inline-block;font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;
color:#fff;background:var(--orange);padding:4px 14px;border-radius:100px;margin-bottom:12px;
}
.path-stage h4{font-size:16.5px;color:var(--navy);margin-bottom:8px;}
.path-stage p{font-size:13.3px;color:var(--gray);}
@media(max-width:900px){
.path-line{display:none;}
.path-stages{grid-template-columns:1fr 1fr;gap:36px 20px;}
}
@media(max-width:560px){ .path-stages{grid-template-columns:1fr;} }
/* ===== SCIENTIFIC METHOD ===== */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;}
.method-card{
background:linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 100%);
border-radius:var(--radius);padding:34px 28px;position:relative;overflow:hidden;
border:1px solid rgba(184,146,62,.25);
}
.method-card::before{
content:attr(data-step);position:absolute;top:-16px;inset-inline-end:8px;
font-family:'Poppins',sans-serif;font-weight:800;font-size:80px;color:rgba(255,255,255,.05);
line-height:1;pointer-events:none;
}
.method-icon{
width:56px;height:56px;border-radius:14px;margin-bottom:20px;position:relative;z-index:1;
background:rgba(184,146,62,.16);border:1px solid rgba(184,146,62,.4);
display:flex;align-items:center;justify-content:center;
}
.method-icon svg{width:26px;height:26px;color:var(--gold-light);}
.method-card h4{color:#fff;font-size:17px;margin-bottom:10px;position:relative;z-index:1;}
.method-card p{color:rgba(255,255,255,.65);font-size:13.5px;position:relative;z-index:1;}
@media(max-width:900px){ .method-grid{grid-template-columns:1fr;} }
/* ===== EXTRA SERVICES ===== */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px;}
.service-card{
background:#fff;border-radius:var(--radius);padding:30px 24px;text-align:center;
border:1px solid rgba(11,36,71,.07);transition:transform .3s ease,box-shadow .3s ease;
}
.service-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px -24px rgba(11,36,71,.35);}
.service-icon{
width:60px;height:60px;border-radius:50%;margin:0 auto 18px;
background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--orange) 65%);
display:flex;align-items:center;justify-content:center;
}
.service-icon svg{width:28px;height:28px;color:var(--navy-deep);}
.service-card h4{font-size:15.5px;color:var(--navy);margin-bottom:8px;}
.service-card p{font-size:12.8px;color:var(--gray);}
@media(max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .services-grid{grid-template-columns:1fr;} }
/* ===== STATS (signature: badge path) ===== */ /* ===== STATS (signature: badge path) ===== */
.stats-section{ .stats-section{
background:linear-gradient(160deg,var(--navy-deep), var(--navy)); background:linear-gradient(160deg,var(--navy-deep), var(--navy));
@@ -515,6 +595,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 2.2-1.1 3.6H10.1L9 8.2 12 6z"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 2.2-1.1 3.6H10.1L9 8.2 12 6z"/></svg></div>
<h3>كرة القدم</h3> <h3>كرة القدم</h3>
<p>تطوير المهارات الفردية والتكتيكية وروح الفريق داخل الملعب.</p> <p>تطوير المهارات الفردية والتكتيكية وروح الفريق داخل الملعب.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">تقنية</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%"></div></div><span class="skill-val">88</span></div>
<div class="skill-bar-row"><span class="skill-label">لياقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:90%"></div></div><span class="skill-val">90</span></div>
<div class="skill-bar-row"><span class="skill-label">فريق</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:92%"></div></div><span class="skill-val">92</span></div>
</div>
<div class="program-tags"><span class="tag">4–16 سنة</span><span class="tag">60–90 دقيقة</span></div> <div class="program-tags"><span class="tag">4–16 سنة</span><span class="tag">60–90 دقيقة</span></div>
<a href="program-football.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-football.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -523,6 +608,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M2 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><circle cx="17" cy="6" r="2.4"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M2 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><circle cx="17" cy="6" r="2.4"/></svg></div>
<h3>السباحة</h3> <h3>السباحة</h3>
<p>من أساسيات الطفو والتنفس حتى تقنيات السباحة المتقدمة.</p> <p>من أساسيات الطفو والتنفس حتى تقنيات السباحة المتقدمة.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">تحمّل</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:91%"></div></div><span class="skill-val">91</span></div>
<div class="skill-bar-row"><span class="skill-label">تقنية</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:87%"></div></div><span class="skill-val">87</span></div>
<div class="skill-bar-row"><span class="skill-label">أمان</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:95%"></div></div><span class="skill-val">95</span></div>
</div>
<div class="program-tags"><span class="tag">4–16 سنة</span><span class="tag">45–60 دقيقة</span></div> <div class="program-tags"><span class="tag">4–16 سنة</span><span class="tag">45–60 دقيقة</span></div>
<a href="program-swimming.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-swimming.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -531,6 +621,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M5 21l3-7 4-2 4 2 3 7M9 12l1.5-5M15 12l-1.5-5"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M5 21l3-7 4-2 4 2 3 7M9 12l1.5-5M15 12l-1.5-5"/></svg></div>
<h3>الكاراتيه</h3> <h3>الكاراتيه</h3>
<p>انضباط ذاتي، احترام الآخرين، وثقة بالنفس عبر نظام أحزمة واضح.</p> <p>انضباط ذاتي، احترام الآخرين، وثقة بالنفس عبر نظام أحزمة واضح.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">انضباط</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:96%"></div></div><span class="skill-val">96</span></div>
<div class="skill-bar-row"><span class="skill-label">تركيز</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:90%"></div></div><span class="skill-val">90</span></div>
<div class="skill-bar-row"><span class="skill-label">مرونة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:84%"></div></div><span class="skill-val">84</span></div>
</div>
<div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60 دقيقة</span></div> <div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60 دقيقة</span></div>
<a href="program-karate.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-karate.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -539,6 +634,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M12 7v4l5 3-1.2 4-4.8-2-3 3-2-3 3-3-2-4 3-2z"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M12 7v4l5 3-1.2 4-4.8-2-3 3-2-3 3-3-2-4 3-2z"/></svg></div>
<h3>التايكوندو</h3> <h3>التايكوندو</h3>
<p>قوة ومرونة وسرعة حركية عبر تقنيات الركل، ونظام أحزمة واضح.</p> <p>قوة ومرونة وسرعة حركية عبر تقنيات الركل، ونظام أحزمة واضح.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">قوة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:89%"></div></div><span class="skill-val">89</span></div>
<div class="skill-bar-row"><span class="skill-label">سرعة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:92%"></div></div><span class="skill-val">92</span></div>
<div class="skill-bar-row"><span class="skill-label">مرونة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%"></div></div><span class="skill-val">88</span></div>
</div>
<div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60 دقيقة</span></div> <div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60 دقيقة</span></div>
<a href="program-taekwondo.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-taekwondo.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -547,6 +647,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/><circle cx="12" cy="12" r="6"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/><circle cx="12" cy="12" r="6"/></svg></div>
<h3>الجمباز</h3> <h3>الجمباز</h3>
<p>مرونة، توازن، وقوة الجسم من سن مبكرة بإشراف مدربات متخصصات.</p> <p>مرونة، توازن، وقوة الجسم من سن مبكرة بإشراف مدربات متخصصات.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">مرونة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:95%"></div></div><span class="skill-val">95</span></div>
<div class="skill-bar-row"><span class="skill-label">توازن</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:91%"></div></div><span class="skill-val">91</span></div>
<div class="skill-bar-row"><span class="skill-label">رشاقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:89%"></div></div><span class="skill-val">89</span></div>
</div>
<div class="program-tags"><span class="tag">4–12 سنة</span><span class="tag">45–60 دقيقة</span></div> <div class="program-tags"><span class="tag">4–12 سنة</span><span class="tag">45–60 دقيقة</span></div>
<a href="program-gymnastics.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-gymnastics.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -555,6 +660,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 8V6a2 2 0 012-2h3a2 2 0 012 2v2M4 8h9a2 2 0 012 2v2a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path d="M15 12h3a2 2 0 000-4"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 8V6a2 2 0 012-2h3a2 2 0 012 2v2M4 8h9a2 2 0 012 2v2a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path d="M15 12h3a2 2 0 000-4"/></svg></div>
<h3>الكيك بوكسينغ</h3> <h3>الكيك بوكسينغ</h3>
<p>قوة ذهنية وبدنية، تركيز، وأساسيات دفاع عن النفس بشكل آمن.</p> <p>قوة ذهنية وبدنية، تركيز، وأساسيات دفاع عن النفس بشكل آمن.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">قوة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:93%"></div></div><span class="skill-val">93</span></div>
<div class="skill-bar-row"><span class="skill-label">تركيز</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%"></div></div><span class="skill-val">88</span></div>
<div class="skill-bar-row"><span class="skill-label">ثقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:90%"></div></div><span class="skill-val">90</span></div>
</div>
<div class="program-tags"><span class="tag">7–16 سنة</span><span class="tag">60 دقيقة</span></div> <div class="program-tags"><span class="tag">7–16 سنة</span><span class="tag">60 دقيقة</span></div>
<a href="program-kickboxing.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-kickboxing.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -563,6 +673,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 10V7a3 3 0 013-3h1a3 3 0 013 3v1"/><path d="M7 10h9a3 3 0 013 3v2a5 5 0 01-5 5h-2a5 5 0 01-5-5v-3a2 2 0 012-2z"/><path d="M10 10v3M13 10v3"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 10V7a3 3 0 013-3h1a3 3 0 013 3v1"/><path d="M7 10h9a3 3 0 013 3v2a5 5 0 01-5 5h-2a5 5 0 01-5-5v-3a2 2 0 012-2z"/><path d="M10 10v3M13 10v3"/></svg></div>
<h3>المواي تاي</h3> <h3>المواي تاي</h3>
<p>الملاكمة التايلندية بأسلوب آمن يبني اللياقة والانضباط الذهني والثقة بالنفس.</p> <p>الملاكمة التايلندية بأسلوب آمن يبني اللياقة والانضباط الذهني والثقة بالنفس.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">لياقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:92%"></div></div><span class="skill-val">92</span></div>
<div class="skill-bar-row"><span class="skill-label">انضباط</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:91%"></div></div><span class="skill-val">91</span></div>
<div class="skill-bar-row"><span class="skill-label">ثقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:89%"></div></div><span class="skill-val">89</span></div>
</div>
<div class="program-tags"><span class="tag">7–16 سنة</span><span class="tag">60 دقيقة</span></div> <div class="program-tags"><span class="tag">7–16 سنة</span><span class="tag">60 دقيقة</span></div>
<a href="program-muaythai.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-muaythai.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -571,6 +686,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 010 18M4.5 6.5a13 13 0 0015 0M4.5 17.5a13 13 0 0115 0"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 010 18M4.5 6.5a13 13 0 0015 0M4.5 17.5a13 13 0 0115 0"/></svg></div>
<h3>كرة السلة</h3> <h3>كرة السلة</h3>
<p>تمرير وتصويب ومراوغة وروح الفريق داخل الملعب عبر تمارين تدريجية.</p> <p>تمرير وتصويب ومراوغة وروح الفريق داخل الملعب عبر تمارين تدريجية.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">رشاقة</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%"></div></div><span class="skill-val">88</span></div>
<div class="skill-bar-row"><span class="skill-label">تكتيك</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:86%"></div></div><span class="skill-val">86</span></div>
<div class="skill-bar-row"><span class="skill-label">فريق</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:93%"></div></div><span class="skill-val">93</span></div>
</div>
<div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60–75 دقيقة</span></div> <div class="program-tags"><span class="tag">5–16 سنة</span><span class="tag">60–75 دقيقة</span></div>
<a href="program-basketball.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-basketball.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -579,6 +699,11 @@
<div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 7v10M18 7v10M2 10v4M22 10v4M6 12h12"/></svg></div> <div class="program-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 7v10M18 7v10M2 10v4M22 10v4M6 12h12"/></svg></div>
<h3>التدريب الشخصي</h3> <h3>التدريب الشخصي</h3>
<p>خطط تدريب فردية للرجال والنساء بإشراف مدربين ومدربات معتمدين حسب هدفك.</p> <p>خطط تدريب فردية للرجال والنساء بإشراف مدربين ومدربات معتمدين حسب هدفك.</p>
<div class="skill-bars">
<div class="skill-bar-row"><span class="skill-label">التزام</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:94%"></div></div><span class="skill-val">94</span></div>
<div class="skill-bar-row"><span class="skill-label">تحمّل</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:89%"></div></div><span class="skill-val">89</span></div>
<div class="skill-bar-row"><span class="skill-label">نتائج</span><div class="skill-bar-track"><div class="skill-bar-fill" style="width:92%"></div></div><span class="skill-val">92</span></div>
</div>
<div class="program-tags"><span class="tag">12+ سنة</span><span class="tag">حصص فردية</span></div> <div class="program-tags"><span class="tag">12+ سنة</span><span class="tag">حصص فردية</span></div>
<a href="program-personal-training.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a> <a href="program-personal-training.html" class="program-link">التفاصيل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div> </div>
@@ -603,6 +728,68 @@
</div> </div>
</section> </section>
<section id="champion-path">
<div class="container">
<div class="eyebrow">مسار البطل</div>
<h2 class="section-title">من أول خطوة، لحد المستوى الاحترافي</h2>
<p class="section-lead">خطة واضحة ومتدرّجة تواكب طفلك من أول لمسة للكرة أو الحزام الأبيض، لحد ما يبقى جاهز للمنافسة.</p>
<div class="path-track">
<div class="path-line"></div>
<div class="path-stages">
<div class="path-stage reveal">
<div class="path-marker"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
<div class="path-age">٤–٦ سنوات</div>
<h4>التأسيس الحركي</h4>
<p>بناء الوعي الحركي والتناسق بين العين واليد، وتعويد الطفل على أجواء التدريب المنظّم بأسلوب ممتع.</p>
</div>
<div class="path-stage reveal">
<div class="path-marker"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div>
<div class="path-age">٧–١٠ سنوات</div>
<h4>المهارات الأساسية</h4>
<p>بناء المهارات الفنية الخاصة بكل رياضة تدريجيًا، مع تحديات بدنية مدروسة تناسب عمر الطفل.</p>
</div>
<div class="path-stage reveal">
<div class="path-marker"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg></div>
<div class="path-age">١١–١٤ سنة</div>
<h4>التكتيك والقوة</h4>
<p>قراءة اللعب أو المباراة، بناء القوة الوظيفية، والتحضير للمشاركة في البطولات الرسمية.</p>
</div>
<div class="path-stage reveal">
<div class="path-marker"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2l2.6 6.4L21 9l-5 4.4L17.4 21 12 17.3 6.6 21 8 13.4 3 9l6.4-.6z"/></svg></div>
<div class="path-age">١٥–١٨ سنة</div>
<h4>الأداء والمسار الاحترافي</h4>
<p>منافسات ومعسكرات نخبة، وتوثيق مستوى الأداء لفتح الطريق أمام المسار الاحترافي.</p>
</div>
</div>
</div>
</div>
</section>
<section class="alt" id="method">
<div class="container">
<div class="eyebrow" style="color:var(--orange);">منهجنا التدريبي</div>
<h2 class="section-title">أسلوب مدروس، مش تخمين</h2>
<p class="section-lead">كل حصة مبنية على أساس علمي وسلامة الطفل أولًا، مش مجرد تمارين عشوائية.</p>
<div class="method-grid">
<div class="method-card reveal" data-step="01">
<div class="method-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3z"/></svg></div>
<h4>إحماء وتهيئة قبل كل حصة</h4>
<p>روتين إحماء ثابت في بداية كل حصة يهيّئ عضلات ومفاصل الطفل، ويقلل من فرص الإصابة أثناء التدريب.</p>
</div>
<div class="method-card reveal" data-step="02">
<div class="method-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 3v18h18M7 15l4-6 3 4 5-8"/></svg></div>
<h4>متابعة مستوى اللياقة</h4>
<p>نراقب تقدّم كل طفل في اللياقة والمهارة تدريجيًا، ونضبط شدة التدريب بما يناسب عمره وقدراته — من غير إفراط.</p>
</div>
<div class="method-card reveal" data-step="03">
<div class="method-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="9"/></svg></div>
<h4>مراعاة مرحلة النمو</h4>
<p>خطط التدريب تراعي المرحلة العمرية والجسدية الفعلية للطفل، مش بس تاريخ ميلاده — عشان يقوى من غير أي ضرر على المدى الطويل.</p>
</div>
</div>
</div>
</section>
<section> <section>
<div class="container"> <div class="container">
<div class="eyebrow">لماذا أكاديمية الكاف</div> <div class="eyebrow">لماذا أكاديمية الكاف</div>
@@ -845,6 +1032,36 @@
</div> </div>
</section> </section>
<section class="alt" id="extra-services">
<div class="container">
<div class="eyebrow">خدمات إضافية</div>
<h2 class="section-title">أكتر من مجرد حصص أسبوعية</h2>
<p class="section-lead">خدمات إضافية بنقدر نجهّزها لطفلك أو لعائلتك حسب احتياجكم — تواصل معنا لمعرفة التفاصيل والأسعار.</p>
<div class="services-grid">
<a href="https://wa.me/966559695266?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D9%88%D8%AF%20%D8%A3%D8%B3%D8%AA%D9%81%D8%B3%D8%B1%20%D8%B9%D9%86%20%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D9%8A%D8%A8%20%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%20(1:1)" target="_blank" rel="noopener" class="service-card reveal">
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/><path d="M19 8h3M20.5 6.5v3"/></svg></div>
<h4>تدريب خاص 1:1</h4>
<p>حصص فردية مع مدرب معتمد لتطوير مركّز في أي من رياضاتنا حسب مستوى طفلك.</p>
</a>
<a href="https://wa.me/966559695266?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D9%88%D8%AF%20%D8%A3%D8%B3%D8%AA%D9%81%D8%B3%D8%B1%20%D8%B9%D9%86%20%D8%A7%D9%84%D9%85%D8%B9%D8%B3%D9%83%D8%B1%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D9%88%D8%B3%D9%85%D9%8A%D8%A9" target="_blank" rel="noopener" class="service-card reveal">
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div>
<h4>معسكرات موسمية</h4>
<p>برامج مكثفة في الإجازات الصيفية والمناسبات، تجمع بين التدريب والأنشطة الجماعية الممتعة.</p>
</a>
<a href="https://wa.me/966559695266?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D9%88%D8%AF%20%D8%A3%D8%B3%D8%AA%D9%81%D8%B3%D8%B1%20%D8%B9%D9%86%20%D8%AD%D9%81%D9%84%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D9%8A%D9%84%D8%A7%D8%AF%20%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D8%A9" target="_blank" rel="noopener" class="service-card reveal">
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 8v13M12 8a3 3 0 100-6 3 3 0 000 6zM5 13l7-5 7 5M4 21h16"/></svg></div>
<h4>احتفالات أعياد ميلاد رياضية</h4>
<p>خلّي عيد ميلاد طفلك مختلف — احتفال رياضي كامل التنظيم في ملاعبنا مع أنشطة لكل أصدقائه.</p>
</a>
<a href="https://wa.me/966559695266?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D9%88%D8%AF%20%D8%A3%D8%B3%D8%AA%D9%81%D8%B3%D8%B1%20%D8%B9%D9%86%20%D8%AA%D8%A3%D8%AC%D9%8A%D8%B1%20%D8%A7%D9%84%D9%85%D9%84%D8%A7%D8%B9%D8%A8%2F%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D9%81%D9%82" target="_blank" rel="noopener" class="service-card reveal">
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg></div>
<h4>تأجير الملاعب والمرافق</h4>
<p>ملاعب ومرافق احترافية متاحة للحجز الخاص خارج أوقات البرامج التدريبية.</p>
</a>
</div>
</div>
</section>
<section id="trial"> <section id="trial">
<div class="container"> <div class="container">
<div class="final-cta reveal"> <div class="final-cta reveal">