Skip to content

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

Nuke and rebuild: human-designed feel with personality and varied rhythm 

Addressing all 4 AI tells: bad proportions, sterile polish, repeating
patterns, generic copy. New approach:
- Text-only opener with Egyptian dialect copy (no hero image)
- Bento mosaic grid (asymmetric cells, not uniform)
- Numbered flow showing actual user journey
- Navy ticker marquee breaking the pattern
- Blockquote statement with attitude
- Varied section sizes (no uniform padding)
- Minimal footer (one row)
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 4a7360fa
Hide whitespace changes
Inline Side-by-side
Showing with 336 additions and 280 deletions
public/css/home.css
View file @ af9da542
/* ============================================================ /* ============================================================
El Captain — Homepage El Captain — Homepage
Compact. Dense. Stripe/Linear energy. Human-designed: varied rhythm, asymmetry, personality.
Maximum info above the fold, tight spacing, small visuals. No uniform sections. No repeating patterns.
============================================================ */ ============================================================ */
/* --- Hero: side-by-side, compact --------------------------------- */ /* --- Opener: text-only, confident -------------------------------- */
.hero { .opener {
padding-block: calc(var(--nav-height) + 2.5rem) 2.5rem; padding-block: calc(var(--nav-height) + 4rem) 3rem;
max-width: 680px;
margin-inline: auto;
padding-inline: var(--space-lg);
} }
.hero__grid { .opener__headline {
display: grid; font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
grid-template-columns: 1fr 1fr; font-weight: 900;
gap: 2rem; line-height: 1.15;
align-items: center;
}
.hero__text h1 {
font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--ink-primary); color: var(--ink-primary);
margin-block-end: 0.75rem; margin-block-end: 1rem;
letter-spacing: -0.02em;
} }
.hero__text p { .opener__sub {
font-size: 0.938rem; font-size: 1.0625rem;
color: var(--ink-secondary); color: var(--ink-secondary);
line-height: 1.6; line-height: 1.7;
margin-block-end: 1.25rem; margin-block-end: 1.5rem;
max-width: 40ch; max-width: 50ch;
} }
.hero__actions { @media (max-width: 600px) {
display: flex; .opener {
gap: 0.625rem; padding-block: calc(var(--nav-height) + 2.5rem) 2rem;
flex-wrap: wrap; }
.opener__headline {
font-size: 1.75rem;
}
} }
.hero__img {
border-radius: 8px; /* --- Bento: asymmetric screenshot mosaic ------------------------- */
.bento {
padding-block: 0 4rem;
}
.bento__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 8px;
}
.bento__item {
position: relative;
margin: 0;
border-radius: 10px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-subtle); background: var(--bg-muted);
box-shadow: var(--shadow-md);
} }
.hero__img img { .bento__item img {
width: 100%; width: 100%;
height: auto; height: 100%;
object-fit: cover;
display: block; display: block;
transition: transform 300ms ease;
}
.bento__item:hover img {
transform: scale(1.03);
}
.bento__item--wide {
grid-column: span 2;
}
.bento__item--tall {
grid-row: span 2;
}
.bento__label {
position: absolute;
bottom: 0;
inset-inline: 0;
padding: 0.5rem 0.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero__grid { .bento__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
}
}
@media (max-width: 480px) {
.bento__grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1.5rem; grid-auto-rows: 160px;
} }
.hero__img { .bento__item--wide,
max-width: 480px; .bento__item--tall {
grid-column: span 1;
grid-row: span 1;
} }
} }
/* --- Modules: tight 3-col grid ----------------------------------- */ /* --- Flow: numbered steps, left-aligned, staggered --------------- */
.modules { .flow {
padding-block: 3rem; padding-block: 4rem;
background: var(--bg-surface);
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
} }
.modules__heading { .flow__heading {
font-size: 1.25rem; font-size: 1.375rem;
font-weight: 700; font-weight: 800;
color: var(--ink-primary); color: var(--ink-primary);
margin-block-end: 1.5rem; margin-block-end: 2rem;
} }
.modules__grid { .flow__steps {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1.5rem 3rem;
} }
.mod { .flow__step {
display: flex; display: flex;
gap: 1rem;
align-items: flex-start; align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mod:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-sm);
} }
.mod svg { .flow__num {
flex-shrink: 0; flex-shrink: 0;
color: var(--color-accent); width: 2rem;
margin-block-start: 2px; height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 0.8125rem;
font-weight: 800;
display: grid;
place-items: center;
} }
.mod h3 { .flow__step strong {
font-size: 0.875rem; display: block;
font-size: 0.9375rem;
font-weight: 700; font-weight: 700;
color: var(--ink-primary); color: var(--ink-primary);
margin-block-end: 0.125rem; margin-block-end: 0.25rem;
line-height: 1.3;
} }
.mod p { .flow__step p {
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--ink-muted); color: var(--ink-secondary);
line-height: 1.5; line-height: 1.6;
max-width: none; max-width: none;
} }
@media (max-width: 900px) { @media (max-width: 700px) {
.modules__grid { grid-template-columns: repeat(2, 1fr); } .flow__steps {
} grid-template-columns: 1fr;
@media (max-width: 520px) { gap: 1.25rem;
.modules__grid { grid-template-columns: 1fr; } }
} }
/* --- Screenshots: horizontal row of small thumbnails ------------- */ /* --- Ticker: scrolling module names ------------------------------ */
.screens {
padding-block: 3rem;
background: var(--bg-muted);
}
.screens__heading {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 1.25rem;
}
.screens__row { .ticker-section {
display: grid; padding-block: 2rem;
grid-template-columns: repeat(6, 1fr); overflow: hidden;
gap: 0.75rem; background: var(--color-primary);
} }
.screens__thumb { .ticker {
margin: 0; width: 100%;
border-radius: 6px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
transition: transform 150ms ease, box-shadow 150ms ease;
} }
.screens__thumb:hover { .ticker__track {
transform: translateY(-2px); display: flex;
box-shadow: var(--shadow-md); gap: 2.5rem;
white-space: nowrap;
animation: ticker-scroll 25s linear infinite;
width: max-content;
} }
.screens__thumb img { .ticker__track span {
width: 100%; font-size: 0.9375rem;
height: auto; font-weight: 700;
display: block; color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.01em;
} }
.screens__thumb figcaption { @keyframes ticker-scroll {
padding: 0.375rem 0.5rem; from { transform: translateX(0); }
font-size: 0.6875rem; to { transform: translateX(-50%); }
font-weight: 600;
color: var(--ink-muted);
text-align: center;
border-top: 1px solid var(--border-subtle);
} }
@media (max-width: 900px) { @media (prefers-reduced-motion: reduce) {
.screens__row { grid-template-columns: repeat(3, 1fr); } .ticker__track {
} animation: none;
@media (max-width: 520px) { flex-wrap: wrap;
.screens__row { grid-template-columns: repeat(2, 1fr); } gap: 1rem;
justify-content: center;
}
} }
/* --- Why: compact 2x2 grid --------------------------------------- */ /* --- Statement: full-width quote --------------------------------- */
.why { .statement {
padding-block: 3rem; padding-block: 4rem;
border-top: 1px solid var(--border-subtle);
} }
.why h2 { .statement__quote {
font-size: 1.25rem; font-size: clamp(1.125rem, 2vw + 0.5rem, 1.625rem);
font-weight: 700; font-weight: 700;
line-height: 1.6;
color: var(--ink-primary); color: var(--ink-primary);
margin-block-end: 1.25rem; max-width: 600px;
font-style: normal;
border-inline-start: 3px solid var(--color-accent);
padding-inline-start: 1.25rem;
}
/* --- More screenshots: simple 3-col, small ----------------------- */
.more-screens {
padding-block: 0 4rem;
} }
.why__grid { .more-screens__row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 0.75rem;
} }
.why__item { .more-screens__row figure {
padding: 1rem; margin: 0;
border: 1px solid var(--border-subtle);
border-radius: 8px; border-radius: 8px;
background: var(--bg-surface); overflow: hidden;
border: 1px solid var(--border-subtle);
} }
.why__item strong { .more-screens__row img {
width: 100%;
height: auto;
display: block; display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--ink-primary);
margin-block-end: 0.25rem;
}
.why__item span {
font-size: 0.8125rem;
color: var(--ink-secondary);
line-height: 1.5;
} }
@media (max-width: 520px) { @media (max-width: 600px) {
.why__grid { grid-template-columns: 1fr; } .more-screens__row {
grid-template-columns: 1fr;
}
} }
/* --- CTA: minimal ----------------------------------------------- */ /* --- Final CTA --------------------------------------------------- */
.cta { .final-cta {
padding-block: 3rem; padding-block: 3.5rem;
background: var(--bg-dark); background: var(--bg-dark);
}
.final-cta__inner {
text-align: center; text-align: center;
} }
.cta h2 { .final-cta h2 {
font-size: 1.25rem; font-size: 1.375rem;
font-weight: 700; font-weight: 700;
color: var(--ink-on-dark); color: var(--ink-on-dark);
margin-block-end: 1.25rem; margin-block-end: 1.5rem;
} }
.cta__actions { .final-cta__actions {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 0.75rem;
...@@ -254,45 +295,55 @@ ...@@ -254,45 +295,55 @@
} }
/* --- Footer: single row, compact --------------------------------- */ /* --- Site Footer: minimal bar ------------------------------------ */
.footer { .site-footer {
padding-block: 1.5rem; padding-block: 1.25rem;
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
} }
.footer__inner { .site-footer__inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem;
} }
.footer__links-row { .site-footer__logo {
font-size: 0.9375rem;
font-weight: 800;
color: var(--ink-primary);
text-decoration: none;
}
.site-footer__nav {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
} }
.footer__links-row a { .site-footer__nav a {
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--ink-secondary); color: var(--ink-secondary);
text-decoration: none; text-decoration: none;
transition: color 120ms ease;
} }
.footer__links-row a:hover { .site-footer__nav a:hover {
color: var(--color-accent); color: var(--color-accent);
} }
.footer__copy { .site-footer__copy {
margin-inline-start: auto;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--ink-muted); color: var(--ink-muted);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.footer__inner { .site-footer__inner {
flex-direction: column; justify-content: center;
text-align: center; text-align: center;
} }
.site-footer__copy {
margin-inline-start: 0;
width: 100%;
}
} }
public/index.html
View file @ af9da542
...@@ -3,9 +3,8 @@ ...@@ -3,9 +3,8 @@
<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="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن."> <meta name="description" content="نظام إدارة أكاديميات رياضية — تسجيل، فواتير، حضور، جداول، مخازن. مبني للسوق المصري.">
<link rel="canonical" href="https://el-captain-website.caprover.al-arcade.com/">
<link rel="stylesheet" href="css/tokens.css"> <link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/components.css">
...@@ -34,141 +33,153 @@ ...@@ -34,141 +33,153 @@
<main> <main>
<!-- Hero: compact, text + small screenshot side by side --> <!-- Opener: no image, just a statement -->
<section class="hero"> <section class="opener">
<div class="container hero__grid"> <div class="container">
<div class="hero__text"> <h1 class="opener__headline">سيب الكشاكيل.<br>الأكاديمية كلها أونلاين.</h1>
<h1>نظام إدارة متكامل<br>للأكاديميات الرياضية</h1> <p class="opener__sub">من تسجيل المشترك لحد قفل الخزنة آخر اليوم — كل حاجة في مكان واحد.</p>
<p>مشتركين، مالية، حضور، جداول، مخازن، وموارد بشرية. 14 وحدة في نظام واحد. عربي بالكامل.</p> <a href="contact.html" class="btn btn--primary btn--lg">جرّب 10 أيام ببلاش</a>
<div class="hero__actions"> </div>
<a href="contact.html" class="btn btn--primary">جرّب مجاناً</a> </section>
<a href="features.html" class="btn btn--secondary">المزايا</a>
</div> <!-- Bento: asymmetric screenshot grid -->
</div> <section class="bento">
<div class="hero__img"> <div class="container">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" width="600" height="375"> <div class="bento__grid">
<figure class="bento__item bento__item--wide">
<img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy">
<span class="bento__label">مكتب الاستقبال</span>
</figure>
<figure class="bento__item bento__item--tall">
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<span class="bento__label">المشتركين</span>
</figure>
<figure class="bento__item">
<img src="screenshots/app/financial-overview.png" alt="المالية" loading="lazy">
<span class="bento__label">المالية</span>
</figure>
<figure class="bento__item">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول" loading="lazy">
<span class="bento__label">الجدول الأسبوعي</span>
</figure>
<figure class="bento__item bento__item--wide">
<img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy">
<span class="bento__label">الحضور والغياب</span>
</figure>
</div> </div>
</div> </div>
</section> </section>
<!-- Modules: compact grid, no fluff --> <!-- Flow: the user journey, not a feature list -->
<section class="modules"> <section class="flow">
<div class="container"> <div class="container">
<h2 class="modules__heading">كل ما تحتاجه في مكان واحد</h2> <h2 class="flow__heading">يومك في الأكاديمية — من أوله لآخره</h2>
<div class="modules__grid"> <div class="flow__steps">
<div class="mod"> <div class="flow__step">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> <span class="flow__num">1</span>
<div>
<h3>المشتركين</h3>
<p>تسجيل، ملفات، أولياء أمور، تصنيفات</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<div> <div>
<h3>البرامج والجداول</h3> <strong>المشترك يسجّل</strong>
<p>مجموعات، جدول أسبوعي، حصص تلقائية</p> <p>بياناته، ولي أمره، نشاطه، مجموعته — كلها في شاشة واحدة.</p>
</div> </div>
</div> </div>
<div class="mod"> <div class="flow__step">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> <span class="flow__num">2</span>
<div> <div>
<h3>المالية</h3> <strong>الفاتورة تتعمل تلقائي</strong>
<p>فواتير، أقساط، خزينة، محافظ، قيد مزدوج</p> <p>بناءً على البرنامج والخصومات. أقساط؟ محفظة؟ كاش؟ كله موجود.</p>
</div> </div>
</div> </div>
<div class="mod"> <div class="flow__step">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> <span class="flow__num">3</span>
<div> <div>
<h3>الحضور</h3> <strong>المدرب يسجّل الحضور</strong>
<p>تسجيل تلقائي، تأخير، غياب، تنبيهات</p> <p>من الموبايل. حاضر، متأخر، غايب. والنظام بيعمل الباقي.</p>
</div> </div>
</div> </div>
<div class="mod"> <div class="flow__step">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg> <span class="flow__num">4</span>
<div> <div>
<h3>المخازن</h3> <strong>آخر اليوم — تقفل الوردية</strong>
<p>منتجات، حركات، جرد، أوامر شراء</p> <p>الخزنة متطابقة؟ تمام. فيه فرق؟ النظام بيقولك فين.</p>
</div>
</div>
<div class="mod">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
<div>
<h3>الموارد البشرية</h3>
<p>موظفين، مدربين، مرتبات، تقييمات</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Screenshots: small inline thumbnails --> <!-- Modules: marquee ticker -->
<section class="screens"> <section class="ticker-section">
<div class="container"> <div class="ticker">
<h2 class="screens__heading">من داخل النظام</h2> <div class="ticker__track">
<div class="screens__row"> <span>المشتركين</span>
<figure class="screens__thumb"> <span>البرامج</span>
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy"> <span>المجموعات</span>
<figcaption>الجدول الأسبوعي</figcaption> <span>الفواتير</span>
</figure> <span>الحضور</span>
<figure class="screens__thumb"> <span>المخازن</span>
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy"> <span>المرتبات</span>
<figcaption>النظرة المالية</figcaption> <span>الجداول</span>
</figure> <span>المحافظ</span>
<figure class="screens__thumb"> <span>التقارير</span>
<img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy"> <span>الأقساط</span>
<figcaption>المشتركين</figcaption> <span>المنشآت</span>
</figure> <span>الحجوزات</span>
<figure class="screens__thumb"> <span>الإشعارات</span>
<img src="screenshots/app/attendance.png" alt="الحضور" loading="lazy"> <!-- repeat -->
<figcaption>الحضور</figcaption> <span>المشتركين</span>
</figure> <span>البرامج</span>
<figure class="screens__thumb"> <span>المجموعات</span>
<img src="screenshots/app/groups.png" alt="المجموعات" loading="lazy"> <span>الفواتير</span>
<figcaption>المجموعات</figcaption> <span>الحضور</span>
</figure> <span>المخازن</span>
<figure class="screens__thumb"> <span>المرتبات</span>
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy"> <span>الجداول</span>
<figcaption>الفواتير</figcaption> <span>المحافظ</span>
</figure> <span>التقارير</span>
<span>الأقساط</span>
<span>المنشآت</span>
<span>الحجوزات</span>
<span>الإشعارات</span>
</div> </div>
</div> </div>
</section> </section>
<!-- Why: short, no padding waste --> <!-- Differentiator: one statement, big -->
<section class="why"> <section class="statement">
<div class="container"> <div class="container">
<h2>ليه El-Captain؟</h2> <blockquote class="statement__quote">
<div class="why__grid"> "إحنا مش بنبيع Excel بواجهة حلوة.<br>
<div class="why__item"> ده نظام اتبنى من جوه أكاديمية — مش من جوه شركة software."
<strong>مبني للأكاديميات</strong> </blockquote>
<span>مش نظام محاسبة معدّل. مبني من الصفر للرياضة.</span> </div>
</div> </section>
<div class="why__item">
<strong>عربي 100%</strong> <!-- Extra screenshots row -->
<span>واجهة عربية كاملة، RTL، مصطلحات السوق المصري.</span> <section class="more-screens">
</div> <div class="container">
<div class="why__item"> <div class="more-screens__row">
<strong>14 وحدة متكاملة</strong> <figure>
<span>كل شيء متصل — التسجيل يولّد الفاتورة والحضور تلقائياً.</span> <img src="screenshots/app/groups.png" alt="المجموعات" loading="lazy">
</div> </figure>
<div class="why__item"> <figure>
<strong>Cloud — بدون سيرفر</strong> <img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<span>ادخل من أي جهاز. بياناتك آمنة ومحفوظة.</span> </figure>
</div> <figure>
<img src="screenshots/app/facilities.png" alt="المنشآت" loading="lazy">
</figure>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA -->
<section class="cta"> <section class="final-cta">
<div class="container cta__inner"> <div class="container final-cta__inner">
<h2>جرّب النظام مجاناً — 10 أيام بدون بطاقة</h2> <h2>10 أيام مجاناً. بدون بطاقة. بدون التزام.</h2>
<div class="cta__actions"> <div class="final-cta__actions">
<a href="contact.html" class="btn btn--primary btn--lg">ابدأ التجربة</a> <a href="contact.html" class="btn btn--primary btn--lg">ابدأ دلوقتي</a>
<a href="https://wa.me/201XXXXXXXXX" class="btn btn--whatsapp" target="_blank" rel="noopener"> <a href="https://wa.me/201XXXXXXXXX" class="btn btn--whatsapp" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
WhatsApp كلمنا على WhatsApp
</a> </a>
</div> </div>
</div> </div>
...@@ -176,21 +187,15 @@ ...@@ -176,21 +187,15 @@
</main> </main>
<footer class="footer"> <footer class="site-footer">
<div class="container footer__inner"> <div class="container site-footer__inner">
<div class="footer__brand"> <a href="/" class="site-footer__logo">El-Captain</a>
<a href="/" class="nav__logo"> <nav class="site-footer__nav">
<span class="nav__logo-mark">EC</span>
<span class="nav__logo-text">El-Captain</span>
</a>
</div>
<div class="footer__links-row">
<a href="features.html">المزايا</a> <a href="features.html">المزايا</a>
<a href="pricing.html">التسعير</a> <a href="pricing.html">التسعير</a>
<a href="swimming.html">السباحة</a> <a href="contact.html">تواصل</a>
<a href="contact.html">تواصل معنا</a> </nav>
</div> <span class="site-footer__copy">&copy; 2024</span>
<span class="footer__copy">&copy; 2024 El-Captain</span>
</div> </div>
</footer> </footer>
......
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