Skip to content

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

Redesign marketing website: dark theme → light "Trusted & Reliable" brand 

Complete visual overhaul targeting Egyptian academy owners. Light theme with
Navy/Teal/Gold palette, Cairo font, RTL-first. New pages structure:
index (12 sections), features, pricing, contact. Removed old per-module pages.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 081d9938
Hide whitespace changes
Inline Side-by-side
Showing with 5209 additions and 3219 deletions
public/contact.html
View file @ 170eaea6
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تواصل معنا - El-Captain</title> <title>احجز عرضك التجريبي - El-Captain</title>
<meta name="description" content="تواصل مع فريق El-Captain لحجز عرض تجريبي مجاني او الاستفسار عن نظام ادارة الاندية الرياضية."> <meta name="description" content="احجز عرضاً تجريبياً مجانياً لنظام El-Captain لإدارة الأكاديميات الرياضية. نريك النظام يعمل على بيانات مشابهة لأكاديميتك.">
<link rel="stylesheet" href="css/tokens.css"> <link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/components.css">
...@@ -12,120 +12,146 @@ ...@@ -12,120 +12,146 @@
</head> </head>
<body> <body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي"> <nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner"> <div class="container nav__inner">
<a href="/" class="nav__logo"> <a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span> <span class="nav__logo-mark">EC</span>
<span>El-Captain</span> <span>El-Captain</span>
</a> </a>
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks"> <button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Hero --> <!-- Hero Banner -->
<section class="module-hero section"> <section class="module-hero section">
<div class="container"> <div class="container">
<div class="module-hero__content" data-reveal> <div class="module-hero__content" data-reveal>
<nav class="breadcrumb" aria-label="مسار التنقل"> <nav class="breadcrumb" aria-label="مسار التنقل">
<a href="/">الرئيسية</a> <a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span> <span class="breadcrumb__separator">/</span>
<span>تواصل معنا</span> <span>احجز عرضاً</span>
</nav> </nav>
<h1 class="module-hero__title">نقطة البداية</h1> <span class="section-header__tag" style="margin-bottom: var(--space-lg); display: inline-flex;">الخطوة الأولى</span>
<p class="module-hero__desc">عرض تجريبي مجاني بدون التزام. نريك النظام يعمل على بيانات حقيقية مشابهة لناديك.</p> <h1 class="module-hero__title">احجز عرضك التجريبي المجاني</h1>
<p class="module-hero__desc">نريك النظام يعمل على بيانات مشابهة لأكاديميتك. بدون أي التزام.</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Contact Form + Info --> <!-- Form + Sidebar -->
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="contact-section" data-reveal> <div class="contact-section" data-reveal>
<!-- Form -->
<form class="contact-form" action="#" method="POST"> <form class="contact-form" action="#" method="POST">
<div class="form-group"> <div class="form-group">
<label for="name">الاسم</label> <label for="name">الاسم <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="name" name="name" required placeholder="اسمك الكامل"> <input type="text" id="name" name="name" required placeholder="اسمك الكامل">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="club">اسم النادي / المنشأة</label> <label for="academy">اسم الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
<input type="text" id="club" name="club" required placeholder="مثال: نادي الشمس الرياضي"> <input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
</div>
<div class="form-group">
<label for="role">المنصب</label>
<select id="role" name="role" required>
<option value="">اختر منصبك</option>
<option value="board">عضو مجلس ادارة</option>
<option value="director">مدير تنفيذي</option>
<option value="finance">مدير مالي / محاسب</option>
<option value="it">مسؤول تقنية المعلومات</option>
<option value="sports">مدير النشاط الرياضي</option>
<option value="pool">مدير حمام السباحة</option>
<option value="other">اخرى</option>
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone">رقم الهاتف</label> <label for="phone">رقم الهاتف <span style="color: var(--brand-primary);">*</span></label>
<input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx" dir="ltr"> <input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx" dir="ltr">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email">البريد الالكتروني</label> <label for="email">البريد الإلكتروني <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<input type="email" id="email" name="email" placeholder="email@club.com" dir="ltr"> <input type="email" id="email" name="email" placeholder="email@academy.com" dir="ltr">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="members_count">عدد الاعضاء التقريبي</label> <label for="subscribers_count">عدد المشتركين التقريبي</label>
<select id="members_count" name="members_count"> <select id="subscribers_count" name="subscribers_count">
<option value="">اختر</option> <option value="">اختر</option>
<option value="500">اقل من 500</option> <option value="lt50">أقل من 50</option>
<option value="1000">500 - 1000</option> <option value="50-200">50 - 200</option>
<option value="5000">1000 - 5000</option> <option value="200-500">200 - 500</option>
<option value="10000">5000 - 10000</option> <option value="500-1000">500 - 1000</option>
<option value="more">اكثر من 10000</option> <option value="gt1000">أكثر من 1000</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="interest">اكثر ما يهمك</label> <label for="interest">أكثر ما يهمك</label>
<select id="interest" name="interest"> <select id="interest" name="interest">
<option value="">ما الوحدة الاهم بالنسبة لك؟</option> <option value="">ما الوحدة الأهم بالنسبة لك؟</option>
<option value="members">ادارة العضويات</option> <option value="participants">إدارة المشتركين</option>
<option value="sports">الانشطة الرياضية</option> <option value="finance">المالية</option>
<option value="pool">حمام السباحة</option> <option value="attendance">الحضور</option>
<option value="finance">المالية والمحاسبة</option> <option value="programs">البرامج التدريبية</option>
<option value="hr">الموارد البشرية</option> <option value="inventory">المخازن</option>
<option value="mobile">التطبيقات المحمولة</option>
<option value="all">النظام بالكامل</option> <option value="all">النظام بالكامل</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="message">ملاحظات اضافية</label> <label for="message">ملاحظات إضافية <span style="color: var(--ink-muted); font-weight: 400;">(اختياري)</span></label>
<textarea id="message" name="message" placeholder="اخبرنا عن اي متطلبات خاصة لناديك"></textarea> <textarea id="message" name="message" placeholder="أخبرنا عن أي متطلبات خاصة لأكاديميتك أو أسئلة تريد إجابة عليها في العرض"></textarea>
</div> </div>
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">ارسل طلب العرض التجريبي</button> <button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
احجز العرض التجريبي
</button>
</form> </form>
<!-- Sidebar -->
<div> <div>
<div class="contact-info" data-reveal="200">
<!-- WhatsApp Card -->
<div style="background: oklch(0.40 0.165 145); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl);" data-reveal="150">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md);">
<div style="width: 2.75rem; height: 2.75rem; background: oklch(1 0 0 / 0.15); border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="white"><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 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-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 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.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 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</div>
<div>
<div style="color: white; font-weight: 700; font-size: var(--text-base); margin-bottom: 2px;">تواصل سريع عبر واتساب</div>
<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"
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>
</div>
<!-- Demo Checklist -->
<div style="padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); margin-bottom: var(--space-xl);" data-reveal="200">
<h4 style="margin-bottom: var(--space-lg); font-size: var(--text-lg); color: var(--ink-primary);">ماذا يتضمن العرض؟</h4>
<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>
<!-- Contact Info -->
<div class="contact-info" data-reveal="250">
<div class="contact-info__item"> <div class="contact-info__item">
<div class="contact-info__icon"> <div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.21 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</div> </div>
<div> <div>
<div class="contact-info__label">الهاتف</div> <div class="contact-info__label">الهاتف</div>
...@@ -135,27 +161,36 @@ ...@@ -135,27 +161,36 @@
<div class="contact-info__item"> <div class="contact-info__item">
<div class="contact-info__icon"> <div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
</div> </div>
<div> <div>
<div class="contact-info__label">البريد الالكتروني</div> <div class="contact-info__label">البريد الإلكتروني</div>
<div class="contact-info__value" dir="ltr">info@el-captain.com</div> <div class="contact-info__value" dir="ltr">info@el-captain.com</div>
</div> </div>
</div> </div>
<div class="contact-info__item"> <div class="contact-info__item">
<div class="contact-info__icon"> <div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div> </div>
<div> <div>
<div class="contact-info__label">اوقات العمل</div> <div class="contact-info__label">أوقات العمل</div>
<div class="contact-info__value">الاحد - الخميس: 9 ص - 5 م</div> <div class="contact-info__value">الأحد - الخميس: 9ص - 5م</div>
</div> </div>
</div> </div>
<div class="contact-info__item"> <div class="contact-info__item">
<div class="contact-info__icon"> <div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div> </div>
<div> <div>
<div class="contact-info__label">الموقع</div> <div class="contact-info__label">الموقع</div>
...@@ -164,16 +199,6 @@ ...@@ -164,16 +199,6 @@
</div> </div>
</div> </div>
<div style="margin-top: var(--space-xl); padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);" data-reveal="300">
<h4 style="margin-bottom: var(--space-md); font-size: var(--text-lg);">ماذا يتضمن العرض التجريبي؟</h4>
<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> </div>
</div> </div>
</div> </div>
...@@ -185,16 +210,18 @@ ...@@ -185,16 +210,18 @@
<div class="footer__grid"> <div class="footer__grid">
<div class="footer__brand"> <div class="footer__brand">
<div class="footer__brand-name">El-Captain</div> <div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p> <p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من تسجيل المشترك حتى التقارير المالية الشهرية.</p>
</div> </div>
<div> <div>
<h4 class="footer__col-title">الوحدات</h4> <h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a> <a href="features.html#members" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a> <a href="features.html#sports" class="footer__link">الأنشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a> <a href="features.html#pool" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a> <a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a> <a href="features.html" class="footer__link">كل المزايا</a>
</div> </div>
<div> <div>
<h4 class="footer__col-title">النظام</h4> <h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a> <a href="features.html#hr" class="footer__link">الموارد البشرية</a>
...@@ -202,15 +229,17 @@ ...@@ -202,15 +229,17 @@
<a href="features.html#reports" class="footer__link">التقارير</a> <a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a> <a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div> </div>
<div> <div>
<h4 class="footer__col-title">تواصل</h4> <h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a> <a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a> <a href="contact.html" class="footer__link">الدعم الفني</a>
</div> </div>
</div> </div>
<div class="footer__bottom"> <div class="footer__bottom">
<span>El-Captain ERP System</span> <span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span> <span>نظام إدارة الأكاديميات الرياضية</span>
</div> </div>
</div> </div>
</footer> </footer>
......
public/css/base.css
View file @ 170eaea6
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap'); /* ============================================================
El Captain Sports Management — Base Styles
Reset · Typography · Layout primitives · Utilities
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
/* ----------------------------------------------------------
Reset & Normalize
---------------------------------------------------------- */
*, *,
*::before, *::before,
...@@ -10,93 +19,210 @@ ...@@ -10,93 +19,210 @@
html { html {
direction: rtl; direction: rtl;
lang: ar;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 100%; /* 16px base */
hanging-punctuation: first last;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html { html {
scroll-behavior: auto; scroll-behavior: auto;
} }
*, *,
*::before, *::before,
*::after { *::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
} }
} }
body { body {
font-family: 'Tajawal', sans-serif; font-family: var(--font-primary);
font-size: var(--text-base); font-size: var(--text-base);
line-height: 1.75; line-height: var(--leading-relaxed);
color: var(--ink-primary); color: var(--ink-primary);
background-color: var(--bg-deep); background-color: var(--bg-body);
overflow-x: hidden; overflow-x: hidden;
min-height: 100dvh; min-height: 100dvh;
} }
h1, h2, h3, h4, h5, h6 { /* Images & media */
line-height: 1.2; img,
font-weight: 700; picture,
text-wrap: balance; video,
letter-spacing: -0.01em; canvas,
svg {
display: block;
max-width: 100%;
height: auto;
} }
h1 { font-size: var(--text-5xl); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; } /* Form elements inherit font */
h2 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } input,
h3 { font-size: var(--text-3xl); letter-spacing: -0.015em; } button,
h4 { font-size: var(--text-2xl); } textarea,
h5 { font-size: var(--text-xl); } select {
font: inherit;
}
p { /* Lists */
max-width: var(--content-max); ul,
text-wrap: pretty; ol {
color: var(--ink-secondary); list-style: none;
line-height: 1.85;
} }
a { /* Tables */
color: var(--brand-primary-light); table {
text-decoration: none; border-collapse: collapse;
transition: color var(--duration-fast) var(--ease-out-quart);
} }
a:hover { /* Quotes */
color: var(--brand-primary); blockquote,
q {
quotes: none;
} }
img { /* HR */
display: block; hr {
max-width: 100%; border: none;
height: auto; border-top: 1px solid var(--border-subtle);
margin-block: var(--space-lg);
} }
/* Button reset */
button { button {
font-family: inherit;
cursor: pointer; cursor: pointer;
border: none; border: none;
background: none; background: none;
font-family: inherit;
} }
ul, ol { button:disabled {
list-style: none; cursor: not-allowed;
opacity: 0.55;
} }
/* Selection */
::selection { ::selection {
background: oklch(0.550 0.180 353.3 / 0.35); background-color: rgba(8, 145, 178, 0.18);
color: var(--ink-primary); color: var(--ink-primary);
} }
/* Focus ring — accessible, unobtrusive */
:focus-visible { :focus-visible {
outline: 2px solid var(--brand-primary); outline: 2px solid var(--color-accent);
outline-offset: 3px; outline-offset: 3px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
/* ----------------------------------------------------------
Links
---------------------------------------------------------- */
a {
color: var(--ink-link);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
color: var(--ink-link-hover);
}
a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* ----------------------------------------------------------
Typography — Headings
---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-snug);
color: var(--ink-primary);
text-wrap: balance;
}
h1 {
font-size: var(--text-5xl);
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: 1.1;
}
h2 {
font-size: var(--text-4xl);
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: 1.15;
}
h3 {
font-size: var(--text-3xl);
font-weight: 700;
line-height: 1.25;
}
h4 {
font-size: var(--text-2xl);
font-weight: 700;
}
h5 {
font-size: var(--text-xl);
font-weight: 600;
}
h6 {
font-size: var(--text-lg);
font-weight: 600;
}
/* Heading color overrides for dark sections */
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
color: var(--ink-on-dark);
}
/* Body copy */
p {
color: var(--ink-secondary);
line-height: var(--leading-loose);
text-wrap: pretty;
max-width: var(--content-max);
}
p.lead {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
}
/* ----------------------------------------------------------
Layout — Container
---------------------------------------------------------- */
.container { .container {
width: 100%; width: 100%;
max-width: var(--container-max); max-width: var(--container-max);
...@@ -108,12 +234,404 @@ ul, ol { ...@@ -108,12 +234,404 @@ ul, ol {
max-width: var(--container-wide); max-width: var(--container-wide);
} }
.container--narrow {
max-width: 720px;
}
/* ----------------------------------------------------------
Layout — Section
---------------------------------------------------------- */
.section { .section {
padding-block: var(--space-section); padding-block: var(--space-section);
position: relative; position: relative;
} }
.visually-hidden { .section--sm {
padding-block: var(--space-2xl);
}
.section--lg {
padding-block: calc(var(--space-section) * 1.4);
}
/* Alternate background for visual rhythm */
.section--muted {
background-color: var(--bg-muted);
}
.section--dark {
background-color: var(--bg-dark);
color: var(--ink-on-dark);
}
.section--dark p {
color: var(--ink-on-dark-muted);
}
/* ----------------------------------------------------------
Section Header Pattern: tag → title → description
---------------------------------------------------------- */
.section-header {
margin-block-end: var(--space-2xl);
}
.section-header--center {
text-align: center;
}
.section-header--center p {
margin-inline: auto;
}
.section-header__tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-accent);
background-color: var(--color-accent-ghost);
border: 1px solid var(--border-accent);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-full);
margin-block-end: var(--space-md);
}
.section--dark .section-header__tag {
color: var(--color-accent-light);
background-color: rgba(8, 145, 178, 0.15);
border-color: rgba(8, 145, 178, 0.30);
}
.section-header__title {
margin-block-end: var(--space-md);
}
.section-header__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 58ch;
line-height: var(--leading-relaxed);
}
.section-header--center .section-header__desc {
margin-inline: auto;
}
.section--dark .section-header__desc {
color: var(--ink-on-dark-muted);
}
/* ----------------------------------------------------------
Buttons
---------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding-inline: var(--space-lg);
height: var(--btn-height-md);
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: var(--btn-font-weight);
line-height: 1;
border-radius: var(--btn-radius);
border: 1.5px solid transparent;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition:
background-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
position: relative;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
.btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* Primary — Accent Teal */
.btn--primary {
background-color: var(--color-accent);
color: #FFFFFF;
border-color: var(--color-accent);
box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
background-color: var(--color-accent-dark);
border-color: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(8, 145, 178, 0.30);
}
.btn--primary:active {
transform: translateY(0);
box-shadow: var(--shadow-accent);
}
/* Secondary — Outlined navy */
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary-light);
}
.btn--secondary:hover {
background-color: var(--color-primary-ghost);
color: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-1px);
}
.btn--secondary:active {
transform: translateY(0);
}
/* Secondary on dark backgrounds */
.section--dark .btn--secondary,
.on-dark .btn--secondary {
color: var(--ink-on-dark);
border-color: rgba(248, 250, 251, 0.30);
}
.section--dark .btn--secondary:hover,
.on-dark .btn--secondary:hover {
background-color: rgba(248, 250, 251, 0.08);
border-color: rgba(248, 250, 251, 0.55);
color: var(--ink-on-dark);
}
/* Ghost — minimal */
.btn--ghost {
background-color: transparent;
color: var(--ink-secondary);
border-color: transparent;
}
.btn--ghost:hover {
background-color: var(--bg-muted);
color: var(--ink-primary);
}
/* Gold — premium/highlight */
.btn--gold {
background-color: var(--color-gold);
color: #FFFFFF;
border-color: var(--color-gold);
box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
background-color: var(--color-gold-dark);
border-color: var(--color-gold-dark);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(201, 149, 43, 0.35);
}
/* WhatsApp */
.btn--whatsapp {
background-color: var(--color-whatsapp);
color: #FFFFFF;
border-color: var(--color-whatsapp);
gap: var(--space-sm);
}
.btn--whatsapp:hover {
background-color: var(--color-whatsapp-dark);
border-color: var(--color-whatsapp-dark);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.30);
}
/* Sizes */
.btn--sm {
height: var(--btn-height-sm);
padding-inline: var(--space-md);
font-size: var(--text-xs);
border-radius: var(--radius-sm);
}
.btn--large,
.btn--lg {
height: var(--btn-height-lg);
padding-inline: var(--space-xl);
font-size: var(--text-base);
border-radius: var(--radius-lg);
}
/* Icon-only button */
.btn--icon {
padding-inline: 0;
width: var(--btn-height-md);
flex-shrink: 0;
}
.btn--icon.btn--lg {
width: var(--btn-height-lg);
}
/* ----------------------------------------------------------
Stat Component
---------------------------------------------------------- */
.stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.stat--center {
align-items: center;
text-align: center;
}
.stat__value {
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1;
color: var(--color-primary);
letter-spacing: var(--tracking-tight);
}
.stat__value--accent {
color: var(--color-accent);
}
.stat__value--gold {
color: var(--color-gold);
}
/* Gradient variant */
.stat__value--gradient {
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat__label {
font-size: var(--text-sm);
color: var(--ink-muted);
font-weight: 500;
line-height: var(--leading-snug);
}
.on-dark .stat__value,
.section--dark .stat__value {
color: var(--ink-on-dark);
}
.on-dark .stat__label,
.section--dark .stat__label {
color: var(--ink-on-dark-muted);
}
/* ----------------------------------------------------------
Utilities
---------------------------------------------------------- */
/* Text alignment */
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
/* Text colors */
.text-primary { color: var(--ink-primary); }
.text-secondary { color: var(--ink-secondary); }
.text-muted { color: var(--ink-muted); }
.text-accent { color: var(--color-accent); }
.text-gold { color: var(--color-gold); }
.text-on-dark { color: var(--ink-on-dark); }
/* Gradient text */
.text-gradient {
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient--gold {
background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
/* Display helpers */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-none { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
/* Spacing helpers */
.mt-auto { margin-block-start: auto; }
.mb-auto { margin-block-end: auto; }
.mx-auto { margin-inline: auto; }
.mt-lg { margin-block-start: var(--space-lg); }
.mb-lg { margin-block-end: var(--space-lg); }
/* Width helpers */
.w-full { width: 100%; }
/* Max-width for prose */
.prose { max-width: var(--content-max); }
.prose--wide { max-width: 80ch; }
/* Decorative divider */
.divider {
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
border-radius: var(--radius-full);
margin-block: var(--space-md);
}
.divider--center {
margin-inline: auto;
}
.divider--gold {
background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
/* Visually hidden (accessibility) */
.visually-hidden,
.sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
...@@ -125,13 +643,60 @@ ul, ol { ...@@ -125,13 +643,60 @@ ul, ol {
border: 0; border: 0;
} }
/* Noise texture overlay for depth */ /* Skip to main content */
body::before { .skip-link {
content: ''; position: absolute;
position: fixed; top: -100%;
inset: 0; inset-inline-start: var(--space-md);
pointer-events: none; z-index: var(--z-tooltip);
z-index: 9999; padding: var(--space-sm) var(--space-md);
opacity: 0.025; background: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); color: #FFFFFF;
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-md);
transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
top: var(--space-md);
}
/* Responsive images in text content */
figure {
margin-inline: 0;
}
figcaption {
font-size: var(--text-xs);
color: var(--ink-muted);
margin-block-start: var(--space-xs);
text-align: center;
}
/* Code */
code {
font-family: var(--font-mono);
font-size: 0.875em;
background: var(--bg-muted);
padding: 0.15em 0.4em;
border-radius: var(--radius-xs);
color: var(--color-primary);
}
pre {
font-family: var(--font-mono);
background: var(--bg-dark);
color: var(--ink-on-dark);
padding: var(--space-lg);
border-radius: var(--radius-lg);
overflow-x: auto;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
pre code {
background: none;
padding: 0;
color: inherit;
} }
public/css/components.css
View file @ 170eaea6
/* Navigation */ /* ============================================================
El Captain Sports Management — Components
Nav · Footer · Card · Badge · Trust Badge · WhatsApp FAB
============================================================ */
/* ----------------------------------------------------------
Navigation
Sticky top nav — white background, professional shadow
---------------------------------------------------------- */
.nav { .nav {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; inset-inline: 0;
left: 0;
z-index: var(--z-sticky); z-index: var(--z-sticky);
background-color: var(--bg-surface);
border-bottom: 1px solid transparent;
padding-block: var(--space-sm); padding-block: var(--space-sm);
transition: all var(--duration-slow) var(--ease-out-expo); transition:
border-color var(--duration-slow) var(--ease-out),
box-shadow var(--duration-slow) var(--ease-out),
padding-block var(--duration-slow) var(--ease-out),
background-color var(--duration-slow) var(--ease-out);
} }
/* Added by JS on scroll */
.nav--scrolled { .nav--scrolled {
background: oklch(0.095 0.006 280 / 0.8); border-bottom-color: var(--border-subtle);
backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--shadow-nav);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border-bottom: 1px solid oklch(1 0 0 / 0.04);
padding-block: var(--space-xs); padding-block: var(--space-xs);
} }
...@@ -24,94 +37,182 @@ ...@@ -24,94 +37,182 @@
gap: var(--space-lg); gap: var(--space-lg);
} }
/* Logo */
.nav__logo { .nav__logo {
font-size: var(--text-lg);
font-weight: 900;
color: var(--ink-primary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-sm); gap: var(--space-sm);
letter-spacing: -0.02em; text-decoration: none;
flex-shrink: 0;
} }
.nav__logo-mark { .nav__logo-mark {
width: 2rem; width: 2.25rem;
height: 2rem; height: 2.25rem;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light)); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border-radius: var(--radius-md); border-radius: var(--radius-md);
display: grid; display: grid;
place-items: center; place-items: center;
color: white; flex-shrink: 0;
font-weight: 900; }
.nav__logo-mark svg,
.nav__logo-mark img {
width: 1.125rem;
height: 1.125rem;
}
.nav__logo-text {
font-size: var(--text-lg);
font-weight: 800;
color: var(--color-primary);
letter-spacing: var(--tracking-snug);
line-height: 1;
}
.nav__logo-sub {
display: block;
font-size: var(--text-xs); font-size: var(--text-xs);
box-shadow: 0 2px 12px oklch(0.550 0.180 353.3 / 0.3); font-weight: 400;
color: var(--ink-muted);
letter-spacing: var(--tracking-normal);
} }
/* Links list */
.nav__links { .nav__links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-2xs);
flex: 1;
justify-content: center;
} }
/* Individual link */
.nav__link { .nav__link {
color: var(--ink-muted); display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: 500; font-weight: 500;
padding: var(--space-xs) var(--space-sm); color: var(--ink-secondary);
border-radius: var(--radius-md); border-radius: var(--radius-sm);
transition: all var(--duration-fast) var(--ease-out-quart); text-decoration: none;
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
white-space: nowrap;
} }
.nav__link:hover { .nav__link:hover {
color: var(--ink-primary); color: var(--color-primary);
background: oklch(1 0 0 / 0.05); background-color: var(--bg-muted);
} }
.nav__link--active { .nav__link--active {
color: var(--ink-primary); color: var(--color-primary);
font-weight: 600;
}
/* Dropdown indicator */
.nav__link svg {
width: 14px;
height: 14px;
opacity: 0.6;
transition: transform var(--duration-fast) var(--ease-out);
}
.nav__link:hover svg {
opacity: 1;
}
/* CTA actions area */
.nav__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
} }
/* Nav CTA button */
.nav__cta { .nav__cta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
padding: var(--space-xs) var(--space-md); padding: var(--space-xs) var(--space-md);
background: var(--brand-primary); height: 2.25rem;
color: white; background-color: var(--color-accent);
font-weight: 600; color: #FFFFFF;
font-size: var(--text-sm); font-size: var(--text-sm);
border-radius: var(--radius-lg); font-weight: 600;
transition: all var(--duration-fast) var(--ease-out-quart); border-radius: var(--radius-md);
box-shadow: 0 2px 8px oklch(0.550 0.180 353.3 / 0.2); text-decoration: none;
white-space: nowrap;
transition:
background-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.22);
} }
.nav__cta:hover { .nav__cta:hover {
color: white; background-color: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 20px oklch(0.550 0.180 353.3 / 0.35); box-shadow: 0 4px 16px rgba(8, 145, 178, 0.32);
}
.nav__cta:active {
transform: translateY(0);
} }
/* Mobile menu */ /* Mobile hamburger toggle */
.nav__toggle { .nav__toggle {
display: none; display: none;
width: 44px; width: 2.5rem;
height: 44px; height: 2.5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--ink-primary); color: var(--color-primary);
border-radius: var(--radius-md); border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-out-quart); border: 1px solid var(--border-subtle);
background-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
flex-shrink: 0;
} }
.nav__toggle:hover { .nav__toggle:hover {
background: oklch(1 0 0 / 0.05); background-color: var(--bg-muted);
border-color: var(--border-default);
} }
.nav__toggle svg { .nav__toggle svg {
width: 20px; width: 18px;
height: 20px; height: 18px;
pointer-events: none;
} }
/* Mobile overlay backdrop */
.nav__overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(27, 43, 75, 0.40);
z-index: calc(var(--z-mobile-menu) - 1);
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out);
}
.nav__overlay--visible {
opacity: 1;
}
/* ----------------------------------------------------------
Navigation — Mobile (≤ 768px)
---------------------------------------------------------- */
@media (max-width: 768px) { @media (max-width: 768px) {
.nav__toggle { .nav__toggle {
display: flex; display: flex;
...@@ -120,18 +221,32 @@ ...@@ -120,18 +221,32 @@
.nav__links { .nav__links {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
width: min(300px, 85vw); width: min(300px, 85vw);
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding: var(--space-3xl) var(--space-lg); justify-content: flex-start;
background: var(--bg-base); padding-block-start: var(--space-3xl);
border-left: 1px solid var(--border-subtle); padding-block-end: var(--space-xl);
transform: translateX(100%); padding-inline: var(--space-lg);
background-color: var(--bg-surface);
border-inline-end: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xl);
transform: translateX(-100%);
transition: transform var(--duration-slow) var(--ease-out-expo); transition: transform var(--duration-slow) var(--ease-out-expo);
z-index: var(--z-modal); z-index: var(--z-mobile-menu);
backdrop-filter: blur(20px); overflow-y: auto;
gap: var(--space-2xs);
}
/* RTL: drawer from right */
[dir="rtl"] .nav__links {
inset-inline-start: auto;
inset-inline-end: 0;
border-inline-end: none;
border-inline-start: 1px solid var(--border-subtle);
transform: translateX(100%);
} }
.nav__links--open { .nav__links--open {
...@@ -140,444 +255,1127 @@ ...@@ -140,444 +255,1127 @@
.nav__link { .nav__link {
font-size: var(--text-base); font-size: var(--text-base);
padding: var(--space-md); padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
}
.nav__actions {
flex-direction: column;
width: 100%;
padding-inline: var(--space-lg);
padding-block-start: var(--space-md);
border-top: 1px solid var(--border-subtle);
margin-block-start: auto;
} }
.nav__cta { .nav__cta {
margin-top: var(--space-lg); width: 100%;
justify-content: center; justify-content: center;
padding: var(--space-md); height: 2.75rem;
} }
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xl);
font-weight: 600;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out-quart);
min-height: 44px;
position: relative;
overflow: hidden;
}
.btn--primary { .nav__overlay {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light)); display: block;
color: white; }
box-shadow: 0 2px 16px oklch(0.550 0.180 353.3 / 0.25),
inset 0 1px 0 oklch(1 0 0 / 0.1);
} }
.btn--primary::before { @media (max-width: 1024px) {
content: ''; .nav__links {
position: absolute; gap: 0;
inset: 0; }
background: linear-gradient(135deg, oklch(1 0 0 / 0.1), transparent);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out-quart);
} }
.btn--primary:hover { /* ----------------------------------------------------------
color: white; Footer
transform: translateY(-2px); Dark navy background, multi-column grid
box-shadow: 0 6px 30px oklch(0.550 0.180 353.3 / 0.4), ---------------------------------------------------------- */
inset 0 1px 0 oklch(1 0 0 / 0.15);
}
.btn--primary:hover::before { .footer {
opacity: 1; background-color: var(--bg-dark);
color: var(--ink-on-dark);
padding-block-start: var(--space-2xl);
padding-block-end: var(--space-lg);
position: relative;
overflow: hidden;
} }
.btn--secondary { /* Subtle top accent line */
background: oklch(1 0 0 / 0.03); .footer::before {
color: var(--ink-primary); content: '';
border: 1px solid var(--border-default); position: absolute;
backdrop-filter: blur(8px); top: 0;
inset-inline: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-accent) 30%,
var(--color-gold) 60%,
transparent 100%
);
opacity: 0.5;
} }
.btn--secondary:hover { .footer__grid {
color: var(--ink-primary); display: grid;
background: oklch(1 0 0 / 0.07); grid-template-columns: 2fr repeat(3, 1fr);
border-color: var(--ink-muted); gap: var(--space-2xl);
transform: translateY(-1px); align-items: start;
} }
.btn--large { @media (max-width: 1024px) {
padding: var(--space-md) var(--space-2xl); .footer__grid {
font-size: var(--text-base); grid-template-columns: 1fr 1fr 1fr;
border-radius: var(--radius-xl); gap: var(--space-xl);
min-height: 52px; }
}
/* Screenshot showcase */ .footer__brand {
.screenshot { grid-column: 1 / -1;
position: relative; }
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
transition: all var(--duration-slow) var(--ease-out-expo);
background: var(--bg-surface);
} }
.screenshot::after { @media (max-width: 600px) {
content: ''; .footer__grid {
position: absolute; grid-template-columns: 1fr 1fr;
inset: 0; gap: var(--space-lg);
border-radius: inherit; }
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
pointer-events: none;
}
.screenshot:hover { .footer__brand {
transform: translateY(-6px) scale(1.01); grid-column: 1 / -1;
box-shadow: var(--shadow-lg), 0 20px 60px oklch(0 0 0 / 0.4); }
border-color: var(--border-glow);
} }
.screenshot img { @media (max-width: 400px) {
width: 100%; .footer__grid {
height: auto; grid-template-columns: 1fr;
}
} }
.screenshot--framed { /* Brand column */
background: var(--bg-elevated); .footer__brand {
padding: 2px; max-width: 28ch;
} }
.screenshot--framed::before { .footer__brand-logo {
content: '';
display: block;
height: 1.75rem;
background: var(--bg-surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 12px; gap: var(--space-sm);
gap: 6px; margin-block-end: var(--space-md);
margin-bottom: 2px; text-decoration: none;
}
.screenshot--framed::before {
background-image:
radial-gradient(circle at 14px 50%, oklch(0.600 0.150 25) 4px, transparent 4px),
radial-gradient(circle at 28px 50%, oklch(0.700 0.130 85) 4px, transparent 4px),
radial-gradient(circle at 42px 50%, oklch(0.600 0.150 145) 4px, transparent 4px);
background-repeat: no-repeat;
background-size: 100% 100%;
} }
/* Feature cards */ .footer__brand-mark {
.feature-card { width: 2.5rem;
padding: var(--space-xl); height: 2.5rem;
background: var(--bg-surface); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
border-radius: var(--radius-xl); display: grid;
transition: all var(--duration-slow) var(--ease-out-expo); place-items: center;
position: relative; flex-shrink: 0;
overflow: hidden;
} }
.feature-card::before { .footer__brand-name {
content: ''; font-size: var(--text-lg);
position: absolute; font-weight: 800;
top: 0; color: var(--ink-on-dark);
right: 0; letter-spacing: var(--tracking-snug);
width: 100px;
height: 100px;
background: radial-gradient(circle, var(--brand-primary-ghost), transparent 70%);
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out-expo);
} }
.feature-card:hover { .footer__brand-desc {
border-color: var(--border-glow); font-size: var(--text-sm);
transform: translateY(-3px); color: var(--ink-on-dark-muted);
box-shadow: 0 8px 32px oklch(0 0 0 / 0.3), 0 0 0 1px var(--border-glow); line-height: var(--leading-relaxed);
margin-block-end: var(--space-lg);
max-width: 100%;
} }
.feature-card:hover::before { /* Social links */
opacity: 1; .footer__social {
display: flex;
gap: var(--space-sm);
} }
.feature-card__icon { .footer__social-link {
width: 2.75rem;
height: 2.75rem;
display: grid; display: grid;
place-items: center; place-items: center;
background: linear-gradient(135deg, var(--brand-primary-dim), var(--brand-primary-muted)); width: 2.25rem;
border-radius: var(--radius-lg); height: 2.25rem;
margin-bottom: var(--space-lg); background-color: rgba(248, 250, 251, 0.07);
color: var(--brand-primary-light); border: 1px solid rgba(248, 250, 251, 0.10);
box-shadow: 0 2px 8px oklch(0.550 0.180 353.3 / 0.15); border-radius: var(--radius-md);
color: var(--ink-on-dark-muted);
text-decoration: none;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
} }
.feature-card__title { .footer__social-link:hover {
font-size: var(--text-lg); background-color: var(--color-accent);
font-weight: 700; border-color: var(--color-accent);
margin-bottom: var(--space-xs); color: #FFFFFF;
color: var(--ink-primary);
} }
.feature-card__text { .footer__social-link svg {
font-size: var(--text-sm); width: 1rem;
color: var(--ink-secondary); height: 1rem;
line-height: 1.8;
} }
/* Stats */ /* Link columns */
.stat { .footer__col-title {
text-align: center; font-size: var(--text-xs);
position: relative; font-weight: 700;
color: var(--ink-on-dark);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
margin-block-end: var(--space-md);
} }
.stat__value { .footer__links {
font-size: var(--text-4xl); display: flex;
font-weight: 900; flex-direction: column;
background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)); gap: var(--space-2xs);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--space-xs);
} }
.stat__label { .footer__link {
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--ink-muted); color: var(--ink-on-dark-muted);
font-weight: 500; text-decoration: none;
} padding-block: var(--space-2xs);
/* Section headers */
.section-header {
margin-bottom: var(--space-2xl);
}
.section-header__tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
font-size: var(--text-xs); transition: color var(--duration-fast) var(--ease-out);
font-weight: 600; line-height: var(--leading-snug);
color: var(--brand-primary-light);
margin-bottom: var(--space-md);
padding: var(--space-2xs) var(--space-sm);
background: oklch(0.550 0.180 353.3 / 0.08);
border-radius: var(--radius-xl);
border: 1px solid oklch(0.550 0.180 353.3 / 0.15);
letter-spacing: 0.02em;
} }
.section-header__title { .footer__link:hover {
margin-bottom: var(--space-md); color: var(--ink-on-dark);
} }
.section-header__desc { .footer__link--accent:hover {
font-size: var(--text-lg); color: var(--color-accent-light);
max-width: 55ch;
} }
/* Footer */ /* Bottom bar */
.footer { .footer__bottom {
padding-block: var(--space-2xl); margin-block-start: var(--space-2xl);
background: var(--bg-base); padding-block-start: var(--space-lg);
border-top: 1px solid var(--border-subtle); border-top: 1px solid rgba(248, 250, 251, 0.08);
position: relative; display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
} }
.footer::before { .footer__copy {
content: ''; font-size: var(--text-xs);
position: absolute; color: var(--ink-on-dark-muted);
top: 0; line-height: var(--leading-normal);
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brand-primary-dim), transparent);
} }
.footer__grid { .footer__legal {
display: grid; display: flex;
grid-template-columns: 2fr repeat(3, 1fr); align-items: center;
gap: var(--space-2xl); gap: var(--space-md);
} }
@media (max-width: 768px) { .footer__legal-link {
.footer__grid { font-size: var(--text-xs);
grid-template-columns: 1fr 1fr; color: var(--ink-on-dark-muted);
gap: var(--space-xl); text-decoration: none;
} transition: color var(--duration-fast) var(--ease-out);
} }
@media (max-width: 480px) { .footer__legal-link:hover {
.footer__grid { color: var(--ink-on-dark);
grid-template-columns: 1fr;
}
} }
.footer__brand { @media (max-width: 600px) {
max-width: 28ch; .footer__bottom {
} flex-direction: column;
text-align: center;
}
.footer__brand-name { .footer__legal {
font-size: var(--text-lg); justify-content: center;
font-weight: 900; }
margin-bottom: var(--space-sm);
color: var(--ink-primary);
} }
.footer__brand-desc { /* ----------------------------------------------------------
Breadcrumb
---------------------------------------------------------- */
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--ink-muted); color: var(--ink-muted);
line-height: 1.8; margin-block-end: var(--space-lg);
} }
.footer__col-title { .breadcrumb__item {
font-size: var(--text-sm); display: flex;
font-weight: 700; align-items: center;
color: var(--ink-primary); gap: var(--space-xs);
margin-bottom: var(--space-md);
} }
.footer__link { .breadcrumb__link {
display: block;
font-size: var(--text-sm);
color: var(--ink-muted); color: var(--ink-muted);
padding-block: var(--space-2xs); text-decoration: none;
transition: all var(--duration-fast) var(--ease-out-quart); transition: color var(--duration-fast) var(--ease-out);
} }
.footer__link:hover { .breadcrumb__link:hover {
color: var(--brand-primary-light); color: var(--color-accent);
transform: translateX(-2px);
} }
.footer__bottom { .breadcrumb__separator {
margin-top: var(--space-2xl); color: var(--border-default);
padding-top: var(--space-lg); font-size: var(--text-xs);
border-top: 1px solid var(--border-subtle); user-select: none;
display: flex; }
.breadcrumb__current {
color: var(--ink-secondary);
font-weight: 500;
}
/* ----------------------------------------------------------
Card
White bg · subtle border · hover shadow lift
---------------------------------------------------------- */
.card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
transition:
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
}
.card:hover {
box-shadow: var(--card-shadow-hover);
border-color: var(--border-default);
transform: translateY(-2px);
}
/* Clickable card */
.card--clickable {
cursor: pointer;
text-decoration: none;
display: block;
color: inherit;
}
.card--clickable:hover {
border-color: var(--border-accent);
}
/* Flat — no shadow, just border */
.card--flat {
box-shadow: none;
}
.card--flat:hover {
box-shadow: var(--shadow-sm);
}
/* Elevated — stronger shadow */
.card--elevated {
box-shadow: var(--shadow-md);
border-color: transparent;
}
.card--elevated:hover {
box-shadow: var(--shadow-lg);
}
/* Feature card variant */
.card--feature {
padding: var(--space-xl);
}
.card__icon {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-md);
background-color: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
margin-block-end: var(--space-md);
flex-shrink: 0;
}
.card__icon svg {
width: 1.25rem;
height: 1.25rem;
}
.card__icon--gold {
background-color: var(--color-gold-ghost);
color: var(--color-gold);
}
.card__icon--primary {
background-color: var(--color-primary-ghost);
color: var(--color-primary-light);
}
.card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-xs);
line-height: var(--leading-snug);
}
.card__body {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
}
.card__footer {
margin-block-start: var(--space-md);
padding-block-start: var(--space-md);
border-top: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-sm);
}
/* Accent left border */
.card--accent-border {
border-inline-start: 3px solid var(--color-accent);
}
.card--gold-border {
border-inline-start: 3px solid var(--color-gold);
}
/* ----------------------------------------------------------
Badge
Small colored pill for labels, status, counts
---------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: 2px var(--space-sm);
font-size: var(--text-xs);
font-weight: 600;
line-height: var(--leading-snug);
border-radius: var(--radius-full);
white-space: nowrap;
letter-spacing: var(--tracking-wide);
}
/* Variants */
.badge--primary {
background-color: var(--color-primary-ghost);
color: var(--color-primary-light);
border: 1px solid var(--border-primary);
}
.badge--accent {
background-color: var(--color-accent-ghost);
color: var(--color-accent-dark);
border: 1px solid var(--border-accent);
}
.badge--gold {
background-color: var(--color-gold-ghost);
color: var(--color-gold-dark);
border: 1px solid rgba(201, 149, 43, 0.22);
}
.badge--success {
background-color: var(--color-success-bg);
color: var(--color-success);
border: 1px solid rgba(16, 135, 90, 0.20);
}
.badge--warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
border: 1px solid rgba(180, 83, 9, 0.20);
}
.badge--error {
background-color: var(--color-error-bg);
color: var(--color-error);
border: 1px solid rgba(185, 28, 28, 0.20);
}
.badge--neutral {
background-color: var(--bg-muted);
color: var(--ink-secondary);
border: 1px solid var(--border-subtle);
}
/* Solid fill variants */
.badge--solid-accent {
background-color: var(--color-accent);
color: #FFFFFF;
border-color: transparent;
}
.badge--solid-primary {
background-color: var(--color-primary);
color: #FFFFFF;
border-color: transparent;
}
.badge--solid-gold {
background-color: var(--color-gold);
color: #FFFFFF;
border-color: transparent;
}
/* With dot indicator */
.badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
flex-shrink: 0;
}
/* ----------------------------------------------------------
Trust Badge
Security / uptime / guarantee indicators
Conveys reliability — shows credentials, SLA, certs
---------------------------------------------------------- */
.trust-badge {
display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
transition:
box-shadow var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.trust-badge:hover {
box-shadow: var(--shadow-sm);
border-color: var(--border-default);
}
.trust-badge__icon {
width: 2rem;
height: 2rem;
border-radius: var(--radius-sm);
background-color: var(--color-success-bg);
color: var(--color-success);
display: grid;
place-items: center;
flex-shrink: 0;
}
.trust-badge__icon svg {
width: 1rem;
height: 1rem;
}
.trust-badge__icon--accent {
background-color: var(--color-accent-ghost);
color: var(--color-accent);
}
.trust-badge__icon--gold {
background-color: var(--color-gold-ghost);
color: var(--color-gold);
}
.trust-badge__icon--primary {
background-color: var(--color-primary-ghost);
color: var(--color-primary-light);
}
.trust-badge__text {
display: flex;
flex-direction: column;
gap: 1px;
}
.trust-badge__value {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-tight);
}
.trust-badge__label {
font-size: var(--text-xs); font-size: var(--text-xs);
color: var(--ink-muted); color: var(--ink-muted);
line-height: var(--leading-snug);
} }
@media (max-width: 768px) { /* Row of trust badges */
.footer__bottom { .trust-badges {
flex-direction: column; display: flex;
gap: var(--space-sm); flex-wrap: wrap;
text-align: center; gap: var(--space-sm);
} align-items: center;
}
/* Dark section variant */
.on-dark .trust-badge,
.section--dark .trust-badge {
background-color: rgba(248, 250, 251, 0.05);
border-color: rgba(248, 250, 251, 0.10);
} }
/* Module page hero */ .on-dark .trust-badge__value,
.module-hero { .section--dark .trust-badge__value {
min-height: 50vh; color: var(--ink-on-dark);
}
.on-dark .trust-badge__label,
.section--dark .trust-badge__label {
color: var(--ink-on-dark-muted);
}
/* ----------------------------------------------------------
WhatsApp FAB
Floating action button — bottom-start for RTL
Green circle with WhatsApp icon + optional label
---------------------------------------------------------- */
.whatsapp-fab {
position: fixed;
bottom: var(--space-lg);
inset-inline-start: var(--space-lg); /* RTL: bottom-left = bottom-start */
z-index: var(--z-above);
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 6rem; gap: var(--space-sm);
position: relative; text-decoration: none;
overflow: hidden; cursor: pointer;
} }
.module-hero::before { /* The circle button */
content: ''; .whatsapp-fab__btn {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background-color: var(--color-whatsapp);
color: #FFFFFF;
display: grid;
place-items: center;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.40),
0 2px 6px rgba(0, 0, 0, 0.15);
transition:
background-color var(--duration-fast) var(--ease-out),
transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.whatsapp-fab__btn svg {
width: 1.5rem;
height: 1.5rem;
}
.whatsapp-fab:hover .whatsapp-fab__btn {
background-color: var(--color-whatsapp-dark);
transform: scale(1.08);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45),
0 4px 10px rgba(0, 0, 0, 0.18);
}
.whatsapp-fab:active .whatsapp-fab__btn {
transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-fab:hover .whatsapp-fab__btn {
transform: none;
}
}
/* Optional text label (shows on hover via JS toggle or always) */
.whatsapp-fab__label {
background-color: var(--bg-dark);
color: var(--ink-on-dark);
font-size: var(--text-xs);
font-weight: 600;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
transition:
opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
pointer-events: none;
}
/* RTL: label slides in from end side */
[dir="rtl"] .whatsapp-fab__label {
transform: translateX(6px);
}
.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-within .whatsapp-fab__label {
opacity: 1;
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-fab__label {
transform: none;
}
}
/* Pulse ring animation — draws attention */
.whatsapp-fab__pulse {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: border-radius: 50%;
radial-gradient(ellipse at 70% 30%, oklch(0.550 0.180 353.3 / 0.06) 0%, transparent 50%), background-color: var(--color-whatsapp);
radial-gradient(ellipse at 20% 80%, oklch(0.400 0.130 280 / 0.04) 0%, transparent 50%); opacity: 0;
animation: whatsapp-pulse 2.5s ease-out infinite;
pointer-events: none; pointer-events: none;
} }
.module-hero__content { @keyframes whatsapp-pulse {
0% {
transform: scale(1);
opacity: 0.55;
}
70% {
transform: scale(1.65);
opacity: 0;
}
100% {
transform: scale(1.65);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-fab__pulse {
animation: none;
}
}
/* Offset for pages with a cookie bar or bottom nav */
.whatsapp-fab--offset {
bottom: calc(var(--space-lg) + 3.5rem);
}
/* ----------------------------------------------------------
Screenshot / App Preview Component
---------------------------------------------------------- */
.screenshot {
position: relative; position: relative;
z-index: 1; border-radius: var(--radius-xl);
max-width: 55ch; overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
background-color: var(--bg-muted);
transition:
box-shadow var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out),
border-color var(--duration-slow) var(--ease-out);
} }
.module-hero__title { .screenshot:hover {
margin-bottom: var(--space-lg); transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--border-accent);
} }
.module-hero__desc { .screenshot img {
font-size: var(--text-lg); width: 100%;
margin-bottom: var(--space-xl); height: auto;
display: block;
} }
/* Screenshot gallery */ /* Browser chrome frame */
.gallery { .screenshot--framed {
display: grid; padding-block-start: 2.25rem;
gap: var(--space-lg); position: relative;
} }
.gallery--2col { .screenshot--framed::before {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 2.25rem;
background-color: var(--bg-muted);
border-bottom: 1px solid var(--border-subtle);
background-image:
radial-gradient(circle at 14px 50%, #FF5F57 5px, transparent 5px),
radial-gradient(circle at 30px 50%, #FEBC2E 5px, transparent 5px),
radial-gradient(circle at 46px 50%, #28C840 5px, transparent 5px);
background-repeat: no-repeat;
} }
.gallery--3col { /* RTL: dots on the end side */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); [dir="rtl"] .screenshot--framed::before {
background-image:
radial-gradient(circle at calc(100% - 14px) 50%, #FF5F57 5px, transparent 5px),
radial-gradient(circle at calc(100% - 30px) 50%, #FEBC2E 5px, transparent 5px),
radial-gradient(circle at calc(100% - 46px) 50%, #28C840 5px, transparent 5px);
} }
/* Quote blocks */ /* ----------------------------------------------------------
.quote-block { Feature Card (specialized variant)
---------------------------------------------------------- */
.feature-card {
padding: var(--space-xl); padding: var(--space-xl);
background: var(--bg-surface); background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
border-right: 2px solid var(--brand-primary); box-shadow: var(--shadow-sm);
transition:
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.quote-block::before { .feature-card:hover {
content: ''; box-shadow: var(--shadow-md);
position: absolute; border-color: var(--border-accent);
top: 0; transform: translateY(-3px);
right: 0; }
width: 80px;
height: 100%; .feature-card__icon {
background: linear-gradient(to left, oklch(0.550 0.180 353.3 / 0.03), transparent); width: 3rem;
pointer-events: none; height: 3rem;
border-radius: var(--radius-md);
background-color: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
margin-block-end: var(--space-lg);
flex-shrink: 0;
}
.feature-card__icon svg {
width: 1.375rem;
height: 1.375rem;
}
.feature-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-xs);
line-height: var(--leading-snug);
}
.feature-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
max-width: 100%;
}
/* ----------------------------------------------------------
Testimonial / Quote Block
---------------------------------------------------------- */
.quote-block {
padding: var(--space-xl);
background-color: var(--bg-surface);
border-radius: var(--radius-xl);
border-inline-start: 3px solid var(--color-accent);
box-shadow: var(--shadow-sm);
position: relative;
} }
.quote-block__text { .quote-block__text {
font-size: var(--text-lg); font-size: var(--text-lg);
font-weight: 500; font-weight: 500;
color: var(--ink-primary); color: var(--ink-primary);
line-height: 1.9; line-height: var(--leading-relaxed);
margin-bottom: var(--space-md); margin-block-end: var(--space-md);
}
.quote-block__author {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.quote-block__avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
} }
.quote-block__source { .quote-block__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.quote-block__name {
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
}
.quote-block__role {
font-size: var(--text-xs);
color: var(--ink-muted); color: var(--ink-muted);
} }
/* Breadcrumb */ /* ----------------------------------------------------------
.breadcrumb { Pricing Card
---------------------------------------------------------- */
.pricing-card {
padding: var(--space-xl);
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: var(--space-sm); gap: var(--space-lg);
position: relative;
}
.pricing-card--featured {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--ink-on-dark);
box-shadow: var(--shadow-xl);
}
.pricing-card--featured .pricing-card__price,
.pricing-card--featured .pricing-card__name {
color: var(--ink-on-dark);
}
.pricing-card--featured .pricing-card__period,
.pricing-card--featured .pricing-card__feature {
color: var(--ink-on-dark-muted);
}
.pricing-card__badge {
position: absolute;
top: var(--space-md);
inset-inline-end: var(--space-md);
}
.pricing-card__name {
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-muted); color: var(--ink-muted);
margin-bottom: var(--space-lg); text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.pricing-card__price {
font-size: var(--text-4xl);
font-weight: 800;
color: var(--ink-primary);
line-height: 1;
}
.pricing-card__currency {
font-size: var(--text-xl);
font-weight: 600;
vertical-align: top;
line-height: 1.4;
} }
.breadcrumb a { .pricing-card__period {
font-size: var(--text-sm);
color: var(--ink-muted); color: var(--ink-muted);
font-weight: 400;
margin-inline-start: var(--space-xs);
} }
.breadcrumb a:hover { .pricing-card__features {
color: var(--brand-primary-light); display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
} }
.breadcrumb__separator { .pricing-card__feature {
opacity: 0.3; display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-snug);
}
.pricing-card__feature svg {
width: 1rem;
height: 1rem;
color: var(--color-success);
flex-shrink: 0;
margin-block-start: 0.1em;
}
/* ----------------------------------------------------------
Alert / Notification Strip
---------------------------------------------------------- */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: var(--leading-normal);
border: 1px solid transparent;
}
.alert--info {
background-color: var(--color-info-bg);
border-color: rgba(8, 145, 178, 0.20);
color: var(--color-accent-dark);
}
.alert--success {
background-color: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.20);
color: var(--color-success);
}
.alert--warning {
background-color: var(--color-warning-bg);
border-color: rgba(180, 83, 9, 0.20);
color: var(--color-warning);
}
.alert--error {
background-color: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.20);
color: var(--color-error);
}
.alert__icon {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
margin-block-start: 0.05em;
}
.alert__content {
flex: 1;
}
.alert__title {
font-weight: 700;
margin-block-end: var(--space-2xs);
}
/* ----------------------------------------------------------
Gallery / Screenshot Grid
---------------------------------------------------------- */
.gallery {
display: grid;
gap: var(--space-lg);
}
.gallery--2col {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.gallery--3col {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (max-width: 600px) {
.gallery--2col,
.gallery--3col {
grid-template-columns: 1fr;
}
}
/* ----------------------------------------------------------
Hero (marketing page hero section)
---------------------------------------------------------- */
.hero {
min-height: calc(100svh - var(--nav-height));
display: flex;
align-items: center;
padding-block-start: calc(var(--nav-height) + var(--space-2xl));
padding-block-end: var(--space-2xl);
position: relative;
overflow: hidden;
}
/* Subtle background gradient */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 65% 10%, rgba(8, 145, 178, 0.05) 0%, transparent 55%),
radial-gradient(ellipse at 10% 90%, rgba(27, 43, 75, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 1;
max-width: 58ch;
}
.hero__visual {
position: relative;
z-index: 1;
}
/* ----------------------------------------------------------
Responsive helpers — hide/show at breakpoints
---------------------------------------------------------- */
@media (max-width: 768px) {
.hide-mobile {
display: none !important;
}
}
@media (min-width: 769px) {
.show-mobile-only {
display: none !important;
}
}
@media (max-width: 1024px) {
.hide-tablet {
display: none !important;
}
} }
public/css/home.css
View file @ 170eaea6
/* Hero */ /* ============================================================
El Captain Sports Management — Homepage Styles
Light theme · RTL Arabic-first · Professional / Trusted
Depends on: tokens.css (all var() references come from there)
============================================================ */
/* ================================================================
1. HERO SECTION
================================================================ */
.hero { .hero {
min-height: 100dvh; min-height: calc(100dvh - 80px);
display: flex; display: flex;
align-items: center; align-items: center;
padding-block-start: 80px; /* offset for fixed nav */
padding-block-end: var(--space-2xl);
background: linear-gradient(160deg, #FFFFFF 0%, #EFF5FA 100%);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 5rem;
} }
/* Subtle radial teal glow — top-start corner */
.hero::before { .hero::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -30%; inset-block-start: -15%;
right: -20%; inset-inline-end: -8%;
width: 80%; width: 55%;
height: 80%; height: 75%;
background: radial-gradient(ellipse, oklch(0.550 0.180 353.3 / 0.08) 0%, transparent 60%); background: radial-gradient(ellipse, rgba(8, 145, 178, 0.07) 0%, transparent 65%);
pointer-events: none; pointer-events: none;
animation: hero-glow 10s ease-in-out infinite alternate;
} }
/* Softer navy echo — bottom-end corner */
.hero::after { .hero::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -20%; inset-block-end: -10%;
left: -10%; inset-inline-start: -5%;
width: 50%; width: 40%;
height: 50%; height: 55%;
background: radial-gradient(ellipse, oklch(0.400 0.100 280 / 0.05) 0%, transparent 60%); background: radial-gradient(ellipse, rgba(27, 43, 75, 0.04) 0%, transparent 65%);
pointer-events: none; pointer-events: none;
animation: hero-glow-alt 12s ease-in-out infinite alternate;
} }
@keyframes hero-glow { @media (prefers-reduced-motion: no-preference) {
from { opacity: 0.5; transform: translate(0, 0) scale(1); } .hero::before {
to { opacity: 1; transform: translate(2%, 2%) scale(1.08); } animation: hero-glow-drift 16s ease-in-out infinite alternate;
}
} }
@keyframes hero-glow-alt { @keyframes hero-glow-drift {
from { opacity: 0.3; transform: translate(0, 0) scale(1); } from { opacity: 0.6; transform: translate(0, 0) scale(1); }
to { opacity: 0.6; transform: translate(-2%, -1%) scale(1.05); } to { opacity: 1; transform: translate(-3%, 3%) scale(1.07); }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.hero::before, .hero::after { animation: none; } .hero::before,
.hero::after { animation: none; }
} }
/* --- Grid -------------------------------------------------------- */
.hero__grid { .hero__grid {
display: grid; display: grid;
grid-template-columns: 1fr 1.2fr; grid-template-columns: 1fr 1.3fr;
gap: var(--space-2xl); gap: var(--space-2xl);
align-items: center; align-items: center;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
position: relative;
z-index: 1;
} }
@media (max-width: 1024px) { /* --- Content column --------------------------------------------- */
.hero__grid { .hero__content {
grid-template-columns: 1fr; display: flex;
text-align: center; flex-direction: column;
} align-items: flex-start;
gap: 0;
} }
.hero__content { .hero__eyebrow {
position: relative; display: inline-flex;
z-index: 1; align-items: center;
gap: var(--space-xs);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
color: var(--color-accent-dark);
background: var(--color-accent-ghost);
border: 1px solid rgba(8, 145, 178, 0.20);
border-radius: var(--radius-full);
padding: var(--space-2xs) var(--space-sm);
margin-block-end: var(--space-md);
} }
.hero__title { .hero__title {
margin-bottom: var(--space-lg); font-size: var(--text-5xl);
font-weight: 900;
color: var(--ink-primary);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-md);
} }
.hero__title-accent { .hero__title-accent {
background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
...@@ -78,15 +114,10 @@ ...@@ -78,15 +114,10 @@
.hero__desc { .hero__desc {
font-size: var(--text-lg); font-size: var(--text-lg);
margin-bottom: var(--space-xl); color: var(--ink-secondary);
max-width: 45ch; line-height: var(--leading-relaxed);
line-height: 1.9; margin-block-end: var(--space-xl);
} max-width: 46ch;
@media (max-width: 1024px) {
.hero__desc {
margin-inline: auto;
}
} }
.hero__actions { .hero__actions {
...@@ -96,261 +127,601 @@ ...@@ -96,261 +127,601 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 1024px) { /* --- Visual column ---------------------------------------------- */
.hero__actions {
justify-content: center;
}
}
.hero__visual { .hero__visual {
position: relative; position: relative;
perspective: 1200px; z-index: 1;
perspective: 1400px;
} }
.hero__screenshot { .hero__screenshot {
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
overflow: hidden; overflow: hidden;
box-shadow: box-shadow: var(--shadow-xl);
0 25px 80px oklch(0 0 0 / 0.5), border: 1px solid var(--border-subtle);
0 0 0 1px oklch(1 0 0 / 0.05), transform: rotateY(2deg) rotateX(1deg);
0 0 60px oklch(0.550 0.180 353.3 / 0.08);
border: 1px solid oklch(1 0 0 / 0.06);
transform: rotateY(-2deg) rotateX(1deg);
transition: transform var(--duration-slower) var(--ease-out-expo); transition: transform var(--duration-slower) var(--ease-out-expo);
background: var(--bg-surface);
position: relative; position: relative;
} }
/* Inner highlight rim */
.hero__screenshot::after { .hero__screenshot::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(160deg, oklch(1 0 0 / 0.03) 0%, transparent 40%);
pointer-events: none;
border-radius: inherit; border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
pointer-events: none;
} }
.hero__screenshot:hover { .hero__screenshot:hover {
transform: rotateY(0deg) rotateX(0deg) scale(1.02); transform: rotateY(0deg) rotateX(0deg) scale(1.015);
} }
.hero__screenshot img { .hero__screenshot img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block;
} }
/* Floating decorative elements */ @media (prefers-reduced-motion: reduce) {
.hero__visual::before { .hero__screenshot,
.hero__screenshot:hover { transform: none; }
}
/* --- Breakpoints ------------------------------------------------ */
@media (max-width: 1024px) {
.hero__grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero__content {
align-items: center;
}
.hero__desc {
margin-inline: auto;
}
.hero__actions {
justify-content: center;
}
.hero__visual {
max-width: 640px;
margin-inline: auto;
}
}
@media (max-width: 768px) {
.hero {
padding-block-start: 72px;
}
.hero__screenshot {
transform: none;
}
}
/* ================================================================
2. TRUST BAR
================================================================ */
.trust-bar {
background: var(--color-primary);
padding-block: var(--space-lg);
position: relative;
overflow: hidden;
}
/* Very subtle teal-tinted gradient overlay */
.trust-bar::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -10%; inset: 0;
left: -5%; background: linear-gradient(
width: 120%; 90deg,
height: 120%; rgba(8, 145, 178, 0.07) 0%,
background: transparent 50%,
radial-gradient(circle at 10% 20%, oklch(0.550 0.180 353.3 / 0.06) 0%, transparent 30%), rgba(8, 145, 178, 0.04) 100%
radial-gradient(circle at 90% 80%, oklch(0.400 0.100 280 / 0.04) 0%, transparent 25%); );
pointer-events: none; pointer-events: none;
z-index: -1;
} }
/* Pain points section */ .trust-bar__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
position: relative;
z-index: 1;
}
.trust-bar__stat {
text-align: center;
padding-inline: var(--space-lg);
padding-block: var(--space-sm);
position: relative;
}
/* Separator lines between stats */
.trust-bar__stat + .trust-bar__stat::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 15%;
bottom: 15%;
width: 1px;
background: rgba(255, 255, 255, 0.14);
}
.trust-bar__number {
display: block;
font-size: var(--text-3xl);
font-weight: 900;
color: #FFFFFF;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-2xs);
}
/* Teal-tinted unit suffix (e.g. "+" or "+") */
.trust-bar__number-accent {
color: var(--color-accent-light);
}
.trust-bar__label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
color: rgba(255, 255, 255, 0.68);
line-height: var(--leading-normal);
}
@media (max-width: 768px) {
.trust-bar__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md) 0;
}
/* Remove separator on the start of each row */
.trust-bar__stat:nth-child(2n+1)::before {
display: none;
}
}
@media (max-width: 480px) {
.trust-bar__grid {
grid-template-columns: 1fr;
}
.trust-bar__stat::before {
display: none !important;
}
.trust-bar__stat + .trust-bar__stat {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* ================================================================
3. PAIN POINTS
================================================================ */
.pain-points { .pain-points {
background: var(--bg-base); background: var(--bg-muted);
padding-block: var(--space-section);
position: relative; position: relative;
} }
/* Top edge rule */
.pain-points::before { .pain-points::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline: 0;
right: 0;
height: 1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); background: linear-gradient(
to right,
transparent 0%,
var(--border-subtle) 25%,
var(--border-subtle) 75%,
transparent 100%
);
} }
.pain-points__grid { .pain-points__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-md); gap: var(--space-md);
margin-block-start: var(--space-2xl);
} }
.pain-point { .pain-card {
padding: var(--space-xl);
border-radius: var(--radius-xl);
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
transition: all var(--duration-slow) var(--ease-out-expo); border-radius: var(--radius-xl);
padding: var(--space-xl);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition:
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
} }
.pain-point::after { /* Left-edge color indicator bar */
.pain-card::before {
content: ''; content: '';
position: absolute; position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0; bottom: 0;
right: 0; width: 4px;
left: 0; border-start-start-radius: var(--radius-xl);
height: 2px; border-end-start-radius: var(--radius-xl);
background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light));
transform: scaleX(0);
transform-origin: right;
transition: transform var(--duration-slow) var(--ease-out-expo);
} }
.pain-point:hover { .pain-card--problem::before { background: var(--color-error); }
border-color: var(--border-glow); .pain-card--solution::before { background: var(--color-accent); }
transform: translateY(-2px);
.pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--border-default);
} }
.pain-point:hover::after { .pain-card__emoji {
transform: scaleX(1); display: block;
font-size: 1.875rem;
line-height: 1;
margin-block-end: var(--space-md);
user-select: none;
} }
.pain-point__problem { .pain-card__label {
display: block;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-block-end: var(--space-sm);
}
.pain-card--problem .pain-card__label { color: var(--color-error); }
.pain-card--solution .pain-card__label { color: var(--color-accent-dark); }
.pain-card__text {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
margin-block-end: var(--space-sm);
}
.pain-card__detail {
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--ink-muted); line-height: var(--leading-relaxed);
margin-bottom: var(--space-md); max-width: none;
line-height: 1.8; }
.pain-card--problem .pain-card__detail { color: var(--ink-muted); }
.pain-card--solution .pain-card__detail {
color: var(--color-accent-dark);
font-weight: 500;
}
/* ================================================================
4. ALL-IN-ONE SECTION
================================================================ */
.all-in-one {
background: var(--bg-surface);
padding-block: var(--space-section);
}
.all-in-one__inner {
max-width: 700px;
margin-inline: auto;
text-align: center;
}
.all-in-one__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-block: var(--space-2xl);
text-align: start;
} }
.pain-point__solution { .all-in-one__item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
font-size: var(--text-base); font-size: var(--text-base);
color: var(--brand-primary-light); font-weight: 500;
transition: background var(--duration-fast) var(--ease-out);
}
/* Old / replaced tools */
.all-in-one__item--old {
background: var(--color-error-bg);
border: 1px solid rgba(185, 28, 28, 0.12);
color: var(--ink-muted);
text-decoration: line-through;
text-decoration-color: var(--color-error);
text-decoration-thickness: 2px;
}
.all-in-one__item--old .all-in-one__tool-icon {
font-size: 1.25rem;
flex-shrink: 0;
opacity: 0.55;
filter: grayscale(0.6);
}
/* El Captain row */
.all-in-one__item--new {
background: linear-gradient(135deg, var(--color-accent-ghost), rgba(8, 145, 178, 0.03));
border: 1.5px solid var(--border-accent);
color: var(--ink-primary);
font-weight: 700; font-weight: 700;
font-size: var(--text-lg);
}
.all-in-one__item--new .all-in-one__tool-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.all-in-one__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-full);
background: var(--color-success);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 900;
flex-shrink: 0;
margin-inline-start: auto;
box-shadow: 0 2px 8px rgba(16, 135, 90, 0.28);
}
/* Arrow divider between old tools and new */
.all-in-one__arrow {
display: flex;
align-items: center;
justify-content: center;
padding-block: var(--space-2xs);
color: var(--ink-muted);
font-size: var(--text-xl);
opacity: 0.5;
user-select: none;
}
.all-in-one__footnote {
font-size: var(--text-sm);
color: var(--ink-muted);
margin-block-start: var(--space-lg);
max-width: none;
}
/* ================================================================
5. MODULES SHOWCASE
================================================================ */
.modules-showcase {
background: var(--bg-muted);
padding-block: var(--space-section);
} }
/* Modules showcase */
.modules-showcase__grid { .modules-showcase__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); grid-template-columns: repeat(3, 1fr);
gap: var(--space-md); gap: var(--space-md);
margin-block-start: var(--space-2xl);
}
@media (max-width: 1024px) {
.modules-showcase__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.modules-showcase__grid {
grid-template-columns: 1fr;
}
} }
.module-card { .module-card {
display: block; display: flex;
padding: var(--space-xl); flex-direction: column;
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
transition: all var(--duration-slow) var(--ease-out-expo); padding: var(--space-xl);
position: relative; text-decoration: none;
overflow: hidden; color: inherit;
} box-shadow: var(--shadow-xs);
border-bottom-width: 3px;
.module-card::before { border-bottom-color: transparent;
content: ''; transition:
position: absolute; box-shadow var(--duration-normal) var(--ease-out),
top: -50%; transform var(--duration-normal) var(--ease-out),
right: -50%; border-color var(--duration-normal) var(--ease-out);
width: 100%;
height: 100%;
background: radial-gradient(circle, var(--brand-primary-ghost), transparent 70%);
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out-expo);
} }
.module-card:hover { .module-card:hover {
border-color: var(--border-glow); box-shadow: var(--shadow-md);
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 16px 48px oklch(0 0 0 / 0.3), 0 0 0 1px var(--border-glow); border-color: var(--border-default);
border-bottom-color: var(--color-accent);
color: inherit; color: inherit;
} }
.module-card:hover::before { /* Icon container — navy circle with white icon */
opacity: 1; .module-card__icon-wrap {
}
.module-card__icon {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
display: grid; display: grid;
place-items: center; place-items: center;
background: oklch(0.550 0.180 353.3 / 0.08); background: var(--color-primary);
border: 1px solid oklch(0.550 0.180 353.3 / 0.15);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
margin-bottom: var(--space-lg); margin-block-end: var(--space-lg);
color: var(--brand-primary-light); color: #FFFFFF;
transition: all var(--duration-normal) var(--ease-out-quart); flex-shrink: 0;
transition: background var(--duration-normal) var(--ease-out);
} }
.module-card:hover .module-card__icon { .module-card__icon-wrap svg {
background: oklch(0.550 0.180 353.3 / 0.15); width: 1.375rem;
box-shadow: 0 0 20px oklch(0.550 0.180 353.3 / 0.15); height: 1.375rem;
}
.module-card:hover .module-card__icon-wrap {
background: var(--color-accent);
} }
.module-card__title { .module-card__title {
font-size: var(--text-lg); font-size: var(--text-lg);
font-weight: 700; font-weight: 700;
color: var(--ink-primary); color: var(--ink-primary);
margin-bottom: var(--space-xs); line-height: var(--leading-snug);
margin-block-end: var(--space-xs);
} }
.module-card__desc { .module-card__desc {
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--ink-secondary); color: var(--ink-secondary);
line-height: 1.8; line-height: var(--leading-relaxed);
margin-bottom: var(--space-md); flex: 1;
margin-block-end: var(--space-md);
max-width: none;
} }
.module-card__link { .module-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--brand-primary-light);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
transition: gap var(--duration-normal) var(--ease-out-quart); font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
margin-block-start: auto;
transition: gap var(--duration-normal) var(--ease-out);
text-decoration: none;
}
.module-card__link svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
transition: transform var(--duration-normal) var(--ease-out);
} }
.module-card:hover .module-card__link { .module-card:hover .module-card__link {
gap: var(--space-sm); gap: var(--space-sm);
} }
/* Product screenshots carousel section */ /* Flip arrow for RTL */
[dir="rtl"] .module-card__link svg {
transform: scaleX(-1);
}
/* ================================================================
6. PRODUCT SCREENSHOTS CAROUSEL
================================================================ */
.product-showcase { .product-showcase {
background: var(--bg-surface);
padding-block: var(--space-section);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-bottom: var(--space-section);
} }
.product-showcase::before, .product-showcase__header {
.product-showcase::after { max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
margin-block-end: var(--space-2xl);
}
/* Scroll track wrapper — holds the fade overlays */
.product-showcase__track-wrap {
position: relative;
overflow: hidden;
}
/* Fade overlay — start edge (right in RTL) */
.product-showcase__track-wrap::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 120px; right: 0;
width: 140px;
background: linear-gradient(to left, var(--bg-surface) 0%, transparent 100%);
z-index: var(--z-above); z-index: var(--z-above);
pointer-events: none; pointer-events: none;
} }
.product-showcase::before { /* Fade overlay — end edge (left in RTL) */
right: 0; .product-showcase__track-wrap::after {
background: linear-gradient(to left, var(--bg-deep), transparent); content: '';
} position: absolute;
top: 0;
.product-showcase::after { bottom: 0;
left: 0; left: 0;
background: linear-gradient(to right, var(--bg-deep), transparent); width: 140px;
background: linear-gradient(to right, var(--bg-surface) 0%, transparent 100%);
z-index: var(--z-above);
pointer-events: none;
} }
/* Infinite scroll strip — duplicate items for seamless loop */
.product-showcase__track { .product-showcase__track {
display: flex; display: flex;
gap: var(--space-md); gap: var(--space-lg);
animation: scroll-right 50s linear infinite; padding-block: var(--space-sm);
padding-inline: var(--space-lg);
width: max-content; width: max-content;
padding-block: var(--space-md); animation: carousel-scroll 60s linear infinite;
will-change: transform;
} }
@keyframes scroll-right { /* Items move left in RTL — from positive to negative X */
@keyframes carousel-scroll {
from { transform: translateX(0); } from { transform: translateX(0); }
to { transform: translateX(-50%); } to { transform: translateX(-50%); }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.product-showcase__track { animation: none; flex-wrap: wrap; width: auto; } .product-showcase__track {
.product-showcase::before, .product-showcase::after { display: none; } animation: none;
flex-wrap: wrap;
width: auto;
justify-content: center;
padding-inline: 0;
}
.product-showcase__track-wrap::before,
.product-showcase__track-wrap::after {
display: none;
}
} }
.product-showcase__item { .product-showcase__item {
...@@ -358,77 +729,275 @@ ...@@ -358,77 +729,275 @@
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-sm);
transition: all var(--duration-normal) var(--ease-out-quart); background: var(--bg-surface);
transition:
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
} }
.product-showcase__item:hover { .product-showcase__item:hover {
border-color: var(--border-glow); box-shadow: var(--shadow-md);
transform: scale(1.03); transform: translateY(-3px) scale(1.01);
box-shadow: var(--shadow-lg); border-color: var(--border-accent);
} }
.product-showcase__item img { .product-showcase__item img {
width: 100%; width: 100%;
height: 230px; height: 220px;
object-fit: cover; object-fit: cover;
object-position: top right; object-position: top center;
display: block;
}
.product-showcase__caption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-secondary);
border-top: 1px solid var(--border-subtle);
} }
/* Numbers / Social proof */ @media (max-width: 768px) {
.social-proof { .product-showcase__item {
background: var(--bg-base); flex: 0 0 300px;
}
.product-showcase__item img {
height: 180px;
}
}
/* ================================================================
7. WHY EL CAPTAIN (Why Section)
================================================================ */
.why-section {
background: var(--bg-surface);
padding-block: var(--space-section);
}
.why-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
margin-block-start: var(--space-2xl);
}
@media (max-width: 1024px) {
.why-section__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
}
@media (max-width: 640px) {
.why-section__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
.why-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
/* Teal circle icon container */
.why-card__icon-wrap {
width: 3.25rem;
height: 3.25rem;
display: grid;
place-items: center;
background: var(--color-accent-ghost);
border: 1px solid rgba(8, 145, 178, 0.18);
border-radius: var(--radius-full);
color: var(--color-accent);
flex-shrink: 0;
transition:
background var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.why-card__icon-wrap svg {
width: 1.5rem;
height: 1.5rem;
}
.why-card:hover .why-card__icon-wrap {
background: var(--color-accent);
color: #FFFFFF;
border-color: var(--color-accent);
}
.why-card__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
.why-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
max-width: none;
}
/* ================================================================
8. TRUST / SECURITY SECTION
================================================================ */
.trust-section {
background: var(--bg-dark);
padding-block: var(--space-section);
position: relative; position: relative;
overflow: hidden;
} }
.social-proof::before { /* Dual radial overlay for subtle depth */
.trust-section::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
radial-gradient(ellipse at 30% 50%, oklch(0.550 0.180 353.3 / 0.03) 0%, transparent 50%), radial-gradient(ellipse at 20% 50%, rgba(8, 145, 178, 0.09) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, oklch(0.400 0.100 280 / 0.02) 0%, transparent 50%); radial-gradient(ellipse at 80% 30%, rgba(201, 149, 43, 0.05) 0%, transparent 40%);
pointer-events: none; pointer-events: none;
} }
.social-proof__stats { /* Section header overrides for dark background */
display: grid; .trust-section .section-header__tag {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: rgba(8, 145, 178, 0.14);
gap: var(--space-xl); border-color: rgba(8, 145, 178, 0.28);
text-align: center; color: var(--color-accent-light);
}
.trust-section .section-header__title {
color: #FFFFFF;
}
.trust-section .section-header__desc {
color: rgba(255, 255, 255, 0.65);
}
/* Badge row */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
margin-block-start: var(--space-2xl);
position: relative; position: relative;
z-index: 1;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-decoration: none;
transition:
background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.trust-badge:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
color: #FFFFFF;
} }
/* CTA section */ .trust-badge__icon {
font-size: 1.125rem;
line-height: 1;
flex-shrink: 0;
}
/* Egypt badge — gold-tinted accent */
.trust-badge--egypt {
background: rgba(201, 149, 43, 0.09);
border-color: rgba(201, 149, 43, 0.35);
}
.trust-badge--egypt:hover {
background: rgba(201, 149, 43, 0.14);
border-color: rgba(201, 149, 43, 0.52);
}
@media (max-width: 768px) {
.trust-badges { gap: var(--space-sm); }
.trust-badge {
font-size: var(--text-xs);
padding: var(--space-xs) var(--space-md);
}
}
/* ================================================================
9. CTA SECTION
================================================================ */
.cta-section { .cta-section {
text-align: center; background: var(--bg-surface);
padding-block: var(--space-section);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-align: center;
} }
/* Light teal gradient tint */
.cta-section::before { .cta-section::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
radial-gradient(ellipse at center 30%, oklch(0.550 0.180 353.3 / 0.05) 0%, transparent 60%), radial-gradient(ellipse at 50% 0%, rgba(8, 145, 178, 0.07) 0%, transparent 55%),
radial-gradient(ellipse at center 70%, oklch(0.400 0.100 280 / 0.03) 0%, transparent 50%); radial-gradient(ellipse at 50% 100%, rgba(8, 145, 178, 0.04) 0%, transparent 50%);
pointer-events: none; pointer-events: none;
} }
.cta-section__content { .cta-section__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 640px;
margin-inline: auto;
} }
.cta-section__title { .cta-section__title {
margin-bottom: var(--space-lg); font-size: var(--text-4xl);
font-weight: 900;
color: var(--ink-primary);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-md);
} }
.cta-section__desc { .cta-section__desc {
font-size: var(--text-lg); font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl);
margin-inline: auto; margin-inline: auto;
margin-bottom: var(--space-xl); max-width: 50ch;
} }
.cta-section__actions { .cta-section__actions {
...@@ -439,7 +1008,187 @@ ...@@ -439,7 +1008,187 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
/* Divider lines between sections */ /* Primary teal CTA */
.section--divided { .btn-cta-primary {
border-top: 1px solid var(--border-subtle); display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: var(--color-accent);
color: #FFFFFF;
font-family: inherit;
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
text-decoration: none;
min-height: var(--btn-height-lg);
box-shadow: var(--shadow-accent);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.btn-cta-primary:hover {
background: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(8, 145, 178, 0.34);
}
/* WhatsApp green CTA */
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: var(--color-whatsapp);
color: #FFFFFF;
font-family: inherit;
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
text-decoration: none;
min-height: var(--btn-height-lg);
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.28);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.btn-whatsapp:hover {
background: var(--color-whatsapp-dark);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.38);
}
@media (max-width: 768px) {
.cta-section__actions {
flex-direction: column;
align-items: stretch;
max-width: 320px;
margin-inline: auto;
gap: var(--space-sm);
}
}
@media (prefers-reduced-motion: reduce) {
.btn-cta-primary:hover,
.btn-whatsapp:hover {
transform: none;
}
}
/* ================================================================
10. WHATSAPP FAB (Floating Action Button)
================================================================ */
.whatsapp-fab {
position: fixed;
bottom: 24px;
left: 24px; /* physical left = screen left = RTL end side */
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: var(--color-whatsapp);
color: #FFFFFF;
display: grid;
place-items: center;
text-decoration: none;
z-index: 500;
border: none;
cursor: pointer;
box-shadow:
0 4px 18px rgba(37, 211, 102, 0.42),
0 2px 8px rgba(0, 0, 0, 0.12);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.whatsapp-fab svg {
width: 28px;
height: 28px;
}
.whatsapp-fab:hover {
background: var(--color-whatsapp-dark);
color: #FFFFFF;
transform: scale(1.09);
box-shadow:
0 8px 32px rgba(37, 211, 102, 0.52),
0 4px 12px rgba(0, 0, 0, 0.16);
}
.whatsapp-fab:focus-visible {
outline: 3px solid var(--color-whatsapp);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-fab,
.whatsapp-fab:hover { transition: none; transform: none; }
}
/* ================================================================
SHARED — Section header light-theme helpers
================================================================ */
/* Centered variant */
.section-header--center {
text-align: center;
}
.section-header--center .section-header__desc {
margin-inline: auto;
}
/* Teal tag */
.section-header__tag--teal {
background: var(--color-accent-ghost);
border-color: rgba(8, 145, 178, 0.20);
color: var(--color-accent-dark);
}
/* Navy tag */
.section-header__tag--navy {
background: var(--color-primary-ghost);
border-color: var(--border-primary);
color: var(--color-primary);
}
/* Gold tag — for premium/highlight sections */
.section-header__tag--gold {
background: var(--color-gold-ghost);
border-color: rgba(201, 149, 43, 0.22);
color: var(--color-gold-dark);
}
/* ================================================================
SHARED — Section divider
================================================================ */
.section-divider {
height: 1px;
border: none;
background: linear-gradient(
to right,
transparent 0%,
var(--border-subtle) 25%,
var(--border-subtle) 75%,
transparent 100%
);
margin: 0;
} }
public/css/pages.css
View file @ 170eaea6
/* Module detail pages */ /* ═══════════════════════════════════════════════════════════════
El Captain — pages.css
Styles for internal pages: features.html, contact.html, pricing.html
Light theme, professional, RTL-first
═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────
MODULE HERO — compact hero for internal pages
───────────────────────────────────────────── */
.module-hero {
padding-top: 120px; /* clear sticky nav */
padding-bottom: 60px;
background: #F0F4F8;
position: relative;
overflow: hidden;
text-align: start;
}
/* Subtle grid texture */
.module-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(0.4 0.05 240 / 0.04) 1px, transparent 1px),
linear-gradient(90deg, oklch(0.4 0.05 240 / 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.module-hero__content {
position: relative;
z-index: 1;
max-width: 680px;
}
.module-hero__tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: oklch(0.550 0.180 353.3 / 0.1);
border: 1px solid oklch(0.550 0.180 353.3 / 0.2);
border-radius: 999px;
font-size: var(--text-xs, 0.75rem);
font-weight: 600;
color: var(--brand-primary, #e83e4f);
letter-spacing: 0.04em;
margin-bottom: var(--space-sm, 12px);
}
.module-hero h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--ink-primary, #0d1117);
line-height: 1.25;
margin-bottom: var(--space-md, 16px);
}
.module-hero p {
font-size: var(--text-lg, 1.125rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.8;
max-width: 560px;
}
/* ─────────────────────────────────────────────
BREADCRUMB
───────────────────────────────────────────── */
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--space-md, 16px);
font-size: var(--text-sm, 0.875rem);
color: var(--ink-muted, #9ca3af);
list-style: none;
padding: 0;
}
.breadcrumb__item {
display: flex;
align-items: center;
gap: 4px;
}
/* Separator between items */
.breadcrumb__item + .breadcrumb__item::before {
content: '/';
opacity: 0.5;
font-size: 0.75rem;
}
.breadcrumb__item a {
color: var(--ink-muted, #9ca3af);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb__item a:hover {
color: var(--brand-primary, #e83e4f);
text-decoration: underline;
}
/* Last item: current page — darker, no link */
.breadcrumb__item:last-child,
.breadcrumb__item[aria-current="page"] {
color: var(--ink-secondary, #4a5568);
font-weight: 500;
}
.breadcrumb__item:last-child a,
.breadcrumb__item[aria-current="page"] a {
color: inherit;
pointer-events: none;
text-decoration: none;
}
/* ─────────────────────────────────────────────
FEATURE SECTIONS — alternating white / gray
───────────────────────────────────────────── */
.feature-section {
padding-block: var(--space-3xl, 80px);
background: #ffffff;
}
.feature-section:nth-of-type(even) {
background: #F0F4F8;
}
.feature-section__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl, 48px);
align-items: center;
}
/* Flip columns on odd sections */
.feature-section:nth-of-type(odd) .feature-section__inner {
direction: ltr; /* flip order */
}
.feature-section:nth-of-type(odd) .feature-section__text,
.feature-section:nth-of-type(odd) .feature-section__visual {
direction: rtl; /* restore text direction inside */
}
.feature-section__text h2 {
font-size: clamp(1.375rem, 3vw, 2rem);
font-weight: 800;
color: var(--ink-primary, #0d1117);
margin-bottom: var(--space-md, 16px);
line-height: 1.3;
}
.feature-section__text p {
font-size: var(--text-base, 1rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.8;
margin-bottom: var(--space-lg, 24px);
}
/* Visual placeholder / icon area */
.feature-section__visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
border-radius: var(--radius-xl, 16px);
overflow: hidden;
}
.feature-section__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.feature-section__inner,
.feature-section:nth-of-type(odd) .feature-section__inner {
grid-template-columns: 1fr;
direction: rtl;
}
.feature-section__visual {
min-height: 200px;
}
}
/* ─────────────────────────────────────────────
FEATURE LIST — checkmark bullets
───────────────────────────────────────────── */
.feature-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm, 12px);
}
.feature-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-sm, 12px);
padding: var(--space-xs, 8px) 0;
font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.7;
}
/* Teal checkmark before each item */
.feature-list__item::before {
content: '✓';
flex-shrink: 0;
width: 20px;
height: 20px;
display: grid;
place-items: center;
font-size: 0.75rem;
font-weight: 800;
color: #ffffff;
background: var(--brand-teal, #14b8a6);
border-radius: 50%;
margin-top: 2px;
line-height: 1;
}
/* Variant: custom icon instead of auto-generated ✓ */
.feature-list__item--icon::before {
display: none; /* icon provided inline */
}
.feature-list__item-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--brand-teal, #14b8a6);
margin-top: 2px;
}
/* ─────────────────────────────────────────────
MODULE DETAIL — per-module sections on features page
───────────────────────────────────────────── */
.module-detail {
padding-block: var(--space-3xl, 80px);
}
.module-detail__header {
display: flex;
align-items: center;
gap: var(--space-md, 16px);
margin-bottom: var(--space-lg, 24px);
}
.module-detail__icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
background: oklch(0.550 0.180 353.3 / 0.08);
border: 1px solid oklch(0.550 0.180 353.3 / 0.15);
border-radius: var(--radius-lg, 12px);
color: var(--brand-primary, #e83e4f);
flex-shrink: 0;
}
.module-detail__icon svg {
width: 26px;
height: 26px;
}
.module-detail__header h2 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 800;
color: var(--ink-primary, #0d1117);
line-height: 1.3;
margin: 0;
}
.module-detail__description {
font-size: var(--text-base, 1rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.8;
max-width: 640px;
margin-bottom: var(--space-xl, 32px);
}
/* 2-column feature grid inside each module */
.module-detail__features { .module-detail__features {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--space-md); gap: var(--space-md, 16px);
}
.module-detail__feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm, 12px);
padding: var(--space-md, 16px);
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
border-radius: var(--radius-lg, 12px);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.module-detail__feature-item:hover {
border-color: oklch(0.550 0.180 353.3 / 0.3);
box-shadow: 0 4px 16px oklch(0 0 0 / 0.06);
}
.module-detail__feature-item-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: oklch(0.550 0.180 353.3 / 0.06);
border-radius: var(--radius-md, 8px);
color: var(--brand-primary, #e83e4f);
} }
.module-detail__feature-item-text {
font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.6;
font-weight: 500;
}
/* Screenshot/text alternating layout */
.module-detail__screenshot-section { .module-detail__screenshot-section {
display: grid; display: grid;
grid-template-columns: 1.2fr 1fr; grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl); gap: var(--space-2xl, 48px);
align-items: center; align-items: center;
} }
...@@ -24,96 +350,51 @@ ...@@ -24,96 +350,51 @@
} }
.module-detail__text h3 { .module-detail__text h3 {
margin-bottom: var(--space-md); margin-bottom: var(--space-md, 16px);
font-size: var(--text-2xl); font-size: var(--text-2xl, 1.5rem);
font-weight: 700;
color: var(--ink-primary, #0d1117);
} }
.module-detail__text p { .module-detail__text p {
margin-bottom: var(--space-md); margin-bottom: var(--space-md, 16px);
color: var(--ink-secondary, #4a5568);
line-height: 1.8;
} }
.module-detail__list { .module-detail__list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-sm); gap: var(--space-sm, 12px);
} }
.module-detail__list-item { .module-detail__list-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: var(--space-sm); gap: var(--space-sm, 12px);
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary); color: var(--ink-secondary, #4a5568);
line-height: 1.7; line-height: 1.7;
} }
.module-detail__list-item::before { .module-detail__list-item::before {
content: ''; content: '';
flex-shrink: 0; flex-shrink: 0;
width: 5px; width: 6px;
height: 5px; height: 6px;
margin-top: 0.6em; margin-top: 0.55em;
background: var(--brand-primary); background: var(--brand-primary, #e83e4f);
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px oklch(0.550 0.180 353.3 / 0.4); box-shadow: 0 0 6px oklch(0.550 0.180 353.3 / 0.4);
} }
/* Features overview page */ /* ─────────────────────────────────────────────
.features-grid { CONTACT SECTION
display: grid; ───────────────────────────────────────────── */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-md);
}
.feature-item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
align-items: start;
transition: all var(--duration-slow) var(--ease-out-expo);
position: relative;
overflow: hidden;
}
.feature-item:hover {
border-color: var(--border-glow);
transform: translateY(-2px);
box-shadow: 0 8px 32px oklch(0 0 0 / 0.2);
}
.feature-item__number {
font-size: var(--text-2xl);
font-weight: 900;
background: linear-gradient(135deg, var(--brand-primary-dim), var(--brand-primary-muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
opacity: 0.7;
}
.feature-item__content h4 {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-2xs);
color: var(--ink-primary);
}
.feature-item__content p {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Contact / Pricing page */
.contact-section { .contact-section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 3fr 2fr; /* form 60% / sidebar 40% */
gap: var(--space-2xl); gap: var(--space-2xl, 48px);
align-items: start; align-items: start;
} }
...@@ -121,52 +402,62 @@ ...@@ -121,52 +402,62 @@
.contact-section { .contact-section {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
/* Form appears first on mobile */
.contact-section > .contact-form {
order: -1;
}
} }
/* ─────────────────────────────────────────────
CONTACT FORM
───────────────────────────────────────────── */
.contact-form { .contact-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-md); gap: var(--space-md, 16px);
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2xs); gap: var(--space-2xs, 6px);
} }
.form-group label { .form-group label {
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
font-weight: 500; font-weight: 700;
color: var(--ink-secondary); color: var(--ink-primary, #0d1117);
letter-spacing: 0.01em;
} }
.form-group input, .form-group input,
.form-group textarea, .form-group textarea,
.form-group select { .form-group select {
padding: var(--space-sm) var(--space-md); width: 100%;
background: var(--bg-surface); padding: 12px 16px;
border: 1px solid var(--border-subtle); background: #ffffff;
border-radius: var(--radius-lg); border: 1.5px solid #d1d5db;
color: var(--ink-primary); border-radius: 8px; /* rounded-md */
color: var(--ink-primary, #0d1117);
font-family: inherit; font-family: inherit;
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
transition: all var(--duration-fast) var(--ease-out-quart); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
min-height: 44px; min-height: 44px;
line-height: 1.5;
} }
.form-group input:focus, .form-group input:focus,
.form-group textarea:focus, .form-group textarea:focus,
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: var(--brand-primary); border-color: var(--brand-teal, #14b8a6);
box-shadow: 0 0 0 3px oklch(0.550 0.180 353.3 / 0.1), 0 0 20px oklch(0.550 0.180 353.3 / 0.05); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
background: var(--bg-elevated); background: #fafffe;
} }
.form-group input::placeholder, .form-group input::placeholder,
.form-group textarea::placeholder { .form-group textarea::placeholder {
color: var(--ink-muted); color: #9ca3af;
} }
.form-group textarea { .form-group textarea {
...@@ -176,120 +467,493 @@ ...@@ -176,120 +467,493 @@
.form-group select { .form-group select {
appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left 12px center; background-position: left 12px center; /* RTL: arrow on left */
padding-left: 36px; padding-inline-start: 40px;
cursor: pointer;
}
/* Error state */
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
border-color: #ef4444;
background: #fff8f8;
}
.form-group--error input:focus,
.form-group--error textarea:focus,
.form-group--error select:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.form-error {
font-size: var(--text-xs, 0.75rem);
color: #ef4444;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.form-error::before {
content: '⚠';
font-size: 0.65rem;
} }
/* ─────────────────────────────────────────────
CONTACT INFO SIDEBAR
───────────────────────────────────────────── */
.contact-info { .contact-info {
padding: var(--space-xl); padding: var(--space-xl, 32px);
background: var(--bg-surface); background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
border-radius: var(--radius-xl); border-radius: var(--radius-xl, 16px);
display: flex;
flex-direction: column;
gap: 0;
} }
.contact-info__item { .contact-info__item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: var(--space-md); gap: var(--space-md, 16px);
padding-block: var(--space-md); padding-block: var(--space-md, 16px);
} }
.contact-info__item + .contact-info__item { .contact-info__item + .contact-info__item {
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
} }
.contact-info__icon { .contact-info__icon {
width: 2.25rem; width: 36px;
height: 2.25rem; height: 36px;
display: grid; display: grid;
place-items: center; place-items: center;
background: oklch(0.550 0.180 353.3 / 0.08); background: oklch(0.550 0.180 353.3 / 0.08);
border: 1px solid oklch(0.550 0.180 353.3 / 0.15); border: 1px solid oklch(0.550 0.180 353.3 / 0.15);
border-radius: var(--radius-md); border-radius: var(--radius-md, 8px);
color: var(--brand-primary-light); color: var(--brand-primary, #e83e4f);
flex-shrink: 0; flex-shrink: 0;
} }
.contact-info__icon svg {
width: 18px;
height: 18px;
}
.contact-info__label { .contact-info__label {
font-size: var(--text-xs); font-size: var(--text-xs, 0.75rem);
color: var(--ink-muted); color: var(--ink-muted, #9ca3af);
margin-bottom: 2px; margin-bottom: 3px;
font-weight: 500;
} }
.contact-info__value { .contact-info__value {
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
color: var(--ink-primary); color: var(--ink-primary, #0d1117);
font-weight: 500; font-weight: 600;
line-height: 1.4;
}
/* WhatsApp card: green background, white text */
.contact-info__whatsapp {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm, 12px);
width: 100%;
padding: var(--space-md, 16px) var(--space-lg, 24px);
margin-top: var(--space-md, 16px);
background: #25d366;
color: #ffffff;
border-radius: var(--radius-lg, 12px);
font-weight: 700;
font-size: var(--text-sm, 0.875rem);
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.contact-info__whatsapp:hover {
background: #1da855;
transform: translateY(-1px);
color: #ffffff;
}
.contact-info__whatsapp svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────
PRICING SECTION
───────────────────────────────────────────── */
.pricing-section {
padding-block: var(--space-3xl, 80px);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg, 24px);
align-items: start;
}
@media (max-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.pricing-grid {
grid-template-columns: 1fr;
}
}
/* ─────────────────────────────────────────────
PRICING CARDS
───────────────────────────────────────────── */
.pricing-card {
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: 16px; /* rounded-xl */
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
position: relative;
}
.pricing-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
/* Featured card: teal border */
.pricing-card--featured {
border-color: var(--brand-teal, #14b8a6);
box-shadow: 0 8px 32px rgba(20, 184, 166, 0.15);
}
.pricing-card--featured:hover {
box-shadow: 0 16px 48px rgba(20, 184, 166, 0.25);
}
/* "الأكثر شيوعاً" badge */
.pricing-card__badge {
position: absolute;
top: 16px;
inset-inline-start: 50%;
transform: translateX(50%); /* RTL: center badge */
padding: 4px 14px;
background: var(--brand-teal, #14b8a6);
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
border-radius: 999px;
letter-spacing: 0.04em;
white-space: nowrap;
z-index: 1;
}
/* LTR badge adjustment */
[dir="ltr"] .pricing-card__badge {
transform: translateX(-50%);
inset-inline-start: 50%;
}
/* Card header */
.pricing-card__header {
padding: var(--space-xl, 32px) var(--space-xl, 32px) var(--space-lg, 24px);
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
}
.pricing-card--featured .pricing-card__header {
background: oklch(0.93 0.04 180 / 0.4);
}
.pricing-card__plan {
font-size: var(--text-sm, 0.875rem);
font-weight: 700;
color: var(--ink-secondary, #4a5568);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-xs, 8px);
}
.pricing-card__price {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.pricing-card__amount {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--ink-primary, #0d1117);
line-height: 1;
}
.pricing-card--featured .pricing-card__amount {
color: var(--brand-teal, #14b8a6);
}
.pricing-card__currency {
font-size: var(--text-base, 1rem);
font-weight: 600;
color: var(--ink-secondary, #4a5568);
align-self: flex-start;
padding-top: 6px;
}
.pricing-card__period {
font-size: var(--text-xs, 0.75rem);
color: var(--ink-muted, #9ca3af);
align-self: flex-end;
padding-bottom: 4px;
}
.pricing-card__description {
font-size: var(--text-sm, 0.875rem);
color: var(--ink-muted, #9ca3af);
margin-top: var(--space-sm, 12px);
line-height: 1.5;
}
/* Card body: feature list */
.pricing-card__body {
padding: var(--space-xl, 32px);
flex: 1;
}
.pricing-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm, 12px);
}
.pricing-card__feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm, 12px);
font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.6;
} }
/* Workflow diagram */ .pricing-card__feature::before {
content: '✓';
flex-shrink: 0;
width: 18px;
height: 18px;
display: grid;
place-items: center;
font-size: 0.65rem;
font-weight: 800;
color: #ffffff;
background: var(--brand-teal, #14b8a6);
border-radius: 50%;
margin-top: 2px;
}
/* Disabled feature */
.pricing-card__feature--disabled {
opacity: 0.4;
}
.pricing-card__feature--disabled::before {
content: '–';
background: #d1d5db;
color: #6b7280;
}
/* Divider line inside feature list */
.pricing-card__feature-divider {
height: 1px;
background: #f3f4f6;
margin-block: var(--space-xs, 8px);
}
/* Card footer: CTA button */
.pricing-card__footer {
padding: 0 var(--space-xl, 32px) var(--space-xl, 32px);
}
.pricing-card__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px var(--space-lg, 24px);
border-radius: var(--radius-lg, 12px);
font-weight: 700;
font-size: var(--text-sm, 0.875rem);
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
border: none;
font-family: inherit;
}
/* Default CTA: outlined */
.pricing-card__cta--outline {
background: transparent;
border: 1.5px solid #d1d5db;
color: var(--ink-primary, #0d1117);
}
.pricing-card__cta--outline:hover {
border-color: var(--brand-teal, #14b8a6);
color: var(--brand-teal, #14b8a6);
background: rgba(20, 184, 166, 0.04);
}
/* Featured CTA: filled teal */
.pricing-card__cta--primary {
background: var(--brand-teal, #14b8a6);
color: #ffffff;
border: 1.5px solid transparent;
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
}
.pricing-card__cta--primary:hover {
background: #0d9488;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}
/* ─────────────────────────────────────────────
FEATURES OVERVIEW GRID
───────────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-md, 16px);
}
.feature-item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-lg, 24px);
padding: var(--space-xl, 32px);
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
border-radius: var(--radius-xl, 16px);
align-items: start;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-item:hover {
border-color: oklch(0.550 0.180 353.3 / 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.feature-item__number {
font-size: var(--text-2xl, 1.5rem);
font-weight: 900;
background: linear-gradient(135deg, oklch(0.550 0.180 353.3 / 0.4), oklch(0.550 0.180 353.3 / 0.2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
opacity: 0.7;
}
.feature-item__content h4 {
font-size: var(--text-base, 1rem);
font-weight: 700;
margin-bottom: var(--space-2xs, 6px);
color: var(--ink-primary, #0d1117);
}
.feature-item__content p {
font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary, #4a5568);
line-height: 1.8;
}
/* ─────────────────────────────────────────────
WORKFLOW DIAGRAM
───────────────────────────────────────────── */
.workflow { .workflow {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-sm); gap: var(--space-sm, 12px);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
padding: var(--space-xl) 0; padding: var(--space-xl, 32px) 0;
} }
.workflow__step { .workflow__step {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs, 8px);
padding: var(--space-sm) var(--space-md); padding: var(--space-sm, 12px) var(--space-md, 16px);
background: var(--bg-surface); background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
border-radius: var(--radius-lg); border-radius: var(--radius-lg, 12px);
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
font-weight: 500; font-weight: 500;
color: var(--ink-primary); color: var(--ink-primary, #0d1117);
transition: all var(--duration-normal) var(--ease-out-quart); transition: all 0.2s ease;
white-space: nowrap; white-space: nowrap;
} }
.workflow__step:hover { .workflow__step:hover {
border-color: var(--border-glow); border-color: oklch(0.550 0.180 353.3 / 0.3);
box-shadow: 0 0 16px oklch(0.550 0.180 353.3 / 0.1); box-shadow: 0 0 16px oklch(0.550 0.180 353.3 / 0.1);
} }
.workflow__arrow { .workflow__arrow {
color: var(--brand-primary-dim); color: var(--brand-primary, #e83e4f);
font-size: var(--text-lg); font-size: var(--text-lg, 1.125rem);
opacity: 0.6; opacity: 0.5;
} }
/* Comparison table */ /* ─────────────────────────────────────────────
COMPARISON TABLE
───────────────────────────────────────────── */
.comparison-table { .comparison-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: var(--bg-surface); background: var(--bg-surface, #ffffff);
border-radius: var(--radius-xl); border-radius: var(--radius-xl, 16px);
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
} }
.comparison-table th { .comparison-table th {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm, 12px) var(--space-md, 16px);
background: var(--bg-elevated); background: #F0F4F8;
font-weight: 600; font-weight: 700;
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
color: var(--ink-primary); color: var(--ink-primary, #0d1117);
text-align: right; text-align: start;
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
} }
.comparison-table td { .comparison-table td {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm, 12px) var(--space-md, 16px);
font-size: var(--text-sm); font-size: var(--text-sm, 0.875rem);
color: var(--ink-secondary); color: var(--ink-secondary, #4a5568);
border-bottom: 1px solid oklch(1 0 0 / 0.02); border-bottom: 1px solid #f9fafb;
transition: background var(--duration-fast) var(--ease-out-quart); transition: background 0.15s ease;
} }
.comparison-table tr:hover td { .comparison-table tr:hover td {
background: oklch(1 0 0 / 0.02); background: #fafafa;
} }
.comparison-table tr:last-child td { .comparison-table tr:last-child td {
...@@ -297,22 +961,66 @@ ...@@ -297,22 +961,66 @@
} }
.comparison-table .check { .comparison-table .check {
color: var(--success); color: var(--brand-teal, #14b8a6);
font-weight: 700; font-weight: 800;
font-size: 1rem;
} }
.comparison-table .cross { .comparison-table .cross {
color: var(--ink-muted); color: #d1d5db;
opacity: 0.4; font-weight: 700;
font-size: 1rem;
}
/* ─────────────────────────────────────────────
GRADIENT SECTION DIVIDERS
───────────────────────────────────────────── */
.section--gradient-top {
position: relative;
} }
/* Gradient section dividers */
.section--gradient-top::before { .section--gradient-top::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline: 0;
right: 0;
height: 1px; height: 1px;
background: linear-gradient(90deg, transparent 10%, var(--brand-primary-dim), transparent 90%); background: linear-gradient(90deg, transparent 10%, oklch(0.550 0.180 353.3 / 0.3), transparent 90%);
}
/* ─────────────────────────────────────────────
FORM SUBMIT BUTTON
───────────────────────────────────────────── */
.btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm, 12px);
padding: 14px var(--space-xl, 32px);
background: var(--brand-primary, #e83e4f);
color: #ffffff;
border: none;
border-radius: var(--radius-lg, 12px);
font-size: var(--text-base, 1rem);
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
align-self: flex-start;
}
.btn-submit:hover {
background: #c9303f;
transform: translateY(-1px);
box-shadow: 0 6px 20px oklch(0.550 0.180 353.3 / 0.3);
}
.btn-submit:active {
transform: translateY(0);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} }
public/css/tokens.css
View file @ 170eaea6
/* ============================================================
El Captain Sports Management — Design Tokens
Light theme · RTL Arabic-first · Professional / Bank-grade
============================================================ */
:root { :root {
/* Brand seed: oklch(0.570 0.158 353.3) — deep rose/crimson */
--brand-primary: oklch(0.550 0.180 353.3); /* ----------------------------------------------------------
--brand-primary-light: oklch(0.680 0.160 353.3); Brand Colors
--brand-primary-dim: oklch(0.400 0.130 353.3); Primary: Deep Navy Blue — trust, authority, stability
--brand-primary-muted: oklch(0.320 0.090 353.3); Accent: Teal/Cyan — action, CTAs, energy
--brand-primary-ghost: oklch(0.570 0.158 353.3 / 0.06); Gold: Warm Gold — premium highlights, badges
---------------------------------------------------------- */
/* Backgrounds — deeper, colder dark */
--bg-deep: oklch(0.095 0.006 280); /* Primary — Navy */
--bg-base: oklch(0.115 0.008 280); --color-primary: #1B2B4B;
--bg-surface: oklch(0.145 0.010 280); --color-primary-light: #2D4A7C;
--bg-elevated: oklch(0.180 0.012 280); --color-primary-dim: #162340;
--color-primary-ghost: rgba(27, 43, 75, 0.06);
/* Text */
--ink-primary: oklch(0.960 0.003 280); /* Accent — Teal */
--ink-secondary: oklch(0.720 0.008 280); --color-accent: #0891B2;
--ink-muted: oklch(0.500 0.006 280); --color-accent-dark: #0E7490;
--color-accent-light: #22B8D8;
/* Borders */ --color-accent-ghost: rgba(8, 145, 178, 0.08);
--border-subtle: oklch(0.200 0.010 280);
--border-default: oklch(0.280 0.012 280); /* Gold — Premium */
--border-glow: oklch(0.550 0.180 353.3 / 0.25); --color-gold: #C9952B;
--color-gold-light: #E5B94B;
/* Accent — warm gold for secondary */ --color-gold-dark: #A87820;
--accent-gold: oklch(0.750 0.130 85); --color-gold-ghost: rgba(201, 149, 43, 0.08);
--accent-gold-dim: oklch(0.550 0.090 85);
/* ----------------------------------------------------------
/* Functional */ Backgrounds (Light Theme)
--success: oklch(0.650 0.150 145); ---------------------------------------------------------- */
--warning: oklch(0.700 0.140 80); --bg-body: #F8FAFB;
--error: oklch(0.600 0.180 25); --bg-surface: #FFFFFF;
--bg-elevated: #FFFFFF;
/* Typography scale — 1.333 ratio (perfect fourth) */ --bg-muted: #F0F4F8;
--text-xs: clamp(0.694rem, 0.65vi + 0.5rem, 0.75rem); --bg-dark: #1B2B4B;
--text-sm: clamp(0.833rem, 0.8vi + 0.6rem, 0.875rem); --bg-dark-deeper: #111D33;
--text-base: clamp(0.938rem, 0.9vi + 0.65rem, 1rem);
--text-lg: clamp(1.063rem, 1.1vi + 0.75rem, 1.188rem); /* ----------------------------------------------------------
--text-xl: clamp(1.25rem, 1.4vi + 0.85rem, 1.375rem); Text
--text-2xl: clamp(1.6rem, 2vi + 0.95rem, 2rem); ---------------------------------------------------------- */
--text-3xl: clamp(2.1rem, 2.8vi + 1.1rem, 2.75rem); --ink-primary: #1B2B4B;
--text-4xl: clamp(2.8rem, 3.5vi + 1.3rem, 3.5rem); --ink-secondary: #4A5568;
--text-5xl: clamp(3.4rem, 4.5vi + 1.5rem, 4.5rem); --ink-muted: #718096;
--ink-placeholder: #A0AEC0;
/* Spacing */ --ink-on-dark: #F8FAFB;
--space-2xs: clamp(0.125rem, 0.25vi, 0.25rem); --ink-on-dark-muted: #CBD5E0;
--space-xs: clamp(0.25rem, 0.5vi, 0.5rem); --ink-link: #0891B2;
--space-sm: clamp(0.5rem, 1vi, 0.75rem); --ink-link-hover: #0E7490;
--space-md: clamp(0.875rem, 1.5vi, 1.25rem);
--space-lg: clamp(1.25rem, 2.5vi, 2rem); /* ----------------------------------------------------------
--space-xl: clamp(2rem, 4vi, 3rem); Borders
--space-2xl: clamp(3rem, 6vi, 5rem); ---------------------------------------------------------- */
--space-3xl: clamp(5rem, 10vi, 8rem); --border-subtle: #E2E8F0;
--space-section: clamp(5rem, 10vi, 8rem); --border-default: #CBD5E0;
--border-strong: #A0AEC0;
/* Radius */ --border-accent: rgba(8, 145, 178, 0.30);
--radius-xs: 0.125rem; --border-primary: rgba(27, 43, 75, 0.20);
--radius-sm: 0.25rem;
--radius-md: 0.5rem; /* ----------------------------------------------------------
--radius-lg: 0.875rem; Functional / Semantic
--radius-xl: 1.25rem; ---------------------------------------------------------- */
--radius-2xl: 1.75rem; --color-success: #10875A;
--color-success-bg: #ECFDF5;
/* Shadows */ --color-warning: #B45309;
--shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4); --color-warning-bg: #FFFBEB;
--shadow-md: 0 4px 16px oklch(0 0 0 / 0.5); --color-error: #B91C1C;
--shadow-lg: 0 12px 48px oklch(0 0 0 / 0.6); --color-error-bg: #FEF2F2;
--shadow-glow: 0 0 60px oklch(0.550 0.180 353.3 / 0.15); --color-info: #0891B2;
--shadow-glow-strong: 0 0 80px oklch(0.550 0.180 353.3 / 0.25); --color-info-bg: #EFF6FF;
--shadow-inner: inset 0 1px 0 oklch(1 0 0 / 0.04);
/* WhatsApp green */
/* Transitions */ --color-whatsapp: #25D366;
--color-whatsapp-dark: #128C7E;
/* ----------------------------------------------------------
Typography
Scale: 1.25 ratio (Major Third) — conservative, refined
Fluid values via clamp(): min at ~375px, max at ~1280px
---------------------------------------------------------- */
--font-primary: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
--leading-loose: 1.9;
/* Letter spacing */
--tracking-tight: -0.025em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-widest: 0.08em;
/* Type scale */
--text-xs: clamp(0.694rem, 0.60vi + 0.55rem, 0.75rem);
--text-sm: clamp(0.833rem, 0.70vi + 0.65rem, 0.875rem);
--text-base: clamp(0.938rem, 0.80vi + 0.70rem, 1rem);
--text-lg: clamp(1.063rem, 1.00vi + 0.75rem, 1.125rem);
--text-xl: clamp(1.200rem, 1.20vi + 0.80rem, 1.375rem);
--text-2xl: clamp(1.440rem, 1.60vi + 0.90rem, 1.750rem);
--text-3xl: clamp(1.728rem, 2.20vi + 1.00rem, 2.250rem);
--text-4xl: clamp(2.074rem, 3.00vi + 1.10rem, 2.813rem);
--text-5xl: clamp(2.488rem, 4.00vi + 1.20rem, 3.500rem);
/* ----------------------------------------------------------
Spacing
Base: 4px · Fluid clamp() scale
---------------------------------------------------------- */
--space-2xs: clamp(0.125rem, 0.20vi, 0.25rem); /* 2–4px */
--space-xs: clamp(0.25rem, 0.40vi, 0.50rem); /* 4–8px */
--space-sm: clamp(0.50rem, 0.80vi, 0.75rem); /* 8–12px */
--space-md: clamp(0.75rem, 1.20vi, 1.25rem); /* 12–20px */
--space-lg: clamp(1.25rem, 2.00vi, 2.00rem); /* 20–32px */
--space-xl: clamp(2.00rem, 3.50vi, 3.00rem); /* 32–48px */
--space-2xl: clamp(3.00rem, 5.50vi, 5.00rem); /* 48–80px */
--space-3xl: clamp(5.00rem, 8.00vi, 7.00rem); /* 80–112px */
--space-section: clamp(5.00rem, 9.00vi, 8.00rem); /* section padding */
/* ----------------------------------------------------------
Border Radius — Conservative, professional
---------------------------------------------------------- */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* ----------------------------------------------------------
Shadows — Subtle, professional (not dramatic)
Uses rgba so they work on colored backgrounds
---------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(27, 43, 75, 0.06);
--shadow-sm: 0 1px 4px rgba(27, 43, 75, 0.08),
0 2px 6px rgba(27, 43, 75, 0.04);
--shadow-md: 0 4px 12px rgba(27, 43, 75, 0.10),
0 2px 6px rgba(27, 43, 75, 0.06);
--shadow-lg: 0 8px 28px rgba(27, 43, 75, 0.12),
0 4px 10px rgba(27, 43, 75, 0.07);
--shadow-xl: 0 16px 48px rgba(27, 43, 75, 0.14),
0 6px 16px rgba(27, 43, 75, 0.08);
--shadow-card: var(--shadow-md);
--shadow-nav: 0 1px 0 var(--border-subtle),
0 2px 12px rgba(27, 43, 75, 0.07);
--shadow-accent: 0 4px 18px rgba(8, 145, 178, 0.22);
--shadow-gold: 0 4px 18px rgba(201, 149, 43, 0.25);
--shadow-inset: inset 0 1px 2px rgba(27, 43, 75, 0.05);
/* ----------------------------------------------------------
Transitions — Smooth, no springs, ease-out character
---------------------------------------------------------- */
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 300ms; --duration-fast: 120ms;
--duration-slow: 500ms; --duration-normal: 220ms;
--duration-slower: 800ms; --duration-slow: 360ms;
--duration-slower: 500ms;
/* Z-index scale */
--z-base: 0; /* ----------------------------------------------------------
--z-above: 10; Z-index Scale
--z-dropdown: 100; ---------------------------------------------------------- */
--z-sticky: 200; --z-base: 0;
--z-modal-backdrop: 300; --z-above: 10;
--z-modal: 400; --z-dropdown: 100;
--z-toast: 500; --z-sticky: 200;
--z-tooltip: 600; --z-mobile-menu: 300;
--z-modal-bg: 400;
/* Layout */ --z-modal: 500;
--container-max: 1200px; --z-toast: 600;
--z-tooltip: 700;
/* ----------------------------------------------------------
Layout
---------------------------------------------------------- */
--container-max: 1200px;
--container-wide: 1400px; --container-wide: 1400px;
--content-max: 65ch; --content-max: 65ch;
--nav-height: 4rem;
/* ----------------------------------------------------------
Component Tokens — Buttons
---------------------------------------------------------- */
--btn-height-sm: 2.25rem;
--btn-height-md: 2.75rem;
--btn-height-lg: 3.25rem;
--btn-radius: var(--radius-md);
--btn-font-weight: 600;
/* ----------------------------------------------------------
Component Tokens — Cards
---------------------------------------------------------- */
--card-bg: var(--bg-surface);
--card-border: var(--border-subtle);
--card-radius: var(--radius-lg);
--card-padding: var(--space-lg);
--card-shadow: var(--shadow-sm);
--card-shadow-hover: var(--shadow-md);
} }
public/features.html
View file @ 170eaea6
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المزايا - El-Captain</title> <title>المزايا - El-Captain لإدارة الأكاديميات الرياضية</title>
<meta name="description" content="استكشف كل مزايا نظام El-Captain لادارة الاندية الرياضية. +35 وحدة متكاملة تغطي كل العمليات."> <meta name="description" content="استكشف كل مزايا نظام El-Captain. نظام متكامل يغطي إدارة المشتركين والمالية والحضور والبرامج التدريبية والمخازن والمنشآت.">
<link rel="stylesheet" href="css/tokens.css"> <link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/components.css">
...@@ -12,28 +12,30 @@ ...@@ -12,28 +12,30 @@
</head> </head>
<body> <body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي"> <nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner"> <div class="container nav__inner">
<a href="/" class="nav__logo"> <a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span> <span class="nav__logo-mark">EC</span>
<span>El-Captain</span> <span>El-Captain</span>
</a> </a>
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link nav__link--active">المزايا</a> <a href="features.html" class="nav__link nav__link--active">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks"> <button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Hero --> <!-- Hero Banner -->
<section class="module-hero section"> <section class="module-hero section">
<div class="container"> <div class="container">
<div class="module-hero__content" data-reveal> <div class="module-hero__content" data-reveal>
...@@ -42,350 +44,481 @@ ...@@ -42,350 +44,481 @@
<span class="breadcrumb__separator">/</span> <span class="breadcrumb__separator">/</span>
<span>المزايا</span> <span>المزايا</span>
</nav> </nav>
<h1 class="module-hero__title">كل ما يحتاجه ناديك في نظام واحد</h1> <h1 class="module-hero__title">كل ما تحتاجه لإدارة أكاديميتك</h1>
<p class="module-hero__desc">+35 وحدة مبنية لحل المشاكل الحقيقية التي يواجهها كل ناد رياضي في مصر كل يوم. ليست قائمة مزايا — بل حلول فعلية تعمل.</p> <p class="module-hero__desc">نظام متكامل يغطي كل العمليات — من تسجيل المشترك الجديد حتى التقارير المالية الشهرية.</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Core Modules --> <!-- Module 1: إدارة المشتركين -->
<section class="section" id="core"> <section class="section" id="participants">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="module-detail__screenshot-section" data-reveal>
<span class="section-header__tag">الوحدات الاساسية</span> <div class="module-detail__text">
<h2 class="section-header__title">العمليات اليومية</h2> <div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<p class="section-header__desc">الوحدات التي يستخدمها فريقك كل يوم لادارة العمل الاساسي.</p> <div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
</div> <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"/>
<div class="features-grid"> <circle cx="9" cy="7" r="4"/>
<div class="feature-item" data-reveal="100"> <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<div class="feature-item__number">01</div> <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
<div class="feature-item__content"> </svg>
<h4>ادارة العضويات</h4> </div>
<p>دورة حياة كاملة: تقديم، مقابلة، تفعيل، تجديد، تحويل، انفصال. انواع متعددة: عامل، رياضي، شرفي، موسمي، اجنبي.</p> <span class="section-header__tag" style="margin-bottom: 0;">إدارة المشتركين</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">ملف شامل لكل مشترك</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">تسجيل المشتركين الجدد، إدارة الملفات الشخصية ومتابعة الحالة، ربط أولياء الأمور بأبنائهم، وتصنيف المشتركين حسب الفئة. كل بيانات المشترك في مكان واحد.</p>
<div class="feature-item" data-reveal="150"> <div class="module-detail__list">
<div class="feature-item__number">02</div> <div class="module-detail__list-item">تسجيل سريع مع بيانات كاملة: الاسم، السن، بيانات التواصل، تاريخ التسجيل</div>
<div class="feature-item__content"> <div class="module-detail__list-item">تتبع حالة المشترك: نشط، مجمد، موقوف، خريج، محوّل</div>
<h4>الاشتراكات والتجديد</h4> <div class="module-detail__list-item">ربط أولياء الأمور وإشعارهم تلقائياً بكل تغيير</div>
<p>تجديد تلقائي وتنبيهات قبل انتهاء الاشتراك. احتساب غرامات التاخير تلقائيا وفقا للائحة.</p> <div class="module-detail__list-item">تصنيفات متعددة: عادي، VIP، منحة، ابن موظف، تجريبي</div>
<div class="module-detail__list-item">رفع الوثائق والشهادات الطبية وتحديد صلاحيتها</div>
<div class="module-detail__list-item">سجل متكامل لكل تاريخ المشترك مع الأكاديمية</div>
</div> </div>
</div> </div>
<div class="screenshot screenshot--framed" data-reveal="150">
<div class="feature-item" data-reveal="200"> <img src="screenshots/members/list.png" alt="إدارة المشتركين" loading="lazy">
<div class="feature-item__number">03</div>
<div class="feature-item__content">
<h4>الانشطة الرياضية</h4>
<p>اكاديميات وتخصصات ومجموعات تدريب. جداول مواعيد ومدربين وكروت لاعبين وتسجيل حضور.</p>
</div>
</div> </div>
</div>
</div>
</section>
<div class="feature-item" data-reveal="250"> <!-- Module 2: البرامج والمجموعات -->
<div class="feature-item__number">04</div> <section class="section" id="programs" style="background: var(--bg-base);">
<div class="feature-item__content"> <div class="container">
<h4>حمامات السباحة</h4> <div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<p>تذاكر وكرنيهات وحصر متواجدين لحظي. ادارة الحارات والحجوزات ومراقبة السعة القصوى.</p> <div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/sports/activities.png" alt="البرامج التدريبية" loading="lazy">
</div>
<div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 2a10 10 0 0 1 0 20"/>
<path d="M2 12h20"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">البرامج والمجموعات</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">برامج تدريبية منظمة ومجموعات مرنة</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">إنشاء البرامج التدريبية وتقسيمها لمجموعات بطاقة استيعابية محددة، مع توليد الجلسات تلقائياً وإدارة التسجيل وقوائم الانتظار.</p>
<div class="feature-item" data-reveal="300"> <div class="module-detail__list">
<div class="feature-item__number">05</div> <div class="module-detail__list-item">إنشاء برامج تدريبية بأوصاف وشروط ومتطلبات</div>
<div class="feature-item__content"> <div class="module-detail__list-item">مجموعات بطاقة استيعابية ومستوى عمري محدد</div>
<h4>ادارة المنشآت</h4> <div class="module-detail__list-item">جداول أسبوعية متكررة مع توليد الجلسات تلقائياً</div>
<p>حجز الملاعب والصالات. تقويم متكامل يمنع التعارض. ادارة المعدات والصيانة.</p> <div class="module-detail__list-item">إدارة التسجيل والإلغاء مع تتبع حالة كل تسجيل</div>
<div class="module-detail__list-item">قائمة انتظار ذكية تفعّل التسجيل عند خلو مقعد</div>
<div class="module-detail__list-item">ربط كل مجموعة بمدرب ومنشأة ووقت محدد</div>
</div> </div>
</div> </div>
</div>
</div>
</section>
<div class="feature-item" data-reveal="350"> <!-- Module 3: الحضور -->
<div class="feature-item__number">06</div> <section class="section" id="attendance">
<div class="feature-item__content"> <div class="container">
<h4>الخزينة والتحصيل</h4> <div class="module-detail__screenshot-section" data-reveal>
<p>جلسات خزينة متعددة. طابور دفع منظم. تسويات يومية. متابعة كل جنيه.</p> <div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<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>
<span class="section-header__tag" style="margin-bottom: 0;">تسجيل الحضور</span>
</div>
<h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">حضور رقمي دقيق بدون تلاعب</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">تسجيل الحضور رقمياً من قبل المدرب، مع نظام لفترات السماح وتسجيل الغياب التلقائي وتنبيهات أولياء الأمور فور اكتشاف نمط مقلق.</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> </div>
<div class="screenshot screenshot--framed" data-reveal="150">
<img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy">
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- Financial --> <!-- Module 4: المالية -->
<section class="section" id="finance" style="background: var(--bg-base);"> <section class="section" id="finance" style="background: var(--bg-base);">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<span class="section-header__tag">المالية</span> <div class="screenshot screenshot--framed" data-reveal="100">
<h2 class="section-header__title">محاسبة كاملة مدمجة</h2> <img src="screenshots/accounting/accounting-dashboard.png" alt="المالية والمحاسبة" loading="lazy">
<p class="section-header__desc">ليست محاسبة مضافة — بل نظام مالي متكامل يتغذى تلقائيا من كل عملية تحدث في النادي.</p> </div>
</div> <div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="features-grid"> <div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<div class="feature-item" data-reveal="100"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="feature-item__number">07</div> <path d="M12 1v22"/>
<div class="feature-item__content"> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
<h4>شجرة الحسابات</h4> </svg>
<p>شجرة حسابات كاملة قابلة للتخصيص. مراكز تكلفة. ميزانيات تقديرية بمتابعة الصرف الفعلي.</p> </div>
<span class="section-header__tag" style="margin-bottom: 0;">المالية والمحاسبة</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">محاسبة احترافية مدمجة في النظام</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">نظام قيد مزدوج كامل يتغذى تلقائياً من كل عملية في الأكاديمية. فواتير ومدفوعات وخطط تقسيط ومحافظ رقمية وجلسات خزينة يومية.</p>
<div class="feature-item" data-reveal="150"> <div class="module-detail__list">
<div class="feature-item__number">08</div> <div class="module-detail__list-item">نظام قيد مزدوج كامل مع شجرة حسابات قابلة للتخصيص</div>
<div class="feature-item__content"> <div class="module-detail__list-item">فواتير وإيصالات مع متابعة حالة السداد</div>
<h4>القيود والدفاتر</h4> <div class="module-detail__list-item">قبول الدفع: نقداً، بطاقة، محفظة رقمية</div>
<p>قيود يومية تتولد تلقائيا من كل عملية. دفتر استاذ عام. ميزان مراجعة. حسابات الذمم.</p> <div class="module-detail__list-item">خطط تقسيط مرنة مع تنبيهات الأقساط المتأخرة</div>
<div class="module-detail__list-item">محافظ رقمية لكل مشترك مع رصيد وسجل حركات</div>
<div class="module-detail__list-item">جلسات خزينة يومية وتسوية نهاية الشيفت</div>
</div> </div>
</div> </div>
</div>
</div>
</section>
<div class="feature-item" data-reveal="200"> <!-- Module 5: محرك التسعير -->
<div class="feature-item__number">09</div> <section class="section" id="pricing">
<div class="feature-item__content"> <div class="container">
<h4>التقارير المالية</h4> <div class="module-detail__screenshot-section" data-reveal>
<p>ميزانية عمومية. قائمة دخل. تقارير مراكز التكلفة. تقارير المتحصلات والمديونيات.</p> <div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
<line x1="7" y1="7" x2="7.01" y2="7"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">محرك التسعير</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">تسعير ذكي يراعي كل الحالات</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">لا توجد أسعار ثابتة. كل سعر يُحسب وقت البيع من قواعد التسعير المعرّفة. خصومات الأشقاء، العروض الموسمية، كوبونات الخصم — كلها تعمل تلقائياً.</p>
<div class="feature-item" data-reveal="250"> <div class="module-detail__list">
<div class="feature-item__number">10</div> <div class="module-detail__list-item">13 نوع قاعدة تسعير: السن، مدة الاشتراك، حجم الأسرة، الترتيب بين الأشقاء</div>
<div class="feature-item__content"> <div class="module-detail__list-item">خصومات بالنسبة أو المبلغ الثابت أو سعر خاص</div>
<h4>المدفوعات والاقساط</h4> <div class="module-detail__list-item">عروض ترويجية وكوبونات مع شروط وتواريخ انتهاء</div>
<p>نظام اقساط مرن. تقسيط اي مبلغ. تنبيهات بالاقساط المتاخرة. تقارير التحصيل.</p> <div class="module-detail__list-item">تسعير موسمي ومرتبط بالفرع أو وقت اليوم</div>
<div class="module-detail__list-item">حد أقصى للخصم لا يُتجاوز أبداً</div>
<div class="module-detail__list-item">تجميد السعر على الفاتورة — التغييرات لا تأثر على الفواتير القديمة</div>
</div> </div>
</div> </div>
<div style="padding: var(--space-2xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="150">
<div class="feature-item" data-reveal="300"> <div style="text-align: center; margin-bottom: var(--space-xl);">
<div class="feature-item__number">11</div> <div style="font-size: var(--text-4xl); font-weight: 900; background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">13</div>
<div class="feature-item__content"> <div style="color: var(--ink-secondary); font-size: var(--text-sm);">نوع قاعدة تسعير</div>
<h4>الغرامات</h4>
<p>احتساب تلقائي وفقا لقواعد اللائحة. غرامات تاخير تجديد. غرامات مخالفات. غرامات غياب.</p>
</div> </div>
</div> <div class="module-detail__list">
<div class="module-detail__list-item">خصم الأشقاء</div>
<div class="feature-item" data-reveal="350"> <div class="module-detail__list-item">خصم السن</div>
<div class="feature-item__number">12</div> <div class="module-detail__list-item">خصم مدة الاشتراك</div>
<div class="feature-item__content"> <div class="module-detail__list-item">التسعير الموسمي</div>
<h4>الحسابات البنكية</h4> <div class="module-detail__list-item">خصم حسب التصنيف</div>
<p>ادارة حسابات النادي البنكية. تسويات بنكية. تتبع الشيكات الواردة والصادرة.</p> <div class="module-detail__list-item">خصم حسب توقيت التسجيل</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- HR --> <!-- Module 6: المخازن -->
<section class="section" id="hr"> <section class="section" id="inventory" style="background: var(--bg-base);">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<span class="section-header__tag">الموارد البشرية</span> <div class="screenshot screenshot--framed" data-reveal="100">
<h2 class="section-header__title">ادارة الموظفين المتكاملة</h2> <img src="screenshots/inventory/items.png" alt="المخازن والمنتجات" loading="lazy">
<p class="section-header__desc">كل ما يحتاجه قسم الموارد البشرية من التعيين حتى نهاية الخدمة.</p> </div>
</div> <div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="features-grid"> <div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<div class="feature-item" data-reveal="100"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="feature-item__number">13</div> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<div class="feature-item__content"> <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<h4>ادارة الموظفين</h4> <line x1="12" y1="22.08" x2="12" y2="12"/>
<p>ملفات شاملة لكل موظف. عقود وشروط التعيين. الهيكل الوظيفي والاقسام.</p> </svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">المخازن والمنتجات</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">تتبع كامل للمخزون بلا ثغرات</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">إدارة المنتجات والفئات والمخازن المتعددة مع تتبع المستويات لحظياً. كل حركة مخزون موثقة لا يمكن حذفها أو تعديلها.</p>
<div class="feature-item" data-reveal="150"> <div class="module-detail__list">
<div class="feature-item__number">14</div> <div class="module-detail__list-item">منتجات وفئات وعلامات تجارية قابلة للتخصيص</div>
<div class="feature-item__content"> <div class="module-detail__list-item">مخازن متعددة مع مستويات مخزون مستقلة</div>
<h4>المرتبات</h4> <div class="module-detail__list-item">حركات المخزون: استلام، بيع، تحويل، تالف، تعديل</div>
<p>مسيرات رواتب شهرية. حساب الاستحقاقات والاستقطاعات. ربط تلقائي بالمحاسبة.</p> <div class="module-detail__list-item">أوامر الشراء من الموردين مع استلام وفحص</div>
</div> <div class="module-detail__list-item">جرد دوري مع حساب الفروق تلقائياً</div>
</div> <div class="module-detail__list-item">مجموعات (كيتس) مكونة من أصناف متعددة</div>
<div class="feature-item" data-reveal="200">
<div class="feature-item__number">15</div>
<div class="feature-item__content">
<h4>الاجازات والحضور</h4>
<p>رصيد اجازات تلقائي. طلبات واعتمادات. تسجيل حضور وانصراف. تقارير تاخير.</p>
</div> </div>
</div> </div>
</div>
</div>
</section>
<div class="feature-item" data-reveal="250"> <!-- Module 7: المنشآت -->
<div class="feature-item__number">16</div> <section class="section" id="facilities">
<div class="feature-item__content"> <div class="container">
<h4>التقييم والاداء</h4> <div class="module-detail__screenshot-section" data-reveal>
<p>تقييمات دورية. مؤشرات اداء. خطط تحسين. ربط التقييم بالمكافآت.</p> <div class="module-detail__text">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">المنشآت والحجوزات</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">إدارة المساحات بدون تعارضات</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">تعريف المنشآت وتقسيمها لمقاطع وتخصيص تخطيطات زمنية مختلفة. نظام كشف تعارضات يمنع الحجز المزدوج آلياً.</p>
<div class="feature-item" data-reveal="300"> <div class="module-detail__list">
<div class="feature-item__number">17</div> <div class="module-detail__list-item">منشآت متعددة: صالات، ملاعب، حمامات سباحة، قاعات</div>
<div class="feature-item__content"> <div class="module-detail__list-item">تخطيطات مرنة: شبكة، حارات، مناطق، مخصص</div>
<h4>نهاية الخدمة</h4> <div class="module-detail__list-item">تخطيطات زمنية مختلفة للصباح والمساء</div>
<p>حساب مستحقات نهاية الخدمة. تصفية حسابات. اجراءات خروج منظمة.</p> <div class="module-detail__list-item">كشف تعارض تلقائي عند الحجز على نفس المساحة</div>
<div class="module-detail__list-item">ربط الجلسات التدريبية بحجوزات المساحة آلياً</div>
<div class="module-detail__list-item">تقارير استغلال المساحة وكفاءة الجدولة</div>
</div> </div>
</div> </div>
<div style="padding: var(--space-2xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="150">
<div class="feature-item" data-reveal="350"> <h4 style="margin-bottom: var(--space-lg); font-size: var(--text-base); color: var(--ink-primary);">أنواع التخطيطات</h4>
<div class="feature-item__number">18</div> <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
<div class="feature-item__content"> <div class="workflow__step">
<h4>اللجنة الطبية</h4> <svg width="16" height="16" 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>
<p>فحوصات دورية. لياقة طبية. متابعة الحالات. ربط باللاعبين والموظفين.</p> شبكة (Grid) — أكثر شيوعاً
</div>
<div class="workflow__step">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
حارات (Lanes) — للسباحة والألعاب
</div>
<div class="workflow__step">
<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"/></svg>
مناطق (Zones) — تقسيمات مخصصة
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</section>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);"> <!-- Module 8: الموارد البشرية -->
<section class="section" id="hr" style="background: var(--bg-base);">
<div class="container">
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<div class="screenshot screenshot--framed" data-reveal="100"> <div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/hr/hr-dashboard.png" alt="لوحة الموارد البشرية" loading="lazy"> <img src="screenshots/hr/hr-dashboard.png" alt="الموارد البشرية" loading="lazy">
</div> </div>
<div class="screenshot screenshot--framed" data-reveal="200"> <div class="module-detail__text">
<img src="screenshots/hr/payroll.png" alt="مسير المرتبات" loading="lazy"> <div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8"/>
<path d="M12 17v4"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">الموارد البشرية</span>
</div>
<h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">إدارة المدربين والموظفين بكفاءة</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">إدارة ملفات الموظفين والمدربين مع نماذج تعويض مرنة. مسيرات رواتب شهرية، سلف، تتبع الحضور، وكشوف الرواتب كلها في مكان واحد.</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>
</div> </div>
</div> </div>
</section> </section>
<!-- Operations --> <!-- Module 9: الإشعارات -->
<section class="section" id="operations" style="background: var(--bg-base);"> <section class="section" id="notifications">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="module-detail__screenshot-section" data-reveal>
<span class="section-header__tag">العمليات</span> <div class="module-detail__text">
<h2 class="section-header__title">ادوات العمل اليومي</h2> <div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
</div> <div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="features-grid"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<div class="feature-item" data-reveal="100"> <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
<div class="feature-item__number">19</div> </svg>
<div class="feature-item__content"> </div>
<h4>المخازن والمشتريات</h4> <span class="section-header__tag" style="margin-bottom: 0;">الإشعارات</span>
<p>ادارة اصناف ومخازن متعددة. اوامر شراء ولجان فحص. جرد دوري ومفاجئ.</p>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">التواصل الصحيح مع الوقت الصحيح</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">إشعارات تلقائية عبر قنوات متعددة. قوالب قابلة للتخصيص، تفضيلات المستخدم، ووضع الملخص اليومي لتجنب الإزعاج.</p>
<div class="feature-item" data-reveal="150"> <div class="module-detail__list">
<div class="feature-item__number">20</div> <div class="module-detail__list-item">إشعارات داخل النظام لا يمكن تعطيلها للمعلومات الحرجة</div>
<div class="feature-item__content"> <div class="module-detail__list-item">إشعارات بريد إلكتروني قابلة للتخصيص والتعطيل</div>
<h4>المبيعات ونقاط البيع</h4> <div class="module-detail__list-item">إشعارات SMS للتنبيهات العاجلة</div>
<p>نقاط بيع متعددة. كافتيريات ومحلات. فواتير وايصالات. ربط بالمحاسبة.</p> <div class="module-detail__list-item">قوالب نصية قابلة للتعديل لكل نوع حدث</div>
<div class="module-detail__list-item">وضع الملخص اليومي لتجميع الإشعارات</div>
<div class="module-detail__list-item">سجل كامل بكل إشعار أُرسل ونتيجته</div>
</div> </div>
</div> </div>
<div>
<div class="feature-item" data-reveal="200"> <div class="features-grid" style="grid-template-columns: 1fr 1fr; gap: var(--space-md);" data-reveal="150">
<div class="feature-item__number">21</div> <div class="feature-item">
<div class="feature-item__content"> <div class="feature-item__number">
<h4>التقارير والاحصائيات</h4> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<p>تقارير جاهزة لكل قسم. لوحات احصائية. تصدير Excel. تقارير مخصصة.</p> </div>
<div class="feature-item__content">
<h4>البريد</h4>
<p>إشعارات تفصيلية بالبريد الإلكتروني</p>
</div>
</div>
<div class="feature-item">
<div class="feature-item__number">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>
</div>
<div class="feature-item__content">
<h4>SMS</h4>
<p>رسائل نصية للتنبيهات العاجلة</p>
</div>
</div>
<div class="feature-item">
<div class="feature-item__number">
<svg width="20" height="20" 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="feature-item__content">
<h4>داخل النظام</h4>
<p>مركز إشعارات متكامل</p>
</div>
</div>
<div class="feature-item">
<div class="feature-item__number">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="feature-item__content">
<h4>ملخص يومي</h4>
<p>تجميع الإشعارات في رسالة واحدة</p>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
</section>
<div class="feature-item" data-reveal="250"> <!-- Module 10: الصلاحيات -->
<div class="feature-item__number">22</div> <section class="section" id="permissions" style="background: var(--bg-base);">
<div class="feature-item__content"> <div class="container">
<h4>الاعدادات والصلاحيات</h4> <div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<p>ادوار وصلاحيات دقيقة. كل موظف يرى فقط ما يخصه. سجل عمليات كامل.</p> <div style="padding: var(--space-2xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="100">
<h4 style="margin-bottom: var(--space-lg); font-size: var(--text-base); color: var(--ink-primary);">هرم الأدوار</h4>
<div style="display: flex; flex-direction: column; gap: var(--space-xs);">
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: oklch(0.550 0.180 353.3 / 0.1); border: 1px solid oklch(0.550 0.180 353.3 / 0.2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--brand-primary-light); font-weight: 600;">مدير النظام</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-secondary); margin-inline-start: var(--space-sm);">مالك الأكاديمية</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-secondary); margin-inline-start: var(--space-lg);">مدير الأكاديمية</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-secondary); margin-inline-start: calc(var(--space-lg) * 1.5);">مدير الفرع</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-secondary); margin-inline-start: calc(var(--space-lg) * 2);">رئيس مدربين</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-muted); margin-inline-start: calc(var(--space-lg) * 2.5);">مدرب / موظف استقبال / محاسب</div>
<div style="display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-muted); margin-inline-start: calc(var(--space-lg) * 3);">ولي الأمر</div>
</div> </div>
</div> </div>
<div class="module-detail__text">
<div class="feature-item" data-reveal="300"> <div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);">
<div class="feature-item__number">23</div> <div class="feature-card__icon" style="margin-bottom: 0; flex-shrink: 0;">
<div class="feature-item__content"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<h4>المقابلات واللجان</h4> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<p>ادارة مواعيد المقابلات. تسجيل قرارات اللجنة. اخطارات بالنتائج. ارشيف كامل.</p> <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<span class="section-header__tag" style="margin-bottom: 0;">الصلاحيات والأمان</span>
</div> </div>
</div> <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);">كل مستخدم يرى فقط ما يخصه</h2>
<p style="margin-bottom: var(--space-xl); color: var(--ink-secondary); line-height: 1.8;">نظام صلاحيات قائم على الأدوار مع أكثر من 10 دور جاهز. صلاحية مستقلة لكل إجراء، تحديد النطاق بالفرع، وسجل تدقيق لا يمكن حذفه.</p>
<div class="feature-item" data-reveal="350"> <div class="module-detail__list">
<div class="feature-item__number">24</div> <div class="module-detail__list-item">أكثر من 10 دور جاهز مع إمكانية إنشاء أدوار مخصصة</div>
<div class="feature-item__content"> <div class="module-detail__list-item">صلاحية مستقلة لكل عملية: عرض، إنشاء، تعديل، حذف، تصدير</div>
<h4>البطولات والمسابقات</h4> <div class="module-detail__list-item">نطاق بالفرع: موظف الفرع لا يرى بيانات فروع أخرى</div>
<p>تنظيم بطولات داخلية وخارجية. جداول مباريات. نتائج وترتيب. شهادات مشاركة.</p> <div class="module-detail__list-item">سجل تدقيق مصفح: من فعل ماذا، ومتى، من أي عنوان IP</div>
<div class="module-detail__list-item">السجلات المالية محفوظة للأبد ولا يمكن حذفها</div>
<div class="module-detail__list-item">تشفير كامل للبيانات الحساسة في قاعدة البيانات</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Mobile --> <!-- Platform-Wide Features -->
<section class="section" id="mobile"> <section class="section" id="platform">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="section-header" data-reveal>
<span class="section-header__tag">التطبيقات</span> <span class="section-header__tag">مزايا النظام ككل</span>
<h2 class="section-header__title">ثلاث تطبيقات محمولة</h2> <h2 class="section-header__title">ليس مجرد وحدات — بل منصة متكاملة</h2>
<p class="section-header__desc">النظام يمتد خارج المكتب. ثلاث تطبيقات لثلاث فئات مختلفة تربطهم بالنادي في اي وقت.</p> <p class="section-header__desc">مزايا تمتد عبر كل النظام وتجعل التجربة اليومية سلسة.</p>
</div> </div>
<div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));"> <div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));">
<div class="feature-card" data-reveal="100"> <div class="feature-card" data-reveal="100">
<div class="feature-card__icon"> <div class="feature-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"/></svg> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div> </div>
<h3 class="feature-card__title">تطبيق اللاعب</h3> <h3 class="feature-card__title">عربي بالكامل</h3>
<p class="feature-card__text">جداول التدريب والمواعيد. الاشعارات. حالة الاشتراك. صور ومقاطع التدريب. انجازات وشهادات.</p> <p class="feature-card__text">النظام مبني من الأساس للغة العربية. كل شاشة، كل تقرير، كل رسالة — عربي بالكامل من اليوم الأول.</p>
</div> </div>
<div class="feature-card" data-reveal="200"> <div class="feature-card" data-reveal="150">
<div class="feature-card__icon"> <div class="feature-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> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</div> </div>
<h3 class="feature-card__title">تطبيق ولي الامر</h3> <h3 class="feature-card__title">تعدد الفروع</h3>
<p class="feature-card__text">متابعة حضور الابناء. اشعارات فورية بالوصول والمغادرة. تقارير الاداء والتقييم. المدفوعات.</p> <p class="feature-card__text">إدارة فروع متعددة من حساب واحد. كل فرع له بياناته المستقلة مع رؤية موحدة للإدارة العليا.</p>
</div> </div>
<div class="feature-card" data-reveal="300"> <div class="feature-card" data-reveal="200">
<div class="feature-card__icon"> <div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>
</div> </div>
<h3 class="feature-card__title">تطبيق المدرب</h3> <h3 class="feature-card__title">تطبيقات للمدربين وأولياء الأمور</h3>
<p class="feature-card__text">تسجيل الحضور بنقرة واحدة. تقييم اللاعبين. رفع الصور والفيديو. جداول المجموعات.</p> <p class="feature-card__text">تطبيق للمدرب لتسجيل الحضور والتقييم. تطبيق لولي الأمر لمتابعة أبنائه والمدفوعات والجداول.</p>
</div> </div>
</div>
</div>
</section>
<!-- Inventory --> <div class="feature-card" data-reveal="250">
<section class="section" id="inventory" style="background: var(--bg-base);"> <div class="feature-card__icon">
<div class="container"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
<div class="section-header" data-reveal> </div>
<span class="section-header__tag">المخازن</span> <h3 class="feature-card__title">تقارير وتصدير Excel</h3>
<h2 class="section-header__title">المخازن والمشتريات</h2> <p class="feature-card__text">تقارير جاهزة لكل وحدة مع إمكانية التصدير لـ Excel. وبيانات لوحة التحكم الإجمالية في نظرة واحدة.</p>
</div>
<div class="gallery gallery--2col">
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/inventory/items.png" alt="قائمة الاصناف" loading="lazy">
</div>
<div class="screenshot screenshot--framed" data-reveal="200">
<img src="screenshots/procurement/requisitions.png" alt="اوامر الشراء" loading="lazy">
</div> </div>
</div>
</div>
</section>
<!-- Reports -->
<section class="section" id="reports">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التقارير</span>
<h2 class="section-header__title">بيانات حقيقية لقرارات صحيحة</h2>
<p class="section-header__desc">كل وحدة تولد تقاريرها. ولوحة التحكم تجمعها لك في نظرة واحدة.</p>
</div>
<div class="gallery gallery--2col"> <div class="feature-card" data-reveal="300">
<div class="screenshot screenshot--framed" data-reveal="100"> <div class="feature-card__icon">
<img src="screenshots/reports/reports-main.png" alt="تقارير النظام" loading="lazy"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
</div>
<h3 class="feature-card__title">نسخ احتياطي يومي</h3>
<p class="feature-card__text">نسخ احتياطية يومية تلقائية محفوظة بأمان. لا مخاوف من فقدان البيانات أو الأعطال.</p>
</div> </div>
<div class="screenshot screenshot--framed" data-reveal="200">
<img src="screenshots/dashboard/main.png" alt="لوحة التحكم الرئيسية" loading="lazy"> <div class="feature-card" data-reveal="350">
<div class="feature-card__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
</div>
<h3 class="feature-card__title">استضافة سحابية آمنة</h3>
<p class="feature-card__text">استضافة على خوادم سحابية موثوقة بتشفير HTTPS. وصول آمن من أي جهاز في أي وقت.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA Section -->
<section class="section" style="text-align: center; position: relative; overflow: hidden;"> <section class="section" style="background: var(--bg-base); text-align: center; position: relative; overflow: hidden;">
<div class="container" data-reveal> <div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, oklch(0.550 0.180 353.3 / 0.05) 0%, transparent 60%); pointer-events: none;"></div>
<h2 style="margin-bottom: var(--space-lg);">جاهز لتجربة النظام؟</h2> <div class="container" data-reveal style="position: relative; z-index: 1;">
<p style="font-size: var(--text-xl); margin-inline: auto; margin-bottom: var(--space-xl); max-width: 50ch;"> <span class="section-header__tag" style="display: inline-flex; margin-bottom: var(--space-lg);">ابدأ الآن</span>
كل هذه الوحدات تعمل معا في نظام واحد متكامل. لا تحتاج شراء كل وحدة على حدة. <h2 style="margin-bottom: var(--space-lg);">مستعد تشوف النظام يشتغل؟</h2>
<p style="font-size: var(--text-xl); margin-inline: auto; margin-bottom: var(--space-2xl); max-width: 50ch; color: var(--ink-secondary);">
كل هذه الوحدات تعمل معاً في نظام واحد متكامل. احجز عرضاً مجانياً ونريك النظام على بيانات مشابهة لأكاديميتك.
</p> </p>
<div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;"> <div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض مجاني</a> <a href="contact.html" class="btn btn--primary btn--large">احجز عرضك التجريبي المجاني</a>
<a href="pool.html" class="btn btn--secondary btn--large">شاهد وحدة حمام السباحة</a> <a href="/" class="btn btn--secondary btn--large">العودة للرئيسية</a>
</div> </div>
</div> </div>
</section> </section>
...@@ -396,16 +529,18 @@ ...@@ -396,16 +529,18 @@
<div class="footer__grid"> <div class="footer__grid">
<div class="footer__brand"> <div class="footer__brand">
<div class="footer__brand-name">El-Captain</div> <div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p> <p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من تسجيل المشترك حتى التقارير المالية الشهرية.</p>
</div> </div>
<div> <div>
<h4 class="footer__col-title">الوحدات</h4> <h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a> <a href="features.html#members" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a> <a href="features.html#sports" class="footer__link">الأنشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a> <a href="features.html#pool" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a> <a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a> <a href="features.html" class="footer__link">كل المزايا</a>
</div> </div>
<div> <div>
<h4 class="footer__col-title">النظام</h4> <h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a> <a href="features.html#hr" class="footer__link">الموارد البشرية</a>
...@@ -413,15 +548,17 @@ ...@@ -413,15 +548,17 @@
<a href="features.html#reports" class="footer__link">التقارير</a> <a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a> <a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div> </div>
<div> <div>
<h4 class="footer__col-title">تواصل</h4> <h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a> <a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a> <a href="contact.html" class="footer__link">الدعم الفني</a>
</div> </div>
</div> </div>
<div class="footer__bottom"> <div class="footer__bottom">
<span>El-Captain ERP System</span> <span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span> <span>نظام إدارة الأكاديميات الرياضية</span>
</div> </div>
</div> </div>
</footer> </footer>
......
public/finance.html deleted 100644 → 0
View file @ 081d9938
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المالية والمحاسبة - El-Captain</title>
<meta name="description" content="نظام محاسبة متكامل مصمم للاندية الرياضية. شجرة حسابات، قيود يومية، خزينة، ميزانيات، مراكز تكلفة، اقساط، وتقارير مالية شاملة مع قيود آلية من العمليات.">
<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/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link nav__link--active">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<nav class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>المالية والمحاسبة</span>
</nav>
<div class="module-hero__content" data-reveal="100">
<h1 class="module-hero__title">ادارة مالية متكاملة للاندية الرياضية</h1>
<p class="module-hero__desc">
نظام محاسبي كامل يعمل بشكل تلقائي مع كل العمليات. من لحظة تسجيل العضو حتى اعداد الميزانية العمومية، كل قرش محسوب ومسجل بدون تدخل يدوي.
</p>
<div>
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
</div>
</div>
</div>
</section>
<!-- Accounting Dashboard Overview -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لوحة التحكم المالية</span>
<h2 class="section-header__title">رؤية شاملة للوضع المالي</h2>
<p class="section-header__desc">لوحة تحكم مالية تعرض الارصدة والتدفقات والمؤشرات في نظرة واحدة. مصممة لامين الصندوق ومجلس الادارة.</p>
</div>
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة التحكم المالية - ارصدة وتدفقات ومؤشرات مالية" loading="lazy">
</div>
</div>
</section>
<!-- Chart of Accounts -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/chart-of-accounts.png" alt="شجرة الحسابات - دليل حسابات هرمي متعدد المستويات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>شجرة حسابات مرنة</h3>
<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>
</div>
</section>
<!-- Journal Entries & General Ledger -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">القيود والاستاذ</span>
<h2 class="section-header__title">قيود يومية ودفتر استاذ عام</h2>
<p class="section-header__desc">كل حركة مالية موثقة بقيد محاسبي مزدوج. يمكن انشاء القيود يدويا او تركها تتولد تلقائيا من عمليات النادي.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal="100">
<div class="module-detail__text">
<h3>قيود يومية محكمة</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/accounting/journal-entries.png" alt="القيود اليومية - قيد مزدوج مع تفاصيل الحسابات المدينة والدائنة" loading="lazy">
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/general-ledger.png" alt="دفتر الاستاذ العام - حركات الحسابات والارصدة" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/accounts-receivable.png" alt="حسابات المدينين - ارصدة الاعضاء المستحقة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Financial Statements -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التقارير المالية</span>
<h2 class="section-header__title">قوائم مالية جاهزة لمجلس الادارة</h2>
<p class="section-header__desc">ميزانية عمومية وقائمة دخل تتولد تلقائيا من القيود. جاهزة للطباعة والعرض على مجلس الادارة والمراجعين في اي وقت.</p>
</div>
<div class="gallery gallery--2col" data-reveal="100">
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/balance-sheet.png" alt="الميزانية العمومية - الاصول والخصوم وحقوق الملكية" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>الميزانية العمومية</h3>
<p>عرض فوري لمركز النادي المالي. الاصول والخصوم وحقوق الملكية بتفصيل كامل مع مقارنة بالفترات السابقة.</p>
</div>
</div>
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/income-statement.png" alt="قائمة الدخل - الايرادات والمصروفات وصافي الربح" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>قائمة الدخل</h3>
<p>ايرادات ومصروفات النادي لاي فترة زمنية. تصنيف تلقائي حسب النشاط ومركز التكلفة مع صافي الربح او الخسارة.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Treasury Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الخزينة</span>
<h2 class="section-header__title">ادارة خزينة متقدمة</h2>
<p class="section-header__desc">نظام خزينة كامل بجلسات عمل وطوابير تحصيل وتسويات يومية. كل درج نقدي مراقب ومحسوب.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/dashboard.png" alt="لوحة تحكم الخزينة - الارصدة والجلسات والتسويات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>جلسات الخزينة</h3>
<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>
<div class="gallery gallery--3col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/sessions.png" alt="جلسات الخزينة - فتح واغلاق الجلسات" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/queue.png" alt="طابور التحصيل - تنظيم عمليات الدفع" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/settlements.png" alt="تسويات الخزينة - مطابقة الارصدة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Payment Processing -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>معالجة المدفوعات</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/payments/list.png" alt="قائمة المدفوعات - كل عمليات الدفع والتحصيل" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Installment Plans -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/installments/list.png" alt="خطط التقسيط - جدولة الاقساط ومتابعة السداد" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نظام اقساط مرن</h3>
<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>
</div>
</section>
<!-- Budgets & Cost Centers -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الموازنات</span>
<h2 class="section-header__title">ميزانيات ومراكز تكلفة</h2>
<p class="section-header__desc">خطط ميزانية سنوية لكل نشاط ومركز تكلفة مع متابعة الانحرافات لحظيا. ادوات الرقابة المالية التي يحتاجها مجلس الادارة.</p>
</div>
<div class="gallery gallery--2col" data-reveal="100">
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/budgets.png" alt="الموازنات التقديرية - خطة مالية سنوية مع متابعة التنفيذ" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>الموازنات التقديرية</h3>
<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>
</div>
</div>
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/cost-centers.png" alt="مراكز التكلفة - توزيع المصروفات على الاقسام والانشطة" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>مراكز التكلفة</h3>
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Bank Accounts -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>ادارة الحسابات البنكية</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/accounting/bank-accounts.png" alt="الحسابات البنكية - ارصدة وتحويلات وتسويات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Automatic Journal Entries — Integration Highlight -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التكامل التلقائي</span>
<h2 class="section-header__title">قيود آلية من كل عملية</h2>
<p class="section-header__desc">لا حاجة لادخال القيود يدويا. كل عملية في النادي تولد قيودها المحاسبية تلقائيا. المحاسب يراجع فقط ولا يدخل بيانات.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-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"/></svg>
</div>
<h4 class="feature-card__title">تسديد الاشتراكات</h4>
<p class="feature-card__text">عند دفع العضو لاشتراكه يتولد قيد: مدين الخزينة، دائن ايرادات الاشتراكات. مع التصنيف حسب نوع العضوية والفرع.</p>
</div>
<div class="feature-card">
<div class="feature-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>
<h4 class="feature-card__title">الغرامات والجزاءات</h4>
<p class="feature-card__text">فرض الغرامة يولد قيد استحقاق تلقائي. عند التحصيل يتم اقفال المدين وتسجيل الايراد الفعلي بدون اي تدخل.</p>
</div>
<div class="feature-card">
<div class="feature-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 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
</div>
<h4 class="feature-card__title">رسوم الانشطة الرياضية</h4>
<p class="feature-card__text">تسجيل لاعب في نشاط يولد قيد ايراد مصنف حسب النشاط ومركز التكلفة. يظهر فورا في تقارير ربحية النشاط.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h4 class="feature-card__title">تذاكر حمام السباحة</h4>
<p class="feature-card__text">كل تذكرة او كرنيه مباع يولد قيد ايراد مرتبط بمركز تكلفة حمام السباحة. تقارير يومية بدون ادخال يدوي.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<h4 class="feature-card__title">المرتبات والاجور</h4>
<p class="feature-card__text">صرف المرتبات يولد قيود مصروفات مصنفة حسب القسم: مرتب اساسي، بدلات، خصومات، تامينات. كل بند في حسابه.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</div>
<h4 class="feature-card__title">حركات المخازن</h4>
<p class="feature-card__text">صرف او اضافة اصناف من المخزن يولد قيد تلقائي. مبيعات الكافتيريا والبوفيه تسجل ايراداتها فورا.</p>
</div>
</div>
<!-- Workflow Diagram -->
<div class="workflow" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="workflow__step">عملية تشغيلية</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">توليد قيد آلي</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">ترحيل للاستاذ</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تحديث التقارير</div>
</div>
</div>
</section>
<!-- Key Advantages -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا نظامنا المحاسبي</span>
<h2 class="section-header__title">مصمم للاندية وليس للشركات</h2>
<p class="section-header__desc">الفرق بين نظام محاسبة عام ونظام El-Captain هو ان كل قيد وتقرير مصمم لواقع العمل اليومي في النادي الرياضي.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" 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>
<h4 class="feature-card__title">رقابة مالية محكمة</h4>
<p class="feature-card__text">صلاحيات دقيقة لكل عملية مالية. لا يمكن تعديل قيد مرحل. كل تغيير مسجل بمن قام به ومتى.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" 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"/></svg>
</div>
<h4 class="feature-card__title">تقارير فورية</h4>
<p class="feature-card__text">ميزان مراجعة، ميزانية عمومية، قائمة دخل، تدفقات نقدية. كلها متاحة لحظيا بدون انتظار اقفال الشهر.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
</div>
<h4 class="feature-card__title">متعدد الفروع</h4>
<p class="feature-card__text">ميزانية موحدة او منفصلة لكل فرع. تقارير تجميعية على مستوى المؤسسة مع تفصيل لكل فرع على حدة.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">مالية ناديك تستحق نظام يفهمها</h2>
<p class="cta-section__desc">
لا تترك المحاسبة للورق والاكسل. نظام El-Captain يحول كل عملية في ناديك الى قيد محاسبي تلقائي وتقرير جاهز لمجلس الادارة.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على كل الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/index.html
View file @ 170eaea6
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain - نظام ادارة الاندية الرياضية</title> <title>El-Captain - نظام إدارة الأكاديميات الرياضية</title>
<meta name="description" content="نظام El-Captain المتكامل لادارة الاندية الرياضية والمنشآت. ادارة العضويات، الانشطة الرياضية، حمامات السباحة، المحاسبة، والموارد البشرية."> <meta name="description" content="El-Captain نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية. عربي بالكامل، مصمم للسوق المصري.">
<link rel="stylesheet" href="css/tokens.css"> <link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/components.css">
...@@ -17,16 +17,13 @@ ...@@ -17,16 +17,13 @@
<div class="container nav__inner"> <div class="container nav__inner">
<a href="/" class="nav__logo"> <a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span> <span class="nav__logo-mark">EC</span>
<span>El-Captain</span> <span class="nav__logo-text">El-Captain</span>
</a> </a>
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link nav__link--active">الرئيسية</a> <a href="/" class="nav__link nav__link--active">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
...@@ -39,60 +36,158 @@ ...@@ -39,60 +36,158 @@
</nav> </nav>
<!-- Hero --> <!-- Hero -->
<section class="hero section"> <section class="hero">
<div class="container"> <div class="hero__grid">
<div class="hero__grid"> <div class="hero__content" data-reveal>
<div class="hero__content" data-reveal> <span class="hero__eyebrow">نظام إدارة الأكاديميات الرياضية</span>
<h1 class="hero__title"> <h1 class="hero__title">أكاديميتك تستحق نظام <span class="hero__title-accent">يفهم الرياضة</span></h1>
نظام ادارة متكامل <p class="hero__desc">ليس برنامج محاسبة تم تعديله. El-Captain مبني من الصفر لإدارة كل تفصيلة في أكاديميتك — من التسجيل حتى التقارير المالية.</p>
<br> <div class="hero__actions">
<span class="hero__title-accent">مصمم للاندية الرياضية</span> <a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
</h1> <a href="features.html" class="btn btn--secondary btn--large">استكشف المزايا</a>
<p class="hero__desc">
ليس برنامج محاسبة تم تعديله. ليس نظام عام تم تخصيصه.
El-Captain مبني من الصفر لادارة كل تفصيلة في ناديك الرياضي.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="features.html" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div> </div>
</div>
<div class="hero__visual" data-reveal="200"> <div class="hero__visual" data-reveal="200">
<div class="hero__screenshot"> <div class="hero__screenshot">
<img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم الرئيسية لنظام El-Captain" loading="eager"> <img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم" loading="eager">
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Trust Bar -->
<section class="trust-bar" data-reveal>
<div class="trust-bar__grid">
<div class="trust-bar__stat">
<span class="trust-bar__number"><span class="trust-bar__number-accent">+</span>14</span>
<span class="trust-bar__label">وحدة متكاملة</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number"><span class="trust-bar__number-accent">+</span>250</span>
<span class="trust-bar__label">شاشة إدارية</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number">100<span class="trust-bar__number-accent">%</span></span>
<span class="trust-bar__label">عربي بالكامل</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number">مبني لمصر 🇪🇬</span>
<span class="trust-bar__label">للسوق المصري</span>
</div>
</div>
</section>
<!-- Pain Points --> <!-- Pain Points -->
<section class="pain-points section"> <section class="pain-points section section--muted">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">المشكلة التي نحلها</span> <span class="section-header__tag section-header__tag--navy">المشكلة</span>
<h2 class="section-header__title">تعرف هذه المشاكل؟</h2> <h2 class="section-header__title">تعرف هذه المشاكل؟</h2>
<p class="section-header__desc">كل ناد رياضي في مصر يعاني من نفس التحديات. الفرق ان البعض قرر حلها.</p> <p class="section-header__desc">كل أكاديمية رياضية في مصر تعاني من نفس التحديات. الفرق إن البعض قرر يحلها.</p>
</div> </div>
<div class="pain-points__grid"> <div class="pain-points__grid">
<div class="pain-point" data-reveal="100"> <div class="pain-card pain-card--problem" data-reveal="100">
<p class="pain-point__problem">اشتراكات متاخرة وغرامات ضائعة لان لا احد يتابع مواعيد التجديد يدويا لالاف الاعضاء</p> <span class="pain-card__emoji">😵</span>
<p class="pain-point__solution">متابعة تلقائية لكل اشتراك بتنبيهات وغرامات محسوبة</p> <span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">فوضى الاشتراكات</p>
<p class="pain-card__detail">اشتراكات متأخرة وغرامات ضائعة لأن لا أحد يتابع مواعيد التجديد يدويًا لمئات المشتركين</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="150">
<span class="pain-card__emoji">✅</span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">متابعة تلقائية</p>
<p class="pain-card__detail">متابعة تلقائية لكل اشتراك بتنبيهات وتجديدات محسوبة بدون تدخل يدوي</p>
</div>
<div class="pain-card pain-card--problem" data-reveal="200">
<span class="pain-card__emoji">📊</span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">ملفات Excel منفصلة</p>
<p class="pain-card__detail">ملفات منفصلة للمشتركين والمالية والأنشطة ولا رابط بينها — وكل ملف نسخة مختلفة</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="250">
<span class="pain-card__emoji">🔗</span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">نظام واحد متكامل</p>
<p class="pain-card__detail">نظام واحد يربط كل شيء ببعضه — المشترك والمالية والحضور والتقارير في مكان واحد</p>
</div> </div>
<div class="pain-point" data-reveal="200">
<p class="pain-point__problem">حمام السباحة يعمل بطاقة استيعاب عشوائية بدون حصر حقيقي للمتواجدين</p> <div class="pain-card pain-card--problem" data-reveal="300">
<p class="pain-point__solution">نظام كامل لادارة حمام السباحة بتذاكر وكرنيهات وحصر لحظي</p> <span class="pain-card__emoji">📋</span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">حضور يدوي</p>
<p class="pain-card__detail">المدربين لا يعرفون من حضر ومن غاب إلا بكشوف ورقية قابلة للتلاعب والضياع</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="350">
<span class="pain-card__emoji">📱</span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">حضور ذكي</p>
<p class="pain-card__detail">تسجيل حضور لحظي من التطبيق مع إشعارات فورية لأولياء الأمور</p>
</div>
<div class="pain-card pain-card--problem" data-reveal="400">
<span class="pain-card__emoji">🙈</span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">لا رؤية مالية</p>
<p class="pain-card__detail">لا تعرف أرباحك الحقيقية ولا مصاريفك الفعلية — كل شيء تقديري وغير دقيق</p>
</div> </div>
<div class="pain-point" data-reveal="300">
<p class="pain-point__problem">ملفات Excel منفصلة للعضويات والمالية والانشطة ولا رابط بينها</p> <div class="pain-card pain-card--solution" data-reveal="450">
<p class="pain-point__solution">نظام واحد متكامل يربط كل شيء ببعضه تلقائيا</p> <span class="pain-card__emoji">📈</span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">تقارير مالية شاملة</p>
<p class="pain-card__detail">محاسبة قيد مزدوج حقيقية مع تقارير لحظية لكل قرش دخل أو خرج</p>
</div>
</div>
</div>
</section>
<!-- All-in-One -->
<section class="all-in-one section">
<div class="container">
<div class="all-in-one__inner" data-reveal>
<div class="section-header section-header--center">
<span class="section-header__tag section-header__tag--teal">الحل</span>
<h2 class="section-header__title">نظام واحد يغنيك عن ٥ أدوات</h2>
</div> </div>
<div class="pain-point" data-reveal="400">
<p class="pain-point__problem">المدربين لا يعرفون من حضر ومن غاب الا بكشوف ورقية قابلة للتلاعب</p> <div class="all-in-one__list">
<p class="pain-point__solution">تطبيق للمدرب يسجل الحضور لحظيا مع اشعارات لاولياء الامور</p> <div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon">💬</span>
<span>مجموعات WhatsApp للتواصل</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon">📊</span>
<span>ملفات Excel للبيانات</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon">🧾</span>
<span>إيصالات ورقية للمدفوعات</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon">🧮</span>
<span>برنامج محاسبة منفصل</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon">📋</span>
<span>كشوف حضور يدوية</span>
</div>
<div class="all-in-one__arrow">↓</div>
<div class="all-in-one__item all-in-one__item--new">
<span class="all-in-one__tool-icon">🏆</span>
<span>El-Captain — نظام واحد لكل شيء</span>
<span class="all-in-one__check">✓</span>
</div>
</div> </div>
<p class="all-in-one__footnote">وفّر وقتك وفلوسك — نظام واحد بدل ٥ أدوات منفصلة لا تتكلم مع بعض.</p>
</div> </div>
</div> </div>
</section> </section>
...@@ -100,65 +195,105 @@ ...@@ -100,65 +195,105 @@
<!-- Modules Showcase --> <!-- Modules Showcase -->
<section class="modules-showcase section"> <section class="modules-showcase section">
<div class="container"> <div class="container">
<div class="section-header" data-reveal> <div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">الوحدات</span> <span class="section-header__tag section-header__tag--teal">الوحدات</span>
<h2 class="section-header__title">نظام كامل في كل التفاصيل</h2> <h2 class="section-header__title">نظام كامل في كل التفاصيل</h2>
<p class="section-header__desc">كل وحدة مصممة لحل مشكلة حقيقية يواجهها ناديك كل يوم. ليست مجرد شاشات عرض.</p> <p class="section-header__desc">كل وحدة مصممة لحل مشكلة حقيقية تواجه أكاديميتك كل يوم.</p>
</div> </div>
<div class="modules-showcase__grid"> <div class="modules-showcase__grid">
<a href="members.html" class="module-card" data-reveal="100"> <a href="features.html#participants" class="module-card" data-reveal="100">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<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> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<h3 class="module-card__title">ادارة العضويات</h3> <h3 class="module-card__title">إدارة المشتركين</h3>
<p class="module-card__desc">دورة حياة العضو كاملة من التقديم والمقابلة حتى التفعيل والتحويل والانفصال وانهاء العضوية.</p> <p class="module-card__desc">دورة حياة المشترك كاملة — من التسجيل حتى التخرج مع ملف شامل لكل لاعب.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
<a href="sports.html" class="module-card" data-reveal="200"> <a href="features.html#programs" class="module-card" data-reveal="200">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<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 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div> </div>
<h3 class="module-card__title">الانشطة الرياضية</h3> <h3 class="module-card__title">الأنشطة والبرامج</h3>
<p class="module-card__desc">اكاديميات ومجموعات تدريب ومسابقات وجداول مواعيد وادارة المدربين وكروت اللاعبين.</p> <p class="module-card__desc">أنشطة ومجموعات تدريب وجداول مواعيد وإدارة المدربين — كل شيء منظم.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
<a href="pool.html" class="module-card" data-reveal="300"> <a href="features.html#finance" class="module-card" data-reveal="300">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M6 12V4"/><path d="M18 12V4"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<h3 class="module-card__title">حمامات السباحة</h3> <h3 class="module-card__title">المالية والمحاسبة</h3>
<p class="module-card__desc">تذاكر يومية وكرنيهات وحصر متواجدين لحظي وادارة الحارات والحجوزات ومراقبة السعة.</p> <p class="module-card__desc">قيد مزدوج حقيقي — فواتير وأقساط وخزينة وتقارير مالية شاملة.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
<a href="finance.html" class="module-card" data-reveal="400"> <a href="features.html#attendance" class="module-card" data-reveal="400">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<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> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<h3 class="module-card__title">المالية والمحاسبة</h3> <h3 class="module-card__title">الحضور الذكي</h3>
<p class="module-card__desc">شجرة حسابات وقيود يومية واقساط وخزينة ومراكز تكلفة وميزانيات وتقارير مالية شاملة.</p> <p class="module-card__desc">تسجيل حضور لحظي مع إشعارات لأولياء الأمور وتقارير غياب تلقائية.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
<a href="features.html#hr" class="module-card" data-reveal="500"> <a href="features.html#inventory" class="module-card" data-reveal="500">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div> </div>
<h3 class="module-card__title">الموارد البشرية</h3> <h3 class="module-card__title">المخازن</h3>
<p class="module-card__desc">ادارة الموظفين والمرتبات والاجازات والحضور والانصراف والتقييمات ومكافات نهاية الخدمة.</p> <p class="module-card__desc">إدارة المنتجات والمستودعات وحركات المخزون وأوامر الشراء بدقة.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
<a href="features.html#mobile" class="module-card" data-reveal="600"> <a href="features.html#hr" class="module-card" data-reveal="600">
<div class="module-card__icon"> <div class="module-card__icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8"/>
<path d="M12 17v4"/>
</svg>
</div> </div>
<h3 class="module-card__title">التطبيقات المحمولة</h3> <h3 class="module-card__title">الموارد البشرية</h3>
<p class="module-card__desc">تطبيق للاعبين واولياء الامور والمدربين. اشعارات فورية وتسجيل حضور وجداول تدريب.</p> <p class="module-card__desc">إدارة الموظفين والمرتبات والإجازات والحضور والانصراف والتقييمات.</p>
<span class="module-card__link">اعرف المزيد ←</span> <span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a> </a>
</div> </div>
</div> </div>
...@@ -166,69 +301,126 @@ ...@@ -166,69 +301,126 @@
<!-- Product Screenshots Carousel --> <!-- Product Screenshots Carousel -->
<section class="product-showcase section"> <section class="product-showcase section">
<div class="container"> <div class="product-showcase__header" data-reveal>
<div class="section-header" data-reveal> <div class="section-header section-header--center">
<span class="section-header__tag">من داخل النظام</span> <span class="section-header__tag section-header__tag--teal">من داخل النظام</span>
<h2 class="section-header__title">شاشات حقيقية، لا تصاميم تخيلية</h2> <h2 class="section-header__title">شاشات حقيقية، لا تصاميم تخيلية</h2>
</div> </div>
</div> </div>
<div class="product-showcase__track" aria-hidden="true">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="قائمة الاعضاء" loading="lazy"></div> <div class="product-showcase__track-wrap">
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="الانشطة الرياضية" loading="lazy"></div> <div class="product-showcase__track" aria-hidden="true">
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة المحاسبة" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/facilities/pool.png" alt="ادارة حمام السباحة" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/members/list.png" alt="قائمة المشتركين" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="لوحة الموارد البشرية" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="الأنشطة الرياضية" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/treasury/dashboard.png" alt="الخزينة" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة المحاسبة" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="الموارد البشرية" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/payments/list.png" alt="المدفوعات" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy"></div>
<!-- Duplicate for seamless loop --> <!-- Duplicate for seamless infinite loop -->
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/members/list.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/facilities/pool.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/treasury/dashboard.png" alt="" loading="lazy"></div> <div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="" loading="lazy"></div> </div>
<div class="product-showcase__item"><img src="screenshots/payments/list.png" alt="" loading="lazy"></div>
</div> </div>
</section> </section>
<!-- Social Proof --> <!-- Why El Captain -->
<section class="social-proof section"> <section class="why-section section">
<div class="container"> <div class="container">
<div class="social-proof__stats" data-reveal> <div class="section-header section-header--center" data-reveal>
<div class="stat"> <span class="section-header__tag section-header__tag--gold">لماذا El-Captain</span>
<div class="stat__value">+35</div> <h2 class="section-header__title">ليه تختار El-Captain؟</h2>
<div class="stat__label">وحدة متكاملة</div> </div>
</div>
<div class="stat"> <div class="why-section__grid">
<div class="stat__value">+250</div> <div class="why-card" data-reveal="100">
<div class="stat__label">شاشة ادارية</div> <div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 0 1 6.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
</svg>
</div>
<h3 class="why-card__title">عربي بالكامل</h3>
<p class="why-card__desc">واجهة عربية من اليمين لليسار — مش ترجمة Google. كل زر وكل رسالة وكل تقرير بالعربي الصحيح.</p>
</div> </div>
<div class="stat">
<div class="stat__value">3</div> <div class="why-card" data-reveal="200">
<div class="stat__label">تطبيقات محمولة</div> <div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 2a10 10 0 0 1 0 20"/>
<path d="M2 12h20"/>
</svg>
</div>
<h3 class="why-card__title">مبني للرياضة</h3>
<p class="why-card__desc">ليس نظام عام تم تخصيصه. كل وحدة مصممة لواقع الأكاديميات الرياضية — مجموعات، حضور، تقييمات، بطولات.</p>
</div> </div>
<div class="stat">
<div class="stat__value">100%</div> <div class="why-card" data-reveal="300">
<div class="stat__label">عربي بالكامل</div> <div class="why-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<h3 class="why-card__title">تسعير عادل</h3>
<p class="why-card__desc">تسعير مصمم للسوق المصري — لا مفاجآت ولا رسوم خفية. ادفع على قد ما تستخدم.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- Trust Section (Dark) -->
<section class="trust-section section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">أمان وموثوقية</span>
<h2 class="section-header__title">نظام موثوق</h2>
<p class="section-header__desc">بيانات أكاديميتك في أمان تام — تشفير ونسخ احتياطي وصلاحيات دقيقة.</p>
</div>
<div class="trust-badges" data-reveal>
<span class="trust-badge">
<span class="trust-badge__icon">🔐</span>
<span>بيانات مشفرة</span>
</span>
<span class="trust-badge">
<span class="trust-badge__icon">💾</span>
<span>نسخ احتياطي يومي</span>
</span>
<span class="trust-badge">
<span class="trust-badge__icon">🔑</span>
<span>صلاحيات دقيقة</span>
</span>
<span class="trust-badge">
<span class="trust-badge__icon">☁️</span>
<span>سحابي آمن</span>
</span>
</div>
<div class="trust-badges" style="margin-block-start: var(--space-xl);" data-reveal="200">
<span class="trust-badge trust-badge--egypt">
<span class="trust-badge__icon">🇪🇬</span>
<span>صُمم في مصر للسوق المصري</span>
</span>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section"> <section class="cta-section section">
<div class="container"> <div class="container">
<div class="cta-section__content" data-reveal> <div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">ناديك يستحق نظام يفهمه</h2> <h2 class="cta-section__title">جاهز تبدأ؟</h2>
<p class="cta-section__desc"> <p class="cta-section__desc">لا تضيع وقتك في أنظمة عامة تحتاج سنوات لتخصيصها. El-Captain جاهز لإدارة أكاديميتك من اليوم الأول.</p>
لا تضيع وقتك في انظمة عامة تحتاج سنوات لتخصيصها.
El-Captain جاهز لادارة ناديك من اليوم الاول.
</p>
<div class="cta-section__actions"> <div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a> <a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على كل المزايا</a> <a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -239,41 +431,60 @@ ...@@ -239,41 +431,60 @@
<div class="container"> <div class="container">
<div class="footer__grid"> <div class="footer__grid">
<div class="footer__brand"> <div class="footer__brand">
<div class="footer__brand-name">El-Captain</div> <a href="/" class="footer__brand-logo">
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p> <span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصًا للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div> </div>
<div> <div>
<h4 class="footer__col-title">الوحدات</h4> <h4 class="footer__col-title">النظام</h4>
<a href="members.html" class="footer__link">العضويات</a> <div class="footer__links">
<a href="sports.html" class="footer__link">الانشطة الرياضية</a> <a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a> <a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="finance.html" class="footer__link">المالية</a> <a href="features.html#finance" class="footer__link">المالية والمحاسبة</a>
<a href="features.html" class="footer__link">كل المزايا</a> <a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div> </div>
<div> <div>
<h4 class="footer__col-title">النظام</h4> <h4 class="footer__col-title">روابط سريعة</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a> <div class="footer__links">
<a href="features.html#inventory" class="footer__link">المخازن</a> <a href="features.html" class="footer__link">كل المزايا</a>
<a href="features.html#reports" class="footer__link">التقارير</a> <a href="pricing.html" class="footer__link">التسعير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a> <a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div> </div>
<div> <div>
<h4 class="footer__col-title">تواصل</h4> <h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a> <div class="footer__links">
<a href="contact.html" class="footer__link">الدعم الفني</a> <a href="contact.html" class="footer__link">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div> </div>
</div> </div>
<div class="footer__bottom"> <div class="footer__bottom">
<span>El-Captain ERP System</span> <span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span>نظام ادارة الاندية الرياضية</span> <span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div> </div>
</div> </div>
</footer> </footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="تواصل معنا عبر WhatsApp">
<div class="whatsapp-fab__btn">
<span class="whatsapp-fab__pulse"></span>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
</div>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>
public/js/main.js
View file @ 170eaea6
/**
* El Captain Sports Management — Marketing Site
* main.js — Vanilla ES6+, no external dependencies
*/
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initNav(); initNav();
initReveal();
initMobileMenu(); initMobileMenu();
initParallax(); initReveal();
initCountUp(); initCounters();
initSmoothHover(); initSmoothScroll();
initFormValidation();
initWhatsAppFAB();
initCardHover();
injectRevealStyles();
}); });
/* ─────────────────────────────────────────────
1. NAV SHADOW ON SCROLL
Add .nav--scrolled when page scrolls past 50px
───────────────────────────────────────────── */
function initNav() { function initNav() {
const nav = document.querySelector('.nav'); const nav = document.querySelector('.nav');
if (!nav) return; if (!nav) return;
let ticking = false; let ticking = false;
const updateNav = () => {
nav.classList.toggle('nav--scrolled', window.scrollY > 50);
ticking = false;
};
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
if (!ticking) { if (!ticking) {
requestAnimationFrame(() => { requestAnimationFrame(updateNav);
nav.classList.toggle('nav--scrolled', window.scrollY > 30);
ticking = false;
});
ticking = true; ticking = true;
} }
}, { passive: true }); }, { passive: true });
if (window.scrollY > 30) nav.classList.add('nav--scrolled'); // Apply immediately on load if already scrolled
if (window.scrollY > 50) nav.classList.add('nav--scrolled');
} }
/* ─────────────────────────────────────────────
2. MOBILE NAV TOGGLE
Hamburger opens/closes #navLinks
───────────────────────────────────────────── */
function initMobileMenu() { function initMobileMenu() {
const toggle = document.querySelector('.nav__toggle'); const toggle = document.querySelector('.nav__toggle');
const links = document.querySelector('.nav__links'); const links = document.getElementById('navLinks') || document.querySelector('.nav__links');
if (!toggle || !links) return; if (!toggle || !links) return;
const open = () => {
links.classList.add('nav__links--open');
toggle.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden';
};
const close = () => {
links.classList.remove('nav__links--open');
toggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
};
const isOpen = () => links.classList.contains('nav__links--open');
// Hamburger click
toggle.addEventListener('click', () => { toggle.addEventListener('click', () => {
const isOpen = links.classList.toggle('nav__links--open'); isOpen() ? close() : open();
toggle.setAttribute('aria-expanded', String(isOpen));
document.body.style.overflow = isOpen ? 'hidden' : '';
}); });
// Close when clicking a nav link
links.addEventListener('click', (e) => { links.addEventListener('click', (e) => {
if (e.target.classList.contains('nav__link') || e.target.classList.contains('nav__cta')) { const target = e.target.closest('a');
links.classList.remove('nav__links--open'); if (target && links.contains(target)) close();
toggle.setAttribute('aria-expanded', 'false'); });
document.body.style.overflow = '';
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isOpen()) close();
});
// Close when clicking outside the nav
document.addEventListener('click', (e) => {
if (isOpen() && !links.contains(e.target) && !toggle.contains(e.target)) {
close();
} }
}); });
} }
/* ─────────────────────────────────────────────
3. SCROLL REVEAL ANIMATIONS
[data-reveal] elements fade in on scroll
data-reveal value = delay in ms
───────────────────────────────────────────── */
function initReveal() { function initReveal() {
const elements = document.querySelectorAll('[data-reveal]');
if (!elements.length) return;
// Respect prefers-reduced-motion — just show immediately
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelectorAll('[data-reveal]').forEach(el => { elements.forEach(el => {
el.style.opacity = '1'; el.style.opacity = '1';
el.style.transform = 'none';
}); });
return; return;
} }
...@@ -57,54 +110,60 @@ function initReveal() { ...@@ -57,54 +110,60 @@ function initReveal() {
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add('revealed'); const delay = parseInt(entry.target.dataset.reveal) || 0;
setTimeout(() => {
entry.target.classList.add('revealed');
}, delay);
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
}, },
{ threshold: 0.08, rootMargin: '0px 0px -60px 0px' } { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
); );
document.querySelectorAll('[data-reveal]').forEach((el, i) => { elements.forEach((el) => {
const delay = parseInt(el.dataset.reveal) || 0;
el.style.opacity = '0'; el.style.opacity = '0';
el.style.transform = 'translateY(32px)'; el.style.transform = 'translateY(20px)';
el.style.transition = `opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`; el.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
observer.observe(el); observer.observe(el);
}); });
} }
function initParallax() { function injectRevealStyles() {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const style = document.createElement('style');
style.textContent = `
const heroVisual = document.querySelector('.hero__visual'); .revealed {
if (!heroVisual) return; opacity: 1 !important;
transform: translateY(0) !important;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const scrolled = window.scrollY;
const rate = scrolled * 0.15;
if (scrolled < window.innerHeight) {
heroVisual.style.transform = `translateY(${rate}px)`;
}
ticking = false;
});
ticking = true;
} }
}, { passive: true }); .module-card::before,
.feature-card::before,
.pain-point::before {
background: radial-gradient(
400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
oklch(0.550 0.180 353.3 / 0.04),
transparent 60%
) !important;
opacity: 1 !important;
}
`;
document.head.appendChild(style);
} }
function initCountUp() { /* ─────────────────────────────────────────────
const stats = document.querySelectorAll('.stat__value'); 4. COUNTER ANIMATION
if (!stats.length) return; [data-count] elements count from 0 to target
[data-count-suffix] appends suffix (e.g. "+", "%")
───────────────────────────────────────────── */
function initCounters() {
const counters = document.querySelectorAll('[data-count]');
if (!counters.length) return;
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
animateValue(entry.target); animateCounter(entry.target);
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
...@@ -112,77 +171,260 @@ function initCountUp() { ...@@ -112,77 +171,260 @@ function initCountUp() {
{ threshold: 0.5 } { threshold: 0.5 }
); );
stats.forEach(stat => observer.observe(stat)); counters.forEach(el => observer.observe(el));
// Also handle legacy .stat__value elements that store value in text
const statValues = document.querySelectorAll('.stat__value:not([data-count])');
statValues.forEach(el => {
const legacyObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animateStatValue(entry.target);
legacyObserver.unobserve(entry.target);
}
});
},
{ threshold: 0.5 }
);
legacyObserver.observe(el);
});
} }
function animateValue(el) { function animateCounter(el) {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const text = el.textContent.trim(); const target = parseFloat(el.dataset.count);
const hasPlus = text.startsWith('+'); const suffix = el.dataset.countSuffix || '';
const prefix = el.dataset.countPrefix || '';
if (isNaN(target)) return;
const duration = 2000; // 2 seconds
const start = performance.now();
const isInt = Number.isInteger(target);
function easeOut(t) {
return 1 - Math.pow(1 - t, 3); // cubic ease-out
}
function update(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const eased = easeOut(progress);
const current = eased * target;
el.textContent = prefix + (isInt ? Math.round(current) : current.toFixed(1)) + suffix;
if (progress < 1) {
requestAnimationFrame(update);
}
}
el.textContent = prefix + '0' + suffix;
requestAnimationFrame(update);
}
// Legacy: animate .stat__value elements with +/% in their text
function animateStatValue(el) {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const text = el.textContent.trim();
const hasPlus = text.startsWith('+');
const hasPercent = text.endsWith('%'); const hasPercent = text.endsWith('%');
const numStr = text.replace(/[^0-9.]/g, ''); const target = parseFloat(text.replace(/[^0-9.]/g, ''));
const target = parseFloat(numStr);
if (isNaN(target)) return; if (isNaN(target)) return;
const duration = 1500; const duration = 1500;
const start = performance.now(); const start = performance.now();
function easeOut(t) {
return 1 - Math.pow(1 - t, 4);
}
function update(now) { function update(now) {
const elapsed = now - start; const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1); const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 4); const current = Math.round(easeOut(progress) * target);
const current = Math.round(eased * target);
el.textContent = (hasPlus ? '+' : '') + current + (hasPercent ? '%' : ''); el.textContent = (hasPlus ? '+' : '') + current + (hasPercent ? '%' : '');
if (progress < 1) { if (progress < 1) requestAnimationFrame(update);
requestAnimationFrame(update);
}
} }
el.textContent = (hasPlus ? '+' : '') + '0' + (hasPercent ? '%' : ''); el.textContent = (hasPlus ? '+' : '') + '0' + (hasPercent ? '%' : '');
requestAnimationFrame(update); requestAnimationFrame(update);
} }
function initSmoothHover() { /* ─────────────────────────────────────────────
const cards = document.querySelectorAll('.module-card, .feature-card, .pain-point'); 5. SMOOTH SCROLL FOR ANCHOR LINKS
cards.forEach(card => { Accounts for sticky nav height offset
card.addEventListener('mouseenter', (e) => { ───────────────────────────────────────────── */
const rect = card.getBoundingClientRect(); function initSmoothScroll() {
const x = e.clientX - rect.left; document.addEventListener('click', (e) => {
const y = e.clientY - rect.top; const link = e.target.closest('a[href^="#"]');
card.style.setProperty('--mouse-x', `${x}px`); if (!link) return;
card.style.setProperty('--mouse-y', `${y}px`);
const targetId = link.getAttribute('href').slice(1);
if (!targetId) return; // bare "#" — do nothing
const target = document.getElementById(targetId);
if (!target) return;
e.preventDefault();
const nav = document.querySelector('.nav');
const offset = nav ? nav.offsetHeight + 8 : 80;
const top = target.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top, behavior: 'smooth' });
});
}
/* ─────────────────────────────────────────────
6. FORM VALIDATION (Contact page)
Required fields + phone validation
All error messages in Arabic
───────────────────────────────────────────── */
function initFormValidation() {
const forms = document.querySelectorAll('.contact-form, form[data-validate]');
if (!forms.length) return;
forms.forEach((form) => {
form.addEventListener('submit', (e) => {
const isValid = validateForm(form);
if (!isValid) e.preventDefault();
}); });
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect(); // Clear errors on input
const x = e.clientX - rect.left; form.addEventListener('input', (e) => {
const y = e.clientY - rect.top; const field = e.target;
card.style.setProperty('--mouse-x', `${x}px`); clearFieldError(field);
card.style.setProperty('--mouse-y', `${y}px`);
}); });
}); });
} }
// Inject styles function validateForm(form) {
const style = document.createElement('style'); let isValid = true;
style.textContent = `
.revealed { const fields = form.querySelectorAll('[required], [data-validate]');
opacity: 1 !important;
transform: translateY(0) !important; fields.forEach((field) => {
clearFieldError(field);
const value = field.value.trim();
const type = field.type || field.tagName.toLowerCase();
// Required check
if (field.hasAttribute('required') && !value) {
showFieldError(field, 'هذا الحقل مطلوب');
isValid = false;
return;
}
if (!value) return; // Optional and empty — skip further checks
// Phone validation: must start with 01 and be exactly 11 digits
if (type === 'tel' || field.dataset.validate === 'phone') {
const digitsOnly = value.replace(/\D/g, '');
if (!digitsOnly.startsWith('01') || digitsOnly.length !== 11) {
showFieldError(field, 'رقم الهاتف يجب أن يبدأ بـ 01 ويتكون من 11 رقماً');
isValid = false;
return;
}
}
// Email validation
if (type === 'email') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
showFieldError(field, 'البريد الإلكتروني غير صحيح');
isValid = false;
return;
}
}
// Min length
if (field.dataset.minLength) {
const min = parseInt(field.dataset.minLength);
if (value.length < min) {
showFieldError(field, `يجب أن يكون على الأقل ${min} أحرف`);
isValid = false;
}
}
});
// Focus the first invalid field
if (!isValid) {
const firstError = form.querySelector('.form-group--error input, .form-group--error textarea, .form-group--error select');
if (firstError) firstError.focus();
} }
.module-card::before, return isValid;
.feature-card::before, }
.pain-point::before {
background: radial-gradient( function showFieldError(field, message) {
400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), const group = field.closest('.form-group');
oklch(0.550 0.180 353.3 / 0.04), if (!group) return;
transparent 60%
) !important; group.classList.add('form-group--error');
opacity: 1 !important; field.setAttribute('aria-invalid', 'true');
// Create or update error message
let errorEl = group.querySelector('.form-error');
if (!errorEl) {
errorEl = document.createElement('span');
errorEl.className = 'form-error';
errorEl.setAttribute('role', 'alert');
group.appendChild(errorEl);
} }
`; errorEl.textContent = message;
document.head.appendChild(style); }
function clearFieldError(field) {
const group = field.closest('.form-group');
if (!group) return;
group.classList.remove('form-group--error');
field.removeAttribute('aria-invalid');
const errorEl = group.querySelector('.form-error');
if (errorEl) errorEl.remove();
}
/* ─────────────────────────────────────────────
7. WHATSAPP FAB ENTRANCE ANIMATION
Scale up from 0 after 3 seconds
───────────────────────────────────────────── */
function initWhatsAppFAB() {
const fab = document.querySelector('.whatsapp-fab, [data-fab="whatsapp"]');
if (!fab) return;
// Initially hidden
fab.style.transform = 'scale(0)';
fab.style.opacity = '0';
fab.style.transition = 'transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease';
setTimeout(() => {
fab.style.transform = 'scale(1)';
fab.style.opacity = '1';
}, 3000);
}
/* ─────────────────────────────────────────────
8. CARD HOVER GLOW EFFECT
Tracks mouse position for radial gradient
───────────────────────────────────────────── */
function initCardHover() {
const cards = document.querySelectorAll('.module-card, .feature-card, .pain-point');
cards.forEach(card => {
const update = (e) => {
const rect = card.getBoundingClientRect();
card.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
};
card.addEventListener('mouseenter', update);
card.addEventListener('mousemove', update);
});
}
public/members.html deleted 100644 → 0
View file @ 081d9938
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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. دورة حياة العضو كاملة من التقديم والمقابلة حتى التحويل والانفصال. انواع عضويات متعددة وادارة شاملة للاسر.">
<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/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link nav__link--active">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Breadcrumb -->
<section class="section" style="padding-bottom: 0; padding-top: 7rem;">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>ادارة العضويات</span>
</div>
</div>
</section>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">ادارة دورة حياة العضو بالكامل</h1>
<p class="module-hero__desc">
من لحظة تقديم طلب الالتحاق حتى انتهاء العضوية. نظام متكامل يدير كل تفصيلة في علاقة النادي باعضائه: التسجيل، المقابلات، الملفات الشخصية، الاسر، المستندات، التحويلات، والانفصال.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#registration" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Member Lifecycle Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">دورة الحياة</span>
<h2 class="section-header__title">رحلة العضو داخل النظام</h2>
<p class="section-header__desc">كل مرحلة مدعومة بضوابط وصلاحيات وتوثيق كامل. لا شيء يحدث بدون تتبع.</p>
</div>
<div class="workflow" data-reveal="100">
<div class="workflow__step">تقديم الطلب</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">المقابلة</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">الموافقة</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">السداد</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">التفعيل</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">التجديد</div>
</div>
</div>
</section>
<!-- Member Registration -->
<section id="registration" class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التسجيل</span>
<h2 class="section-header__title">تسجيل الاعضاء بكل انواعهم</h2>
<p class="section-header__desc">نماذج تسجيل مخصصة لكل نوع عضوية مع جمع كافة البيانات المطلوبة وفقا للوائح النادي.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/create.png" alt="شاشة تسجيل عضو جديد" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نموذج تسجيل شامل</h3>
<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>
</div>
</section>
<!-- Member Types -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">انواع العضوية</span>
<h2 class="section-header__title">دعم كامل لكل انواع العضويات</h2>
<p class="section-header__desc">كل نوع عضوية له قواعد مختلفة في الرسوم والصلاحيات والمستندات المطلوبة. النظام يدير كل هذا تلقائيا.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<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>
<h3 class="feature-card__title">العضوية العاملة</h3>
<p class="feature-card__text">العضوية الاساسية بكامل الحقوق. تشمل حق التصويت في الجمعية العمومية والترشح للمناصب. رسوم اشتراك سنوية ورسوم التحاق.</p>
</div>
<div class="feature-card">
<div class="feature-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 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
</div>
<h3 class="feature-card__title">العضوية الرياضية</h3>
<p class="feature-card__text">عضوية مخصصة لممارسة الانشطة الرياضية فقط. بدون حقوق الجمعية العمومية. مناسبة للشباب والناشئين المهتمين بالتدريب.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<h3 class="feature-card__title">العضوية الشرفية</h3>
<p class="feature-card__text">عضوية تمنح لشخصيات مميزة بقرار من مجلس الادارة. معفاة من الرسوم كليا او جزئيا مع صلاحيات خاصة يحددها القرار.</p>
</div>
<div class="feature-card">
<div class="feature-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"/></svg>
</div>
<h3 class="feature-card__title">العضوية الموسمية</h3>
<p class="feature-card__text">عضوية محدودة بفترة زمنية معينة. مثالية لفترات الصيف او المواسم الرياضية. تنتهي تلقائيا بانتهاء الموسم المحدد.</p>
</div>
<div class="feature-card">
<div class="feature-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="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<h3 class="feature-card__title">العضوية الاجنبية</h3>
<p class="feature-card__text">عضوية مخصصة لغير المصريين. تتطلب مستندات اضافية مثل جواز السفر واقامة سارية. رسوم مختلفة وفقا للوائح.</p>
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/honorary.png" alt="تسجيل عضوية شرفية" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/seasonal.png" alt="العضوية الموسمية" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Interview Process -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المقابلات</span>
<h2 class="section-header__title">نظام المقابلات والموافقات</h2>
<p class="section-header__desc">ادارة كاملة لعملية قبول الاعضاء الجدد من تحديد مواعيد المقابلة حتى صدور القرار النهائي.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>عملية قبول منظمة</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/interviews/list.png" alt="قائمة المقابلات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Member Profiles -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الملف الشخصي</span>
<h2 class="section-header__title">ملفات شخصية شاملة</h2>
<p class="section-header__desc">كل معلومة عن العضو في مكان واحد. بيانات شخصية، مالية، رياضية، وعائلية مع تاريخ كامل لكل التعاملات.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/member-profile.png" alt="الملف الشخصي للعضو" loading="lazy">
</div>
<div class="module-detail__text">
<h3>كل شيء عن العضو في نظرة واحدة</h3>
<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 class="module-detail__list-item">تاريخ المعاملات المالية الكامل</div>
</div>
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/member-profile-1.png" alt="تفاصيل اضافية للملف الشخصي" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/sports-members.png" alt="الانشطة الرياضية للعضو" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Family Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاسر</span>
<h2 class="section-header__title">ادارة اسر الاعضاء</h2>
<p class="section-header__desc">نظام متكامل لادارة افراد اسرة العضو مع قواعد ذكية للسن والاهلية والرسوم.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>ادارة الزوجات والابناء</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/family/list.png" alt="ادارة اسر الاعضاء" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Document Tracking -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المستندات</span>
<h2 class="section-header__title">ادارة وتتبع المستندات</h2>
<p class="section-header__desc">كل مستند مطلوب من العضو يتم تتبعه وارشفته رقميا مع تنبيهات لانتهاء الصلاحية.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/documents.png" alt="مستندات العضو" loading="lazy">
</div>
<div class="module-detail__text">
<h3>ارشفة رقمية كاملة</h3>
<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>
</div>
</section>
<!-- Search and Filtering -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">البحث</span>
<h2 class="section-header__title">بحث وتصفية متقدمة</h2>
<p class="section-header__desc">الوصول لاي عضو في ثوان معدودة مهما كان حجم قاعدة البيانات. فلاتر متعددة وبحث ذكي.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>ايجاد اي عضو فورا</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/members/search.png" alt="بحث الاعضاء المتقدم" loading="lazy">
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/list.png" alt="قائمة الاعضاء" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/foreign.png" alt="الاعضاء الاجانب" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Transfers and Separations -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التحويلات</span>
<h2 class="section-header__title">التحويلات والانفصال</h2>
<p class="section-header__desc">ادارة كاملة لحالات تحويل العضوية والانفصال بكل اشكاله وفقا للائحة النادي.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/transfers/list.png" alt="قائمة التحويلات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>كل حالات التحويل والانفصال</h3>
<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>
</div>
</section>
<!-- Subscription Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاشتراكات</span>
<h2 class="section-header__title">ادارة الاشتراكات والتجديد</h2>
<p class="section-header__desc">متابعة تلقائية لمواعيد التجديد والغرامات والمتأخرات. لا يفلت اشتراك من المنظومة.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l4 2"/></svg>
</div>
<h3 class="feature-card__title">تجديد تلقائي</h3>
<p class="feature-card__text">النظام يتابع مواعيد انتهاء كل اشتراك ويرسل تنبيهات مسبقة. حساب تلقائي للغرامات عند التأخر في التجديد وفقا لجدول الغرامات المعتمد.</p>
</div>
<div class="feature-card">
<div class="feature-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>
<h3 class="feature-card__title">ادارة الرسوم</h3>
<p class="feature-card__text">رسوم مختلفة حسب نوع العضوية وعدد افراد الاسرة والفترة. دعم كامل للاعفاءات الجزئية والكلية والاقساط والسداد المقدم.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" 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>
<h3 class="feature-card__title">تقارير شاملة</h3>
<p class="feature-card__text">تقارير تفصيلية عن حالة الاشتراكات والمتأخرات والتحصيل. كشوف بالاعضاء المنتهية اشتراكاتهم والمتأخرين عن السداد.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز لادارة عضوياتك باحترافية؟</h2>
<p class="cta-section__desc">
نظام El-Captain يدير الاف الاعضاء بكفاءة تامة.
من التسجيل حتى التجديد، كل شيء مؤتمت ومتابع.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="finance.html" class="btn btn--secondary btn--large">استكشف المالية</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/pool.html deleted 100644 → 0
View file @ 081d9938
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ادارة حمامات السباحة - El-Captain</title>
<meta name="description" content="النظام الوحيد في مصر المصمم خصيصا لادارة حمامات السباحة في الاندية الرياضية. حصر لحظي للمتواجدين، تذاكر يومية، كرنيهات، حجوزات حارات، مراقبة السعة القصوى.">
<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">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link nav__link--active">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>حمامات السباحة</span>
</div>
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">
النظام الوحيد في مصر
<br>
<span class="hero__title-accent">لادارة حمامات السباحة بالكامل</span>
</h1>
<p class="module-hero__desc">
ليس مجرد شاشة لتسجيل الدخول. نظام متكامل يتحكم في السعة لحظيا، يصدر التذاكر والكرنيهات، يدير الحجوزات والحارات، ويمنع تجاوز الطاقة الاستيعابية. مصمم لحل المشاكل الحقيقية التي يواجهها كل نادي رياضي في مصر.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#features" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا تحتاج هذا النظام</span>
<h2 class="section-header__title">مشاكل حقيقية تتكرر كل صيف</h2>
<p class="section-header__desc">كل نادي في مصر يعاني من نفس المشاكل عند ادارة حمام السباحة. الفرق بين الفوضى والنظام هو وجود نظام حقيقي مصمم لهذا الغرض.</p>
</div>
<div class="pain-points__grid">
<div class="pain-point" data-reveal="100">
<p class="pain-point__problem">لا يوجد حصر حقيقي لعدد المتواجدين في حمام السباحة. المنقذ يقدر بالنظر. خطر حقيقي على سلامة الاعضاء وتعرض مجلس الادارة للمسائلة القانونية.</p>
<p class="pain-point__solution">حصر لحظي اوتوماتيكي لكل متواجد مع تنبيه فوري عند الاقتراب من السعة القصوى</p>
</div>
<div class="pain-point" data-reveal="200">
<p class="pain-point__problem">التذاكر اليومية ورقية وقابلة للتزوير. لا سجل رقمي. لا رقابة على الايرادات الفعلية. فجوة مالية يومية بين التذاكر المطبوعة والمحصل الفعلي.</p>
<p class="pain-point__solution">نظام تذاكر رقمي بالكامل مربوط بالخزينة والتقارير المالية لحظيا</p>
</div>
<div class="pain-point" data-reveal="300">
<p class="pain-point__problem">الكرنيهات تدار يدويا بدفتر ورقي. لا يمكن معرفة الرصيد المتبقي بدقة. اعتراضات يومية من الاعضاء. سرقة دخلات بدون رقابة.</p>
<p class="pain-point__solution">نظام كرنيهات رقمي يسجل كل دخلة بتاريخها ووقتها مع رصيد محدث لحظيا</p>
</div>
<div class="pain-point" data-reveal="400">
<p class="pain-point__problem">دخول الضيوف بدون ضوابط. لا حد اقصى لعدد الضيوف. لا تتبع لمن ادخل من. ضغط مفاجئ على حمام السباحة ومشاكل مع الاعضاء الاساسيين.</p>
<p class="pain-point__solution">نظام ضيوف محكم يحدد العدد المسموح ويربط كل ضيف بالعضو المسؤول</p>
</div>
</div>
</div>
</section>
<!-- Main Features -->
<section class="section" id="features">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المزايا الاساسية</span>
<h2 class="section-header__title">كل ما تحتاجه لادارة حمام السباحة</h2>
<p class="section-header__desc">ست وحدات فرعية تغطي كل جانب من جوانب تشغيل حمام السباحة. من لحظة دخول العضو حتى خروجه.</p>
</div>
<div class="module-detail__features">
<div class="feature-card" data-reveal="100">
<div class="feature-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="feature-card__title">حصر المتواجدين لحظيا</h3>
<p class="feature-card__text">عداد حقيقي لعدد المتواجدين داخل حمام السباحة في هذه اللحظة. يزيد عند الدخول وينقص عند الخروج. تنبيه اوتوماتيكي عند الاقتراب من الحد الاقصى ومنع الدخول عند الوصول للسعة القصوى.</p>
</div>
<div class="feature-card" data-reveal="200">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 2v4"/><path d="M18 2v4"/><path d="M2 10h20"/></svg>
</div>
<h3 class="feature-card__title">التذاكر اليومية</h3>
<p class="feature-card__text">اصدار تذاكر يومية لدخول حمام السباحة مع اسعار مختلفة حسب فئة العضو والسن والوقت. كل تذكرة مسجلة رقميا ومربوطة بالخزينة. لا تذاكر ورقية ولا فجوات مالية.</p>
</div>
<div class="feature-card" data-reveal="300">
<div class="feature-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="M3 10h18"/><path d="M7 2v4"/><path d="M17 2v4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
</div>
<h3 class="feature-card__title">الكرنيهات</h3>
<p class="feature-card__text">كرنيهات بعدد دخلات محدد. يشتريها العضو مرة ويستخدمها على فترة. كل استخدام مسجل بالتاريخ والوقت. الرصيد المتبقي ظاهر للموظف والعضو. لا اعتراضات ولا خلافات.</p>
</div>
<div class="feature-card" data-reveal="400">
<div class="feature-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="feature-card__title">ادارة الضيوف</h3>
<p class="feature-card__text">نظام محكم لدخول الضيوف. تحديد الحد الاقصى لعدد الضيوف لكل عضو. تسجيل بيانات الضيف وربطه بالعضو المسؤول. تسعير مختلف للضيوف. سجل كامل لكل عمليات الاستضافة.</p>
</div>
<div class="feature-card" data-reveal="500">
<div class="feature-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"/><path d="M8 18h.01"/><path d="M12 18h.01"/></svg>
</div>
<h3 class="feature-card__title">جدولة وحجوزات</h3>
<p class="feature-card__text">تقويم كامل لجدول حمام السباحة. فترات للاعضاء وفترات للتدريب وفترات للصيانة. حجز الحارات لفرق السباحة والتمارين الخاصة. لا تعارض في المواعيد.</p>
</div>
<div class="feature-card" data-reveal="600">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 12V4"/><path d="M18 12V4"/><path d="M6 20v-4"/><path d="M18 20v-4"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h3 class="feature-card__title">ادارة الحارات</h3>
<p class="feature-card__text">تعريف حارات حمام السباحة وتخصيص كل حارة لنشاط محدد. حارة للسباحة الحرة وحارة للتدريب وحارة للاطفال. مراقبة اشغال كل حارة وتوزيع المستخدمين بشكل آمن.</p>
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Real-time Occupancy -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="module-detail__text">
<h3>مراقبة السعة والتحكم لحظيا</h3>
<p>شاشة مركزية تعرض عدد المتواجدين في حمام السباحة في هذه اللحظة مقارنة بالسعة القصوى. عند الاقتراب من الحد الاقصى يتغير اللون تلقائيا للتنبيه. عند الوصول للسعة يتم منع اي دخول جديد حتى خروج شخص.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">عداد تصاعدي وتنازلي بالدخول والخروج</div>
<div class="module-detail__list-item">تنبيه عند 80% من السعة</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="screenshot screenshot--framed">
<img src="screenshots/facilities/pool.png" alt="شاشة مراقبة السعة اللحظية لحمام السباحة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Tickets & List -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/list.png" alt="قائمة التذاكر والدخلات اليومية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>سجل رقمي شامل لكل دخلة</h3>
<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>
</div>
</section>
<!-- Screenshot Section: Carnets -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="module-detail__text">
<h3>نظام الكرنيهات المتقدم</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/carnets/list.png" alt="نظام الكرنيهات وادارة الارصدة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Guest Entries -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/carnets/guest-entries.png" alt="ادارة دخول الضيوف" loading="lazy">
</div>
<div class="module-detail__text">
<h3>التحكم في دخول الضيوف</h3>
<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>
</div>
</section>
<!-- Screenshot Section: Calendar & Reservations -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحجوزات والجدولة</span>
<h2 class="section-header__title">تقويم ذكي لادارة حمام السباحة</h2>
<p class="section-header__desc">تنظيم فترات الاستخدام والصيانة والتدريب في تقويم مرئي واضح. لا تعارض في المواعيد ولا ارتباك في التنظيم.</p>
</div>
<div class="gallery gallery--2col" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/calendar.png" alt="تقويم حجوزات حمام السباحة" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/reservations-list.png" alt="قائمة الحجوزات والفترات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- How it Works - Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">كيف يعمل النظام</span>
<h2 class="section-header__title">رحلة العضو من الدخول حتى الخروج</h2>
<p class="section-header__desc">كل خطوة مسجلة ومحسوبة. من لحظة وصول العضو لبوابة حمام السباحة حتى مغادرته.</p>
</div>
<div class="workflow" data-reveal>
<div class="workflow__step">وصول العضو للبوابة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">التحقق من الاشتراك او التذكرة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">فحص السعة المتاحة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الدخول</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تحديث العداد</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الخروج</div>
</div>
<div class="module-detail__features" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
</div>
<h3 class="feature-card__title">عند الدخول</h3>
<p class="feature-card__text">يتم التحقق من صلاحية العضوية او التذكرة او رصيد الكرنيه. يتم فحص السعة الحالية. اذا كانت متاحة يتم تسجيل الدخول وتحديث العداد وخصم دخلة من الكرنيه ان وجد. كل شيء في ثوان.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h3 class="feature-card__title">اثناء التواجد</h3>
<p class="feature-card__text">العداد يعكس العدد الفعلي للمتواجدين. ادارة حمام السباحة ترى في اي لحظة نسبة الاشغال. اذا اقتربت السعة من الحد الاقصى يتم ايقاف الدخول الجديد تلقائيا حتى خروج احد.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
</div>
<h3 class="feature-card__title">عند الخروج</h3>
<p class="feature-card__text">يتم تسجيل وقت الخروج وحساب مدة التواجد. العداد ينخفض تلقائيا. يتم فتح المجال لدخول شخص جديد. كل هذه البيانات متاحة في التقارير لمعرفة اوقات الذروة وسلوك الاستخدام.</p>
</div>
</div>
</div>
</section>
<!-- Comparison / Differentiation -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا El-Captain</span>
<h2 class="section-header__title">مقارنة مع البدائل المتاحة</h2>
<p class="section-header__desc">لا يوجد نظام ERP اخر في مصر يقدم وحدة متخصصة لادارة حمامات السباحة بهذا المستوى من التفصيل.</p>
</div>
<div data-reveal>
<table class="comparison-table">
<thead>
<tr>
<th>الميزة</th>
<th>El-Captain</th>
<th>انظمة ERP عامة</th>
<th>Excel / ورقي</th>
</tr>
</thead>
<tbody>
<tr>
<td>حصر متواجدين لحظي</td>
<td class="check">متوفر</td>
<td class="cross">غير متوفر</td>
<td class="cross">مستحيل</td>
</tr>
<tr>
<td>مراقبة السعة القصوى</td>
<td class="check">اوتوماتيكي</td>
<td class="cross">غير متوفر</td>
<td class="cross">يدوي بالتقدير</td>
</tr>
<tr>
<td>تذاكر يومية رقمية</td>
<td class="check">متوفر</td>
<td class="cross">يحتاج تخصيص</td>
<td class="cross">ورقية فقط</td>
</tr>
<tr>
<td>نظام كرنيهات</td>
<td class="check">مدمج بالكامل</td>
<td class="cross">غير متوفر</td>
<td class="cross">دفتر يدوي</td>
</tr>
<tr>
<td>ادارة الضيوف</td>
<td class="check">محكم بقواعد</td>
<td class="cross">غير متوفر</td>
<td class="cross">بدون ضوابط</td>
</tr>
<tr>
<td>حجز الحارات</td>
<td class="check">تقويم مرئي</td>
<td class="cross">غير متوفر</td>
<td class="cross">غير ممكن</td>
</tr>
<tr>
<td>تقارير اشغال وايرادات</td>
<td class="check">لحظية وشاملة</td>
<td class="cross">عامة وغير متخصصة</td>
<td class="cross">يدوية ومتاخرة</td>
</tr>
<tr>
<td>ربط بالعضويات والمالية</td>
<td class="check">تلقائي</td>
<td class="cross">يحتاج تطوير</td>
<td class="cross">منفصل تماما</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Quote Block -->
<section class="section">
<div class="container">
<div class="quote-block" data-reveal>
<p class="quote-block__text">ادارة حمام السباحة بدون نظام رقمي هي مخاطرة بسلامة الاعضاء وخسارة يومية في الايرادات. كل يوم بدون حصر لحظي هو يوم قد يحدث فيه حادث بسبب تجاوز السعة، او تسرب مالي بسبب غياب الرقابة.</p>
<span class="quote-block__source">واقع يومي في اغلب الاندية الرياضية في مصر</span>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">حمام السباحة يستحق نظام يحميه</h2>
<p class="cta-section__desc">
لا تنتظر حتى يحدث حادث او تكتشف فجوة مالية كبيرة.
El-Captain يعطيك رؤية كاملة وتحكم حقيقي في حمام السباحة من اليوم الاول.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على باقي الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/pricing.html 0 → 100644
View file @ 170eaea6
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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 لإدارة الأكاديميات الرياضية. أسعار عادلة تنمو مع أكاديميتك — بدون رسوم خفية.">
<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/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="pricing.html" class="nav__link nav__link--active">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<nav class="breadcrumb" aria-label="مسار التنقل">
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>الباقات والأسعار</span>
</nav>
<h1 class="module-hero__title">أسعار عادلة تنمو مع أكاديميتك</h1>
<p class="module-hero__desc">لا رسوم خفية، لا عقود طويلة. ادفع فقط مقابل ما تحتاجه — وتوسع عندما تكون جاهزاً.</p>
</div>
</div>
</section>
<!-- Pricing Plans -->
<section class="section">
<div class="container">
<div class="pricing-grid" data-reveal>
<!-- Starter Plan -->
<div class="pricing-card">
<div class="pricing-card__header">
<h3 class="pricing-card__name">البداية</h3>
<p class="pricing-card__desc">للأكاديميات الصغيرة والناشئة</p>
<div class="pricing-card__price">
<span class="pricing-card__amount">تواصل معنا</span>
</div>
</div>
<div class="pricing-card__body">
<ul class="pricing-card__features">
<li>حتى 100 مشترك</li>
<li>فرع واحد</li>
<li>إدارة المشتركين</li>
<li>البرامج والمجموعات</li>
<li>تسجيل الحضور</li>
<li>الفواتير والمدفوعات</li>
<li>تقارير أساسية</li>
<li>الدعم عبر WhatsApp</li>
</ul>
</div>
<div class="pricing-card__footer">
<a href="contact.html" class="btn btn--secondary btn--large" style="width: 100%;">احجز عرض</a>
</div>
</div>
<!-- Professional Plan (Featured) -->
<div class="pricing-card pricing-card--featured">
<div class="pricing-card__badge">الأكثر شيوعاً</div>
<div class="pricing-card__header">
<h3 class="pricing-card__name">الاحترافي</h3>
<p class="pricing-card__desc">للأكاديميات المتوسطة والنامية</p>
<div class="pricing-card__price">
<span class="pricing-card__amount">تواصل معنا</span>
</div>
</div>
<div class="pricing-card__body">
<ul class="pricing-card__features">
<li>حتى 500 مشترك</li>
<li>حتى 3 فروع</li>
<li>كل مزايا باقة البداية</li>
<li>محرك التسعير الذكي</li>
<li>المخازن والمنتجات</li>
<li>الموارد البشرية والرواتب</li>
<li>المنشآت والحجوزات</li>
<li>الإشعارات (بريد + SMS)</li>
<li>تقارير متقدمة + تصدير Excel</li>
<li>الصلاحيات المتقدمة</li>
<li>دعم أولوية</li>
</ul>
</div>
<div class="pricing-card__footer">
<a href="contact.html" class="btn btn--primary btn--large" style="width: 100%;">احجز عرض</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="pricing-card__header">
<h3 class="pricing-card__name">المؤسسي</h3>
<p class="pricing-card__desc">للأكاديميات الكبيرة والسلاسل</p>
<div class="pricing-card__price">
<span class="pricing-card__amount">سعر مخصص</span>
</div>
</div>
<div class="pricing-card__body">
<ul class="pricing-card__features">
<li>مشتركين بلا حدود</li>
<li>فروع بلا حدود</li>
<li>كل مزايا الباقة الاحترافية</li>
<li>تطبيقات الهاتف (مدربين + أولياء أمور)</li>
<li>API للتكامل مع أنظمة أخرى</li>
<li>تخصيص حسب الطلب</li>
<li>مدير حساب مخصص</li>
<li>تدريب فريق العمل</li>
<li>SLA ضمان وقت التشغيل</li>
<li>استضافة خاصة (اختياري)</li>
</ul>
</div>
<div class="pricing-card__footer">
<a href="contact.html" class="btn btn--secondary btn--large" style="width: 100%;">تواصل للتفاصيل</a>
</div>
</div>
</div>
</div>
</section>
<!-- All Plans Include -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">كل الباقات تشمل</h2>
<p class="section-header__desc">مزايا أساسية متاحة في كل الباقات بدون تكلفة إضافية</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); max-width: 900px; margin: 0 auto;" data-reveal="200">
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>إعداد وتفعيل مجاني</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">نساعدك في إدخال بياناتك</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>تحديثات مستمرة</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مزايا جديدة كل شهر</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>نسخ احتياطي يومي</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">بياناتك محمية دائماً</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>SSL + تشفير البيانات</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">أمان على مستوى البنوك</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>واجهة عربية بالكامل</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مصممة للسوق المصري</span></div>
</div>
<div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
<svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<div><strong>دعم فني</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">فريق مصري يفهم مجالك</span></div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section">
<div class="container" style="max-width: 800px;">
<div class="section-header section-header--center" data-reveal>
<h2 class="section-header__title">أسئلة شائعة</h2>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-md);" data-reveal="200">
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد فترة تجريبية مجانية؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — نقدم عرض تجريبي مباشر على بيانات مشابهة لأكاديميتك. بعد الاشتراك يوجد ضمان استرداد خلال 30 يوم إذا لم يعجبك النظام.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني الترقية لباقة أعلى لاحقاً؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بالتأكيد. يمكنك الترقية في أي وقت وسيتم احتساب الفرق فقط. بياناتك تبقى كما هي بدون أي فقد.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحتاج أجهزة أو سيرفرات خاصة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل — يعمل من أي متصفح على أي جهاز (كمبيوتر، تابلت، موبايل). لا تحتاج تثبيت أي شيء.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل بياناتي آمنة؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. نستخدم تشفير SSL، نسخ احتياطي يومي، وصلاحيات دقيقة. بياناتك ملكك ويمكنك تصديرها في أي وقت.</p>
</div>
<div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
<h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد عقد إلزامي؟</h4>
<p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. الاشتراك شهري ويمكنك الإلغاء في أي وقت. نحن واثقون أنك ستبقى لأن النظام يوفر لك وقت ومال حقيقي.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="section">
<div class="container" style="text-align: center; max-width: 600px;">
<h2 style="margin-bottom: var(--space-md);" data-reveal>مش متأكد أي باقة تناسبك؟</h2>
<p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); font-size: var(--text-lg);" data-reveal="100">احجز عرض تجريبي مجاني ونساعدك تختار الباقة المناسبة لحجم أكاديميتك واحتياجاتك.</p>
<div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;" data-reveal="200">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" target="_blank" class="btn btn--whatsapp btn--large">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام إدارة متكامل مصمم خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html" class="footer__link">المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="features.html#members" class="footer__link">إدارة المشتركين</a>
<a href="features.html#finance" class="footer__link">المالية</a>
</div>
<div>
<h4 class="footer__col-title">روابط سريعة</h4>
<a href="contact.html" class="footer__link">احجز عرض</a>
<a href="features.html#attendance" class="footer__link">الحضور الذكي</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض تجريبي</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank">WhatsApp</a>
<span class="footer__link" style="cursor: default;">القاهرة، مصر</span>
</div>
</div>
<div class="footer__bottom">
<span>&copy; 2024 El-Captain</span>
<span>نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</footer>
<!-- WhatsApp FAB -->
<a href="https://wa.me/201XXXXXXXXX" target="_blank" class="whatsapp-fab" aria-label="تواصل عبر WhatsApp">
<svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><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-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
</a>
<script src="js/main.js"></script>
</body>
</html>
public/sports.html deleted 100644 → 0
View file @ 081d9938
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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 يغطي كل تفاصيل النشاط الرياضي في ناديك.">
<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/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link nav__link--active">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>الانشطة الرياضية</span>
</div>
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">ادارة الاكاديميات الرياضية بالكامل</h1>
<p class="module-hero__desc">
من تسجيل اللاعب في النشاط حتى متابعة حضوره اليومي وتقييم مستواه.
نظام متكامل يربط المدرب والاداري وولي الامر في منظومة واحدة.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#features" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Academy & Disciplines -->
<section class="section" id="features">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاكاديميات والالعاب</span>
<h2 class="section-header__title">انشطة رياضية متعددة في نظام واحد</h2>
<p class="section-header__desc">سباحة، كرة قدم، كاراتيه، جمباز، تنس، وغيرها. كل لعبة لها اعداداتها الخاصة ومجموعاتها ومدربيها وجداولها.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/disciplines.png" alt="ادارة الالعاب والتخصصات الرياضية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>تصنيف مرن للالعاب الرياضية</h3>
<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>
</div>
</section>
<!-- Activities Overview -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">شاشة الانشطة</span>
<h2 class="section-header__title">عرض شامل لكل الانشطة الجارية</h2>
<p class="section-header__desc">لوحة واحدة تعرض جميع الانشطة الرياضية النشطة مع احصائيات اللاعبين والمجموعات والمدربين لكل نشاط.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>متابعة لحظية للاكاديميات</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/sports/activities.png" alt="شاشة عرض الانشطة الرياضية" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Training Groups & Scheduling -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المجموعات التدريبية</span>
<h2 class="section-header__title">تنظيم المجموعات وجداول التدريب</h2>
<p class="section-header__desc">قسم اللاعبين الى مجموعات حسب المستوى والسن، وحدد جدول تدريب كل مجموعة بمواعيد ثابتة وملاعب مخصصة.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/groups.png" alt="ادارة المجموعات التدريبية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>مجموعات ذكية بجداول مرنة</h3>
<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>
</div>
</section>
<!-- Coach Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">ادارة المدربين</span>
<h2 class="section-header__title">ملف كامل لكل مدرب</h2>
<p class="section-header__desc">سجل المدربين بكل تفاصيلهم: التخصصات، المجموعات المسندة، الجداول، والتقييمات.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>منظومة متكاملة للمدربين</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/sports/coaches.png" alt="ادارة المدربين" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Attendance Tracking -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحضور والغياب</span>
<h2 class="section-header__title">تسجيل حضور لحظي عبر تطبيق المدرب</h2>
<p class="section-header__desc">المدرب يسجل الحضور من هاتفه مباشرة. ولي الامر يستلم اشعار فوري. الادارة ترى التقارير لحظيا.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/attendance.png" alt="شاشة تسجيل الحضور" loading="lazy">
</div>
<div class="module-detail__text">
<h3>حضور رقمي بدون ورق</h3>
<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>
</div>
</section>
<!-- Player Cards & Registration -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">كروت اللاعبين</span>
<h2 class="section-header__title">بطاقة تعريف لكل لاعب</h2>
<p class="section-header__desc">كل لاعب مسجل يحصل على كارت يحتوي على بياناته ونشاطه ومجموعته. يستخدم في البوابات وتسجيل الحضور.</p>
</div>
<div class="gallery gallery--2col" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/list.png" alt="قائمة اللاعبين المسجلين" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/coaching.png" alt="شاشة التدريب وبيانات اللاعبين" loading="lazy">
</div>
</div>
<div class="module-detail__features" style="margin-top: var(--space-2xl);" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<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>
<h3 class="feature-card__title">ملف شامل للاعب</h3>
<p class="feature-card__text">بيانات شخصية وصحية وبيانات ولي الامر ورقم الطوارئ. صورة شخصية وتاريخ التسجيل ومسار الانشطة.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15h0M2 9.5h20"/></svg>
</div>
<h3 class="feature-card__title">كارت تعريفي</h3>
<p class="feature-card__text">بطاقة مطبوعة او رقمية تحتوي على اسم اللاعب والنشاط والمجموعة وصلاحية الاشتراك وباركود للبوابات.</p>
</div>
<div class="feature-card">
<div class="feature-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="feature-card__title">ربط بولي الامر</h3>
<p class="feature-card__text">كل لاعب مرتبط بحساب ولي امره. ولي الامر يستلم اشعارات الحضور والمدفوعات والتقييمات عبر التطبيق.</p>
</div>
</div>
</div>
</section>
<!-- Gate Control -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">البوابات والتحكم</span>
<h2 class="section-header__title">تحكم في الدخول والخروج</h2>
<p class="section-header__desc">ربط مع بوابات النادي لمنع دخول غير المشتركين والتحقق من صلاحية الاشتراك لحظيا.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>بوابة ذكية مربوطة بالنظام</h3>
<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="screenshot screenshot--framed">
<img src="screenshots/sports/gate.png" alt="نظام التحكم في البوابات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Locker Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">اللوكرات</span>
<h2 class="section-header__title">ادارة خزائن اللاعبين</h2>
<p class="section-header__desc">تخصيص خزائن شخصية للاعبين مع تتبع حالة كل خزانة ومواعيد الحجز والاسترداد.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/lockers.png" alt="ادارة اللوكرات وخزائن اللاعبين" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نظام حجز وتخصيص الخزائن</h3>
<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>
</div>
</section>
<!-- Player Journey Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">رحلة اللاعب</span>
<h2 class="section-header__title">من التسجيل حتى التدريب اليومي</h2>
<p class="section-header__desc">مسار واضح ومنظم لانضمام اي لاعب جديد لاي نشاط رياضي في النادي.</p>
</div>
<div class="workflow" data-reveal>
<div class="workflow__step">تقديم طلب الالتحاق</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">اختيار النشاط والمجموعة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">سداد الاشتراك</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">اصدار كارت اللاعب</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">بدء التدريب</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الحضور يوميا</div>
</div>
<div class="module-detail__features" style="margin-top: var(--space-2xl);" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" 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>
<h3 class="feature-card__title">تسجيل الكتروني كامل</h3>
<p class="feature-card__text">ولي الامر يسجل ابنه من التطبيق او يحضر للنادي. البيانات تدخل مرة واحدة وتتوفر في كل مكان.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" 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="feature-card__title">ضوابط وصلاحيات</h3>
<p class="feature-card__text">النظام يتحقق من السن والشروط الصحية وسعة المجموعة قبل قبول التسجيل. لا تسجيل عشوائي.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<h3 class="feature-card__title">متابعة مستمرة</h3>
<p class="feature-card__text">بعد التسجيل، النظام يتابع الحضور والسداد والتقييمات. ولي الامر يستلم تقارير دورية عن مستوى ابنه.</p>
</div>
</div>
</div>
</section>
<!-- Bookings Screenshot -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحجوزات</span>
<h2 class="section-header__title">نظام حجوزات مرن</h2>
<p class="section-header__desc">حجز الملاعب والصالات والمرافق بجداول زمنية واضحة تمنع التعارضات وتضمن الاستغلال الامثل.</p>
</div>
<div class="screenshot screenshot--framed" data-reveal>
<img src="screenshots/sports/bookings.png" alt="نظام حجوزات الملاعب والصالات" loading="lazy">
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز لتنظيم اكاديمياتك الرياضية؟</h2>
<p class="cta-section__desc">
لا تدير الانشطة الرياضية بكشوف ورقية ومكالمات هاتفية.
El-Captain يوفر لك نظام متكامل يربط الادارة بالمدربين واولياء الامور.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على باقي الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
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