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
Minimal. Confident. Let the product speak.
Commanding. Exclusive. Operations center energy.
============================================================ */
/* --- Hero -------------------------------------------------------- */
.hero {
min-height: calc(100dvh - var(--nav-height));
min-height: 80dvh;
display: flex;
align-items: center;
padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-2xl);
background: var(--bg-body);
padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-2xl);
background: var(--bg-dark);
position: relative;
overflow: hidden;
}
.hero__grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--space-2xl);
align-items: center;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(8, 145, 178, 0.06), transparent);
pointer-events: none;
}
.hero__content {
display: flex;
flex-direction: column;
gap: 0;
.hero__inner {
position: relative;
z-index: 1;
max-width: 720px;
}
.hero__title {
font-size: var(--text-4xl);
font-weight: 800;
color: var(--ink-primary);
line-height: var(--leading-tight);
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 900;
color: var(--ink-on-dark);
line-height: 1.1;
letter-spacing: -0.02em;
margin-block-end: var(--space-md);
text-wrap: balance;
}
.hero__desc {
.hero__sub {
font-size: var(--text-lg);
color: var(--ink-secondary);
color: var(--ink-on-dark-muted);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-xl);
max-width: 42ch;
max-width: 48ch;
}
.hero__actions {
......@@ -52,111 +54,85 @@
flex-wrap: wrap;
}
.hero__visual {
position: relative;
.hero__btn-primary {
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 {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
.hero__btn-primary:hover {
background: var(--color-accent-light);
transform: translateY(-1px);
}
.hero__screenshot img {
width: 100%;
height: auto;
display: block;
.hero__btn-ghost {
display: inline-flex;
align-items: center;
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__grid {
grid-template-columns: 1fr;
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; }
.hero__btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.5);
color: var(--ink-on-dark);
}
@media (max-width: 768px) {
.hero { padding-block-start: calc(var(--nav-height) + var(--space-lg)); }
.hero__title { font-size: var(--text-3xl); }
.hero {
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);
overflow: hidden;
}
.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; }
background: var(--bg-dark-deeper);
}
.product-showcase__item {
flex-shrink: 0;
width: clamp(320px, 40vw, 520px);
border-radius: var(--radius-lg);
.showcase__frame {
margin: 0;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.4),
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%;
height: auto;
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 (asymmetric list, not a card grid) ----------------- */
/* --- Modules (two-column, text + nav list) ----------------------- */
.modules {
padding-block: var(--space-2xl);
background: var(--bg-muted);
padding-block: var(--space-section);
background: var(--bg-body);
}
.modules__layout {
......@@ -166,26 +142,28 @@
align-items: start;
}
.modules__heading {
font-size: var(--text-3xl);
font-weight: 800;
.modules__title {
font-size: var(--text-4xl);
font-weight: 900;
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 {
font-size: var(--text-base);
.modules__desc {
font-size: var(--text-lg);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
max-width: 36ch;
}
.modules__list {
.modules__nav {
display: flex;
flex-direction: column;
gap: 0;
}
.modules__item {
.modules__nav a {
display: block;
padding: var(--space-md) 0;
font-size: var(--text-lg);
......@@ -193,15 +171,17 @@
color: var(--ink-primary);
text-decoration: none;
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);
}
.modules__item:hover {
.modules__nav a:hover {
color: var(--color-accent);
padding-inline-start: var(--space-sm);
}
@media (max-width: 768px) {
......@@ -212,64 +192,112 @@
}
/* --- Differentiator ---------------------------------------------- */
/* --- Screens (staggered masonry-like grid) ----------------------- */
.diff {
padding-block: var(--space-2xl);
.screens {
padding-block: var(--space-section);
background: var(--bg-muted);
}
.diff__content {
max-width: 580px;
.screens__grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
grid-template-rows: auto auto;
gap: var(--space-lg);
}
.diff__title {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--ink-primary);
margin-block-end: var(--space-md);
.screens__item {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
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 {
font-size: var(--text-base);
.screens__item:hover {
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);
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-section {
padding-block: var(--space-2xl);
.cta {
padding-block: var(--space-section);
background: var(--bg-dark);
}
.cta-section__content {
.cta__inner {
text-align: center;
max-width: 500px;
margin-inline: auto;
}
.cta-section__title {
font-size: var(--text-3xl);
font-weight: 800;
.cta__text {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--ink-on-dark);
margin-block-end: var(--space-sm);
}
.cta-section__desc {
font-size: var(--text-base);
color: var(--ink-on-dark-muted);
margin-block-end: var(--space-xl);
margin-block-end: var(--space-lg);
}
.cta-section__actions {
.cta__actions {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.btn-whatsapp {
.cta__wa {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
......@@ -277,12 +305,48 @@
background: var(--color-whatsapp);
color: #fff;
font-weight: 600;
font-size: var(--text-sm);
font-size: var(--text-base);
border-radius: var(--btn-radius);
text-decoration: none;
transition: background var(--duration-normal) var(--ease-out);
}
.btn-whatsapp:hover {
.cta__wa:hover {
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 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain — نظام إدارة الأكاديميات الرياضية</title>
<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="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
......@@ -18,14 +13,12 @@
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link nav__link--active">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
......@@ -33,163 +26,92 @@
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<!-- Hero: dark, full-viewport, the navy owns this -->
<section class="hero">
<div class="hero__grid">
<div class="hero__content">
<h1 class="hero__title">نظام إدارة كامل لأكاديميتك الرياضية</h1>
<p class="hero__desc">مشتركين، مالية، حضور، جداول، مدربين، ومخازن — في مكان واحد. عربي بالكامل، مبني للسوق المصري.</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">جرّب مجاناً</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 class="container hero__inner">
<h1 class="hero__title">غرفة العمليات<br>لأكاديميتك الرياضية.</h1>
<p class="hero__sub">14 وحدة. من التسجيل للميزانية. عربي. مصري. جاهز.</p>
<div class="hero__actions">
<a href="contact.html" class="hero__btn-primary">جرّب 10 أيام مجاناً</a>
<a href="features.html" class="hero__btn-ghost">شوف المزايا</a>
</div>
</div>
</section>
<!-- Screenshots — the product sells itself -->
<section class="product-showcase section">
<!-- Product: one large screenshot, cinematic -->
<section class="showcase">
<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>
</section>
<div class="product-showcase__track-wrap">
<div class="product-showcase__track" aria-hidden="true">
<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>
<!-- 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>
<!-- Modules: two columns, text + list -->
<section class="modules">
<div class="container modules__layout">
<div class="modules__intro">
<h2 class="modules__title">يغطي كل شيء.</h2>
<p class="modules__desc">من أول ما المشترك يسجّل — لحد ما تقفل الميزانية آخر الشهر.</p>
</div>
<nav class="modules__nav" aria-label="وحدات النظام">
<a href="features.html#participants">المشتركين وأولياء الأمور</a>
<a href="features.html#programs">البرامج والمجموعات والجداول</a>
<a href="features.html#finance">المالية — فواتير، أقساط، خزينة</a>
<a href="features.html#attendance">الحضور والغياب</a>
<a href="features.html#inventory">المخازن وأوامر الشراء</a>
<a href="features.html#hr">الموارد البشرية والمرتبات</a>
</nav>
</div>
</section>
<!-- What it covers — simple list, not a card grid -->
<section class="modules section">
<!-- More screenshots in a staggered grid -->
<section class="screens">
<div class="container">
<div class="modules__layout">
<div class="modules__text">
<h2 class="modules__heading">يغطي كل عمليات الأكاديمية</h2>
<p class="modules__sub">من أول ما المشترك يسجّل لحد ما تقفل الميزانية آخر الشهر.</p>
</div>
<nav class="modules__list" aria-label="وحدات النظام">
<a href="features.html#participants" class="modules__item">المشتركين</a>
<a href="features.html#programs" class="modules__item">البرامج والجداول</a>
<a href="features.html#finance" class="modules__item">المالية والمحاسبة</a>
<a href="features.html#attendance" class="modules__item">الحضور</a>
<a href="features.html#inventory" class="modules__item">المخازن</a>
<a href="features.html#hr" class="modules__item">الموارد البشرية</a>
</nav>
<div class="screens__grid">
<figure class="screens__item screens__item--large">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<figcaption>الجدول الأسبوعي</figcaption>
</figure>
<figure class="screens__item">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<figcaption>النظرة المالية</figcaption>
</figure>
<figure class="screens__item">
<img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<figcaption>الحضور</figcaption>
</figure>
<figure class="screens__item screens__item--large">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<figcaption>المشتركين</figcaption>
</figure>
</div>
</div>
</section>
<!-- Differentiator -->
<section class="diff section">
<section class="diff">
<div class="container">
<div class="diff__content">
<h2 class="diff__title">مش نظام محاسبة تم تعديله.</h2>
<p class="diff__text">El-Captain مبني من الصفر لإدارة الأكاديميات الرياضية. كل شاشة وكل تقرير مصمم لواقع الأكاديمية المصرية — عربي بالكامل، من اليمين لليسار، بمصطلحات رياضية صح.</p>
</div>
<h2 class="diff__statement">مش نظام محاسبة تم تعديله.<br>مبني من الصفر للأكاديميات الرياضية.</h2>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content">
<h2 class="cta-section__title">جرّب النظام مجاناً</h2>
<p class="cta-section__desc">10 أيام تجربة كاملة بدون بطاقة ائتمان.</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">ابدأ التجربة</a>
<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>
تواصل عبر WhatsApp
</a>
</div>
<section class="cta">
<div class="container cta__inner">
<p class="cta__text">جرّب النظام. 10 أيام. بدون بطاقة.</p>
<div class="cta__actions">
<a href="contact.html" class="hero__btn-primary">ابدأ التجربة</a>
<a href="https://wa.me/201XXXXXXXXX" class="cta__wa" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
WhatsApp
</a>
</div>
</div>
</section>
......@@ -205,7 +127,6 @@
</a>
<p class="footer__brand-desc">نظام إدارة متكامل للأكاديميات الرياضية في مصر.</p>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<div class="footer__links">
......@@ -213,38 +134,25 @@
<a href="features.html#programs" class="footer__link">البرامج</a>
<a href="features.html#finance" class="footer__link">المالية</a>
<a href="features.html#attendance" class="footer__link">الحضور</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
</div>
</div>
<div>
<h4 class="footer__col-title">صفحات</h4>
<div class="footer__links">
<a href="features.html" class="footer__link">كل المزايا</a>
<a href="features.html" class="footer__link">المزايا</a>
<a href="pricing.html" class="footer__link">التسعير</a>
<a href="swimming.html" class="footer__link">السباحة</a>
<a href="contact.html" class="footer__link">تواصل معنا</a>
</div>
</div>
<div>
<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 class="footer__bottom">
<span class="footer__copy">&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
<span class="footer__copy">&copy; 2024 El-Captain</span>
</div>
</div>
</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">
<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>
......
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