Skip to content

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

Rewrite homepage — strip AI slop, cut to 5 sections 

Removed: fake social proof numbers, testimonials (no clients),
pain/solution grid, trust badges, "why choose us", 11 sections
of repetitive centered-tag-title-grid layout.

Now: hero + product screenshots + module grid + differentiator + CTA.
Let the real product screenshots do the selling.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 9841816a
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 1838 deletions
public/css/home.css
View file @ b99c33f4
/* ============================================================ /* ============================================================
El Captain Sports Management — Homepage Styles El Captain — Homepage
Light theme · RTL Arabic-first · Professional / Trusted Minimal. Confident. Let the product speak.
Depends on: tokens.css (all var() references come from there)
============================================================ */ ============================================================ */
/* ================================================================ /* --- Hero -------------------------------------------------------- */
1. HERO SECTION
================================================================ */
.hero { .hero {
min-height: calc(100dvh - 80px); min-height: calc(100dvh - var(--nav-height));
display: flex; display: flex;
align-items: center; align-items: center;
padding-block-start: 80px; /* offset for fixed nav */ padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-2xl);
padding-block-end: var(--space-2xl); background: var(--bg-body);
background: linear-gradient(160deg, #FFFFFF 0%, #EFF5FA 100%);
position: relative;
overflow: hidden;
}
/* Subtle radial teal glow — top-start corner */
.hero::before {
content: '';
position: absolute;
inset-block-start: -15%;
inset-inline-end: -8%;
width: 55%;
height: 75%;
background: radial-gradient(ellipse, rgba(8, 145, 178, 0.07) 0%, transparent 65%);
pointer-events: none;
}
/* Softer navy echo — bottom-end corner */
.hero::after {
content: '';
position: absolute;
inset-block-end: -10%;
inset-inline-start: -5%;
width: 40%;
height: 55%;
background: radial-gradient(ellipse, rgba(27, 43, 75, 0.04) 0%, transparent 65%);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.hero::before {
animation: hero-glow-drift 16s ease-in-out infinite alternate;
}
}
@keyframes hero-glow-drift {
from { opacity: 0.6; transform: translate(0, 0) scale(1); }
to { opacity: 1; transform: translate(-3%, 3%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.hero::before,
.hero::after { animation: none; }
} }
/* --- Grid -------------------------------------------------------- */
.hero__grid { .hero__grid {
display: grid; display: grid;
grid-template-columns: 1fr 1.3fr; grid-template-columns: 1fr 1.4fr;
gap: var(--space-2xl); gap: var(--space-2xl);
align-items: center; align-items: center;
width: 100%;
max-width: var(--container-max); max-width: var(--container-max);
margin-inline: auto; margin-inline: auto;
padding-inline: var(--space-lg); padding-inline: var(--space-lg);
position: relative;
z-index: 1;
} }
/* --- Content column --------------------------------------------- */
.hero__content { .hero__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
gap: 0; gap: 0;
} }
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
color: var(--color-accent-dark);
background: var(--color-accent-ghost);
border: 1px solid rgba(8, 145, 178, 0.20);
border-radius: var(--radius-full);
padding: var(--space-2xs) var(--space-sm);
margin-block-end: var(--space-md);
}
.hero__title { .hero__title {
font-size: var(--text-5xl); font-size: var(--text-4xl);
font-weight: 900; font-weight: 800;
color: var(--ink-primary); color: var(--ink-primary);
line-height: var(--leading-tight); line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-md); margin-block-end: var(--space-md);
} }
.hero__title-accent {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero__desc { .hero__desc {
font-size: var(--text-lg); font-size: var(--text-lg);
color: var(--ink-secondary); color: var(--ink-secondary);
line-height: var(--leading-relaxed); line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl); margin-block-end: var(--space-xl);
max-width: 46ch; max-width: 42ch;
} }
.hero__actions { .hero__actions {
...@@ -127,36 +52,16 @@ ...@@ -127,36 +52,16 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
/* --- Visual column ---------------------------------------------- */
.hero__visual { .hero__visual {
position: relative; position: relative;
z-index: 1;
perspective: 1400px;
} }
.hero__screenshot { .hero__screenshot {
border-radius: var(--radius-2xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
transform: rotateY(2deg) rotateX(1deg);
transition: transform var(--duration-slower) var(--ease-out-expo);
background: var(--bg-surface); background: var(--bg-surface);
position: relative;
}
/* Inner highlight rim */
.hero__screenshot::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
pointer-events: none;
}
.hero__screenshot:hover {
transform: rotateY(0deg) rotateX(0deg) scale(1.015);
} }
.hero__screenshot img { .hero__screenshot img {
...@@ -165,1431 +70,248 @@ ...@@ -165,1431 +70,248 @@
display: block; display: block;
} }
@media (prefers-reduced-motion: reduce) {
.hero__screenshot,
.hero__screenshot:hover { transform: none; }
}
/* --- Breakpoints ------------------------------------------------ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.hero__grid { .hero__grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;
} }
.hero__content { align-items: center; }
.hero__content { .hero__desc { margin-inline: auto; }
align-items: center; .hero__actions { justify-content: center; }
} .hero__visual { max-width: 640px; margin-inline: auto; }
.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 { .hero { padding-block-start: calc(var(--nav-height) + var(--space-lg)); }
padding-block-start: 72px; .hero__title { font-size: var(--text-3xl); }
}
.hero__screenshot {
transform: none;
}
} }
/* ================================================================ /* --- Product Screenshots (infinite scroll) ----------------------- */
2. TRUST BAR
================================================================ */
.trust-bar { .product-showcase {
background: var(--color-primary); padding-block: var(--space-2xl);
padding-block: var(--space-lg);
position: relative;
overflow: hidden; overflow: hidden;
} }
/* Very subtle teal-tinted gradient overlay */ .product-showcase__heading {
.trust-bar::before { font-size: var(--text-2xl);
content: ''; font-weight: 700;
position: absolute; color: var(--ink-primary);
inset: 0; margin-block-end: var(--space-xl);
background: linear-gradient( text-align: center;
90deg,
rgba(8, 145, 178, 0.07) 0%,
transparent 50%,
rgba(8, 145, 178, 0.04) 100%
);
pointer-events: none;
} }
.trust-bar__grid { .product-showcase__track-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
position: relative; position: relative;
z-index: 1; 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);
} }
.trust-bar__stat { .product-showcase__track {
text-align: center; display: flex;
padding-inline: var(--space-lg); gap: var(--space-lg);
padding-block: var(--space-sm); animation: scroll-track 40s linear infinite;
position: relative; width: max-content;
} }
/* Separator lines between stats */ @keyframes scroll-track {
.trust-bar__stat + .trust-bar__stat::before { from { transform: translateX(0); }
content: ''; to { transform: translateX(-50%); }
position: absolute;
inset-inline-start: 0;
top: 15%;
bottom: 15%;
width: 1px;
background: rgba(255, 255, 255, 0.14);
} }
.trust-bar__number { @media (prefers-reduced-motion: reduce) {
display: block; .product-showcase__track { animation: none; overflow-x: auto; }
font-size: var(--text-3xl);
font-weight: 900;
color: #FFFFFF;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-2xs);
} }
/* Teal-tinted unit suffix (e.g. "+" or "+") */ .product-showcase__item {
.trust-bar__number-accent { flex-shrink: 0;
color: var(--color-accent-light); width: clamp(280px, 35vw, 420px);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
} }
.trust-bar__label { .product-showcase__item img {
width: 100%;
height: auto;
display: block; display: block;
font-size: var(--text-sm);
font-weight: 500;
color: rgba(255, 255, 255, 0.68);
line-height: var(--leading-normal);
}
@media (max-width: 768px) {
.trust-bar__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md) 0;
}
/* Remove separator on the start of each row */
.trust-bar__stat:nth-child(2n+1)::before {
display: none;
}
} }
@media (max-width: 480px) { .product-showcase__caption {
.trust-bar__grid { display: block;
grid-template-columns: 1fr; padding: var(--space-sm) var(--space-md);
} font-size: var(--text-sm);
font-weight: 600;
.trust-bar__stat::before { color: var(--ink-secondary);
display: none !important; text-align: center;
} border-top: 1px solid var(--border-subtle);
.trust-bar__stat + .trust-bar__stat {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
} }
/* ================================================================ /* --- Modules Grid ------------------------------------------------ */
3. PAIN POINTS
================================================================ */
.pain-points { .modules {
padding-block: var(--space-2xl);
background: var(--bg-muted); background: var(--bg-muted);
padding-block: var(--space-section);
position: relative;
} }
/* Top edge rule */ .modules__heading {
.pain-points::before { font-size: var(--text-2xl);
content: ''; font-weight: 700;
position: absolute; color: var(--ink-primary);
top: 0; margin-block-end: var(--space-xl);
inset-inline: 0; text-align: center;
height: 1px;
background: linear-gradient(
to right,
transparent 0%,
var(--border-subtle) 25%,
var(--border-subtle) 75%,
transparent 100%
);
} }
.pain-points__grid { .modules__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-template-columns: repeat(3, 1fr);
gap: var(--space-md); gap: var(--space-lg);
margin-block-start: var(--space-2xl);
} }
.pain-card { .module-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-lg);
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
padding: var(--space-xl); text-decoration: none;
position: relative; transition: box-shadow var(--duration-normal) var(--ease-out),
overflow: hidden; border-color var(--duration-normal) var(--ease-out);
transition:
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
/* Left-edge color indicator bar */
.pain-card::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 4px;
border-start-start-radius: var(--radius-xl);
border-end-start-radius: var(--radius-xl);
} }
.pain-card--problem::before { background: var(--color-error); } .module-card:hover {
.pain-card--solution::before { background: var(--color-accent); }
.pain-card:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: translateY(-3px); border-color: var(--border-accent);
border-color: var(--border-default);
}
.pain-card__emoji {
display: block;
font-size: 1.875rem;
line-height: 1;
margin-block-end: var(--space-md);
user-select: none;
} }
.pain-card__label { .module-card__icon {
display: block; width: 28px;
font-size: var(--text-xs); height: 28px;
font-weight: 700; color: var(--color-accent);
letter-spacing: var(--tracking-widest); flex-shrink: 0;
text-transform: uppercase;
margin-block-end: var(--space-sm);
} }
.pain-card--problem .pain-card__label { color: var(--color-error); } .module-card__title {
.pain-card--solution .pain-card__label { color: var(--color-accent-dark); } font-size: var(--text-lg);
.pain-card__text {
font-size: var(--text-base);
font-weight: 700; font-weight: 700;
color: var(--ink-primary); color: var(--ink-primary);
line-height: var(--leading-snug);
margin-block-end: var(--space-sm);
} }
.pain-card__detail { .module-card__desc {
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--leading-relaxed); color: var(--ink-secondary);
max-width: none; line-height: var(--leading-normal);
}
.pain-card--problem .pain-card__detail { color: var(--ink-muted); }
.pain-card--solution .pain-card__detail {
color: var(--color-accent-dark);
font-weight: 500;
} }
@media (max-width: 768px) {
/* ================================================================ .modules__grid { grid-template-columns: repeat(2, 1fr); }
4. ALL-IN-ONE SECTION
================================================================ */
.all-in-one {
background: var(--bg-surface);
padding-block: var(--space-section);
} }
.all-in-one__inner { @media (max-width: 480px) {
max-width: 700px; .modules__grid { grid-template-columns: 1fr; }
margin-inline: auto;
text-align: center;
} }
.all-in-one__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-block: var(--space-2xl);
text-align: start;
}
.all-in-one__item { /* --- Differentiator ---------------------------------------------- */
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: 500;
transition: background var(--duration-fast) var(--ease-out);
}
/* Old / replaced tools */ .diff {
.all-in-one__item--old { padding-block: var(--space-2xl);
background: var(--color-error-bg);
border: 1px solid rgba(185, 28, 28, 0.12);
color: var(--ink-muted);
text-decoration: line-through;
text-decoration-color: var(--color-error);
text-decoration-thickness: 2px;
} }
.all-in-one__item--old .all-in-one__tool-icon { .diff__content {
font-size: 1.25rem; max-width: 640px;
flex-shrink: 0; margin-inline: auto;
opacity: 0.55; text-align: center;
filter: grayscale(0.6);
} }
/* El Captain row */ .diff__title {
.all-in-one__item--new { font-size: var(--text-3xl);
background: linear-gradient(135deg, var(--color-accent-ghost), rgba(8, 145, 178, 0.03)); font-weight: 800;
border: 1.5px solid var(--border-accent);
color: var(--ink-primary); color: var(--ink-primary);
font-weight: 700; margin-block-end: var(--space-md);
font-size: var(--text-lg);
}
.all-in-one__item--new .all-in-one__tool-icon {
font-size: 1.5rem;
flex-shrink: 0;
} }
.all-in-one__check { .diff__text {
display: inline-flex; font-size: var(--text-base);
align-items: center; color: var(--ink-secondary);
justify-content: center; line-height: var(--leading-relaxed);
width: 1.5rem; margin-block-end: var(--space-lg);
height: 1.5rem;
border-radius: var(--radius-full);
background: var(--color-success);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 900;
flex-shrink: 0;
margin-inline-start: auto;
box-shadow: 0 2px 8px rgba(16, 135, 90, 0.28);
} }
/* Arrow divider between old tools and new */ .diff__points {
.all-in-one__arrow {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
padding-block: var(--space-2xs); gap: var(--space-md);
color: var(--ink-muted); flex-wrap: wrap;
font-size: var(--text-xl);
opacity: 0.5;
user-select: none;
} }
.all-in-one__footnote { .diff__point {
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--ink-muted); font-weight: 600;
margin-block-start: var(--space-lg); color: var(--color-accent-dark);
max-width: none; background: var(--color-accent-ghost);
border: 1px solid rgba(8, 145, 178, 0.15);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
} }
/* ================================================================ /* --- CTA --------------------------------------------------------- */
5. MODULES SHOWCASE
================================================================ */
.modules-showcase { .cta-section {
background: var(--bg-muted); padding-block: var(--space-2xl);
padding-block: var(--space-section); background: var(--bg-dark);
} }
.modules-showcase__grid { .cta-section__content {
display: grid; text-align: center;
grid-template-columns: repeat(3, 1fr); max-width: 500px;
gap: var(--space-md); margin-inline: auto;
margin-block-start: var(--space-2xl);
} }
@media (max-width: 1024px) { .cta-section__title {
.modules-showcase__grid { font-size: var(--text-3xl);
grid-template-columns: repeat(2, 1fr); font-weight: 800;
} color: var(--ink-on-dark);
margin-block-end: var(--space-sm);
} }
@media (max-width: 640px) { .cta-section__desc {
.modules-showcase__grid { font-size: var(--text-base);
grid-template-columns: 1fr; color: var(--ink-on-dark-muted);
} margin-block-end: var(--space-xl);
} }
.module-card { .cta-section__actions {
display: flex; display: flex;
flex-direction: column; justify-content: center;
background: var(--bg-surface); gap: var(--space-md);
border: 1px solid var(--border-subtle); flex-wrap: wrap;
border-radius: var(--radius-xl);
padding: var(--space-xl);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-xs);
border-bottom-width: 3px;
border-bottom-color: transparent;
transition:
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.module-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: var(--border-default);
border-bottom-color: var(--color-accent);
color: inherit;
} }
/* Icon container — navy circle with white icon */ .btn-whatsapp {
.module-card__icon-wrap { display: inline-flex;
width: 3rem; align-items: center;
height: 3rem; gap: var(--space-xs);
display: grid; padding: var(--space-sm) var(--space-lg);
place-items: center; background: var(--color-whatsapp);
background: var(--color-primary); color: #fff;
border-radius: var(--radius-lg); font-weight: 600;
margin-block-end: var(--space-lg); font-size: var(--text-sm);
color: #FFFFFF; border-radius: var(--btn-radius);
flex-shrink: 0; text-decoration: none;
transition: background var(--duration-normal) var(--ease-out); transition: background var(--duration-normal) var(--ease-out);
} }
.module-card__icon-wrap svg {
width: 1.375rem;
height: 1.375rem;
}
.module-card:hover .module-card__icon-wrap {
background: var(--color-accent);
}
.module-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
margin-block-end: var(--space-xs);
}
.module-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
flex: 1;
margin-block-end: var(--space-md);
max-width: none;
}
.module-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
margin-block-start: auto;
transition: gap var(--duration-normal) var(--ease-out);
text-decoration: none;
}
.module-card__link svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
transition: transform var(--duration-normal) var(--ease-out);
}
.module-card:hover .module-card__link {
gap: var(--space-sm);
}
/* Flip arrow for RTL */
[dir="rtl"] .module-card__link svg {
transform: scaleX(-1);
}
/* ================================================================
6. PRODUCT SCREENSHOTS CAROUSEL
================================================================ */
.product-showcase {
background: var(--bg-surface);
padding-block: var(--space-section);
position: relative;
overflow: hidden;
}
.product-showcase__header {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
margin-block-end: var(--space-2xl);
}
/* Scroll track wrapper — holds the fade overlays */
.product-showcase__track-wrap {
position: relative;
overflow: hidden;
}
/* Fade overlay — start edge (right in RTL) */
.product-showcase__track-wrap::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 140px;
background: linear-gradient(to left, var(--bg-surface) 0%, transparent 100%);
z-index: var(--z-above);
pointer-events: none;
}
/* Fade overlay — end edge (left in RTL) */
.product-showcase__track-wrap::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 140px;
background: linear-gradient(to right, var(--bg-surface) 0%, transparent 100%);
z-index: var(--z-above);
pointer-events: none;
}
/* Infinite scroll strip — duplicate items for seamless loop */
.product-showcase__track {
display: flex;
gap: var(--space-lg);
padding-block: var(--space-sm);
padding-inline: var(--space-lg);
width: max-content;
animation: carousel-scroll 60s linear infinite;
will-change: transform;
}
/* Items move left in RTL — from positive to negative X */
@keyframes carousel-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.product-showcase__track {
animation: none;
flex-wrap: wrap;
width: auto;
justify-content: center;
padding-inline: 0;
}
.product-showcase__track-wrap::before,
.product-showcase__track-wrap::after {
display: none;
}
}
.product-showcase__item {
flex: 0 0 380px;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
background: var(--bg-surface);
transition:
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.product-showcase__item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px) scale(1.01);
border-color: var(--border-accent);
}
.product-showcase__item img {
width: 100%;
height: 220px;
object-fit: cover;
object-position: top center;
display: block;
}
.product-showcase__caption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-secondary);
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 768px) {
.product-showcase__item {
flex: 0 0 300px;
}
.product-showcase__item img {
height: 180px;
}
}
/* ================================================================
7. WHY EL CAPTAIN (Why Section)
================================================================ */
.why-section {
background: var(--bg-surface);
padding-block: var(--space-section);
}
.why-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
margin-block-start: var(--space-2xl);
}
@media (max-width: 1024px) {
.why-section__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
}
@media (max-width: 640px) {
.why-section__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
.why-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
/* Teal circle icon container */
.why-card__icon-wrap {
width: 3.25rem;
height: 3.25rem;
display: grid;
place-items: center;
background: var(--color-accent-ghost);
border: 1px solid rgba(8, 145, 178, 0.18);
border-radius: var(--radius-full);
color: var(--color-accent);
flex-shrink: 0;
transition:
background var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.why-card__icon-wrap svg {
width: 1.5rem;
height: 1.5rem;
}
.why-card:hover .why-card__icon-wrap {
background: var(--color-accent);
color: #FFFFFF;
border-color: var(--color-accent);
}
.why-card__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
.why-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
max-width: none;
}
/* ================================================================
8. TRUST / SECURITY SECTION
================================================================ */
.trust-section {
background: var(--bg-dark);
padding-block: var(--space-section);
position: relative;
overflow: hidden;
}
/* Dual radial overlay for subtle depth */
.trust-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(8, 145, 178, 0.09) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(201, 149, 43, 0.05) 0%, transparent 40%);
pointer-events: none;
}
/* Section header overrides for dark background */
.trust-section .section-header__tag {
background: rgba(8, 145, 178, 0.14);
border-color: rgba(8, 145, 178, 0.28);
color: var(--color-accent-light);
}
.trust-section .section-header__title {
color: #FFFFFF;
}
.trust-section .section-header__desc {
color: rgba(255, 255, 255, 0.65);
}
/* Badge row */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
margin-block-start: var(--space-2xl);
position: relative;
z-index: 1;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-decoration: none;
transition:
background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.trust-badge:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
color: #FFFFFF;
}
.trust-badge__icon {
font-size: 1.125rem;
line-height: 1;
flex-shrink: 0;
}
/* Egypt badge — gold-tinted accent */
.trust-badge--egypt {
background: rgba(201, 149, 43, 0.09);
border-color: rgba(201, 149, 43, 0.35);
}
.trust-badge--egypt:hover {
background: rgba(201, 149, 43, 0.14);
border-color: rgba(201, 149, 43, 0.52);
}
@media (max-width: 768px) {
.trust-badges { gap: var(--space-sm); }
.trust-badge {
font-size: var(--text-xs);
padding: var(--space-xs) var(--space-md);
}
}
/* ================================================================
9. CTA SECTION
================================================================ */
.cta-section {
background: var(--bg-surface);
padding-block: var(--space-section);
position: relative;
overflow: hidden;
text-align: center;
}
/* Light teal gradient tint */
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(8, 145, 178, 0.07) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(8, 145, 178, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.cta-section__content {
position: relative;
z-index: 1;
max-width: 640px;
margin-inline: auto;
}
.cta-section__title {
font-size: var(--text-4xl);
font-weight: 900;
color: var(--ink-primary);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-block-end: var(--space-md);
}
.cta-section__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl);
margin-inline: auto;
max-width: 50ch;
}
.cta-section__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
/* Primary teal CTA */
.btn-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: var(--color-accent);
color: #FFFFFF;
font-family: inherit;
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
text-decoration: none;
min-height: var(--btn-height-lg);
box-shadow: var(--shadow-accent);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.btn-cta-primary:hover {
background: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(8, 145, 178, 0.34);
}
/* WhatsApp green CTA */
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: var(--color-whatsapp);
color: #FFFFFF;
font-family: inherit;
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
text-decoration: none;
min-height: var(--btn-height-lg);
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.28);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.btn-whatsapp:hover { .btn-whatsapp:hover {
background: var(--color-whatsapp-dark); background: var(--color-whatsapp-dark);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.38);
}
@media (max-width: 768px) {
.cta-section__actions {
flex-direction: column;
align-items: stretch;
max-width: 320px;
margin-inline: auto;
gap: var(--space-sm);
}
}
@media (prefers-reduced-motion: reduce) {
.btn-cta-primary:hover,
.btn-whatsapp:hover {
transform: none;
}
}
/* ================================================================
10. WHATSAPP FAB (Floating Action Button)
================================================================ */
.whatsapp-fab {
position: fixed;
bottom: 24px;
left: 24px; /* physical left = screen left = RTL end side */
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: var(--color-whatsapp);
color: #FFFFFF;
display: grid;
place-items: center;
text-decoration: none;
z-index: 500;
border: none;
cursor: pointer;
box-shadow:
0 4px 18px rgba(37, 211, 102, 0.42),
0 2px 8px rgba(0, 0, 0, 0.12);
transition:
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.whatsapp-fab svg {
width: 28px;
height: 28px;
}
.whatsapp-fab:hover {
background: var(--color-whatsapp-dark);
color: #FFFFFF;
transform: scale(1.09);
box-shadow:
0 8px 32px rgba(37, 211, 102, 0.52),
0 4px 12px rgba(0, 0, 0, 0.16);
}
.whatsapp-fab:focus-visible {
outline: 3px solid var(--color-whatsapp);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-fab,
.whatsapp-fab:hover { transition: none; transform: none; }
}
/* ================================================================
SHARED — Section header light-theme helpers
================================================================ */
/* Centered variant */
.section-header--center {
text-align: center;
}
.section-header--center .section-header__desc {
margin-inline: auto;
}
/* Teal tag */
.section-header__tag--teal {
background: var(--color-accent-ghost);
border-color: rgba(8, 145, 178, 0.20);
color: var(--color-accent-dark);
}
/* Navy tag */
.section-header__tag--navy {
background: var(--color-primary-ghost);
border-color: var(--border-primary);
color: var(--color-primary);
}
/* Gold tag — for premium/highlight sections */
.section-header__tag--gold {
background: var(--color-gold-ghost);
border-color: rgba(201, 149, 43, 0.22);
color: var(--color-gold-dark);
}
/* ================================================================
SHARED — Section divider
================================================================ */
.section-divider {
height: 1px;
border: none;
background: linear-gradient(
to right,
transparent 0%,
var(--border-subtle) 25%,
var(--border-subtle) 75%,
transparent 100%
);
margin: 0;
}
/* ================================================================
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;
}
}
/* ─────────────────────────────────────────────
SOCIAL PROOF STATS
───────────────────────────────────────────── */
.social-proof {
padding: var(--space-xl) 0;
background: var(--bg-muted);
border-bottom: 1px solid var(--border-subtle);
}
.social-proof__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
text-align: center;
}
@media (max-width: 768px) {
.social-proof__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
}
.social-proof__stat {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.social-proof__number {
font-size: var(--text-2xl);
font-weight: 900;
color: var(--color-accent-dark);
line-height: 1;
}
.social-proof__label {
font-size: var(--text-sm);
color: var(--ink-muted);
font-weight: 500;
}
/* ─────────────────────────────────────────────
TESTIMONIALS
───────────────────────────────────────────── */
.testimonials {
background: var(--bg-muted);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
@media (max-width: 900px) {
.testimonials__grid {
grid-template-columns: 1fr;
}
}
.testimonial-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: #f59e0b;
}
.testimonial-card__text {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.8;
flex: 1;
}
.testimonial-card__author {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--space-md);
border-top: 1px solid var(--border-subtle);
}
.testimonial-card__author strong {
color: var(--ink-primary);
font-size: var(--text-sm);
}
.testimonial-card__author span {
color: var(--ink-muted);
font-size: var(--text-xs);
}
/* ─────────────────────────────────────────────
STICKY CTA BAR
───────────────────────────────────────────── */
.sticky-cta {
position: fixed;
bottom: 0;
inset-inline: 0;
background: var(--color-primary);
color: white;
padding: var(--space-sm) var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
z-index: 900;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -4px 20px oklch(0 0 0 / 0.15);
}
.sticky-cta--visible {
transform: translateY(0);
}
.sticky-cta__text {
font-weight: 600;
font-size: var(--text-sm);
}
.sticky-cta__btn {
background: white;
color: var(--color-primary);
padding: 8px 20px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: transform 0.15s;
}
.sticky-cta__btn:hover {
transform: scale(1.05);
}
.sticky-cta__close {
position: absolute;
inset-inline-end: var(--space-md);
background: none;
border: none;
color: white;
opacity: 0.7;
cursor: pointer;
padding: 4px;
}
.sticky-cta__close:hover {
opacity: 1;
}
/* ─────────────────────────────────────────────
EXIT INTENT MODAL
───────────────────────────────────────────── */
.exit-modal-backdrop {
position: fixed;
inset: 0;
background: oklch(0 0 0 / 0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.exit-modal-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
.exit-modal {
background: var(--bg-surface);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
max-width: 420px;
width: 100%;
text-align: center;
position: relative;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-modal-backdrop--visible .exit-modal {
transform: scale(1) translateY(0);
}
.exit-modal__close {
position: absolute;
top: var(--space-md);
inset-inline-end: var(--space-md);
background: none;
border: none;
color: var(--ink-muted);
cursor: pointer;
padding: 4px;
}
.exit-modal__title {
font-size: var(--text-xl);
font-weight: 800;
color: var(--ink-primary);
margin-bottom: var(--space-xs);
}
.exit-modal__subtitle {
color: var(--ink-secondary);
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.exit-modal__input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-base);
text-align: center;
direction: ltr;
margin-bottom: var(--space-md);
}
.exit-modal__input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.1);
}
.exit-modal__submit {
width: 100%;
padding: 12px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.2s;
}
.exit-modal__submit:hover {
background: var(--color-accent-dark);
}
/* ─────────────────────────────────────────────
BACK TO TOP
───────────────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 100px;
inset-inline-start: var(--space-lg);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-default);
color: var(--ink-secondary);
display: grid;
place-items: center;
cursor: pointer;
z-index: 800;
opacity: 0;
transform: scale(0);
transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
.back-to-top--visible {
opacity: 1;
transform: scale(1);
}
.back-to-top:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* ─────────────────────────────────────────────
MICRO-INTERACTIONS
───────────────────────────────────────────── */
.btn {
transition: transform 0.1s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:active {
transform: scale(0.97);
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 3px oklch(0.55 0.15 200 / 0.12);
}
.plan-card, .pain-card, .feature-card, .module-card, .testimonial-card {
transition: transform 0.2s, box-shadow 0.2s;
}
.plan-card:hover, .pain-card:hover, .feature-card:hover, .module-card:hover, .testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
} }
public/index.html
View file @ b99c33f4
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain - نظام إدارة الأكاديميات الرياضية</title> <title>El-Captain — نظام إدارة الأكاديميات الرياضية</title>
<meta name="description" content="El-Captain نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية. عربي بالكامل، مصمم للسوق المصري."> <meta name="description" content="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن. مبني للسوق المصري.">
<meta property="og:title" content="El-Captain - نظام إدارة الأكاديميات الرياضية"> <meta property="og:title" content="El-Captain — نظام إدارة الأكاديميات الرياضية">
<meta property="og:description" content="نظام متكامل مبني من الصفر لإدارة الأكاديميات الرياضية — من التسجيل حتى التقارير المالية."> <meta property="og:description" content="نظام متكامل لإدارة الأكاديميات الرياضية. مبني للسوق المصري.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/"> <meta property="og:url" content="https://el-captain-website.caprover.al-arcade.com/">
<meta property="og:locale" content="ar_EG"> <meta property="og:locale" content="ar_EG">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<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 data-sticky-cta data-exit-intent> <body>
<!-- Navigation --> <!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي"> <nav class="nav" aria-label="التنقل الرئيسي">
...@@ -45,465 +45,174 @@ ...@@ -45,465 +45,174 @@
<!-- Hero --> <!-- Hero -->
<section class="hero"> <section class="hero">
<div class="hero__grid"> <div class="hero__grid">
<div class="hero__content" data-reveal> <div class="hero__content">
<span class="hero__eyebrow">نظام إدارة الأكاديميات الرياضية</span> <h1 class="hero__title">نظام إدارة كامل لأكاديميتك الرياضية</h1>
<h1 class="hero__title">أكاديميتك تستحق نظام <span class="hero__title-accent">يفهم الرياضة</span></h1> <p class="hero__desc">مشتركين، مالية، حضور، جداول، مدربين، ومخازن — في مكان واحد. عربي بالكامل، مبني للسوق المصري.</p>
<p class="hero__desc">ليس برنامج محاسبة تم تعديله. El-Captain مبني من الصفر لإدارة كل تفصيلة في أكاديميتك — من التسجيل حتى التقارير المالية.</p>
<div class="hero__actions"> <div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a> <a href="contact.html" class="btn btn--primary btn--large">جرّب مجاناً</a>
<a href="features.html" class="btn btn--secondary btn--large">استكشف المزايا</a> <a href="features.html" class="btn btn--secondary btn--large">شوف المزايا</a>
</div> </div>
</div> </div>
<div class="hero__visual" data-reveal="200"> <div class="hero__visual">
<div class="hero__screenshot"> <div class="hero__screenshot">
<img src="screenshots/app/dashboard.png" alt="لوحة التحكم" loading="eager"> <img src="screenshots/app/dashboard.png" alt="لوحة التحكم" width="800" height="500">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Trust Bar --> <!-- Screenshots — the product sells itself -->
<section class="trust-bar" data-reveal>
<div class="trust-bar__grid">
<div class="trust-bar__stat">
<span class="trust-bar__number"><span class="trust-bar__number-accent">+</span>14</span>
<span class="trust-bar__label">وحدة متكاملة</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number"><span class="trust-bar__number-accent">+</span>250</span>
<span class="trust-bar__label">شاشة إدارية</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number">100<span class="trust-bar__number-accent">%</span></span>
<span class="trust-bar__label">عربي بالكامل</span>
</div>
<div class="trust-bar__stat">
<span class="trust-bar__number">مبني لمصر <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>
<span class="trust-bar__label">للسوق المصري</span>
</div>
</div>
</section>
<!-- Social Proof Stats -->
<section class="social-proof" data-reveal>
<div class="container">
<div class="social-proof__grid">
<div class="social-proof__stat">
<span class="social-proof__number" data-count="32" data-count-suffix="+">0+</span>
<span class="social-proof__label">أكاديمية تستخدم النظام</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="15000" data-count-suffix="+">0+</span>
<span class="social-proof__label">مشترك يُدار عبر المنصة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="50000" data-count-suffix="+">0+</span>
<span class="social-proof__label">حصة تدريبية مسجلة</span>
</div>
<div class="social-proof__stat">
<span class="social-proof__number" data-count="2" data-count-suffix="M+ ج.م">0M+ ج.م</span>
<span class="social-proof__label">تم تحصيلها عبر النظام</span>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section section--muted">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag section-header__tag--navy">المشكلة</span>
<h2 class="section-header__title">تعرف هذه المشاكل؟</h2>
<p class="section-header__desc">كل أكاديمية رياضية في مصر تعاني من نفس التحديات. الفرق إن البعض قرر يحلها.</p>
</div>
<div class="pain-points__grid">
<div class="pain-card pain-card--problem" data-reveal="100">
<span class="pain-card__emoji"><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="M8 15s1.5-2 4-2 4 2 4 2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg></span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">فوضى الاشتراكات</p>
<p class="pain-card__detail">اشتراكات متأخرة وغرامات ضائعة لأن لا أحد يتابع مواعيد التجديد يدويًا لمئات المشتركين</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="150">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">متابعة تلقائية</p>
<p class="pain-card__detail">متابعة تلقائية لكل اشتراك بتنبيهات وتجديدات محسوبة بدون تدخل يدوي</p>
</div>
<div class="pain-card pain-card--problem" data-reveal="200">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">ملفات Excel منفصلة</p>
<p class="pain-card__detail">ملفات منفصلة للمشتركين والمالية والأنشطة ولا رابط بينها — وكل ملف نسخة مختلفة</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="250">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">نظام واحد متكامل</p>
<p class="pain-card__detail">نظام واحد يربط كل شيء ببعضه — المشترك والمالية والحضور والتقارير في مكان واحد</p>
</div>
<div class="pain-card pain-card--problem" data-reveal="300">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg></span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">حضور يدوي</p>
<p class="pain-card__detail">المدربين لا يعرفون من حضر ومن غاب إلا بكشوف ورقية قابلة للتلاعب والضياع</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="350">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">حضور ذكي</p>
<p class="pain-card__detail">تسجيل حضور لحظي من التطبيق مع إشعارات فورية لأولياء الأمور</p>
</div>
<div class="pain-card pain-card--problem" data-reveal="400">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg></span>
<span class="pain-card__label">المشكلة</span>
<p class="pain-card__text">لا رؤية مالية</p>
<p class="pain-card__detail">لا تعرف أرباحك الحقيقية ولا مصاريفك الفعلية — كل شيء تقديري وغير دقيق</p>
</div>
<div class="pain-card pain-card--solution" data-reveal="450">
<span class="pain-card__emoji"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></span>
<span class="pain-card__label">الحل</span>
<p class="pain-card__text">تقارير مالية شاملة</p>
<p class="pain-card__detail">محاسبة قيد مزدوج حقيقية مع تقارير لحظية لكل قرش دخل أو خرج</p>
</div>
</div>
</div>
</section>
<!-- All-in-One -->
<section class="all-in-one section">
<div class="container">
<div class="all-in-one__inner" data-reveal>
<div class="section-header section-header--center">
<span class="section-header__tag section-header__tag--teal">الحل</span>
<h2 class="section-header__title">نظام واحد يغنيك عن ٥ أدوات</h2>
</div>
<div class="all-in-one__list">
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon"><svg width="18" height="18" 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></span>
<span>مجموعات WhatsApp للتواصل</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></span>
<span>ملفات Excel للبيانات</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
<span>إيصالات ورقية للمدفوعات</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="10" y2="14"/><line x1="14" y1="14" x2="16" y2="14"/><line x1="8" y1="18" x2="10" y2="18"/><line x1="14" y1="18" x2="16" y2="18"/></svg></span>
<span>برنامج محاسبة منفصل</span>
</div>
<div class="all-in-one__item all-in-one__item--old">
<span class="all-in-one__tool-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg></span>
<span>كشوف حضور يدوية</span>
</div>
<div class="all-in-one__arrow">↓</div>
<div class="all-in-one__item all-in-one__item--new">
<span class="all-in-one__tool-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg></span>
<span>El-Captain — نظام واحد لكل شيء</span>
<span class="all-in-one__check"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span>
</div>
</div>
<p class="all-in-one__footnote">وفّر وقتك وفلوسك — نظام واحد بدل ٥ أدوات منفصلة لا تتكلم مع بعض.</p>
</div>
</div>
</section>
<!-- Modules Showcase -->
<section class="modules-showcase section">
<div class="container">
<div class="section-header section-header--center" data-reveal>
<span class="section-header__tag section-header__tag--teal">الوحدات</span>
<h2 class="section-header__title">نظام كامل في كل التفاصيل</h2>
<p class="section-header__desc">كل وحدة مصممة لحل مشكلة حقيقية تواجه أكاديميتك كل يوم.</p>
</div>
<div class="modules-showcase__grid">
<a href="features.html#participants" class="module-card" data-reveal="100">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3 class="module-card__title">إدارة المشتركين</h3>
<p class="module-card__desc">دورة حياة المشترك كاملة — من التسجيل حتى التخرج مع ملف شامل لكل لاعب.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="features.html#programs" class="module-card" data-reveal="200">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3 class="module-card__title">الأنشطة والبرامج</h3>
<p class="module-card__desc">أنشطة ومجموعات تدريب وجداول مواعيد وإدارة المدربين — كل شيء منظم.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="features.html#finance" class="module-card" data-reveal="300">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1v22"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<h3 class="module-card__title">المالية والمحاسبة</h3>
<p class="module-card__desc">قيد مزدوج حقيقي — فواتير وأقساط وخزينة وتقارير مالية شاملة.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="features.html#attendance" class="module-card" data-reveal="400">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 11l3 3L22 4"/>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
</svg>
</div>
<h3 class="module-card__title">الحضور الذكي</h3>
<p class="module-card__desc">تسجيل حضور لحظي مع إشعارات لأولياء الأمور وتقارير غياب تلقائية.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="features.html#inventory" class="module-card" data-reveal="500">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
<h3 class="module-card__title">المخازن</h3>
<p class="module-card__desc">إدارة المنتجات والمستودعات وحركات المخزون وأوامر الشراء بدقة.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="features.html#hr" class="module-card" data-reveal="600">
<div class="module-card__icon-wrap">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8"/>
<path d="M12 17v4"/>
</svg>
</div>
<h3 class="module-card__title">الموارد البشرية</h3>
<p class="module-card__desc">إدارة الموظفين والمرتبات والإجازات والحضور والانصراف والتقييمات.</p>
<span class="module-card__link">
اعرف المزيد
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</span>
</a>
</div>
</div>
</section>
<!-- Product Screenshots Carousel -->
<section class="product-showcase section"> <section class="product-showcase section">
<div class="product-showcase__header" data-reveal> <div class="container">
<div class="section-header section-header--center"> <h2 class="product-showcase__heading">من داخل النظام</h2>
<span class="section-header__tag section-header__tag--teal">من داخل النظام</span>
<h2 class="section-header__title">شاشات حقيقية، لا تصاميم تخيلية</h2>
</div>
</div> </div>
<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"> <div class="product-showcase__item">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy"> <img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy">
<div class="product-showcase__caption">مكتب الاستقبال</div> <span class="product-showcase__caption">مكتب الاستقبال</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy"> <img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<div class="product-showcase__caption">المشتركين</div> <span class="product-showcase__caption">المشتركين</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy"> <img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div> <span class="product-showcase__caption">الجدول الأسبوعي</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy"> <img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div> <span class="product-showcase__caption">النظرة المالية</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="تعيين المساحات" loading="lazy"> <img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div> <span class="product-showcase__caption">الحضور</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy"> <img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<div class="product-showcase__caption">الفواتير</div> <span class="product-showcase__caption">الفواتير</span>
</div> </div>
<!-- Duplicate for seamless infinite loop --> <!-- Duplicate for seamless loop -->
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/reception-desk.png" alt="" loading="lazy"> <img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
<div class="product-showcase__caption">مكتب الاستقبال</div> <span class="product-showcase__caption">مكتب الاستقبال</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/participants-list.png" alt="" loading="lazy"> <img src="screenshots/app/participants-list.png" alt="" loading="lazy">
<div class="product-showcase__caption">المشتركين</div> <span class="product-showcase__caption">المشتركين</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy"> <img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div> <span class="product-showcase__caption">الجدول الأسبوعي</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="" loading="lazy"> <img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div> <span class="product-showcase__caption">النظرة المالية</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="" loading="lazy"> <img src="screenshots/app/attendance.png" alt="" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div> <span class="product-showcase__caption">الحضور</span>
</div> </div>
<div class="product-showcase__item"> <div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="" loading="lazy"> <img src="screenshots/app/invoices.png" alt="" loading="lazy">
<div class="product-showcase__caption">الفواتير</div> <span class="product-showcase__caption">الفواتير</span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Why El Captain --> <!-- What it covers -->
<section class="why-section section"> <section class="modules section">
<div class="container"> <div class="container">
<div class="section-header section-header--center" data-reveal> <h2 class="modules__heading">يغطي كل عمليات الأكاديمية</h2>
<span class="section-header__tag section-header__tag--gold">لماذا El-Captain</span>
<h2 class="section-header__title">ليه تختار El-Captain؟</h2> <div class="modules__grid">
</div> <a href="features.html#participants" class="module-card">
<svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<div class="why-section__grid"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<div class="why-card" data-reveal="100"> <circle cx="9" cy="7" r="4"/>
<div class="why-card__icon-wrap"> <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
<path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 0 1 6.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/> </svg>
</svg> <h3 class="module-card__title">المشتركين</h3>
</div> <p class="module-card__desc">تسجيل، ملفات، حالات، أولياء أمور</p>
<h3 class="why-card__title">عربي بالكامل</h3> </a>
<p class="why-card__desc">واجهة عربية من اليمين لليسار — مش ترجمة Google. كل زر وكل رسالة وكل تقرير بالعربي الصحيح.</p>
</div>
<div class="why-card" data-reveal="200"> <a href="features.html#programs" class="module-card">
<div class="why-card__icon-wrap"> <svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/>
<circle cx="12" cy="12" r="10"/> <path d="M12 6v6l4 2"/>
<path d="M12 2a10 10 0 0 1 0 20"/> </svg>
<path d="M2 12h20"/> <h3 class="module-card__title">البرامج والجداول</h3>
</svg> <p class="module-card__desc">أنشطة، مجموعات، مواعيد، مدربين</p>
</div> </a>
<h3 class="why-card__title">مبني للرياضة</h3>
<p class="why-card__desc">ليس نظام عام تم تخصيصه. كل وحدة مصممة لواقع الأكاديميات الرياضية — مجموعات، حضور، تقييمات، بطولات.</p>
</div>
<div class="why-card" data-reveal="300"> <a href="features.html#finance" class="module-card">
<div class="why-card__icon-wrap"> <svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 1v22"/>
<path d="M12 1v22"/> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> </svg>
</svg> <h3 class="module-card__title">المالية</h3>
</div> <p class="module-card__desc">فواتير، أقساط، خزينة، قيد مزدوج</p>
<h3 class="why-card__title">تسعير عادل</h3> </a>
<p class="why-card__desc">تسعير مصمم للسوق المصري — لا مفاجآت ولا رسوم خفية. ادفع على قد ما تستخدم.</p>
</div>
</div>
</div>
</section>
<!-- Trust Section (Dark) --> <a href="features.html#attendance" class="module-card">
<section class="trust-section section"> <svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<div class="container"> <path d="M9 11l3 3L22 4"/>
<div class="section-header section-header--center" data-reveal> <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
<span class="section-header__tag">أمان وموثوقية</span> </svg>
<h2 class="section-header__title">نظام موثوق</h2> <h3 class="module-card__title">الحضور</h3>
<p class="section-header__desc">بيانات أكاديميتك في أمان تام — تشفير ونسخ احتياطي وصلاحيات دقيقة.</p> <p class="module-card__desc">تسجيل لحظي، إشعارات، تقارير غياب</p>
</div> </a>
<div class="trust-badges" data-reveal> <a href="features.html#inventory" class="module-card">
<span class="trust-badge"> <svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<span class="trust-badge__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span> <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"/>
<span>بيانات مشفرة</span> <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
</span> <line x1="12" y1="22.08" x2="12" y2="12"/>
<span class="trust-badge"> </svg>
<span class="trust-badge__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></span> <h3 class="module-card__title">المخازن</h3>
<span>نسخ احتياطي يومي</span> <p class="module-card__desc">منتجات، حركات مخزون، أوامر شراء</p>
</span> </a>
<span class="trust-badge">
<span class="trust-badge__icon"><svg width="18" height="18" 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></span>
<span>صلاحيات دقيقة</span>
</span>
<span class="trust-badge">
<span class="trust-badge__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></span>
<span>سحابي آمن</span>
</span>
</div>
<div class="trust-badges" style="margin-block-start: var(--space-xl);" data-reveal="200"> <a href="features.html#hr" class="module-card">
<span class="trust-badge trust-badge--egypt"> <svg class="module-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<span class="trust-badge__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span> <rect x="2" y="3" width="20" height="14" rx="2"/>
<span>صُمم في مصر للسوق المصري</span> <path d="M8 21h8"/>
</span> <path d="M12 17v4"/>
</svg>
<h3 class="module-card__title">الموارد البشرية</h3>
<p class="module-card__desc">موظفين، مرتبات، إجازات، تقييمات</p>
</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Swimming Teaser --> <!-- Differentiator — one simple statement -->
<section class="swimming-teaser" data-reveal> <section class="diff section">
<div class="container"> <div class="container">
<div class="swimming-teaser__inner"> <div class="diff__content">
<div class="swimming-teaser__content"> <h2 class="diff__title">مش نظام محاسبة تم تعديله.</h2>
<span class="swimming-teaser__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c.9-.4 1.8-.8 2.8-.8 2 0 3.2 1.6 5.2 1.6s3.2-1.6 5.2-1.6c1 0 1.9.4 2.8.8"/><path d="M2 16c.9-.4 1.8-.8 2.8-.8 2 0 3.2 1.6 5.2 1.6s3.2-1.6 5.2-1.6c1 0 1.9.4 2.8.8"/><circle cx="16" cy="6" r="2"/><path d="M12 12l-2-2-4 4"/></svg></span> <p class="diff__text">El-Captain مبني من الصفر لإدارة الأكاديميات الرياضية. كل شاشة وكل تقرير مصمم لواقع الأكاديمية المصرية — عربي بالكامل، من اليمين لليسار، بمصطلحات رياضية صح.</p>
<div> <div class="diff__points">
<p class="swimming-teaser__text">لأكاديميات السباحة: نظام حارات وإيجارات ذكي</p> <span class="diff__point">14 وحدة متكاملة</span>
<p class="swimming-teaser__sub">إدارة الحارات، حجوزات المسابح، وإيجارات المساحات بنظام متخصص.</p> <span class="diff__point">RTL عربي أصلي</span>
</div> <span class="diff__point">تسعير للسوق المصري</span>
</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>
</div> </div>
</section> </section>
<!-- CTA -->
<!-- CTA Section -->
<section class="cta-section section"> <section class="cta-section section">
<div class="container"> <div class="container">
<div class="cta-section__content" data-reveal> <div class="cta-section__content">
<h2 class="cta-section__title">جاهز تبدأ؟</h2> <h2 class="cta-section__title">جرّب النظام مجاناً</h2>
<p class="cta-section__desc">لا تضيع وقتك في أنظمة عامة تحتاج سنوات لتخصيصها. El-Captain جاهز لإدارة أكاديميتك من اليوم الأول.</p> <p class="cta-section__desc">10 أيام تجربة كاملة بدون بطاقة ائتمان.</p>
<div class="cta-section__actions"> <div class="cta-section__actions">
<a href="contact.html" class="btn-cta-primary">احجز عرض تجريبي مجاني</a> <a href="contact.html" class="btn btn--primary btn--large">ابدأ التجربة</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener"> <a href="https://wa.me/201XXXXXXXXX" class="btn-whatsapp" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
تواصل عبر WhatsApp تواصل عبر WhatsApp
...@@ -522,26 +231,27 @@ ...@@ -522,26 +231,27 @@
<span class="footer__brand-mark">EC</span> <span class="footer__brand-mark">EC</span>
<span class="footer__brand-name">El-Captain</span> <span class="footer__brand-name">El-Captain</span>
</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">
<a href="features.html#participants" class="footer__link">إدارة المشتركين</a> <a href="features.html#participants" class="footer__link">المشتركين</a>
<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#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" 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="contact.html" class="footer__link">تواصل معنا</a> <a href="contact.html" class="footer__link">تواصل معنا</a>
</div> </div>
</div> </div>
...@@ -549,16 +259,14 @@ ...@@ -549,16 +259,14 @@
<div> <div>
<h4 class="footer__col-title">تواصل</h4> <h4 class="footer__col-title">تواصل</h4>
<div class="footer__links"> <div class="footer__links">
<a href="contact.html" class="footer__link">احجز عرض تجريبي</a> <a href="contact.html" class="footer__link">احجز عرض</a>
<a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a> <a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank" rel="noopener">WhatsApp</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div> </div>
</div> </div>
</div> </div>
<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>
<span class="footer__copy">نظام إدارة الأكاديميات الرياضية</span>
</div> </div>
</div> </div>
</footer> </footer>
...@@ -566,10 +274,8 @@ ...@@ -566,10 +274,8 @@
<!-- WhatsApp FAB --> <!-- 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">
<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> <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>
<span class="whatsapp-fab__label">محتاج مساعدة؟</span>
</a> </a>
<script src="js/main.js"></script> <script src="js/main.js"></script>
......
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