Kill AI slop tells: card grid → link list, remove pill badges, break center monotony

- Modules section: asymmetric 2-column layout with a simple nav list
  instead of 6 identical icon+title+desc cards (explicitly banned pattern)
- Differentiator: left-aligned, removed teal pill badges
- Screenshots heading: left-aligned to break all-centered monotony
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/home.css

@@ -99,7 +99,6 @@
   font-weight: 700;
   color: var(--ink-primary);
   margin-block-end: var(--space-xl);
-  text-align: center;
 }
 
 .product-showcase__track-wrap {
@@ -153,73 +152,63 @@
 }
 
 
-/* --- Modules Grid ------------------------------------------------ */
+/* --- Modules (asymmetric list, not a card grid) ----------------- */
 
 .modules {
   padding-block: var(--space-2xl);
   background: var(--bg-muted);
 }
 
+.modules__layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
+  align-items: start;
+}
+
 .modules__heading {
-  font-size: var(--text-2xl);
-  font-weight: 700;
+  font-size: var(--text-3xl);
+  font-weight: 800;
   color: var(--ink-primary);
-  margin-block-end: var(--space-xl);
-  text-align: center;
+  margin-block-end: var(--space-md);
 }
 
-.modules__grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-lg);
+.modules__sub {
+  font-size: var(--text-base);
+  color: var(--ink-secondary);
+  line-height: var(--leading-relaxed);
 }
 
-.module-card {
+.modules__list {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-sm);
-  padding: var(--space-lg);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  text-decoration: none;
-  transition: box-shadow var(--duration-normal) var(--ease-out),
-              border-color var(--duration-normal) var(--ease-out);
-}
-
-.module-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-accent);
-}
-
-.module-card__icon {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  max-width: 28px;
-  color: var(--color-accent);
-  flex-shrink: 0;
+  gap: 0;
 }
 
-.module-card__title {
+.modules__item {
+  display: block;
+  padding: var(--space-md) 0;
   font-size: var(--text-lg);
-  font-weight: 700;
+  font-weight: 600;
   color: var(--ink-primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: color var(--duration-fast) var(--ease-out);
 }
 
-.module-card__desc {
-  font-size: var(--text-sm);
-  color: var(--ink-secondary);
-  line-height: var(--leading-normal);
+.modules__item:first-child {
+  border-top: 1px solid var(--border-subtle);
 }
 
-@media (max-width: 768px) {
-  .modules__grid { grid-template-columns: repeat(2, 1fr); }
+.modules__item:hover {
+  color: var(--color-accent);
 }
 
-@media (max-width: 480px) {
-  .modules__grid { grid-template-columns: 1fr; }
+@media (max-width: 768px) {
+  .modules__layout {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
 }
 
 
@@ -230,9 +219,7 @@
 }
 
 .diff__content {
-  max-width: 640px;
-  margin-inline: auto;
-  text-align: center;
+  max-width: 580px;
 }
 
 .diff__title {
@@ -246,24 +233,6 @@
   font-size: var(--text-base);
   color: var(--ink-secondary);
   line-height: var(--leading-relaxed);
-  margin-block-end: var(--space-lg);
-}
-
-.diff__points {
-  display: flex;
-  justify-content: center;
-  gap: var(--space-md);
-  flex-wrap: wrap;
-}
-
-.diff__point {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-accent-dark);
-  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);
 }
 
 

public/index.html

@@ -147,84 +147,32 @@
     </div>
   </section>
 
-  <!-- What it covers -->
+  <!-- What it covers — simple list, not a card grid -->
   <section class="modules section">
     <div class="container">
+      <div class="modules__layout">
+        <div class="modules__text">
           <h2 class="modules__heading">يغطي كل عمليات الأكاديمية</h2>
-
-      <div class="modules__grid">
-        <a href="features.html#participants" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <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>
-          <h3 class="module-card__title">المشتركين</h3>
-          <p class="module-card__desc">تسجيل، ملفات، حالات، أولياء أمور</p>
-        </a>
-
-        <a href="features.html#programs" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="12" cy="12" r="10"/>
-            <path d="M12 6v6l4 2"/>
-          </svg>
-          <h3 class="module-card__title">البرامج والجداول</h3>
-          <p class="module-card__desc">أنشطة، مجموعات، مواعيد، مدربين</p>
-        </a>
-
-        <a href="features.html#finance" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <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>
-          <h3 class="module-card__title">المالية</h3>
-          <p class="module-card__desc">فواتير، أقساط، خزينة، قيد مزدوج</p>
-        </a>
-
-        <a href="features.html#attendance" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <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>
-          <h3 class="module-card__title">الحضور</h3>
-          <p class="module-card__desc">تسجيل لحظي، إشعارات، تقارير غياب</p>
-        </a>
-
-        <a href="features.html#inventory" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <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>
-          <h3 class="module-card__title">المخازن</h3>
-          <p class="module-card__desc">منتجات، حركات مخزون، أوامر شراء</p>
-        </a>
-
-        <a href="features.html#hr" class="module-card">
-          <svg class="module-card__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <rect x="2" y="3" width="20" height="14" rx="2"/>
-            <path d="M8 21h8"/>
-            <path d="M12 17v4"/>
-          </svg>
-          <h3 class="module-card__title">الموارد البشرية</h3>
-          <p class="module-card__desc">موظفين، مرتبات، إجازات، تقييمات</p>
-        </a>
+          <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>
     </div>
   </section>
 
-  <!-- Differentiator — one simple statement -->
+  <!-- Differentiator -->
   <section class="diff section">
     <div class="container">
       <div class="diff__content">
         <h2 class="diff__title">مش نظام محاسبة تم تعديله.</h2>
         <p class="diff__text">El-Captain مبني من الصفر لإدارة الأكاديميات الرياضية. كل شاشة وكل تقرير مصمم لواقع الأكاديمية المصرية — عربي بالكامل، من اليمين لليسار، بمصطلحات رياضية صح.</p>
-        <div class="diff__points">
-          <span class="diff__point">14 وحدة متكاملة</span>
-          <span class="diff__point">RTL عربي أصلي</span>
-          <span class="diff__point">تسعير للسوق المصري</span>
-        </div>
       </div>
     </div>
   </section>