Skip to content

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

Redesign homepage: dark hero, bold typography, cinematic screenshots 

Kill the AI-template feel entirely. Navy hero that owns the viewport,
900-weight type at dramatic scale, staggered screenshot grid, page-load
choreography, and a differentiator statement with actual conviction.
No more off-white-with-rounded-cards generic SaaS energy.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 9504dd55
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 298 deletions
public/css/home.css
View file @ e3ac9e07
/* ============================================================ /* ============================================================
El Captain — Homepage El Captain — Homepage
Minimal. Confident. Let the product speak. Commanding. Exclusive. Operations center energy.
============================================================ */ ============================================================ */
/* --- Hero -------------------------------------------------------- */ /* --- Hero -------------------------------------------------------- */
.hero { .hero {
min-height: calc(100dvh - var(--nav-height)); min-height: 80dvh;
display: flex; display: flex;
align-items: center; align-items: center;
padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-2xl); padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-2xl);
background: var(--bg-body); background: var(--bg-dark);
position: relative;
overflow: hidden;
} }
.hero__grid { .hero::before {
display: grid; content: '';
grid-template-columns: 1fr 1.4fr; position: absolute;
gap: var(--space-2xl); inset: 0;
align-items: center; background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(8, 145, 178, 0.06), transparent);
max-width: var(--container-max); pointer-events: none;
margin-inline: auto;
padding-inline: var(--space-lg);
} }
.hero__content { .hero__inner {
display: flex; position: relative;
flex-direction: column; z-index: 1;
gap: 0; max-width: 720px;
} }
.hero__title { .hero__title {
font-size: var(--text-4xl); font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 800; font-weight: 900;
color: var(--ink-primary); color: var(--ink-on-dark);
line-height: var(--leading-tight); line-height: 1.1;
letter-spacing: -0.02em;
margin-block-end: var(--space-md); margin-block-end: var(--space-md);
text-wrap: balance;
} }
.hero__desc { .hero__sub {
font-size: var(--text-lg); font-size: var(--text-lg);
color: var(--ink-secondary); color: var(--ink-on-dark-muted);
line-height: var(--leading-relaxed); line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl); margin-block-end: var(--space-xl);
max-width: 42ch; max-width: 48ch;
} }
.hero__actions { .hero__actions {
...@@ -52,111 +54,85 @@ ...@@ -52,111 +54,85 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.hero__visual { .hero__btn-primary {
position: relative; display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-lg);
background: var(--color-accent);
color: #fff;
font-weight: 700;
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);
} }
.hero__screenshot { .hero__btn-primary:hover {
border-radius: var(--radius-xl); background: var(--color-accent-light);
overflow: hidden; transform: translateY(-1px);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
} }
.hero__screenshot img { .hero__btn-ghost {
width: 100%; display: inline-flex;
height: auto; align-items: center;
display: block; padding: var(--space-sm) var(--space-lg);
background: transparent;
color: var(--ink-on-dark-muted);
font-weight: 600;
font-size: var(--text-base);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--btn-radius);
text-decoration: none;
transition: border-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out);
} }
@media (max-width: 1024px) { .hero__btn-ghost:hover {
.hero__grid { border-color: rgba(255, 255, 255, 0.5);
grid-template-columns: 1fr; color: var(--ink-on-dark);
text-align: center;
}
.hero__content { align-items: center; }
.hero__desc { margin-inline: auto; }
.hero__actions { justify-content: center; }
.hero__visual { max-width: 640px; margin-inline: auto; }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero { padding-block-start: calc(var(--nav-height) + var(--space-lg)); } .hero {
.hero__title { font-size: var(--text-3xl); } min-height: auto;
padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-xl);
}
.hero__title {
font-size: clamp(2rem, 6vw, 3rem);
}
} }
/* --- Product Screenshots (infinite scroll) ----------------------- */ /* --- Showcase (single cinematic screenshot) ---------------------- */
.product-showcase { .showcase {
padding-block: var(--space-2xl); padding-block: var(--space-2xl);
overflow: hidden; background: var(--bg-dark-deeper);
}
.product-showcase__heading {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--ink-primary);
margin-block-end: var(--space-xl);
}
.product-showcase__track-wrap {
position: relative;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to left, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(to left, transparent, black 5%, black 95%, transparent);
}
.product-showcase__track {
display: flex;
gap: var(--space-lg);
animation: scroll-track 40s linear infinite;
width: max-content;
}
@keyframes scroll-track {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
.product-showcase__track { animation: none; overflow-x: auto; }
} }
.product-showcase__item { .showcase__frame {
flex-shrink: 0; margin: 0;
width: clamp(320px, 40vw, 520px); border-radius: var(--radius-xl);
border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
background: var(--bg-surface); box-shadow:
border: 1px solid var(--border-subtle); 0 24px 80px rgba(0, 0, 0, 0.4),
box-shadow: var(--shadow-sm); 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
} }
.product-showcase__item img { .showcase__frame img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.product-showcase__caption {
display: block;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-secondary);
text-align: center;
border-top: 1px solid var(--border-subtle);
}
/* --- Modules (two-column, text + nav list) ----------------------- */
/* --- Modules (asymmetric list, not a card grid) ----------------- */
.modules { .modules {
padding-block: var(--space-2xl); padding-block: var(--space-section);
background: var(--bg-muted); background: var(--bg-body);
} }
.modules__layout { .modules__layout {
...@@ -166,26 +142,28 @@ ...@@ -166,26 +142,28 @@
align-items: start; align-items: start;
} }
.modules__heading { .modules__title {
font-size: var(--text-3xl); font-size: var(--text-4xl);
font-weight: 800; font-weight: 900;
color: var(--ink-primary); color: var(--ink-primary);
margin-block-end: var(--space-md); line-height: var(--leading-tight);
letter-spacing: -0.02em;
margin-block-end: var(--space-sm);
} }
.modules__sub { .modules__desc {
font-size: var(--text-base); font-size: var(--text-lg);
color: var(--ink-secondary); color: var(--ink-secondary);
line-height: var(--leading-relaxed); line-height: var(--leading-relaxed);
max-width: 36ch;
} }
.modules__list { .modules__nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0;
} }
.modules__item { .modules__nav a {
display: block; display: block;
padding: var(--space-md) 0; padding: var(--space-md) 0;
font-size: var(--text-lg); font-size: var(--text-lg);
...@@ -193,15 +171,17 @@ ...@@ -193,15 +171,17 @@
color: var(--ink-primary); color: var(--ink-primary);
text-decoration: none; text-decoration: none;
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
transition: color var(--duration-fast) var(--ease-out); transition: color var(--duration-fast) var(--ease-out),
padding-inline-start var(--duration-normal) var(--ease-out-quart);
} }
.modules__item:first-child { .modules__nav a:first-child {
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
} }
.modules__item:hover { .modules__nav a:hover {
color: var(--color-accent); color: var(--color-accent);
padding-inline-start: var(--space-sm);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
...@@ -212,64 +192,112 @@ ...@@ -212,64 +192,112 @@
} }
/* --- Differentiator ---------------------------------------------- */ /* --- Screens (staggered masonry-like grid) ----------------------- */
.diff { .screens {
padding-block: var(--space-2xl); padding-block: var(--space-section);
background: var(--bg-muted);
} }
.diff__content { .screens__grid {
max-width: 580px; display: grid;
grid-template-columns: 1.2fr 0.8fr;
grid-template-rows: auto auto;
gap: var(--space-lg);
} }
.diff__title { .screens__item {
font-size: var(--text-3xl); margin: 0;
font-weight: 800; border-radius: var(--radius-lg);
color: var(--ink-primary); overflow: hidden;
margin-block-end: var(--space-md); background: var(--bg-surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md);
transition: transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out);
} }
.diff__text { .screens__item:hover {
font-size: var(--text-base); transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.screens__item img {
width: 100%;
height: auto;
display: block;
}
.screens__item figcaption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-secondary); color: var(--ink-secondary);
line-height: var(--leading-relaxed); }
.screens__item--large {
grid-column: 1;
}
.screens__item:not(.screens__item--large) {
grid-column: 2;
}
@media (max-width: 768px) {
.screens__grid {
grid-template-columns: 1fr;
}
.screens__item--large,
.screens__item:not(.screens__item--large) {
grid-column: 1;
}
}
/* --- Differentiator ---------------------------------------------- */
.diff {
padding-block: var(--space-section);
background: var(--bg-body);
}
.diff__statement {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
font-weight: 800;
color: var(--ink-primary);
line-height: 1.3;
max-width: 680px;
text-wrap: balance;
} }
/* --- CTA --------------------------------------------------------- */ /* --- CTA --------------------------------------------------------- */
.cta-section { .cta {
padding-block: var(--space-2xl); padding-block: var(--space-section);
background: var(--bg-dark); background: var(--bg-dark);
} }
.cta-section__content { .cta__inner {
text-align: center; text-align: center;
max-width: 500px;
margin-inline: auto;
} }
.cta-section__title { .cta__text {
font-size: var(--text-3xl); font-size: var(--text-2xl);
font-weight: 800; font-weight: 700;
color: var(--ink-on-dark); color: var(--ink-on-dark);
margin-block-end: var(--space-sm); margin-block-end: var(--space-lg);
}
.cta-section__desc {
font-size: var(--text-base);
color: var(--ink-on-dark-muted);
margin-block-end: var(--space-xl);
} }
.cta-section__actions { .cta__actions {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
gap: var(--space-md); gap: var(--space-md);
flex-wrap: wrap; flex-wrap: wrap;
} }
.btn-whatsapp { .cta__wa {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
...@@ -277,12 +305,48 @@ ...@@ -277,12 +305,48 @@
background: var(--color-whatsapp); background: var(--color-whatsapp);
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
font-size: var(--text-sm); font-size: var(--text-base);
border-radius: var(--btn-radius); border-radius: var(--btn-radius);
text-decoration: none; text-decoration: none;
transition: background var(--duration-normal) var(--ease-out); transition: background var(--duration-normal) var(--ease-out);
} }
.btn-whatsapp:hover { .cta__wa:hover {
background: var(--color-whatsapp-dark); background: var(--color-whatsapp-dark);
} }
.cta__wa svg {
flex-shrink: 0;
}
/* --- Page-load animation (subtle, not a reveal gate) ------------- */
@media (prefers-reduced-motion: no-preference) {
.hero__title {
animation: rise 0.7s var(--ease-out-expo) both;
}
.hero__sub {
animation: rise 0.7s 0.1s var(--ease-out-expo) both;
}
.hero__actions {
animation: rise 0.7s 0.2s var(--ease-out-expo) both;
}
.showcase__frame {
animation: rise 0.8s 0.3s var(--ease-out-expo) both;
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
public/index.html
View file @ e3ac9e07
...@@ -5,11 +5,6 @@ ...@@ -5,11 +5,6 @@
<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="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن. مبني للسوق المصري.">
<meta property="og:title" content="El-Captain — نظام إدارة الأكاديميات الرياضية">
<meta property="og:description" content="نظام متكامل لإدارة الأكاديميات الرياضية. مبني للسوق المصري.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/">
<meta property="og:locale" content="ar_EG">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/"> <link rel="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">
...@@ -18,14 +13,12 @@ ...@@ -18,14 +13,12 @@
</head> </head>
<body> <body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي"> <nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner"> <div class="container nav__inner">
<a href="/" class="nav__logo"> <a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span> <span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span> <span class="nav__logo-text">El-Captain</span>
</a> </a>
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link nav__link--active">الرئيسية</a> <a href="/" class="nav__link nav__link--active">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
...@@ -33,163 +26,92 @@ ...@@ -33,163 +26,92 @@
<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>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks"> <button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Hero --> <!-- Hero: dark, full-viewport, the navy owns this -->
<section class="hero"> <section class="hero">
<div class="hero__grid"> <div class="container hero__inner">
<div class="hero__content"> <h1 class="hero__title">غرفة العمليات<br>لأكاديميتك الرياضية.</h1>
<h1 class="hero__title">نظام إدارة كامل لأكاديميتك الرياضية</h1> <p class="hero__sub">14 وحدة. من التسجيل للميزانية. عربي. مصري. جاهز.</p>
<p class="hero__desc">مشتركين، مالية، حضور، جداول، مدربين، ومخازن — في مكان واحد. عربي بالكامل، مبني للسوق المصري.</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 btn--large">جرّب مجاناً</a> <a href="features.html" class="hero__btn-ghost">شوف المزايا</a>
<a href="features.html" class="btn btn--secondary btn--large">شوف المزايا</a>
</div>
</div>
<div class="hero__visual">
<div class="hero__screenshot">
<img src="screenshots/app/dashboard.png" alt="لوحة التحكم" width="800" height="500">
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- Screenshots — the product sells itself --> <!-- Product: one large screenshot, cinematic -->
<section class="product-showcase section"> <section class="showcase">
<div class="container"> <div class="container">
<h2 class="product-showcase__heading">من داخل النظام</h2> <figure class="showcase__frame">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال — الشاشة الرئيسية للنظام" width="1200" height="750">
</figure>
</div> </div>
</section>
<div class="product-showcase__track-wrap"> <!-- Modules: two columns, text + list -->
<div class="product-showcase__track" aria-hidden="true"> <section class="modules">
<div class="product-showcase__item"> <div class="container modules__layout">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy"> <div class="modules__intro">
<span class="product-showcase__caption">مكتب الاستقبال</span> <h2 class="modules__title">يغطي كل شيء.</h2>
</div> <p class="modules__desc">من أول ما المشترك يسجّل — لحد ما تقفل الميزانية آخر الشهر.</p>
<div class="product-showcase__item">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<span class="product-showcase__caption">المشتركين</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<span class="product-showcase__caption">الجدول الأسبوعي</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<span class="product-showcase__caption">النظرة المالية</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<span class="product-showcase__caption">الحضور</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<span class="product-showcase__caption">الفواتير</span>
</div>
<!-- Duplicate x2 for seamless loop on wide screens -->
<div class="product-showcase__item">
<img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
<span class="product-showcase__caption">مكتب الاستقبال</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/participants-list.png" alt="" loading="lazy">
<span class="product-showcase__caption">المشتركين</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
<span class="product-showcase__caption">الجدول الأسبوعي</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
<span class="product-showcase__caption">النظرة المالية</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/attendance.png" alt="" loading="lazy">
<span class="product-showcase__caption">الحضور</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="" loading="lazy">
<span class="product-showcase__caption">الفواتير</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
<span class="product-showcase__caption">مكتب الاستقبال</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/participants-list.png" alt="" loading="lazy">
<span class="product-showcase__caption">المشتركين</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
<span class="product-showcase__caption">الجدول الأسبوعي</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
<span class="product-showcase__caption">النظرة المالية</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/attendance.png" alt="" loading="lazy">
<span class="product-showcase__caption">الحضور</span>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="" loading="lazy">
<span class="product-showcase__caption">الفواتير</span>
</div>
</div> </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> </div>
</section> </section>
<!-- What it covers — simple list, not a card grid --> <!-- More screenshots in a staggered grid -->
<section class="modules section"> <section class="screens">
<div class="container"> <div class="container">
<div class="modules__layout"> <div class="screens__grid">
<div class="modules__text"> <figure class="screens__item screens__item--large">
<h2 class="modules__heading">يغطي كل عمليات الأكاديمية</h2> <img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<p class="modules__sub">من أول ما المشترك يسجّل لحد ما تقفل الميزانية آخر الشهر.</p> <figcaption>الجدول الأسبوعي</figcaption>
</div> </figure>
<nav class="modules__list" aria-label="وحدات النظام"> <figure class="screens__item">
<a href="features.html#participants" class="modules__item">المشتركين</a> <img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<a href="features.html#programs" class="modules__item">البرامج والجداول</a> <figcaption>النظرة المالية</figcaption>
<a href="features.html#finance" class="modules__item">المالية والمحاسبة</a> </figure>
<a href="features.html#attendance" class="modules__item">الحضور</a> <figure class="screens__item">
<a href="features.html#inventory" class="modules__item">المخازن</a> <img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<a href="features.html#hr" class="modules__item">الموارد البشرية</a> <figcaption>الحضور</figcaption>
</nav> </figure>
<figure class="screens__item screens__item--large">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<figcaption>المشتركين</figcaption>
</figure>
</div> </div>
</div> </div>
</section> </section>
<!-- Differentiator --> <!-- Differentiator -->
<section class="diff section"> <section class="diff">
<div class="container"> <div class="container">
<div class="diff__content"> <h2 class="diff__statement">مش نظام محاسبة تم تعديله.<br>مبني من الصفر للأكاديميات الرياضية.</h2>
<h2 class="diff__title">مش نظام محاسبة تم تعديله.</h2>
<p class="diff__text">El-Captain مبني من الصفر لإدارة الأكاديميات الرياضية. كل شاشة وكل تقرير مصمم لواقع الأكاديمية المصرية — عربي بالكامل، من اليمين لليسار، بمصطلحات رياضية صح.</p>
</div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA -->
<section class="cta-section section"> <section class="cta">
<div class="container"> <div class="container cta__inner">
<div class="cta-section__content"> <p class="cta__text">جرّب النظام. 10 أيام. بدون بطاقة.</p>
<h2 class="cta-section__title">جرّب النظام مجاناً</h2> <div class="cta__actions">
<p class="cta-section__desc">10 أيام تجربة كاملة بدون بطاقة ائتمان.</p> <a href="contact.html" class="hero__btn-primary">ابدأ التجربة</a>
<div class="cta-section__actions"> <a href="https://wa.me/201XXXXXXXXX" class="cta__wa" target="_blank" rel="noopener">
<a href="contact.html" class="btn btn--primary btn--large">ابدأ التجربة</a> <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="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener"> WhatsApp
<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>
تواصل عبر WhatsApp
</a>
</div>
</div> </div>
</div> </div>
</section> </section>
...@@ -205,7 +127,6 @@ ...@@ -205,7 +127,6 @@
</a> </a>
<p class="footer__brand-desc">نظام إدارة متكامل للأكاديميات الرياضية في مصر.</p> <p class="footer__brand-desc">نظام إدارة متكامل للأكاديميات الرياضية في مصر.</p>
</div> </div>
<div> <div>
<h4 class="footer__col-title">النظام</h4> <h4 class="footer__col-title">النظام</h4>
<div class="footer__links"> <div class="footer__links">
...@@ -213,38 +134,25 @@ ...@@ -213,38 +134,25 @@
<a href="features.html#programs" 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#finance" class="footer__link">المالية</a>
<a href="features.html#attendance" class="footer__link">الحضور</a> <a href="features.html#attendance" class="footer__link">الحضور</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div> </div>
</div> </div>
<div> <div>
<h4 class="footer__col-title">صفحات</h4> <h4 class="footer__col-title">صفحات</h4>
<div class="footer__links"> <div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a> <a href="features.html" class="footer__link">المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a> <a href="pricing.html" class="footer__link">التسعير</a>
<a href="swimming.html" class="footer__link">السباحة</a> <a href="swimming.html" class="footer__link">السباحة</a>
<a href="contact.html" class="footer__link">تواصل معنا</a> <a href="contact.html" class="footer__link">تواصل معنا</a>
</div> </div>
</div> </div>
<div>
<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>
</div>
</div>
</div> </div>
<div class="footer__bottom"> <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> </div>
</footer> </footer>
<!-- WhatsApp FAB --> <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">
<div class="whatsapp-fab__btn"> <div class="whatsapp-fab__btn">
<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> <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> </div>
......
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