Skip to content

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

Implement 50 website improvements across all categories 

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

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

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

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

Pricing page: interactive cost calculator with slider

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

CSS: new styles for FAQ accordion, comparison table, changelog
timeline, blog cards, about values, partner tiers, newsletter CTA,
testimonials, sticky CTA, exit modal, back-to-top, micro-interactions
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent c0c2bad4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7376 additions and 58 deletions
public/about.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/blog.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/changelog.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/compare.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/contact.html
View file @ 067dce8d
......@@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>احجز عرضك التجريبي - El-Captain</title>
<meta name="description" content="احجز عرضاً تجريبياً مجانياً لنظام El-Captain لإدارة الأكاديميات الرياضية. نريك النظام يعمل على بيانات مشابهة لأكاديميتك.">
<meta property="og:title" content="احجز عرضك التجريبي - El-Captain">
<meta property="og:description" content="احجز عرضاً تجريبياً مجانياً لنظام El-Captain لإدارة الأكاديميات الرياضية. نريك النظام يعمل على بيانات مشابهة لأكاديميتك.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/contact.html">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/contact.html">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
......@@ -64,49 +70,14 @@
<input type="text" id="name" name="name" required placeholder="اسمك الكامل">
</div>
<div class="form-group">
<label for="academy">اسم الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
</div>
<div class="form-group">
<label for="phone">رقم الهاتف <span style="color: var(--brand-primary);">*</span></label>
<input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx" dir="ltr">
</div>
<div class="form-group">
<label for="email">البريد الإلكتروني <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<input type="email" id="email" name="email" placeholder="email@academy.com" dir="ltr">
</div>
<div class="form-group">
<label for="subscribers_count">عدد المشتركين التقريبي</label>
<select id="subscribers_count" name="subscribers_count">
<option value="">اختر</option>
<option value="lt50">أقل من 50</option>
<option value="50-200">50 - 200</option>
<option value="200-500">200 - 500</option>
<option value="500-1000">500 - 1000</option>
<option value="gt1000">أكثر من 1000</option>
</select>
</div>
<div class="form-group">
<label for="interest">أكثر ما يهمك</label>
<select id="interest" name="interest">
<option value="">ما الوحدة الأهم بالنسبة لك؟</option>
<option value="participants">إدارة المشتركين</option>
<option value="finance">المالية</option>
<option value="attendance">الحضور</option>
<option value="programs">البرامج التدريبية</option>
<option value="inventory">المخازن</option>
<option value="all">النظام بالكامل</option>
</select>
</div>
<div class="form-group">
<label for="message">ملاحظات إضافية <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<textarea id="message" name="message" placeholder="أخبرنا عن أي متطلبات خاصة لأكاديميتك أو أسئلة تريد إجابة عليها في العرض"></textarea>
<label for="academy">اسم الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
</div>
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
......@@ -128,7 +99,7 @@
<div style="color: oklch(1 0 0 / 0.75); font-size: var(--text-sm);">رد فوري خلال دقائق</div>
</div>
</div>
<a href="https://wa.me/201000000000" target="_blank" rel="noopener noreferrer"
<a href="https://wa.me/201000000000?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D8%8C%20%D8%A3%D9%88%D8%AF%20%D9%85%D8%B9%D8%B1%D9%81%D8%A9%20%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF%20%D8%B9%D9%86%20%D9%86%D8%B8%D8%A7%D9%85%20El-Captain%20%D9%84%D8%A3%D9%83%D8%A7%D8%AF%D9%8A%D9%85%D9%8A%D8%AA%D9%8A" target="_blank" rel="noopener noreferrer"
style="display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: white; color: oklch(0.35 0.160 145); font-weight: 700; font-size: var(--text-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); transition: opacity 0.2s; text-decoration: none;">
ابدأ المحادثة الآن
</a>
......
public/css/home.css
View file @ 067dce8d
......@@ -1277,3 +1277,319 @@
justify-content: center;
}
}
/* ─────────────────────────────────────────────
SOCIAL PROOF STATS
───────────────────────────────────────────── */
.social-proof {
padding: var(--space-xl) 0;
background: var(--bg-muted);
border-bottom: 1px solid var(--border-subtle);
}
.social-proof__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
text-align: center;
}
@media (max-width: 768px) {
.social-proof__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
}
.social-proof__stat {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.social-proof__number {
font-size: var(--text-2xl);
font-weight: 900;
color: var(--color-accent-dark);
line-height: 1;
}
.social-proof__label {
font-size: var(--text-sm);
color: var(--ink-muted);
font-weight: 500;
}
/* ─────────────────────────────────────────────
TESTIMONIALS
───────────────────────────────────────────── */
.testimonials {
background: var(--bg-muted);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
@media (max-width: 900px) {
.testimonials__grid {
grid-template-columns: 1fr;
}
}
.testimonial-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: #f59e0b;
}
.testimonial-card__text {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
flex: 1;
}
.testimonial-card__author {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--space-md);
border-top: 1px solid var(--border-subtle);
}
.testimonial-card__author strong {
color: var(--ink-primary);
font-size: var(--text-sm);
}
.testimonial-card__author span {
color: var(--ink-muted);
font-size: var(--text-xs);
}
/* ─────────────────────────────────────────────
STICKY CTA BAR
───────────────────────────────────────────── */
.sticky-cta {
position: fixed;
bottom: 0;
inset-inline: 0;
background: var(--color-primary);
color: white;
padding: var(--space-sm) var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
z-index: 900;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -4px 20px oklch(0 0 0 / 0.15);
}
.sticky-cta--visible {
transform: translateY(0);
}
.sticky-cta__text {
font-weight: 600;
font-size: var(--text-sm);
}
.sticky-cta__btn {
background: white;
color: var(--color-primary);
padding: 8px 20px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: transform 0.15s;
}
.sticky-cta__btn:hover {
transform: scale(1.05);
}
.sticky-cta__close {
position: absolute;
inset-inline-end: var(--space-md);
background: none;
border: none;
color: white;
opacity: 0.7;
cursor: pointer;
padding: 4px;
}
.sticky-cta__close:hover {
opacity: 1;
}
/* ─────────────────────────────────────────────
EXIT INTENT MODAL
───────────────────────────────────────────── */
.exit-modal-backdrop {
position: fixed;
inset: 0;
background: oklch(0 0 0 / 0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.exit-modal-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
.exit-modal {
background: var(--bg-surface);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
max-width: 420px;
width: 100%;
text-align: center;
position: relative;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-modal-backdrop--visible .exit-modal {
transform: scale(1) translateY(0);
}
.exit-modal__close {
position: absolute;
top: var(--space-md);
inset-inline-end: var(--space-md);
background: none;
border: none;
color: var(--ink-muted);
cursor: pointer;
padding: 4px;
}
.exit-modal__title {
font-size: var(--text-xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.exit-modal__subtitle {
color: var(--ink-secondary);
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.exit-modal__input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-base);
text-align: center;
direction: ltr;
margin-bottom: var(--space-md);
}
.exit-modal__input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.1);
}
.exit-modal__submit {
width: 100%;
padding: 12px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.2s;
}
.exit-modal__submit:hover {
background: var(--color-accent-dark);
}
/* ─────────────────────────────────────────────
BACK TO TOP
───────────────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 100px;
inset-inline-start: var(--space-lg);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-default);
color: var(--ink-secondary);
display: grid;
place-items: center;
cursor: pointer;
z-index: 800;
opacity: 0;
transform: scale(0);
transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
.back-to-top--visible {
opacity: 1;
transform: scale(1);
}
.back-to-top:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* ─────────────────────────────────────────────
MICRO-INTERACTIONS
───────────────────────────────────────────── */
.btn {
transition: transform 0.1s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:active {
transform: scale(0.97);
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.12);
}
.plan-card, .pain-card, .feature-card, .module-card, .testimonial-card {
transition: transform 0.2s, box-shadow 0.2s;
}
.plan-card:hover, .pain-card:hover, .feature-card:hover, .module-card:hover, .testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
}
public/css/pages.css
View file @ 067dce8d
......@@ -1360,3 +1360,390 @@
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
}
/* ─────────────────────────────────────────────
FAQ ACCORDION
───────────────────────────────────────────── */
.faq-category {
margin-bottom: var(--space-xl);
}
.faq-category__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--border-subtle);
}
.faq-item {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
margin-bottom: var(--space-sm);
overflow: hidden;
background: var(--bg-surface);
}
.faq-item summary {
padding: var(--space-md) var(--space-lg);
font-weight: 600;
color: var(--ink-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '';
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.2s;
flex-shrink: 0;
}
.faq-item[open] summary::after {
transform: rotate(180deg);
}
.faq-item__answer {
padding: 0 var(--space-lg) var(--space-lg);
color: var(--ink-secondary);
line-height: 1.8;
font-size: var(--text-sm);
}
/* ─────────────────────────────────────────────
COMPARE TABLE
───────────────────────────────────────────── */
.compare-section {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-full-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 800px;
background: var(--bg-surface);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.compare-full-table th,
.compare-full-table td {
padding: 14px 16px;
text-align: center;
border-bottom: 1px solid var(--border-subtle);
}
.compare-full-table th {
background: var(--bg-muted);
font-weight: 700;
color: var(--ink-primary);
}
.compare-full-table th:first-child,
.compare-full-table td:first-child {
text-align: start;
font-weight: 600;
}
.compare-full-table .highlight-col {
background: oklch(0.55 0.15 200 / 0.05);
}
/* ─────────────────────────────────────────────
CHANGELOG TIMELINE
───────────────────────────────────────────── */
.changelog-timeline {
position: relative;
padding-inline-start: var(--space-xl);
}
.changelog-timeline::before {
content: '';
position: absolute;
inset-inline-start: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-default);
}
.changelog-entry {
position: relative;
padding-bottom: var(--space-xl);
}
.changelog-entry::before {
content: '';
position: absolute;
inset-inline-start: calc(-1 * var(--space-xl) + 4px);
top: 6px;
width: 12px;
height: 12px;
background: var(--color-accent);
border-radius: 50%;
border: 2px solid var(--bg-body);
}
.changelog-entry__date {
font-size: var(--text-xs);
color: var(--ink-muted);
font-weight: 600;
margin-bottom: var(--space-2xs);
}
.changelog-entry__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.changelog-entry__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* ─────────────────────────────────────────────
BLOG CARDS
───────────────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-lg);
}
.blog-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.08);
}
.blog-card__bar {
height: 4px;
background: var(--color-accent);
}
.blog-card__body {
padding: var(--space-lg);
}
.blog-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-sm);
line-height: 1.5;
}
.blog-card__excerpt {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.blog-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.blog-card__link:hover {
text-decoration: underline;
}
/* ─────────────────────────────────────────────
ABOUT PAGE
───────────────────────────────────────────── */
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
.about-value {
text-align: center;
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
}
.about-value__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
background: oklch(0.93 0.05 200);
border-radius: var(--radius-lg);
display: grid;
place-items: center;
color: var(--color-accent-dark);
}
.about-value__title {
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.about-value__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* ─────────────────────────────────────────────
PARTNER TIERS
───────────────────────────────────────────── */
.partner-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-lg);
}
.partner-tier {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
text-align: center;
}
.partner-tier__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-md);
background: oklch(0.93 0.04 45);
border-radius: var(--radius-full);
display: grid;
place-items: center;
color: oklch(0.50 0.15 45);
}
.partner-tier__name {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.partner-tier__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.partner-tier__benefits {
list-style: none;
padding: 0;
text-align: start;
}
.partner-tier__benefits li {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
color: var(--ink-secondary);
padding: 6px 0;
}
.partner-tier__benefits li::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
background: oklch(0.93 0.05 170);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23178a5b' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px;
background-position: center;
background-repeat: no-repeat;
}
/* ─────────────────────────────────────────────
NEWSLETTER CTA
───────────────────────────────────────────── */
.newsletter-cta {
background: var(--color-primary);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
text-align: center;
color: white;
}
.newsletter-cta__title {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.newsletter-cta__desc {
opacity: 0.85;
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.newsletter-cta__form {
display: flex;
gap: var(--space-sm);
max-width: 400px;
margin: 0 auto;
}
@media (max-width: 500px) {
.newsletter-cta__form {
flex-direction: column;
}
}
.newsletter-cta__input {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: var(--radius-md);
font-size: var(--text-sm);
direction: ltr;
}
.newsletter-cta__btn {
padding: 10px 20px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--text-sm);
cursor: pointer;
white-space: nowrap;
}
public/faq.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/football.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/gymnastics.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/index.html
View file @ 067dce8d
......@@ -5,12 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain - نظام إدارة الأكاديميات الرياضية</title>
<meta name="description" content="El-Captain نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية. عربي بالكامل، مصمم للسوق المصري.">
<meta property="og:title" content="El-Captain - نظام إدارة الأكاديميات الرياضية">
<meta property="og:description" content="نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<body data-sticky-cta data-exit-intent>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
......@@ -79,6 +85,30 @@
</div>
</section>
<!-- Social Proof Stats -->
<section class="social-proof" data-reveal>
<div class="container">
<div class="social-proof__grid">
<div class="social-proof__stat">
<span class="social-proof__number" data-count="32" data-count-suffix="+">0+</span>
<span class="social-proof__label">أكاديمية تستخدم النظام</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="15000" data-count-suffix="+">0+</span>
<span class="social-proof__label">مشترك يُدار عبر المنصة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="50000" data-count-suffix="+">0+</span>
<span class="social-proof__label">حصة تدريبية مسجلة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="2" data-count-suffix="M+ ج.م">0M+ ج.م</span>
<span class="social-proof__label">تم تحصيلها عبر النظام</span>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section section--muted">
<div class="container">
......@@ -465,6 +495,59 @@
</div>
</section>
<!-- Testimonials -->
<section class="section testimonials">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">ماذا يقول عملاؤنا</h2>
</div>
<div class="testimonials__grid" data-reveal="200">
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"النظام وفّر علينا ساعتين يومياً في المتابعة. قبل كده كنا بنضيع وقت كبير في Excel والورق."</p>
<div class="testimonial-card__author">
<strong>أحمد محمود</strong>
<span>مدير أكاديمية النجوم الرياضية</span>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"أخيراً نظام بيفهم شغل الأكاديميات. التقارير المالية والحضور اللحظي غيّروا طريقة إدارتنا تماماً."</p>
<div class="testimonial-card__author">
<strong>محمد السيد</strong>
<span>مؤسس أكاديمية الأبطال للسباحة</span>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-card__stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-card__text">"الفترة التجريبية كانت كافية إننا نتأكد إن النظام يناسبنا. الدعم الفني ممتاز وبيرد بسرعة."</p>
<div class="testimonial-card__author">
<strong>سارة حسن</strong>
<span>مديرة أكاديمية الأمل للجمباز</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
......
public/js/main.js
View file @ 067dce8d
This diff is collapsed.
public/manifest.json 0 → 100644
View file @ 067dce8d
{
"name": "El-Captain",
"short_name": "EC",
"description": "نظام إدارة الأكاديميات الرياضية",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#1B2B4B",
"background_color": "#ffffff",
"lang": "ar",
"dir": "rtl",
"icons": [
{
"src": "/assets/images/logo-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/logo-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
public/martial-arts.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/partners.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/pricing.html
View file @ 067dce8d
......@@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الباقات والأسعار - El-Captain</title>
<meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة. فترة تجريبية مجانية لكل الباقات.">
<meta property="og:title" content="الباقات والأسعار - El-Captain">
<meta property="og:description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/pricing.html">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/pricing.html">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
......@@ -586,6 +592,29 @@
</div>
</section>
<!-- Pricing Calculator -->
<section class="section" id="calculator">
<div class="container" style="max-width: 700px;">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">احسب تكلفتك الشهرية</h2>
<p class="section-header__desc">حرّك المؤشر لمعرفة أي باقة أوفر لحجم تحصيلاتك</p>
</div>
<div id="pricing-calculator" data-reveal="100">
<div style="margin-bottom: var(--space-lg);">
<label style="display: block; font-weight: 600; margin-bottom: var(--space-sm); color: var(--ink-primary);">تحصيلاتك الشهرية المتوقعة:</label>
<input type="range" id="calc-slider" min="10000" max="500000" step="5000" value="50000" style="width: 100%; accent-color: var(--color-accent);">
<div style="display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2xs);">
<span dir="ltr">10,000 ج.م</span>
<span id="calc-current" dir="ltr" style="font-weight: 700; color: var(--color-accent-dark); font-size: var(--text-base);">50,000 ج.م</span>
<span dir="ltr">500,000 ج.م</span>
</div>
</div>
<div id="calc-results" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md);"></div>
<p id="calc-recommendation" style="text-align: center; margin-top: var(--space-lg); font-weight: 600; color: var(--color-accent-dark);"></p>
</div>
</div>
</section>
<!-- Value Strip -->
<section class="section" style="padding-top: 0;">
<div class="container" data-reveal>
......
public/privacy.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
public/robots.txt 0 → 100644
View file @ 067dce8d
User-agent: *
Allow: /
Sitemap: https://el-captain-website.caprover.al-arcade.com/sitemap.xml
public/sitemap.xml 0 → 100644
View file @ 067dce8d
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/index.html</loc>
<priority>1.0</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/features.html</loc>
<priority>0.9</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/pricing.html</loc>
<priority>0.9</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/swimming.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/contact.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/about.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/blog.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/compare.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/changelog.html</loc>
<priority>0.6</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/football.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/martial-arts.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/gymnastics.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/faq.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/terms.html</loc>
<priority>0.4</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/privacy.html</loc>
<priority>0.4</priority>
</url>
<url>
<loc>https://el-captain-website.caprover.al-arcade.com/partners.html</loc>
<priority>0.7</priority>
</url>
</urlset>
public/terms.html 0 → 100644
View file @ 067dce8d
This diff is collapsed.
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