Skip to content

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

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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent af9da542
Show whitespace changes
Inline Side-by-side
Showing with 257 additions and 348 deletions
public/css/home.css
View file @ 32948c46
/* ============================================================
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;
@media (max-width: 900px) {
.features__grid { grid-template-columns: repeat(2, 1fr); }
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@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;
}
.showcase__grid figure:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.more-screens__row img {
.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
View file @ 32948c46
......@@ -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 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>
</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>
<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>
</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 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>
</section>
<!-- Differentiator: one statement, big -->
<section class="statement">
<div class="container">
<blockquote class="statement__quote">
"إحنا مش بنبيع Excel بواجهة حلوة.<br>
ده نظام اتبنى من جوه أكاديمية — مش من جوه شركة software."
</blockquote>
</div>
</section>
<!-- Extra screenshots row -->
<section class="more-screens">
<!-- Screenshot showcase -->
<section class="showcase">
<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">
<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>
<a href="contact.html">تواصل</a>
</nav>
<span class="site-footer__copy">&copy; 2024</span>
</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>
......
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