Skip to content

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

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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 3e0d5e9e
Show whitespace changes
Inline Side-by-side
Showing with 49 additions and 132 deletions
public/css/home.css
View file @ 9504dd55
......@@ -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
View file @ 9504dd55
......@@ -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>
......
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