Clean coherent rebuild: hero with image, normal features, proper proportions

Stop experimenting. Just a normal well-built website:
- Hero: text left, screenshot right, normal size
- Features: 3-col grid with icon/title/description
- Screenshots: 2x2 grid, small with captions
- CTA: navy background, white button
- Footer: 3-col with links
Normal proportions, nothing oversized, nothing weird.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/home.css

 /* ============================================================
    El Captain — Homepage
-   Human-designed: varied rhythm, asymmetry, personality.
-   No uniform sections. No repeating patterns.
+   Simple. Coherent. Normal proportions. Hero with image.
    ============================================================ */
 
-/* --- Opener: text-only, confident -------------------------------- */
+/* --- Hero -------------------------------------------------------- */
 
-.opener {
-  padding-block: calc(var(--nav-height) + 4rem) 3rem;
-  max-width: 680px;
-  margin-inline: auto;
-  padding-inline: var(--space-lg);
+.hero {
+  padding-block: calc(var(--nav-height) + 3rem) 3rem;
 }
 
-.opener__headline {
-  font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
-  font-weight: 900;
-  line-height: 1.15;
+.hero > .container {
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.hero__content h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1.3;
   color: var(--ink-primary);
-  margin-block-end: 1rem;
-  letter-spacing: -0.02em;
+  margin-block-end: 0.875rem;
 }
 
-.opener__sub {
-  font-size: 1.0625rem;
+.hero__content p {
+  font-size: 1rem;
   color: var(--ink-secondary);
   line-height: 1.7;
   margin-block-end: 1.5rem;
-  max-width: 50ch;
-}
-
-@media (max-width: 600px) {
-  .opener {
-    padding-block: calc(var(--nav-height) + 2.5rem) 2rem;
-  }
-  .opener__headline {
-    font-size: 1.75rem;
-  }
+  max-width: 44ch;
 }
 
-
-/* --- 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;
+.hero__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
-.bento__item {
-  position: relative;
-  margin: 0;
+.hero__image {
   border-radius: 10px;
   overflow: hidden;
-  background: var(--bg-muted);
+  border: 1px solid var(--border-subtle);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
 }
 
-.bento__item img {
+.hero__image img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  height: auto;
   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) {
-  .bento__grid {
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: 140px;
-  }
-}
-
-@media (max-width: 480px) {
-  .bento__grid {
+  .hero > .container {
     grid-template-columns: 1fr;
-    grid-auto-rows: 160px;
+    gap: 2rem;
   }
-  .bento__item--wide,
-  .bento__item--tall {
-    grid-column: span 1;
-    grid-row: span 1;
+  .hero__content h1 {
+    font-size: 1.625rem;
+  }
+  .hero__image {
+    max-width: 500px;
   }
 }
 
 
-/* --- Flow: numbered steps, left-aligned, staggered --------------- */
+/* --- Features ---------------------------------------------------- */
 
-.flow {
-  padding-block: 4rem;
-  background: var(--bg-surface);
-  border-top: 1px solid var(--border-subtle);
-  border-bottom: 1px solid var(--border-subtle);
+.features {
+  padding-block: 3.5rem;
+  background: var(--bg-muted);
 }
 
-.flow__heading {
-  font-size: 1.375rem;
+.features h2 {
+  font-size: 1.5rem;
   font-weight: 800;
   color: var(--ink-primary);
   margin-block-end: 2rem;
 }
 
-.flow__steps {
+.features__grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem 3rem;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
 }
 
-.flow__step {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
+.feature {
+  padding: 1.25rem;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  transition: box-shadow 200ms ease, border-color 200ms ease;
 }
 
-.flow__num {
-  flex-shrink: 0;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: var(--color-primary);
-  color: #fff;
-  font-size: 0.8125rem;
-  font-weight: 800;
+.feature:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 2px 12px rgba(8, 145, 178, 0.08);
+}
+
+.feature__icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  background: var(--color-accent-ghost);
+  border-radius: 8px;
   display: grid;
   place-items: center;
+  margin-block-end: 0.875rem;
+  color: var(--color-accent);
 }
 
-.flow__step strong {
-  display: block;
+.feature h3 {
   font-size: 0.9375rem;
   font-weight: 700;
   color: var(--ink-primary);
-  margin-block-end: 0.25rem;
+  margin-block-end: 0.375rem;
 }
 
-.flow__step p {
+.feature p {
   font-size: 0.8125rem;
   color: var(--ink-secondary);
   line-height: 1.6;
   max-width: none;
 }
 
-@media (max-width: 700px) {
-  .flow__steps {
-    grid-template-columns: 1fr;
-    gap: 1.25rem;
-  }
-}
-
-
-/* --- Ticker: scrolling module names ------------------------------ */
-
-.ticker-section {
-  padding-block: 2rem;
-  overflow: hidden;
-  background: var(--color-primary);
-}
-
-.ticker {
-  width: 100%;
-  overflow: hidden;
-}
-
-.ticker__track {
-  display: flex;
-  gap: 2.5rem;
-  white-space: nowrap;
-  animation: ticker-scroll 25s linear infinite;
-  width: max-content;
-}
-
-.ticker__track span {
-  font-size: 0.9375rem;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.85);
-  letter-spacing: 0.01em;
-}
-
-@keyframes ticker-scroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-50%); }
+@media (max-width: 900px) {
+  .features__grid { grid-template-columns: repeat(2, 1fr); }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ticker__track {
-    animation: none;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-  }
+@media (max-width: 520px) {
+  .features__grid { grid-template-columns: 1fr; }
 }
 
 
-/* --- Statement: full-width quote --------------------------------- */
+/* --- Showcase ---------------------------------------------------- */
 
-.statement {
-  padding-block: 4rem;
+.showcase {
+  padding-block: 3.5rem;
 }
 
-.statement__quote {
-  font-size: clamp(1.125rem, 2vw + 0.5rem, 1.625rem);
-  font-weight: 700;
-  line-height: 1.6;
+.showcase h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
   color: var(--ink-primary);
-  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;
+  margin-block-end: 1.5rem;
 }
 
-.more-screens__row {
+.showcase__grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
 }
 
-.more-screens__row figure {
+.showcase__grid figure {
   margin: 0;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  transition: box-shadow 200ms ease;
 }
 
-.more-screens__row img {
+.showcase__grid figure:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+}
+
+.showcase__grid img {
   width: 100%;
   height: auto;
   display: block;
 }
 
+.showcase__grid figcaption {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ink-secondary);
+  border-top: 1px solid var(--border-subtle);
+}
+
 @media (max-width: 600px) {
-  .more-screens__row {
-    grid-template-columns: 1fr;
-  }
+  .showcase__grid { grid-template-columns: 1fr; }
 }
 
 
-/* --- Final CTA --------------------------------------------------- */
+/* --- CTA --------------------------------------------------------- */
 
-.final-cta {
+.cta {
   padding-block: 3.5rem;
-  background: var(--bg-dark);
+  background: var(--color-primary);
+  text-align: center;
 }
 
-.final-cta__inner {
-  text-align: center;
+.cta h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: #fff;
+  margin-block-end: 0.5rem;
 }
 
-.final-cta h2 {
-  font-size: 1.375rem;
-  font-weight: 700;
-  color: var(--ink-on-dark);
+.cta > .container > p {
+  font-size: 0.9375rem;
+  color: rgba(255,255,255,0.75);
   margin-block-end: 1.5rem;
+  max-width: none;
 }
 
-.final-cta__actions {
+.cta__actions {
   display: flex;
   justify-content: center;
   gap: 0.75rem;
   flex-wrap: wrap;
 }
 
+/* Override primary button to white on dark CTA */
+.cta .btn--primary {
+  background: #fff;
+  color: var(--color-primary);
+  border-color: #fff;
+  box-shadow: none;
+}
+.cta .btn--primary:hover {
+  background: var(--bg-muted);
+  color: var(--color-primary);
+}
 
-/* --- Site Footer: minimal bar ------------------------------------ */
 
-.site-footer {
-  padding-block: 1.25rem;
-  border-top: 1px solid var(--border-subtle);
+/* --- Footer ------------------------------------------------------ */
+
+.footer {
+  padding-block: 2.5rem 1.5rem;
+  background: var(--bg-dark);
+  color: var(--ink-on-dark);
 }
 
-.site-footer__inner {
-  display: flex;
-  align-items: center;
+.footer__grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
   gap: 2rem;
-  flex-wrap: wrap;
+  margin-block-end: 2rem;
 }
 
-.site-footer__logo {
-  font-size: 0.9375rem;
-  font-weight: 800;
-  color: var(--ink-primary);
-  text-decoration: none;
+.footer__brand p {
+  font-size: 0.8125rem;
+  color: var(--ink-on-dark-muted);
+  margin-block-start: 0.75rem;
+  max-width: 30ch;
+  line-height: 1.6;
 }
 
-.site-footer__nav {
-  display: flex;
-  gap: 1.25rem;
+.footer__grid h4 {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ink-on-dark);
+  margin-block-end: 0.75rem;
 }
 
-.site-footer__nav a {
+.footer__grid a {
+  display: block;
   font-size: 0.8125rem;
-  color: var(--ink-secondary);
+  color: var(--ink-on-dark-muted);
   text-decoration: none;
+  padding-block: 0.25rem;
+  transition: color 150ms ease;
 }
 
-.site-footer__nav a:hover {
-  color: var(--color-accent);
+.footer__grid a:hover {
+  color: #fff;
 }
 
-.site-footer__copy {
-  margin-inline-start: auto;
+.footer__bottom {
+  padding-block-start: 1.5rem;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+
+.footer__bottom span {
   font-size: 0.75rem;
-  color: var(--ink-muted);
+  color: var(--ink-on-dark-muted);
 }
 
 @media (max-width: 600px) {
-  .site-footer__inner {
-    justify-content: center;
-    text-align: center;
-  }
-  .site-footer__copy {
-    margin-inline-start: 0;
-    width: 100%;
+  .footer__grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
   }
 }

public/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>El-Captain — الأكاديمية كلها في إيدك</title>
-  <meta name="description" content="نظام إدارة أكاديميات رياضية — تسجيل، فواتير، حضور، جداول، مخازن. مبني للسوق المصري.">
+  <title>El-Captain — نظام إدارة الأكاديميات الرياضية</title>
+  <meta name="description" content="نظام متكامل لإدارة الأكاديميات الرياضية — مشتركين، مالية، حضور، جداول، ومخازن.">
   <link rel="stylesheet" href="css/tokens.css">
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/components.css">
@@ -33,153 +33,109 @@
 
   <main>
 
-    <!-- Opener: no image, just a statement -->
-    <section class="opener">
+    <!-- Hero -->
+    <section class="hero">
       <div class="container">
-        <h1 class="opener__headline">سيب الكشاكيل.<br>الأكاديمية كلها أونلاين.</h1>
-        <p class="opener__sub">من تسجيل المشترك لحد قفل الخزنة آخر اليوم — كل حاجة في مكان واحد.</p>
-        <a href="contact.html" class="btn btn--primary btn--lg">جرّب 10 أيام ببلاش</a>
-      </div>
-    </section>
-
-    <!-- Bento: asymmetric screenshot grid -->
-    <section class="bento">
-      <div class="container">
-        <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 class="hero__content">
+          <h1>نظام إدارة متكامل للأكاديميات الرياضية</h1>
+          <p>سجّل المشتركين، تابع الحضور، أصدر الفواتير، ونظّم الجداول — كل ده من مكان واحد. مبني بالعربي للسوق المصري.</p>
+          <div class="hero__actions">
+            <a href="contact.html" class="btn btn--primary">جرّب مجاناً 10 أيام</a>
+            <a href="features.html" class="btn btn--secondary">اعرف أكتر</a>
+          </div>
+        </div>
+        <div class="hero__image">
+          <img src="screenshots/app/dashboard.png" alt="لوحة التحكم الرئيسية" width="640" height="400">
         </div>
       </div>
     </section>
 
-    <!-- Flow: the user journey, not a feature list -->
-    <section class="flow">
+    <!-- Features -->
+    <section class="features">
       <div class="container">
-        <h2 class="flow__heading">يومك في الأكاديمية — من أوله لآخره</h2>
-        <div class="flow__steps">
-          <div class="flow__step">
-            <span class="flow__num">1</span>
-            <div>
-              <strong>المشترك يسجّل</strong>
-              <p>بياناته، ولي أمره، نشاطه، مجموعته — كلها في شاشة واحدة.</p>
+        <h2>كل اللي أكاديميتك محتاجاه</h2>
+        <div class="features__grid">
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
             </div>
+            <h3>إدارة المشتركين</h3>
+            <p>ملفات كاملة، أولياء أمور، تصنيفات، وسجل نشاط لكل مشترك.</p>
           </div>
-          <div class="flow__step">
-            <span class="flow__num">2</span>
-            <div>
-              <strong>الفاتورة تتعمل تلقائي</strong>
-              <p>بناءً على البرنامج والخصومات. أقساط؟ محفظة؟ كاش؟ كله موجود.</p>
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
             </div>
+            <h3>المالية والفواتير</h3>
+            <p>فواتير تلقائية، أقساط، محافظ إلكترونية، وقيد مزدوج.</p>
           </div>
-          <div class="flow__step">
-            <span class="flow__num">3</span>
-            <div>
-              <strong>المدرب يسجّل الحضور</strong>
-              <p>من الموبايل. حاضر، متأخر، غايب. والنظام بيعمل الباقي.</p>
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
             </div>
+            <h3>الحضور والغياب</h3>
+            <p>تسجيل من الموبايل، حساب التأخير، وتنبيهات للغياب المتكرر.</p>
           </div>
-          <div class="flow__step">
-            <span class="flow__num">4</span>
-            <div>
-              <strong>آخر اليوم — تقفل الوردية</strong>
-              <p>الخزنة متطابقة؟ تمام. فيه فرق؟ النظام بيقولك فين.</p>
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
             </div>
+            <h3>الجداول والبرامج</h3>
+            <p>جدول أسبوعي، مجموعات، حصص تلقائية، وتعيين المدربين.</p>
+          </div>
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+            </div>
+            <h3>المخازن</h3>
+            <p>تتبع المنتجات، حركات الإدخال والصرف، جرد، وأوامر شراء.</p>
+          </div>
+          <div class="feature">
+            <div class="feature__icon">
+              <svg width="22" height="22" 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>
     </section>
 
-    <!-- Modules: marquee ticker -->
-    <section class="ticker-section">
-      <div class="ticker">
-        <div class="ticker__track">
-          <span>المشتركين</span>
-          <span>البرامج</span>
-          <span>المجموعات</span>
-          <span>الفواتير</span>
-          <span>الحضور</span>
-          <span>المخازن</span>
-          <span>المرتبات</span>
-          <span>الجداول</span>
-          <span>المحافظ</span>
-          <span>التقارير</span>
-          <span>الأقساط</span>
-          <span>المنشآت</span>
-          <span>الحجوزات</span>
-          <span>الإشعارات</span>
-          <!-- repeat -->
-          <span>المشتركين</span>
-          <span>البرامج</span>
-          <span>المجموعات</span>
-          <span>الفواتير</span>
-          <span>الحضور</span>
-          <span>المخازن</span>
-          <span>المرتبات</span>
-          <span>الجداول</span>
-          <span>المحافظ</span>
-          <span>التقارير</span>
-          <span>الأقساط</span>
-          <span>المنشآت</span>
-          <span>الحجوزات</span>
-          <span>الإشعارات</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- Differentiator: one statement, big -->
-    <section class="statement">
+    <!-- Screenshot showcase -->
+    <section class="showcase">
       <div class="container">
-        <blockquote class="statement__quote">
-          "إحنا مش بنبيع Excel بواجهة حلوة.<br>
-          ده نظام اتبنى من جوه أكاديمية — مش من جوه شركة software."
-        </blockquote>
-      </div>
-    </section>
-
-    <!-- Extra screenshots row -->
-    <section class="more-screens">
-      <div class="container">
-        <div class="more-screens__row">
+        <h2>من داخل النظام</h2>
+        <div class="showcase__grid">
+          <figure>
+            <img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy">
+            <figcaption>مكتب الاستقبال</figcaption>
+          </figure>
           <figure>
-            <img src="screenshots/app/groups.png" alt="المجموعات" loading="lazy">
+            <img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
+            <figcaption>الجدول الأسبوعي</figcaption>
           </figure>
           <figure>
-            <img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
+            <img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
+            <figcaption>النظرة المالية</figcaption>
           </figure>
           <figure>
-            <img src="screenshots/app/facilities.png" alt="المنشآت" loading="lazy">
+            <img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
+            <figcaption>قائمة المشتركين</figcaption>
           </figure>
         </div>
       </div>
     </section>
 
     <!-- CTA -->
-    <section class="final-cta">
-      <div class="container final-cta__inner">
-        <h2>10 أيام مجاناً. بدون بطاقة. بدون التزام.</h2>
-        <div class="final-cta__actions">
+    <section class="cta">
+      <div class="container">
+        <h2>ابدأ تجربتك المجانية</h2>
+        <p>10 أيام كاملة. بدون بطاقة ائتمان. بدون التزام.</p>
+        <div class="cta__actions">
           <a href="contact.html" class="btn btn--primary btn--lg">ابدأ دلوقتي</a>
           <a href="https://wa.me/201XXXXXXXXX" class="btn btn--whatsapp" target="_blank" rel="noopener">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
-            كلمنا على WhatsApp
+            تواصل على WhatsApp
           </a>
         </div>
       </div>
@@ -187,15 +143,30 @@
 
   </main>
 
-  <footer class="site-footer">
-    <div class="container site-footer__inner">
-      <a href="/" class="site-footer__logo">El-Captain</a>
-      <nav class="site-footer__nav">
-        <a href="features.html">المزايا</a>
-        <a href="pricing.html">التسعير</a>
-        <a href="contact.html">تواصل</a>
-      </nav>
-      <span class="site-footer__copy">&copy; 2024</span>
+  <footer class="footer">
+    <div class="container">
+      <div class="footer__grid">
+        <div class="footer__brand">
+          <a href="/" class="footer__brand-logo">
+            <span class="nav__logo-mark">EC</span>
+            <span class="nav__logo-text">El-Captain</span>
+          </a>
+          <p>نظام إدارة متكامل للأكاديميات الرياضية في مصر.</p>
+        </div>
+        <div>
+          <h4>النظام</h4>
+          <a href="features.html">المزايا</a>
+          <a href="pricing.html">التسعير</a>
+        </div>
+        <div>
+          <h4>تواصل</h4>
+          <a href="contact.html">تواصل معنا</a>
+          <a href="https://wa.me/201XXXXXXXXX" target="_blank" rel="noopener">WhatsApp</a>
+        </div>
+      </div>
+      <div class="footer__bottom">
+        <span>&copy; 2024 El-Captain. جميع الحقوق محفوظة.</span>
+      </div>
     </div>
   </footer>