Skip to content

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

Add swimming academy page + real app screenshots across site 

- New dedicated swimming.html targeting lane rental & carnet management pain
- Grid system (space assignment) as hero feature for swimming academies
- Real app screenshots integrated into index.html product showcase carousel
- Swimming teaser banner on homepage linking to dedicated page
- Nav updated across all pages with "السباحة" link
- 21 app screenshots added (dashboard, facilities, pricing, grid, etc.)
- Swimming-specific CSS: pool hero, lane visualization, carnet cards
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 170eaea6
Show whitespace changes
Inline Side-by-side
Showing with 1609 additions and 13 deletions
public/404.html
View file @ 9d19f508
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
<div class="nav__links"> <div class="nav__links">
<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="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
</div> </div>
......
public/contact.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<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="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/css/home.css
View file @ 9d19f508
...@@ -1192,3 +1192,88 @@ ...@@ -1192,3 +1192,88 @@
); );
margin: 0; margin: 0;
} }
/* ================================================================
11. SWIMMING TEASER BANNER
================================================================ */
.swimming-teaser {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.06) 0%, rgba(8, 145, 178, 0.02) 100%);
border-block: 1px solid rgba(8, 145, 178, 0.12);
padding-block: var(--space-xl);
}
.swimming-teaser__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
flex-wrap: wrap;
}
.swimming-teaser__content {
display: flex;
align-items: center;
gap: var(--space-md);
}
.swimming-teaser__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.swimming-teaser__text {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
.swimming-teaser__sub {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
margin-block-start: var(--space-2xs);
}
.swimming-teaser__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--color-accent);
color: #FFFFFF;
font-weight: 600;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
text-decoration: none;
white-space: nowrap;
transition:
background var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.swimming-teaser__link:hover {
background: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-1px);
}
[dir="rtl"] .swimming-teaser__link svg {
transform: scaleX(-1);
}
@media (max-width: 768px) {
.swimming-teaser__inner {
flex-direction: column;
align-items: flex-start;
text-align: start;
}
.swimming-teaser__link {
align-self: stretch;
justify-content: center;
}
}
public/css/pages.css
View file @ 9d19f508
...@@ -1024,3 +1024,334 @@ ...@@ -1024,3 +1024,334 @@
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
/* ─────────────────────────────────────────────
SWIMMING PAGE
───────────────────────────────────────────── */
.pool-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.pool-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.pool-pain-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px oklch(0 0 0 / 0.08);
}
.pool-pain-card__icon {
width: 3.5rem;
height: 3.5rem;
margin: 0 auto var(--space-md);
display: grid;
place-items: center;
border-radius: var(--radius-lg);
font-size: 1.5rem;
}
.pool-pain-card__icon--red {
background: oklch(0.95 0.04 25);
color: oklch(0.55 0.2 25);
}
.pool-pain-card__icon--amber {
background: oklch(0.95 0.04 80);
color: oklch(0.55 0.15 80);
}
.pool-pain-card__icon--blue {
background: oklch(0.93 0.04 230);
color: oklch(0.50 0.15 230);
}
.pool-pain-card__icon--green {
background: oklch(0.93 0.05 155);
color: oklch(0.45 0.15 155);
}
.pool-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-sm);
}
.pool-pain-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* Grid Feature showcase */
.grid-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
@media (max-width: 768px) {
.grid-feature {
grid-template-columns: 1fr;
}
}
.grid-feature__content {
order: 2;
}
.grid-feature__visual {
order: 1;
}
.grid-feature__list {
list-style: none;
padding: 0;
margin: var(--space-lg) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature__list li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.7;
}
.grid-feature__list li::before {
content: '✓';
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: grid;
place-items: center;
background: oklch(0.93 0.05 170);
color: oklch(0.40 0.15 170);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
}
/* Lane visualization */
.lane-viz {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-lg);
overflow: hidden;
}
.lane-viz__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
}
.lane-viz__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
}
.lane-viz__time {
font-size: var(--text-xs);
color: var(--ink-muted);
direction: ltr;
}
.lane-viz__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
}
.lane-viz__cell {
aspect-ratio: 1;
border-radius: var(--radius-md);
display: grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 600;
transition: transform 0.2s;
}
.lane-viz__cell--free {
background: oklch(0.96 0.02 230);
color: oklch(0.55 0.1 230);
border: 1px dashed oklch(0.8 0.05 230);
}
.lane-viz__cell--booked {
background: oklch(0.93 0.06 170);
color: oklch(0.35 0.12 170);
}
.lane-viz__cell--external {
background: oklch(0.93 0.05 60);
color: oklch(0.45 0.12 60);
}
.lane-viz__cell--conflict {
background: oklch(0.93 0.06 25);
color: oklch(0.45 0.15 25);
animation: pulse-conflict 1.5s ease-in-out infinite;
}
@keyframes pulse-conflict {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Screenshot showcase */
.screenshot-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
@media (max-width: 768px) {
.screenshot-showcase {
grid-template-columns: 1fr;
}
}
.screenshot-showcase__item {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 4px 24px oklch(0 0 0 / 0.08);
border: 1px solid var(--border-subtle);
}
.screenshot-showcase__item img {
width: 100%;
height: auto;
display: block;
}
.screenshot-showcase__caption {
padding: var(--space-md) var(--space-lg);
background: var(--bg-surface);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
text-align: center;
}
/* Product gallery (horizontal scroll) */
.product-gallery {
display: flex;
gap: var(--space-lg);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-md);
-webkit-overflow-scrolling: touch;
}
.product-gallery::-webkit-scrollbar {
height: 6px;
}
.product-gallery::-webkit-scrollbar-track {
background: oklch(0.95 0 0);
border-radius: 3px;
}
.product-gallery::-webkit-scrollbar-thumb {
background: oklch(0.7 0 0);
border-radius: 3px;
}
.product-gallery__item {
flex: 0 0 min(400px, 80vw);
scroll-snap-align: start;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 4px 24px oklch(0 0 0 / 0.08);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.product-gallery__item img {
width: 100%;
height: auto;
display: block;
}
.product-gallery__caption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
text-align: center;
}
/* Swimming teaser banner */
.swimming-teaser {
background: linear-gradient(135deg, oklch(0.25 0.06 230), oklch(0.30 0.08 200));
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
flex-wrap: wrap;
}
@media (max-width: 640px) {
.swimming-teaser {
flex-direction: column;
text-align: center;
}
}
.swimming-teaser__text {
color: white;
}
.swimming-teaser__title {
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: 4px;
}
.swimming-teaser__desc {
font-size: var(--text-sm);
opacity: 0.8;
}
.swimming-teaser__btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: white;
color: var(--brand-primary);
font-weight: 700;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.swimming-teaser__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
}
public/features.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<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="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/index.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<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="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
<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="لوحة التحكم" loading="eager"> <img src="screenshots/app/dashboard.png" alt="لوحة التحكم" loading="eager">
</div> </div>
</div> </div>
</div> </div>
...@@ -310,19 +311,55 @@ ...@@ -310,19 +311,55 @@
<div class="product-showcase__track-wrap"> <div class="product-showcase__track-wrap">
<div class="product-showcase__track" aria-hidden="true"> <div class="product-showcase__track" aria-hidden="true">
<div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="قائمة المشتركين" loading="lazy"></div> <img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy">
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="الأنشطة الرياضية" loading="lazy"></div> <div class="product-showcase__caption">مكتب الاستقبال</div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة المحاسبة" loading="lazy"></div> </div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="الموارد البشرية" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy"></div> <img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<div class="product-showcase__caption">المشتركين</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="تعيين المساحات" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<div class="product-showcase__caption">الفواتير</div>
</div>
<!-- Duplicate for seamless infinite loop --> <!-- Duplicate for seamless infinite loop -->
<div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="" loading="lazy"></div> <img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="" loading="lazy"></div> <div class="product-showcase__caption">مكتب الاستقبال</div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="" loading="lazy"></div> </div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="" loading="lazy"></div> <img src="screenshots/app/participants-list.png" alt="" loading="lazy">
<div class="product-showcase__caption">المشتركين</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="" loading="lazy">
<div class="product-showcase__caption">الفواتير</div>
</div>
</div> </div>
</div> </div>
</section> </section>
...@@ -409,6 +446,25 @@ ...@@ -409,6 +446,25 @@
</div> </div>
</section> </section>
<!-- Swimming Teaser -->
<section class="swimming-teaser" data-reveal>
<div class="container">
<div class="swimming-teaser__inner">
<div class="swimming-teaser__content">
<span class="swimming-teaser__icon">🏊</span>
<div>
<p class="swimming-teaser__text">لأكاديميات السباحة: نظام حارات وإيجارات ذكي</p>
<p class="swimming-teaser__sub">إدارة الحارات، حجوزات المسابح، وإيجارات المساحات بنظام متخصص.</p>
</div>
</div>
<a href="swimming.html" class="swimming-teaser__link">
اكتشف المزيد
<svg viewBox="0 0 24 24" width="18" height="18" 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>
</a>
</div>
</div>
</section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="cta-section section"> <section class="cta-section section">
<div class="container"> <div class="container">
......
public/pricing.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<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="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link nav__link--active">التسعير</a> <a href="pricing.html" class="nav__link nav__link--active">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/swimming.html 0 → 100644
View file @ 9d19f508
<!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">
<style>
/* ═══════════════════════════════════════════════════════════
Swimming Page — Custom Styles
═══════════════════════════════════════════════════════════ */
/* Pool Hero — water-inspired background */
.pool-hero {
padding-top: 120px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #F0F8FF 0%, #E6F4F9 40%, var(--bg-body) 100%);
}
.pool-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(8, 145, 178, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 145, 178, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
/* Water ripple effect in background */
.pool-hero::after {
content: '';
position: absolute;
bottom: -50%;
inset-inline: -10%;
height: 100%;
background: radial-gradient(ellipse at 50% 100%, rgba(8, 145, 178, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.pool-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-2xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.pool-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.pool-hero__actions {
justify-content: center;
}
}
.pool-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(8, 145, 178, 0.08);
border: 1px solid rgba(8, 145, 178, 0.2);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-accent-dark);
margin-bottom: var(--space-md);
}
.pool-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--ink-primary);
line-height: 1.25;
margin-bottom: var(--space-md);
}
.pool-hero__title-accent {
color: var(--color-accent);
position: relative;
}
.pool-hero__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: 1.8;
max-width: 560px;
margin-bottom: var(--space-xl);
}
.pool-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Pain Cards — Swimming Specific */
.swim-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-lg);
}
.swim-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.swim-pain-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-error);
}
.swim-pain-card::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
width: 4px;
height: 100%;
background: var(--color-error);
border-radius: 0 4px 4px 0;
}
.swim-pain-card__icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--color-error-bg);
color: var(--color-error);
display: grid;
place-items: center;
margin-bottom: var(--space-md);
font-size: 1.5rem;
}
.swim-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.swim-pain-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Lane Grid Visualization */
.lane-grid {
display: grid;
gap: 3px;
background: var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
padding: 3px;
border: 1px solid var(--border-subtle);
}
.lane-grid--6 {
grid-template-columns: repeat(6, 1fr);
}
.lane-grid__cell {
aspect-ratio: 1;
background: var(--bg-surface);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 600;
color: var(--ink-muted);
transition: all 0.2s ease;
min-height: 48px;
}
.lane-grid__cell--occupied {
background: rgba(8, 145, 178, 0.12);
color: var(--color-accent-dark);
border: 1px solid rgba(8, 145, 178, 0.3);
}
.lane-grid__cell--conflict {
background: var(--color-error-bg);
color: var(--color-error);
border: 1px solid rgba(185, 28, 28, 0.3);
animation: conflict-pulse 2s ease-in-out infinite;
}
.lane-grid__cell--available {
background: var(--color-success-bg);
color: var(--color-success);
}
@keyframes conflict-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Lane Schedule Mini-Visualization */
.lane-schedule {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-muted);
border-radius: var(--radius-lg);
padding: var(--space-md);
border: 1px solid var(--border-subtle);
}
.lane-schedule__row {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-sm);
align-items: center;
}
.lane-schedule__time {
font-size: var(--text-xs);
font-weight: 600;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
direction: ltr;
text-align: center;
}
.lane-schedule__block {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lane-schedule__block--beginner {
background: rgba(8, 145, 178, 0.12);
color: var(--color-accent-dark);
border: 1px solid rgba(8, 145, 178, 0.25);
}
.lane-schedule__block--advanced {
background: rgba(27, 43, 75, 0.08);
color: var(--color-primary);
border: 1px solid rgba(27, 43, 75, 0.2);
}
.lane-schedule__block--rental {
background: var(--color-gold-ghost);
color: var(--color-gold-dark);
border: 1px solid rgba(201, 149, 43, 0.25);
}
.lane-schedule__block--empty {
background: var(--bg-surface);
color: var(--ink-placeholder);
border: 1px dashed var(--border-default);
}
/* Feature Highlight Section */
.swim-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.swim-feature--reverse {
grid-template-columns: 1fr 1fr;
}
.swim-feature--reverse .swim-feature__visual {
order: -1;
}
@media (max-width: 900px) {
.swim-feature,
.swim-feature--reverse {
grid-template-columns: 1fr;
}
.swim-feature--reverse .swim-feature__visual {
order: 0;
}
}
.swim-feature__text h2 {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.swim-feature__text p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* Carnet Card */
.carnet-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: var(--space-md);
}
.carnet-card {
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
text-align: center;
transition: all 0.2s ease;
}
.carnet-card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.carnet-card__icon {
width: 3rem;
height: 3rem;
margin: 0 auto var(--space-md);
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
}
.carnet-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-2xs);
}
.carnet-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
}
/* Comparison Before/After */
.swim-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-lg);
align-items: center;
}
@media (max-width: 768px) {
.swim-comparison {
grid-template-columns: 1fr;
}
.swim-comparison__arrow {
transform: rotate(90deg);
}
}
.swim-comparison__before,
.swim-comparison__after {
padding: var(--space-xl);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
}
.swim-comparison__before {
background: var(--color-error-bg);
border-color: rgba(185, 28, 28, 0.15);
}
.swim-comparison__after {
background: var(--color-success-bg);
border-color: rgba(16, 135, 90, 0.15);
}
.swim-comparison__arrow {
font-size: var(--text-2xl);
color: var(--color-accent);
font-weight: 800;
}
.swim-comparison__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-md);
}
.swim-comparison__before .swim-comparison__title {
color: var(--color-error);
}
.swim-comparison__after .swim-comparison__title {
color: var(--color-success);
}
.swim-comparison__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.swim-comparison__list li {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: var(--space-xs);
}
.swim-comparison__list li::before {
content: '';
width: 6px;
height: 6px;
margin-top: 0.55em;
border-radius: 50%;
flex-shrink: 0;
}
.swim-comparison__before .swim-comparison__list li::before {
background: var(--color-error);
}
.swim-comparison__after .swim-comparison__list li::before {
background: var(--color-success);
}
/* Stats banner */
.swim-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--color-primary);
border-radius: var(--radius-xl);
color: var(--ink-on-dark);
}
.swim-stat {
text-align: center;
}
.swim-stat__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-accent-light);
line-height: 1;
margin-bottom: var(--space-2xs);
}
.swim-stat__label {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
/* CTA Section — Swimming */
.swim-cta {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(180deg, var(--bg-body) 0%, #E6F4F9 100%);
position: relative;
}
.swim-cta::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent 10%, var(--color-accent) 50%, transparent 90%);
opacity: 0.3;
}
.swim-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.swim-cta__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
max-width: 50ch;
margin: 0 auto var(--space-xl);
line-height: 1.8;
}
.swim-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Grid feature highlight bullets */
.grid-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
}
.grid-feature-item:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.grid-feature-item__icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
background: var(--color-accent-ghost);
color: var(--color-accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.grid-feature-item__icon svg {
width: 1rem;
height: 1rem;
}
.grid-feature-item__text {
flex: 1;
}
.grid-feature-item__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 2px;
}
.grid-feature-item__desc {
font-size: var(--text-xs);
color: var(--ink-secondary);
line-height: 1.6;
}
/* Screenshots dual */
.screenshots-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
@media (max-width: 768px) {
.screenshots-dual {
grid-template-columns: 1fr;
}
}
</style>
</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 class="nav__logo-text">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="swimming.html" class="nav__link nav__link--active">السباحة</a>
<a href="pricing.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>
<!-- Hero -->
<section class="pool-hero">
<div class="container">
<div class="pool-hero__inner">
<div data-reveal>
<span class="pool-hero__eyebrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12h2a2 2 0 0 1 2 2v0a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2v0a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v0a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2v0a2 2 0 0 1 2-2h2"/><path d="M2 6h2a2 2 0 0 1 2 2v0a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V8a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v0a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V8a2 2 0 0 1 2-2h2"/></svg>
مصمم خصيصاً لأكاديميات السباحة
</span>
<h1 class="pool-hero__title">حمام سباحتك يحتاج نظام <span class="pool-hero__title-accent">يفهم الحارات والإيجارات</span></h1>
<p class="pool-hero__desc">لا مزيد من التضاربات والحجوزات الضائعة — El-Captain يدير المساحات والحارات والكروت بذكاء. كل حارة، كل ساعة، كل كارنيه — تحت السيطرة.</p>
<div class="pool-hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص للسباحة</a>
<a href="#grid-system" class="btn btn--secondary btn--large">شوف النظام</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-assigned.png" alt="نظام شبكة الحارات مع تخصيص المجموعات" loading="eager">
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points — Swimming Specific -->
<section class="section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-error-bg); color: var(--color-error); border-color: rgba(185,28,28,0.2);">المشاكل اليومية</span>
<h2 class="section-header__title">كل يوم نفس الكابوس</h2>
<p class="section-header__desc">أكاديميات السباحة تعاني من مشاكل فريدة لا تحلها الأنظمة العادية. هل تعرف هذه المشاكل؟</p>
</div>
<div class="swim-pain__grid" data-reveal="100">
<div class="swim-pain-card">
<div class="swim-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
</div>
<h3 class="swim-pain-card__title">تضارب حجوزات الحارات</h3>
<p class="swim-pain-card__text">مجموعتين محجوزين على نفس الحارة في نفس الوقت. المدرب وصل ولقى حارته مشغولة. إحراج أمام أولياء الأمور وفوضى يومية.</p>
</div>
<div class="swim-pain-card">
<div class="swim-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 8h.01"/><path d="M12 8h.01"/><path d="M17 8h.01"/><path d="M7 12h.01"/><path d="M12 12h.01"/><path d="M17 12h.01"/></svg>
</div>
<h3 class="swim-pain-card__title">كروت السباحة بدون متابعة</h3>
<p class="swim-pain-card__text">كارنيه الـ 10 زيارات — مين استخدم كام؟ فات عليه الـ 30 يوم ولا لسة؟ زيارة اليوم اتحسبت ولا لأ؟ لا أحد يعرف بالضبط.</p>
</div>
<div class="swim-pain-card">
<div class="swim-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<h3 class="swim-pain-card__title">إيجار خارجي ضائع</h3>
<p class="swim-pain-card__text">حارات مؤجرة لنوادي خارجية أو أفراد — إيراداتها ضايعة في ورق. مفيش تتبع للمدفوعات ولا تقارير للربحية الحقيقية لكل حارة.</p>
</div>
<div class="swim-pain-card">
<div class="swim-pain-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<h3 class="swim-pain-card__title">لا رؤية لإشغال الحمام</h3>
<p class="swim-pain-card__text">مفيش صورة واضحة — أي حارة فاضية دلوقتي؟ أي وقت فيه فرصة لمجموعة جديدة؟ أنت بتدير بالإحساس مش بالبيانات.</p>
</div>
</div>
</div>
</section>
<!-- Before / After Comparison -->
<section class="section">
<div class="container">
<div class="swim-comparison" data-reveal>
<div class="swim-comparison__before">
<h3 class="swim-comparison__title">قبل El-Captain</h3>
<ul class="swim-comparison__list">
<li>جدول ورقي على الحائط يتغير كل أسبوع</li>
<li>تضارب يُكتشف لحظة وصول المجموعة</li>
<li>كروت سباحة مكتوبة بخط اليد</li>
<li>إيجارات خارجية بدون عقود أو متابعة</li>
<li>لا تعرف ربحية كل حارة</li>
<li>ولي الأمر يسأل: "ابني حضر النهاردة؟"</li>
</ul>
</div>
<div class="swim-comparison__arrow">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="swim-comparison__after">
<h3 class="swim-comparison__title">بعد El-Captain</h3>
<ul class="swim-comparison__list">
<li>شبكة بصرية لكل حارة وكل ساعة</li>
<li>منع التضارب تلقائياً قبل ما يحصل</li>
<li>كروت رقمية بعداد زيارات وتاريخ انتهاء</li>
<li>إيجارات موثقة بفواتير ومدفوعات</li>
<li>تقرير ربحية لكل حارة ووقت</li>
<li>إشعار فوري لولي الأمر عند تسجيل الحضور</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Grid System — THE Hero Feature -->
<section class="section" id="grid-system" style="background: var(--bg-muted);">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-accent-ghost); color: var(--color-accent-dark); border-color: rgba(8,145,178,0.2);">الميزة الأساسية</span>
<h2 class="section-header__title">نظام شبكة الحارات البصري</h2>
<p class="section-header__desc">كل حارة خانة. كل ساعة صف. اسحب المجموعة وضعها. النظام يمنع التضارب تلقائياً.</p>
</div>
<!-- Big Screenshot -->
<div class="screenshots-dual" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-empty.png" alt="شبكة الحارات فارغة — جاهزة للتخصيص" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/app/space-grid-assigned.png" alt="شبكة الحارات بعد تخصيص المجموعات" loading="lazy">
</div>
</div>
<!-- Grid Feature Details -->
<div class="swim-feature" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="swim-feature__text">
<h2>أقوى نظام لإدارة المساحات في السوق</h2>
<p>صُمم هذا النظام من الصفر لحل مشكلة التضارب. كل حارة في حمام السباحة لها خانة في الشبكة. كل فترة زمنية لها صف. اضغط أو اسحب لتخصيص المجموعة — والنظام يمنع أي تعارض فوراً.</p>
<div class="grid-features">
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">شبكة بصرية</div>
<div class="grid-feature-item__desc">كل حارة خانة ملونة. الأخضر = مشغول. الأبيض = فارغ. لا لبس.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">منع التضارب تلقائياً</div>
<div class="grid-feature-item__desc">النظام يرفض أي حجز يتعارض مع حجز موجود. لا يمكن حجز حارة مشغولة.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">تخطيطات زمنية مختلفة</div>
<div class="grid-feature-item__desc">الصباح: 6 حارات صغيرة للأطفال. المساء: 3 حارات كبيرة للكبار. كل فترة بتخطيط مختلف.</div>
</div>
</div>
<div class="grid-feature-item">
<div class="grid-feature-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<div class="grid-feature-item__text">
<div class="grid-feature-item__title">ربط بالجلسات التدريبية</div>
<div class="grid-feature-item__desc">عند إنشاء جلسة تدريبية — الحجز يُنشأ تلقائياً. عند الإلغاء — الحارة تتحرر فوراً.</div>
</div>
</div>
</div>
</div>
<div class="swim-feature__visual">
<!-- Mini lane schedule visualization -->
<div class="lane-schedule">
<div style="font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-md); font-size: var(--text-base);">حارة 1 — جدول اليوم</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">3:00</span>
<span class="lane-schedule__block lane-schedule__block--beginner">سباحة مبتدئين</span>
</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">4:00</span>
<span class="lane-schedule__block lane-schedule__block--advanced">سباحة متقدم</span>
</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">5:00</span>
<span class="lane-schedule__block lane-schedule__block--rental">إيجار خارجي — نادي النيل</span>
</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">6:00</span>
<span class="lane-schedule__block lane-schedule__block--beginner">سباحة أطفال</span>
</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">7:00</span>
<span class="lane-schedule__block lane-schedule__block--empty">متاحة للحجز</span>
</div>
<div class="lane-schedule__row">
<span class="lane-schedule__time">8:00</span>
<span class="lane-schedule__block lane-schedule__block--rental">إيجار فردي</span>
</div>
</div>
<!-- Lane utilization mini-grid -->
<div style="margin-top: var(--space-lg);">
<div style="font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-sm); font-size: var(--text-sm);">نسبة إشغال الحارات اليوم</div>
<div class="lane-grid lane-grid--6">
<div class="lane-grid__cell lane-grid__cell--occupied">85%</div>
<div class="lane-grid__cell lane-grid__cell--occupied">72%</div>
<div class="lane-grid__cell lane-grid__cell--available">45%</div>
<div class="lane-grid__cell lane-grid__cell--occupied">90%</div>
<div class="lane-grid__cell lane-grid__cell--available">30%</div>
<div class="lane-grid__cell lane-grid__cell--occupied">68%</div>
</div>
<div style="display: flex; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted);">
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:var(--color-accent);"></span> مشغول > 60%</span>
<span style="display: flex; align-items: center; gap: 4px;"><span style="width:8px;height:8px;border-radius:50%;background:var(--color-success);"></span> متاح < 60%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Weekly Schedule Screenshot -->
<section class="section">
<div class="container">
<div class="swim-feature swim-feature--reverse" data-reveal>
<div class="swim-feature__text">
<h2>جدول أسبوعي ذكي لكل الحارات</h2>
<p>شاهد الأسبوع كاملاً في لمحة واحدة. كل مجموعة بلون مختلف. اضغط على أي خانة لمعرفة التفاصيل أو لإجراء تعديل فوري.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">عرض أسبوعي مرمّز بالألوان لكل مجموعة ومدرب</div>
<div class="module-detail__list-item">فلترة بالحارة أو المدرب أو البرنامج</div>
<div class="module-detail__list-item">تعارض الجدول يظهر بالأحمر فوراً</div>
<div class="module-detail__list-item">سحب وإفلات لنقل الجلسات بين الأوقات</div>
<div class="module-detail__list-item">توليد تلقائي للجلسات المتكررة أسبوعياً</div>
</div>
</div>
<div class="swim-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي لحمام السباحة" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- Carnet & Tickets Section -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-gold-ghost); color: var(--color-gold-dark); border-color: rgba(201,149,43,0.2);">الكروت والتذاكر</span>
<h2 class="section-header__title">كروت السباحة والتذاكر — أخيراً تحت السيطرة</h2>
<p class="section-header__desc">كارنيهات متعددة الزيارات، تذاكر يومية، اشتراكات موسمية — كلها في نظام واحد مع عداد ذكي وتاريخ انتهاء تلقائي.</p>
</div>
<div class="carnet-cards" data-reveal="100">
<div class="carnet-card">
<div class="carnet-card__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 8h.01"/><path d="M12 8h.01"/><path d="M17 8h.01"/><path d="M7 12h.01"/><path d="M12 12h.01"/></svg>
</div>
<h3 class="carnet-card__title">كروت متعددة الزيارات</h3>
<p class="carnet-card__desc">كارنيه 10 أو 20 زيارة مع عداد تلقائي. كل زيارة تُخصم لحظياً عند تسجيل الحضور.</p>
</div>
<div class="carnet-card">
<div class="carnet-card__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
</div>
<h3 class="carnet-card__title">تذاكر يومية</h3>
<p class="carnet-card__desc">تذكرة سباحة حرة ليوم واحد. تُصدر من الاستقبال مع إيصال فوري وتسجيل مالي آلي.</p>
</div>
<div class="carnet-card">
<div class="carnet-card__icon">
<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 6v6l4 2"/></svg>
</div>
<h3 class="carnet-card__title">تاريخ انتهاء تلقائي</h3>
<p class="carnet-card__desc">الكارنيه ينتهي بعد 30 يوم من الشراء أو عند استهلاك كل الزيارات — أيهما أقرب.</p>
</div>
<div class="carnet-card">
<div class="carnet-card__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3 class="carnet-card__title">ربط بالبوابة الإلكترونية</h3>
<p class="carnet-card__desc">عند مرور الكارنيه على البوابة — يُسجل الحضور ويُخصم من الرصيد تلقائياً. لا تلاعب.</p>
</div>
</div>
<!-- Carnet usage example -->
<div style="margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);" data-reveal="200">
<div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap;">
<span style="font-weight: 700; font-size: var(--text-lg); color: var(--ink-primary);">مثال: كارنيه 10 زيارات</span>
<span class="badge badge--accent">نشط</span>
</div>
<div style="display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: var(--space-md);">
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">1</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">2</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">3</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">4</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">5</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">6</div>
<div style="aspect-ratio: 1; background: var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: white; font-size: var(--text-xs); font-weight: 700;">7</div>
<div style="aspect-ratio: 1; background: var(--color-accent-ghost); border: 2px dashed var(--color-accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--color-accent); font-size: var(--text-xs); font-weight: 700;">8</div>
<div style="aspect-ratio: 1; background: var(--bg-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink-muted); font-size: var(--text-xs);">9</div>
<div style="aspect-ratio: 1; background: var(--bg-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink-muted); font-size: var(--text-xs);">10</div>
</div>
<div style="display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-secondary);">
<span><strong style="color: var(--ink-primary);">7</strong> زيارات مستخدمة</span>
<span><strong style="color: var(--ink-primary);">3</strong> زيارات متبقية</span>
<span>تنتهي: <strong dir="ltr" style="color: var(--ink-primary);">2026/07/20</strong></span>
</div>
</div>
</div>
</section>
<!-- Financial Section -->
<section class="section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag" style="background: var(--color-primary-ghost); color: var(--color-primary-light); border-color: rgba(27,43,75,0.2);">الرؤية المالية</span>
<h2 class="section-header__title">اعرف ربحية كل حارة ووقت</h2>
<p class="section-header__desc">تسعير مختلف لكل حارة وكل وقت. إيرادات الإيجارات الخارجية منفصلة. تقارير ربحية شاملة.</p>
</div>
<div class="swim-feature" data-reveal="100">
<div class="swim-feature__text">
<h2>كل جنيه في مكانه الصحيح</h2>
<p>النظام يفصل بين إيرادات الاشتراكات، التذاكر اليومية، والإيجارات الخارجية. تعرف بالضبط كم تكسب من كل حارة ومن كل نوع نشاط.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تسعير مختلف: حارة VIP سعرها غير الحارة العادية</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="swim-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/financial-overview.png" alt="التقارير المالية لحمام السباحة" loading="lazy">
</div>
</div>
</div>
<!-- Pricing screenshot -->
<div style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="swim-feature swim-feature--reverse">
<div class="swim-feature__text">
<h2>تسعير ذكي لكل برنامج سباحة</h2>
<p>سعر مختلف لسباحة المبتدئين عن المتقدمين عن المنافسات. خصومات الأشقاء تحسب تلقائياً. العروض الموسمية تُطبّق بدون تدخل يدوي.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">سباحة مبتدئين — سعر مخفض</div>
<div class="module-detail__list-item">سباحة متوسط — سعر قياسي</div>
<div class="module-detail__list-item">سباحة متقدم ومنافسات — سعر متميز</div>
<div class="module-detail__list-item">خصم الأشقاء وخصم التسجيل المبكر تلقائياً</div>
</div>
</div>
<div class="swim-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/pricing.png" alt="تسعير برامج السباحة المختلفة" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Full System Section -->
<section class="section" style="background: var(--bg-muted);">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag">النظام الكامل</span>
<h2 class="section-header__title">السباحة جزء من نظام ERP كامل</h2>
<p class="section-header__desc">إدارة الحارات ليست كل شيء. El-Captain يدير أكاديميتك بالكامل — مشتركين، مالية، حضور، مخازن، موارد بشرية، وأكثر.</p>
</div>
<div class="swim-feature" data-reveal="100">
<div class="swim-feature__text">
<div class="module-detail__list">
<div class="module-detail__list-item">إدارة المشتركين وأولياء الأمور والمدربين</div>
<div class="module-detail__list-item">برامج تدريبية ومجموعات وتسجيل تلقائي</div>
<div class="module-detail__list-item">حضور رقمي مع إشعارات لولي الأمر</div>
<div class="module-detail__list-item">فواتير ومدفوعات وخطط تقسيط</div>
<div class="module-detail__list-item">محفظة رقمية لكل مشترك</div>
<div class="module-detail__list-item">إدارة المنتجات والمخازن (نظارات، بونيهات، مايوهات)</div>
<div class="module-detail__list-item">نقطة بيع (POS) للمبيعات اليومية</div>
<div class="module-detail__list-item">رواتب المدربين والموظفين</div>
<div class="module-detail__list-item">تقارير شاملة وتصدير Excel</div>
<div class="module-detail__list-item">صلاحيات دقيقة — كل موظف يرى فقط ما يخصه</div>
</div>
</div>
<div class="swim-feature__visual">
<div class="screenshot screenshot--framed">
<img src="screenshots/app/dashboard.png" alt="لوحة تحكم النظام الكامل" loading="lazy">
</div>
</div>
</div>
<!-- Stats -->
<div class="swim-stats" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="swim-stat">
<div class="swim-stat__number" dir="ltr">+14</div>
<div class="swim-stat__label">وحدة متكاملة</div>
</div>
<div class="swim-stat">
<div class="swim-stat__number" dir="ltr">+250</div>
<div class="swim-stat__label">شاشة إدارية</div>
</div>
<div class="swim-stat">
<div class="swim-stat__number">100%</div>
<div class="swim-stat__label">عربي بالكامل</div>
</div>
<div class="swim-stat">
<div class="swim-stat__number">0</div>
<div class="swim-stat__label">تضاربات في الحجوزات</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="swim-cta">
<div class="container" data-reveal>
<h2 class="swim-cta__title">جاهز تودّع فوضى الحارات؟</h2>
<p class="swim-cta__desc">احجز عرض خاص لأكاديميات السباحة. نريك النظام على حارات وكروت مشابهة لحمام سباحتك — مجاناً بدون أي التزام.</p>
<div class="swim-cta__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض خاص لأكاديميات السباحة</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--secondary btn--large" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-inline-end: 6px;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__brand-logo">
<span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span>
</a>
<p class="footer__brand-desc">نظام إدارة متكامل مبني خصيصاً للأكاديميات الرياضية في مصر. يغطي كل العمليات من التسجيل حتى التقارير المالية.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a>
<a href="features.html#programs" class="footer__link">الأنشطة والبرامج</a>
<a href="features.html#finance" 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>
<h4 class="footer__col-title">روابط سريعة</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<div class="footer__links">
<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 class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div>
</div>
</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>
</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