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 @@
top: 0;
inset-inline: 0;
z-index: var(--z-sticky);
background-color: transparent;
background-color: var(--bg-surface);
border-bottom: 1px solid transparent;
padding-block: var(--space-sm);
padding-block: var(--space-xs);
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 {
background-color: var(--bg-dark-deeper);
border-bottom-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
padding-block: var(--space-xs);
border-bottom-color: var(--border-subtle);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.nav__inner {
......@@ -70,7 +67,7 @@
.nav__logo-text {
font-size: var(--text-lg);
font-weight: 800;
color: var(--ink-on-dark);
color: var(--color-primary);
letter-spacing: var(--tracking-snug);
line-height: 1;
}
......@@ -100,7 +97,7 @@
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-on-dark-muted);
color: var(--ink-secondary);
border-radius: var(--radius-sm);
text-decoration: none;
transition:
......@@ -110,12 +107,12 @@
}
.nav__link:hover {
color: var(--ink-on-dark);
background-color: rgba(255, 255, 255, 0.06);
color: var(--ink-primary);
background-color: var(--bg-muted);
}
.nav__link--active {
color: var(--ink-on-dark);
color: var(--ink-primary);
font-weight: 600;
}
......@@ -178,9 +175,9 @@
height: 2.5rem;
align-items: center;
justify-content: center;
color: var(--ink-on-dark);
color: var(--ink-primary);
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.15);
border: 1px solid var(--border-subtle);
background-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
......@@ -189,8 +186,8 @@
}
.nav__toggle:hover {
background-color: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.25);
background-color: var(--bg-muted);
border-color: var(--border-default);
}
.nav__toggle svg {
......
public/css/home.css
View file @ 4a7360fa
/* ============================================================
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 {
min-height: 85dvh;
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;
padding-block: calc(var(--nav-height) + 2.5rem) 2.5rem;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(8, 145, 178, 0.07), transparent);
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 1;
max-width: 720px;
.hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.hero__title {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 900;
color: var(--ink-on-dark);
line-height: 1.08;
letter-spacing: -0.025em;
margin-block-end: var(--space-md);
text-wrap: balance;
.hero__text h1 {
font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--ink-primary);
margin-block-end: 0.75rem;
}
.hero__sub {
font-size: var(--text-xl);
color: var(--ink-on-dark-muted);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl);
max-width: 44ch;
.hero__text p {
font-size: 0.938rem;
color: var(--ink-secondary);
line-height: 1.6;
margin-block-end: 1.25rem;
max-width: 40ch;
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--space-md);
gap: 0.625rem;
flex-wrap: wrap;
}
.hero__btn-primary {
display: inline-flex;
align-items: center;
padding: 0.875rem 2rem;
background: var(--color-accent);
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__img {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md);
}
.hero__btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.45);
color: var(--ink-on-dark);
.hero__img img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.hero {
min-height: auto;
padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-xl);
.hero__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero__title {
font-size: clamp(2rem, 7vw, 3rem);
.hero__img {
max-width: 480px;
}
}
/* --- Showcase (cinematic screenshot on darker bg) ---------------- */
.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);
}
/* --- Modules: tight 3-col grid ----------------------------------- */
.showcase__frame img {
width: 100%;
height: auto;
display: block;
.modules {
padding-block: 3rem;
border-top: 1px solid var(--border-subtle);
}
/* --- Modules (dark surface variation) ---------------------------- */
.modules {
padding-block: var(--space-section);
background: var(--bg-dark-deeper);
.modules__heading {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 1.5rem;
}
.modules__layout {
.modules__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-2xl);
align-items: start;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.modules__title {
font-size: var(--text-4xl);
font-weight: 900;
color: var(--ink-on-dark);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
margin-block-end: var(--space-sm);
.mod {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.modules__desc {
font-size: var(--text-lg);
color: var(--ink-on-dark-muted);
line-height: var(--leading-relaxed);
max-width: 36ch;
.mod:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
}
.modules__nav {
display: flex;
flex-direction: column;
.mod svg {
flex-shrink: 0;
color: var(--color-accent);
margin-block-start: 2px;
}
.modules__nav a {
display: block;
padding: var(--space-md) 0;
font-size: var(--text-lg);
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
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);
.mod h3 {
font-size: 0.875rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 0.125rem;
line-height: 1.3;
}
.modules__nav a:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.08);
.mod p {
font-size: 0.8125rem;
color: var(--ink-muted);
line-height: 1.5;
max-width: none;
}
.modules__nav a:hover {
color: var(--color-accent-light);
padding-inline-start: var(--space-sm);
@media (max-width: 900px) {
.modules__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.modules__layout {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (max-width: 520px) {
.modules__grid { grid-template-columns: 1fr; }
}
/* --- Screens (staggered grid on slightly lighter dark) ----------- */
/* --- Screenshots: horizontal row of small thumbnails ------------- */
.screens {
padding-block: var(--space-section);
background: var(--bg-dark);
padding-block: 3rem;
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;
grid-template-columns: 1.3fr 0.7fr;
grid-template-rows: auto auto;
gap: var(--space-lg);
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
}
.screens__item {
.screens__thumb {
margin: 0;
border-radius: var(--radius-lg);
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
transition: transform 150ms ease, box-shadow 150ms ease;
}
.screens__item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
.screens__thumb:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.screens__item img {
.screens__thumb img {
width: 100%;
height: auto;
display: block;
}
.screens__item figcaption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
.screens__thumb figcaption {
padding: 0.375rem 0.5rem;
font-size: 0.6875rem;
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 {
grid-column: 1;
@media (max-width: 900px) {
.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) {
grid-column: 2;
/* --- Why: compact 2x2 grid --------------------------------------- */
.why {
padding-block: 3rem;
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 768px) {
.screens__grid {
grid-template-columns: 1fr;
}
.screens__item--large,
.screens__item:not(.screens__item--large) {
grid-column: 1;
}
.why h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 1.25rem;
}
.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 {
padding-block: var(--space-section);
background: var(--bg-dark-deeper);
.why__item strong {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 0.25rem;
}
.diff__statement {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
font-weight: 800;
color: var(--ink-on-dark);
line-height: 1.3;
max-width: 680px;
text-wrap: balance;
.why__item span {
font-size: 0.8125rem;
color: var(--ink-secondary);
line-height: 1.5;
}
@media (max-width: 520px) {
.why__grid { grid-template-columns: 1fr; }
}
/* --- CTA --------------------------------------------------------- */
/* --- CTA: minimal ----------------------------------------------- */
.cta {
padding-block: var(--space-section);
padding-block: 3rem;
background: var(--bg-dark);
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cta__inner {
text-align: center;
}
.cta__text {
font-size: var(--text-2xl);
.cta h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-on-dark);
margin-block-end: var(--space-lg);
margin-block-end: 1.25rem;
}
.cta__actions {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
gap: 0.75rem;
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 {
background: var(--color-whatsapp-dark);
color: #fff;
transform: translateY(-2px);
}
/* --- Footer: single row, compact --------------------------------- */
.cta__wa svg {
flex-shrink: 0;
.footer {
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 -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.hero__title {
animation: rise 0.8s var(--ease-out-expo) both;
}
.footer__links-row {
display: flex;
gap: 1.25rem;
}
.hero__sub {
animation: rise 0.8s 0.12s var(--ease-out-expo) both;
}
.footer__links-row a {
font-size: 0.8125rem;
color: var(--ink-secondary);
text-decoration: none;
transition: color 120ms ease;
}
.hero__actions {
animation: rise 0.8s 0.24s var(--ease-out-expo) both;
}
.footer__links-row a:hover {
color: var(--color-accent);
}
.showcase__frame {
animation: rise 0.9s 0.35s var(--ease-out-expo) both;
}
.footer__copy {
font-size: 0.75rem;
color: var(--ink-muted);
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
@media (max-width: 600px) {
.footer__inner {
flex-direction: column;
text-align: center;
}
}
public/index.html
View file @ 4a7360fa
......@@ -4,14 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body style="background-color: #1B2B4B;">
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
......@@ -32,124 +32,166 @@
</div>
</nav>
<!-- Hero: dark, full-viewport, the navy owns this -->
<main>
<!-- Hero: compact, text + small screenshot side by side -->
<section class="hero">
<div class="container hero__inner">
<h1 class="hero__title">غرفة العمليات<br>لأكاديميتك الرياضية.</h1>
<p class="hero__sub">14 وحدة. من التسجيل للميزانية. عربي. مصري. جاهز.</p>
<div class="container hero__grid">
<div class="hero__text">
<h1>نظام إدارة متكامل<br>للأكاديميات الرياضية</h1>
<p>مشتركين، مالية، حضور، جداول، مخازن، وموارد بشرية. 14 وحدة في نظام واحد. عربي بالكامل.</p>
<div class="hero__actions">
<a href="contact.html" class="hero__btn-primary">جرّب 10 أيام مجاناً</a>
<a href="features.html" class="hero__btn-ghost">شوف المزايا</a>
<a href="contact.html" class="btn btn--primary">جرّب مجاناً</a>
<a href="features.html" class="btn btn--secondary">المزايا</a>
</div>
</div>
</section>
<!-- Product: one large screenshot, cinematic -->
<section class="showcase">
<div class="container">
<figure class="showcase__frame">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال — الشاشة الرئيسية للنظام" width="1200" height="750">
</figure>
<div class="hero__img">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" width="600" height="375">
</div>
</div>
</section>
<!-- Modules: two columns, text + list -->
<!-- Modules: compact grid, no fluff -->
<section class="modules">
<div class="container modules__layout">
<div class="modules__intro">
<h2 class="modules__title">يغطي كل شيء.</h2>
<p class="modules__desc">من أول ما المشترك يسجّل — لحد ما تقفل الميزانية آخر الشهر.</p>
</div>
<nav class="modules__nav" aria-label="وحدات النظام">
<a href="features.html#participants">المشتركين وأولياء الأمور</a>
<a href="features.html#programs">البرامج والمجموعات والجداول</a>
<a href="features.html#finance">المالية — فواتير، أقساط، خزينة</a>
<a href="features.html#attendance">الحضور والغياب</a>
<a href="features.html#inventory">المخازن وأوامر الشراء</a>
<a href="features.html#hr">الموارد البشرية والمرتبات</a>
</nav>
<div class="container">
<h2 class="modules__heading">كل ما تحتاجه في مكان واحد</h2>
<div class="modules__grid">
<div class="mod">
<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>
<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="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>
<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>
</section>
<!-- More screenshots in a staggered grid -->
<!-- Screenshots: small inline thumbnails -->
<section class="screens">
<div class="container">
<div class="screens__grid">
<figure class="screens__item screens__item--large">
<h2 class="screens__heading">من داخل النظام</h2>
<div class="screens__row">
<figure class="screens__thumb">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<figcaption>الجدول الأسبوعي</figcaption>
</figure>
<figure class="screens__item">
<figure class="screens__thumb">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<figcaption>النظرة المالية</figcaption>
</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">
<figcaption>الحضور</figcaption>
</figure>
<figure class="screens__item screens__item--large">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<figcaption>المشتركين</figcaption>
<figure class="screens__thumb">
<img src="screenshots/app/groups.png" alt="المجموعات" loading="lazy">
<figcaption>المجموعات</figcaption>
</figure>
<figure class="screens__thumb">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<figcaption>الفواتير</figcaption>
</figure>
</div>
</div>
</section>
<!-- Differentiator -->
<section class="diff">
<!-- Why: short, no padding waste -->
<section class="why">
<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>
</section>
<!-- CTA -->
<section class="cta">
<div class="container cta__inner">
<p class="cta__text">جرّب النظام. 10 أيام. بدون بطاقة.</p>
<h2>جرّب النظام مجاناً — 10 أيام بدون بطاقة</h2>
<div class="cta__actions">
<a href="contact.html" class="hero__btn-primary">ابدأ التجربة</a>
<a href="https://wa.me/201XXXXXXXXX" class="cta__wa" 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>
<a href="contact.html" class="btn btn--primary btn--lg">ابدأ التجربة</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--whatsapp" target="_blank" rel="noopener">
<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
</a>
</div>
</div>
</section>
<!-- Footer -->
</main>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="container footer__inner">
<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 href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">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>
</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 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 class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain</span>
</div>
</div>
</footer>
<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