Add "How your champion joins" 3-step section to homepage
Inspired by a competitor site review — adds a clear trial-to-enrollment path (book trial -> we recommend program/schedule -> subscribe and start) right before the trial booking CTA.
This commit is contained in:
44
index.html
44
index.html
@@ -250,6 +250,23 @@
|
|||||||
.why-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy);}
|
.why-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy);}
|
||||||
.why-item p{font-size:13.8px;color:var(--gray);}
|
.why-item p{font-size:13.8px;color:var(--gray);}
|
||||||
|
|
||||||
|
/* ===== HOW TO JOIN ===== */
|
||||||
|
.join-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:50px;position:relative;}
|
||||||
|
.join-step{background:#fff;border-radius:var(--radius);padding:36px 30px;border:1px solid rgba(11,36,71,.07);position:relative;}
|
||||||
|
.join-step .step-num{
|
||||||
|
width:52px;height:52px;border-radius:50%;
|
||||||
|
background:linear-gradient(150deg,var(--navy),var(--navy-deep));
|
||||||
|
color:var(--gold-light);font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;
|
||||||
|
display:flex;align-items:center;justify-content:center;margin-bottom:22px;
|
||||||
|
}
|
||||||
|
.join-step h4{font-size:18px;color:var(--navy);margin-bottom:10px;}
|
||||||
|
.join-step p{font-size:14px;color:var(--gray);}
|
||||||
|
.join-arrow{position:absolute;top:44px;inset-inline-end:-42px;width:32px;height:16px;color:var(--gold);opacity:.55;z-index:2;}
|
||||||
|
@media(max-width:900px){
|
||||||
|
.join-steps{grid-template-columns:1fr;gap:20px;}
|
||||||
|
.join-arrow{display:none;}
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== 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));
|
||||||
@@ -801,6 +818,33 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="how-to-join">
|
||||||
|
<div class="container">
|
||||||
|
<div class="eyebrow">كيف تنضم إلينا</div>
|
||||||
|
<h2 class="section-title">كيف ينضم إليكم بطلك؟</h2>
|
||||||
|
<p class="section-lead">مسار واضح من أول تواصل لأول حصة تدريبية، من غير أي تعقيد أو انتظار.</p>
|
||||||
|
<div class="join-steps">
|
||||||
|
<div class="join-step reveal">
|
||||||
|
<div class="step-num">1</div>
|
||||||
|
<h4>احجز الحصة التجريبية المجانية</h4>
|
||||||
|
<p>تواصل معنا عبر الموقع أو واتساب، ونحدد لك موعدًا مناسبًا في الأكاديمية. مدربونا يقيّمون طفلك في أجواء ممتعة ومريحة.</p>
|
||||||
|
<svg class="join-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12H4M10 6l-6 6 6 6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="join-step reveal">
|
||||||
|
<div class="step-num">2</div>
|
||||||
|
<h4>نرشّح له البرنامج والجدول المناسب</h4>
|
||||||
|
<p>بناءً على عمر ومستوى طفلك خلال الحصة التجريبية، نرشّح له الرياضة والمجموعة العمرية والجدول اللي يناسب أسرتك.</p>
|
||||||
|
<svg class="join-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12H4M10 6l-6 6 6 6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="join-step reveal">
|
||||||
|
<div class="step-num">3</div>
|
||||||
|
<h4>أكمل الاشتراك وابدأ الرحلة</h4>
|
||||||
|
<p>اختر الباقة المناسبة لطفلك من باقاتنا المرنة، وابدأ رحلته الرياضية مع فريق مدربين معتمدين وبيئة آمنة ومحفزة.</p>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
|||||||
Reference in New Issue
Block a user