Skip to content

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

Complete rebuild: compact Stripe/Linear density, small images, tight spacing 

Previous versions were bloated — huge images, massive padding, wasted
space. New approach: 3-col module grid, 6-col screenshot thumbnails,
side-by-side hero, everything above the fold. Nav back to white/light.
No more oversized cinematic nonsense.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent f3f21863
Show whitespace changes
Inline Side-by-side
Showing with 347 additions and 370 deletions
public/css/components.css
View file @ 4a7360fa
...@@ -13,22 +13,19 @@ ...@@ -13,22 +13,19 @@
top: 0; top: 0;
inset-inline: 0; inset-inline: 0;
z-index: var(--z-sticky); z-index: var(--z-sticky);
background-color: transparent; background-color: var(--bg-surface);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
padding-block: var(--space-sm); padding-block: var(--space-xs);
transition: transition:
border-color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out),
box-shadow 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); background-color var(--duration-slow) var(--ease-out);
} }
/* Added by JS on scroll */ /* Added by JS on scroll */
.nav--scrolled { .nav--scrolled {
background-color: var(--bg-dark-deeper); border-bottom-color: var(--border-subtle);
border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 4px rgba(0,0,0,0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
padding-block: var(--space-xs);
} }
.nav__inner { .nav__inner {
...@@ -70,7 +67,7 @@ ...@@ -70,7 +67,7 @@
.nav__logo-text { .nav__logo-text {
font-size: var(--text-lg); font-size: var(--text-lg);
font-weight: 800; font-weight: 800;
color: var(--ink-on-dark); color: var(--color-primary);
letter-spacing: var(--tracking-snug); letter-spacing: var(--tracking-snug);
line-height: 1; line-height: 1;
} }
...@@ -100,7 +97,7 @@ ...@@ -100,7 +97,7 @@
padding: var(--space-xs) var(--space-sm); padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: 500; font-weight: 500;
color: var(--ink-on-dark-muted); color: var(--ink-secondary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
text-decoration: none; text-decoration: none;
transition: transition:
...@@ -110,12 +107,12 @@ ...@@ -110,12 +107,12 @@
} }
.nav__link:hover { .nav__link:hover {
color: var(--ink-on-dark); color: var(--ink-primary);
background-color: rgba(255, 255, 255, 0.06); background-color: var(--bg-muted);
} }
.nav__link--active { .nav__link--active {
color: var(--ink-on-dark); color: var(--ink-primary);
font-weight: 600; font-weight: 600;
} }
...@@ -178,9 +175,9 @@ ...@@ -178,9 +175,9 @@
height: 2.5rem; height: 2.5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--ink-on-dark); color: var(--ink-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid var(--border-subtle);
background-color: transparent; background-color: transparent;
transition: transition:
background-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
...@@ -189,8 +186,8 @@ ...@@ -189,8 +186,8 @@
} }
.nav__toggle:hover { .nav__toggle:hover {
background-color: rgba(255, 255, 255, 0.06); background-color: var(--bg-muted);
border-color: rgba(255, 255, 255, 0.25); border-color: var(--border-default);
} }
.nav__toggle svg { .nav__toggle svg {
......
public/css/home.css
View file @ 4a7360fa
/* ============================================================ /* ============================================================
El Captain — Homepage El Captain — Homepage
Commanding. Exclusive. Dark throughout. Operations center. Compact. Dense. Stripe/Linear energy.
Maximum info above the fold, tight spacing, small visuals.
============================================================ */ ============================================================ */
/* --- Hero -------------------------------------------------------- */ /* --- Hero: side-by-side, compact --------------------------------- */
.hero { .hero {
min-height: 85dvh; padding-block: calc(var(--nav-height) + 2.5rem) 2.5rem;
display: flex;
align-items: center;
padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-2xl);
background: var(--bg-dark);
position: relative;
overflow: hidden;
} }
.hero::before { .hero__grid {
content: ''; display: grid;
position: absolute; grid-template-columns: 1fr 1fr;
inset: 0; gap: 2rem;
background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(8, 145, 178, 0.07), transparent); align-items: center;
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 1;
max-width: 720px;
} }
.hero__title { .hero__text h1 {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
font-weight: 900; font-weight: 800;
color: var(--ink-on-dark); line-height: 1.2;
line-height: 1.08; color: var(--ink-primary);
letter-spacing: -0.025em; margin-block-end: 0.75rem;
margin-block-end: var(--space-md);
text-wrap: balance;
} }
.hero__sub { .hero__text p {
font-size: var(--text-xl); font-size: 0.938rem;
color: var(--ink-on-dark-muted); color: var(--ink-secondary);
line-height: var(--leading-relaxed); line-height: 1.6;
margin-block-end: var(--space-xl); margin-block-end: 1.25rem;
max-width: 44ch; max-width: 40ch;
} }
.hero__actions { .hero__actions {
display: flex; display: flex;
align-items: center; gap: 0.625rem;
gap: var(--space-md);
flex-wrap: wrap; flex-wrap: wrap;
} }
.hero__btn-primary { .hero__img {
display: inline-flex; border-radius: 8px;
align-items: center; overflow: hidden;
padding: 0.875rem 2rem; border: 1px solid var(--border-subtle);
background: var(--color-accent); box-shadow: var(--shadow-md);
color: #fff;
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--btn-radius);
text-decoration: none;
box-shadow: 0 4px 18px rgba(8, 145, 178, 0.3);
transition: background var(--duration-normal) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.hero__btn-primary:hover {
background: var(--color-accent-light);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(8, 145, 178, 0.35);
}
.hero__btn-ghost {
display: inline-flex;
align-items: center;
padding: 0.875rem 2rem;
background: transparent;
color: var(--ink-on-dark-muted);
font-weight: 600;
font-size: var(--text-base);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--btn-radius);
text-decoration: none;
transition: border-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out);
} }
.hero__btn-ghost:hover { .hero__img img {
border-color: rgba(255, 255, 255, 0.45); width: 100%;
color: var(--ink-on-dark); height: auto;
display: block;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero { .hero__grid {
min-height: auto; grid-template-columns: 1fr;
padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-xl); gap: 1.5rem;
} }
.hero__title { .hero__img {
font-size: clamp(2rem, 7vw, 3rem); max-width: 480px;
} }
} }
/* --- Showcase (cinematic screenshot on darker bg) ---------------- */ /* --- Modules: tight 3-col grid ----------------------------------- */
.showcase {
padding-block: var(--space-xl) var(--space-section);
background: var(--bg-dark);
}
.showcase__frame {
margin: 0;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.5),
0 12px 32px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.showcase__frame img { .modules {
width: 100%; padding-block: 3rem;
height: auto; border-top: 1px solid var(--border-subtle);
display: block;
} }
.modules__heading {
/* --- Modules (dark surface variation) ---------------------------- */ font-size: 1.25rem;
font-weight: 700;
.modules { color: var(--ink-primary);
padding-block: var(--space-section); margin-block-end: 1.5rem;
background: var(--bg-dark-deeper);
} }
.modules__layout { .modules__grid {
display: grid; display: grid;
grid-template-columns: 1fr 1.2fr; grid-template-columns: repeat(3, 1fr);
gap: var(--space-2xl); gap: 1rem;
align-items: start;
} }
.modules__title { .mod {
font-size: var(--text-4xl); display: flex;
font-weight: 900; align-items: flex-start;
color: var(--ink-on-dark); gap: 0.75rem;
line-height: var(--leading-tight); padding: 0.875rem;
letter-spacing: -0.02em; border: 1px solid var(--border-subtle);
margin-block-end: var(--space-sm); border-radius: 8px;
background: var(--bg-surface);
transition: border-color 150ms ease, box-shadow 150ms ease;
} }
.modules__desc { .mod:hover {
font-size: var(--text-lg); border-color: var(--border-accent);
color: var(--ink-on-dark-muted); box-shadow: var(--shadow-sm);
line-height: var(--leading-relaxed);
max-width: 36ch;
} }
.modules__nav { .mod svg {
display: flex; flex-shrink: 0;
flex-direction: column; color: var(--color-accent);
margin-block-start: 2px;
} }
.modules__nav a { .mod h3 {
display: block; font-size: 0.875rem;
padding: var(--space-md) 0; font-weight: 700;
font-size: var(--text-lg); color: var(--ink-primary);
font-weight: 600; margin-block-end: 0.125rem;
color: rgba(255, 255, 255, 0.75); line-height: 1.3;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: color var(--duration-fast) var(--ease-out),
padding-inline-start var(--duration-normal) var(--ease-out-quart);
} }
.modules__nav a:first-child { .mod p {
border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8125rem;
color: var(--ink-muted);
line-height: 1.5;
max-width: none;
} }
.modules__nav a:hover { @media (max-width: 900px) {
color: var(--color-accent-light); .modules__grid { grid-template-columns: repeat(2, 1fr); }
padding-inline-start: var(--space-sm);
} }
@media (max-width: 520px) {
@media (max-width: 768px) { .modules__grid { grid-template-columns: 1fr; }
.modules__layout {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
} }
/* --- Screens (staggered grid on slightly lighter dark) ----------- */ /* --- Screenshots: horizontal row of small thumbnails ------------- */
.screens { .screens {
padding-block: var(--space-section); padding-block: 3rem;
background: var(--bg-dark); background: var(--bg-muted);
}
.screens__heading {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 1.25rem;
} }
.screens__grid { .screens__row {
display: grid; display: grid;
grid-template-columns: 1.3fr 0.7fr; grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto; gap: 0.75rem;
gap: var(--space-lg);
} }
.screens__item { .screens__thumb {
margin: 0; margin: 0;
border-radius: var(--radius-lg); border-radius: 6px;
overflow: hidden; overflow: hidden;
background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
border: 1px solid rgba(255, 255, 255, 0.06); background: var(--bg-surface);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: transform 150ms ease, box-shadow 150ms ease;
transition: transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out);
} }
.screens__item:hover { .screens__thumb:hover {
transform: translateY(-4px); transform: translateY(-2px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-md);
} }
.screens__item img { .screens__thumb img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.screens__item figcaption { .screens__thumb figcaption {
padding: var(--space-sm) var(--space-md); padding: 0.375rem 0.5rem;
font-size: var(--text-sm); font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
color: var(--ink-on-dark-muted); color: var(--ink-muted);
text-align: center;
border-top: 1px solid var(--border-subtle);
} }
.screens__item--large { @media (max-width: 900px) {
grid-column: 1; .screens__row { grid-template-columns: repeat(3, 1fr); }
} }
@media (max-width: 520px) {
.screens__row { grid-template-columns: repeat(2, 1fr); }
}
.screens__item:not(.screens__item--large) { /* --- Why: compact 2x2 grid --------------------------------------- */
grid-column: 2;
.why {
padding-block: 3rem;
border-top: 1px solid var(--border-subtle);
} }
@media (max-width: 768px) { .why h2 {
.screens__grid { font-size: 1.25rem;
grid-template-columns: 1fr; font-weight: 700;
} color: var(--ink-primary);
.screens__item--large, margin-block-end: 1.25rem;
.screens__item:not(.screens__item--large) {
grid-column: 1;
}
} }
.why__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* --- Differentiator ---------------------------------------------- */ .why__item {
padding: 1rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface);
}
.diff { .why__item strong {
padding-block: var(--space-section); display: block;
background: var(--bg-dark-deeper); font-size: 0.875rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 0.25rem;
} }
.diff__statement { .why__item span {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); font-size: 0.8125rem;
font-weight: 800; color: var(--ink-secondary);
color: var(--ink-on-dark); line-height: 1.5;
line-height: 1.3; }
max-width: 680px;
text-wrap: balance; @media (max-width: 520px) {
.why__grid { grid-template-columns: 1fr; }
} }
/* --- CTA --------------------------------------------------------- */ /* --- CTA: minimal ----------------------------------------------- */
.cta { .cta {
padding-block: var(--space-section); padding-block: 3rem;
background: var(--bg-dark); background: var(--bg-dark);
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cta__inner {
text-align: center; text-align: center;
} }
.cta__text { .cta h2 {
font-size: var(--text-2xl); font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: var(--ink-on-dark); color: var(--ink-on-dark);
margin-block-end: var(--space-lg); margin-block-end: 1.25rem;
} }
.cta__actions { .cta__actions {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; gap: 0.75rem;
gap: var(--space-md);
flex-wrap: wrap; flex-wrap: wrap;
} }
.cta__wa {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.875rem 2rem;
background: var(--color-whatsapp);
color: #fff;
font-weight: 600;
font-size: var(--text-base);
border-radius: var(--btn-radius);
text-decoration: none;
transition: background var(--duration-normal) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.cta__wa:hover { /* --- Footer: single row, compact --------------------------------- */
background: var(--color-whatsapp-dark);
color: #fff;
transform: translateY(-2px);
}
.cta__wa svg { .footer {
flex-shrink: 0; padding-block: 1.5rem;
border-top: 1px solid var(--border-subtle);
} }
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
/* --- Page-load choreography -------------------------------------- */ .footer__links-row {
display: flex;
@media (prefers-reduced-motion: no-preference) { gap: 1.25rem;
.hero__title { }
animation: rise 0.8s var(--ease-out-expo) both;
}
.hero__sub { .footer__links-row a {
animation: rise 0.8s 0.12s var(--ease-out-expo) both; font-size: 0.8125rem;
} color: var(--ink-secondary);
text-decoration: none;
transition: color 120ms ease;
}
.hero__actions { .footer__links-row a:hover {
animation: rise 0.8s 0.24s var(--ease-out-expo) both; color: var(--color-accent);
} }
.showcase__frame { .footer__copy {
animation: rise 0.9s 0.35s var(--ease-out-expo) both; font-size: 0.75rem;
} color: var(--ink-muted);
} }
@keyframes rise { @media (max-width: 600px) {
from { .footer__inner {
opacity: 0; flex-direction: column;
transform: translateY(28px); text-align: center;
}
to {
opacity: 1;
transform: translateY(0);
} }
} }
public/index.html
View file @ 4a7360fa
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
<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="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن. مبني للسوق المصري."> <meta name="description" content="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن.">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/"> <link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/">
<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">
<link rel="stylesheet" href="css/home.css"> <link rel="stylesheet" href="css/home.css">
</head> </head>
<body style="background-color: #1B2B4B;"> <body>
<nav class="nav" aria-label="التنقل الرئيسي"> <nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner"> <div class="container nav__inner">
...@@ -32,124 +32,166 @@ ...@@ -32,124 +32,166 @@
</div> </div>
</nav> </nav>
<!-- Hero: dark, full-viewport, the navy owns this --> <main>
<!-- Hero: compact, text + small screenshot side by side -->
<section class="hero"> <section class="hero">
<div class="container hero__inner"> <div class="container hero__grid">
<h1 class="hero__title">غرفة العمليات<br>لأكاديميتك الرياضية.</h1> <div class="hero__text">
<p class="hero__sub">14 وحدة. من التسجيل للميزانية. عربي. مصري. جاهز.</p> <h1>نظام إدارة متكامل<br>للأكاديميات الرياضية</h1>
<p>مشتركين، مالية، حضور، جداول، مخازن، وموارد بشرية. 14 وحدة في نظام واحد. عربي بالكامل.</p>
<div class="hero__actions"> <div class="hero__actions">
<a href="contact.html" class="hero__btn-primary">جرّب 10 أيام مجاناً</a> <a href="contact.html" class="btn btn--primary">جرّب مجاناً</a>
<a href="features.html" class="hero__btn-ghost">شوف المزايا</a> <a href="features.html" class="btn btn--secondary">المزايا</a>
</div> </div>
</div> </div>
</section> <div class="hero__img">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" width="600" height="375">
<!-- Product: one large screenshot, cinematic --> </div>
<section class="showcase">
<div class="container">
<figure class="showcase__frame">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال — الشاشة الرئيسية للنظام" width="1200" height="750">
</figure>
</div> </div>
</section> </section>
<!-- Modules: two columns, text + list --> <!-- Modules: compact grid, no fluff -->
<section class="modules"> <section class="modules">
<div class="container modules__layout"> <div class="container">
<div class="modules__intro"> <h2 class="modules__heading">كل ما تحتاجه في مكان واحد</h2>
<h2 class="modules__title">يغطي كل شيء.</h2> <div class="modules__grid">
<p class="modules__desc">من أول ما المشترك يسجّل — لحد ما تقفل الميزانية آخر الشهر.</p> <div class="mod">
</div> <svg width="20" height="20" 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>
<nav class="modules__nav" aria-label="وحدات النظام"> <div>
<a href="features.html#participants">المشتركين وأولياء الأمور</a> <h3>المشتركين</h3>
<a href="features.html#programs">البرامج والمجموعات والجداول</a> <p>تسجيل، ملفات، أولياء أمور، تصنيفات</p>
<a href="features.html#finance">المالية — فواتير، أقساط، خزينة</a> </div>
<a href="features.html#attendance">الحضور والغياب</a> </div>
<a href="features.html#inventory">المخازن وأوامر الشراء</a> <div class="mod">
<a href="features.html#hr">الموارد البشرية والمرتبات</a> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
</nav> <div>
<h3>البرامج والجداول</h3>
<p>مجموعات، جدول أسبوعي، حصص تلقائية</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
<div>
<h3>المالية</h3>
<p>فواتير، أقساط، خزينة، محافظ، قيد مزدوج</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 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>
<h3>الحضور</h3>
<p>تسجيل تلقائي، تأخير، غياب، تنبيهات</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" 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>
<h3>المخازن</h3>
<p>منتجات، حركات، جرد، أوامر شراء</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
<div>
<h3>الموارد البشرية</h3>
<p>موظفين، مدربين، مرتبات، تقييمات</p>
</div>
</div>
</div>
</div> </div>
</section> </section>
<!-- More screenshots in a staggered grid --> <!-- Screenshots: small inline thumbnails -->
<section class="screens"> <section class="screens">
<div class="container"> <div class="container">
<div class="screens__grid"> <h2 class="screens__heading">من داخل النظام</h2>
<figure class="screens__item screens__item--large"> <div class="screens__row">
<figure class="screens__thumb">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy"> <img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<figcaption>الجدول الأسبوعي</figcaption> <figcaption>الجدول الأسبوعي</figcaption>
</figure> </figure>
<figure class="screens__item"> <figure class="screens__thumb">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy"> <img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<figcaption>النظرة المالية</figcaption> <figcaption>النظرة المالية</figcaption>
</figure> </figure>
<figure class="screens__item"> <figure class="screens__thumb">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<figcaption>المشتركين</figcaption>
</figure>
<figure class="screens__thumb">
<img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy"> <img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<figcaption>الحضور</figcaption> <figcaption>الحضور</figcaption>
</figure> </figure>
<figure class="screens__item screens__item--large"> <figure class="screens__thumb">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy"> <img src="screenshots/app/groups.png" alt="المجموعات" loading="lazy">
<figcaption>المشتركين</figcaption> <figcaption>المجموعات</figcaption>
</figure>
<figure class="screens__thumb">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<figcaption>الفواتير</figcaption>
</figure> </figure>
</div> </div>
</div> </div>
</section> </section>
<!-- Differentiator --> <!-- Why: short, no padding waste -->
<section class="diff"> <section class="why">
<div class="container"> <div class="container">
<h2 class="diff__statement">مش نظام محاسبة تم تعديله.<br>مبني من الصفر للأكاديميات الرياضية.</h2> <h2>ليه El-Captain؟</h2>
<div class="why__grid">
<div class="why__item">
<strong>مبني للأكاديميات</strong>
<span>مش نظام محاسبة معدّل. مبني من الصفر للرياضة.</span>
</div>
<div class="why__item">
<strong>عربي 100%</strong>
<span>واجهة عربية كاملة، RTL، مصطلحات السوق المصري.</span>
</div>
<div class="why__item">
<strong>14 وحدة متكاملة</strong>
<span>كل شيء متصل — التسجيل يولّد الفاتورة والحضور تلقائياً.</span>
</div>
<div class="why__item">
<strong>Cloud — بدون سيرفر</strong>
<span>ادخل من أي جهاز. بياناتك آمنة ومحفوظة.</span>
</div>
</div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA -->
<section class="cta"> <section class="cta">
<div class="container cta__inner"> <div class="container cta__inner">
<p class="cta__text">جرّب النظام. 10 أيام. بدون بطاقة.</p> <h2>جرّب النظام مجاناً — 10 أيام بدون بطاقة</h2>
<div class="cta__actions"> <div class="cta__actions">
<a href="contact.html" class="hero__btn-primary">ابدأ التجربة</a> <a href="contact.html" class="btn btn--primary btn--lg">ابدأ التجربة</a>
<a href="https://wa.me/201XXXXXXXXX" class="cta__wa" target="_blank" rel="noopener"> <a href="https://wa.me/201XXXXXXXXX" class="btn 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> <svg width="18" height="18" 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 WhatsApp
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> </main>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container footer__inner">
<div class="footer__grid">
<div class="footer__brand"> <div class="footer__brand">
<a href="/" class="footer__brand-logo"> <a href="/" class="nav__logo">
<span class="footer__brand-mark">EC</span> <span class="nav__logo-mark">EC</span>
<span class="footer__brand-name">El-Captain</span> <span class="nav__logo-text">El-Captain</span>
</a> </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>
</div>
</div>
<div>
<h4 class="footer__col-title">صفحات</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="swimming.html" class="footer__link">السباحة</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div> </div>
<div class="footer__links-row">
<a href="features.html">المزايا</a>
<a href="pricing.html">التسعير</a>
<a href="swimming.html">السباحة</a>
<a href="contact.html">تواصل معنا</a>
</div> </div>
<div class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain</span> <span class="footer__copy">&copy; 2024 El-Captain</span>
</div> </div>
</div>
</footer> </footer>
<a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="WhatsApp"> <a href="https://wa.me/201XXXXXXXXX" class="whatsapp-fab" target="_blank" rel="noopener" aria-label="WhatsApp">
......
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