Skip to content

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

Add swimming academy page + real app screenshots across site 

- New dedicated swimming.html targeting lane rental & carnet management pain
- Grid system (space assignment) as hero feature for swimming academies
- Real app screenshots integrated into index.html product showcase carousel
- Swimming teaser banner on homepage linking to dedicated page
- Nav updated across all pages with "السباحة" link
- 21 app screenshots added (dashboard, facilities, pricing, grid, etc.)
- Swimming-specific CSS: pool hero, lane visualization, carnet cards
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 170eaea6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1609 additions and 13 deletions
public/404.html
View file @ 9d19f508
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
<div class="nav__links"> <div class="nav__links">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
</div> </div>
......
public/contact.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/css/home.css
View file @ 9d19f508
...@@ -1192,3 +1192,88 @@ ...@@ -1192,3 +1192,88 @@
); );
margin: 0; margin: 0;
} }
/* ================================================================
11. SWIMMING TEASER BANNER
================================================================ */
.swimming-teaser {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.06) 0%, rgba(8, 145, 178, 0.02) 100%);
border-block: 1px solid rgba(8, 145, 178, 0.12);
padding-block: var(--space-xl);
}
.swimming-teaser__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
flex-wrap: wrap;
}
.swimming-teaser__content {
display: flex;
align-items: center;
gap: var(--space-md);
}
.swimming-teaser__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.swimming-teaser__text {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
line-height: var(--leading-snug);
}
.swimming-teaser__sub {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
margin-block-start: var(--space-2xs);
}
.swimming-teaser__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--color-accent);
color: #FFFFFF;
font-weight: 600;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
text-decoration: none;
white-space: nowrap;
transition:
background var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.swimming-teaser__link:hover {
background: var(--color-accent-dark);
color: #FFFFFF;
transform: translateY(-1px);
}
[dir="rtl"] .swimming-teaser__link svg {
transform: scaleX(-1);
}
@media (max-width: 768px) {
.swimming-teaser__inner {
flex-direction: column;
align-items: flex-start;
text-align: start;
}
.swimming-teaser__link {
align-self: stretch;
justify-content: center;
}
}
public/css/pages.css
View file @ 9d19f508
...@@ -1024,3 +1024,334 @@ ...@@ -1024,3 +1024,334 @@
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
/* ─────────────────────────────────────────────
SWIMMING PAGE
───────────────────────────────────────────── */
.pool-pain__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.pool-pain-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.pool-pain-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px oklch(0 0 0 / 0.08);
}
.pool-pain-card__icon {
width: 3.5rem;
height: 3.5rem;
margin: 0 auto var(--space-md);
display: grid;
place-items: center;
border-radius: var(--radius-lg);
font-size: 1.5rem;
}
.pool-pain-card__icon--red {
background: oklch(0.95 0.04 25);
color: oklch(0.55 0.2 25);
}
.pool-pain-card__icon--amber {
background: oklch(0.95 0.04 80);
color: oklch(0.55 0.15 80);
}
.pool-pain-card__icon--blue {
background: oklch(0.93 0.04 230);
color: oklch(0.50 0.15 230);
}
.pool-pain-card__icon--green {
background: oklch(0.93 0.05 155);
color: oklch(0.45 0.15 155);
}
.pool-pain-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-sm);
}
.pool-pain-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.7;
}
/* Grid Feature showcase */
.grid-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
@media (max-width: 768px) {
.grid-feature {
grid-template-columns: 1fr;
}
}
.grid-feature__content {
order: 2;
}
.grid-feature__visual {
order: 1;
}
.grid-feature__list {
list-style: none;
padding: 0;
margin: var(--space-lg) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.grid-feature__list li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: 1.7;
}
.grid-feature__list li::before {
content: '✓';
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: grid;
place-items: center;
background: oklch(0.93 0.05 170);
color: oklch(0.40 0.15 170);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
}
/* Lane visualization */
.lane-viz {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-lg);
overflow: hidden;
}
.lane-viz__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
}
.lane-viz__title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
}
.lane-viz__time {
font-size: var(--text-xs);
color: var(--ink-muted);
direction: ltr;
}
.lane-viz__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
}
.lane-viz__cell {
aspect-ratio: 1;
border-radius: var(--radius-md);
display: grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 600;
transition: transform 0.2s;
}
.lane-viz__cell--free {
background: oklch(0.96 0.02 230);
color: oklch(0.55 0.1 230);
border: 1px dashed oklch(0.8 0.05 230);
}
.lane-viz__cell--booked {
background: oklch(0.93 0.06 170);
color: oklch(0.35 0.12 170);
}
.lane-viz__cell--external {
background: oklch(0.93 0.05 60);
color: oklch(0.45 0.12 60);
}
.lane-viz__cell--conflict {
background: oklch(0.93 0.06 25);
color: oklch(0.45 0.15 25);
animation: pulse-conflict 1.5s ease-in-out infinite;
}
@keyframes pulse-conflict {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Screenshot showcase */
.screenshot-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
@media (max-width: 768px) {
.screenshot-showcase {
grid-template-columns: 1fr;
}
}
.screenshot-showcase__item {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 4px 24px oklch(0 0 0 / 0.08);
border: 1px solid var(--border-subtle);
}
.screenshot-showcase__item img {
width: 100%;
height: auto;
display: block;
}
.screenshot-showcase__caption {
padding: var(--space-md) var(--space-lg);
background: var(--bg-surface);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
text-align: center;
}
/* Product gallery (horizontal scroll) */
.product-gallery {
display: flex;
gap: var(--space-lg);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-md);
-webkit-overflow-scrolling: touch;
}
.product-gallery::-webkit-scrollbar {
height: 6px;
}
.product-gallery::-webkit-scrollbar-track {
background: oklch(0.95 0 0);
border-radius: 3px;
}
.product-gallery::-webkit-scrollbar-thumb {
background: oklch(0.7 0 0);
border-radius: 3px;
}
.product-gallery__item {
flex: 0 0 min(400px, 80vw);
scroll-snap-align: start;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 4px 24px oklch(0 0 0 / 0.08);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.product-gallery__item img {
width: 100%;
height: auto;
display: block;
}
.product-gallery__caption {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-primary);
text-align: center;
}
/* Swimming teaser banner */
.swimming-teaser {
background: linear-gradient(135deg, oklch(0.25 0.06 230), oklch(0.30 0.08 200));
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
flex-wrap: wrap;
}
@media (max-width: 640px) {
.swimming-teaser {
flex-direction: column;
text-align: center;
}
}
.swimming-teaser__text {
color: white;
}
.swimming-teaser__title {
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: 4px;
}
.swimming-teaser__desc {
font-size: var(--text-sm);
opacity: 0.8;
}
.swimming-teaser__btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: white;
color: var(--brand-primary);
font-weight: 700;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.swimming-teaser__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
}
public/features.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link nav__link--active">المزايا</a> <a href="features.html" class="nav__link nav__link--active">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/index.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link nav__link--active">الرئيسية</a> <a href="/" class="nav__link nav__link--active">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link">التسعير</a> <a href="pricing.html" class="nav__link">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
<div class="hero__visual" data-reveal="200"> <div class="hero__visual" data-reveal="200">
<div class="hero__screenshot"> <div class="hero__screenshot">
<img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم" loading="eager"> <img src="screenshots/app/dashboard.png" alt="لوحة التحكم" loading="eager">
</div> </div>
</div> </div>
</div> </div>
...@@ -310,19 +311,55 @@ ...@@ -310,19 +311,55 @@
<div class="product-showcase__track-wrap"> <div class="product-showcase__track-wrap">
<div class="product-showcase__track" aria-hidden="true"> <div class="product-showcase__track" aria-hidden="true">
<div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="قائمة المشتركين" loading="lazy"></div> <img src="screenshots/app/reception-desk.png" alt="مكتب الاستقبال" loading="lazy">
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="الأنشطة الرياضية" loading="lazy"></div> <div class="product-showcase__caption">مكتب الاستقبال</div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة المحاسبة" loading="lazy"></div> </div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="الموارد البشرية" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy"></div> <img src="screenshots/app/participants-list.png" alt="المشتركين" loading="lazy">
<div class="product-showcase__caption">المشتركين</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="الجدول الأسبوعي" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="النظرة المالية" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="تعيين المساحات" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
<div class="product-showcase__caption">الفواتير</div>
</div>
<!-- Duplicate for seamless infinite loop --> <!-- Duplicate for seamless infinite loop -->
<div class="product-showcase__item"><img src="screenshots/dashboard/dashboard-hero.png" alt="" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="" loading="lazy"></div> <img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="" loading="lazy"></div> <div class="product-showcase__caption">مكتب الاستقبال</div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="" loading="lazy"></div> </div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="" loading="lazy"></div> <div class="product-showcase__item">
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="" loading="lazy"></div> <img src="screenshots/app/participants-list.png" alt="" loading="lazy">
<div class="product-showcase__caption">المشتركين</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
<div class="product-showcase__caption">الجدول الأسبوعي</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
<div class="product-showcase__caption">النظرة المالية</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/space-grid-assigned.png" alt="" loading="lazy">
<div class="product-showcase__caption">تعيين المساحات</div>
</div>
<div class="product-showcase__item">
<img src="screenshots/app/invoices.png" alt="" loading="lazy">
<div class="product-showcase__caption">الفواتير</div>
</div>
</div> </div>
</div> </div>
</section> </section>
...@@ -409,6 +446,25 @@ ...@@ -409,6 +446,25 @@
</div> </div>
</section> </section>
<!-- Swimming Teaser -->
<section class="swimming-teaser" data-reveal>
<div class="container">
<div class="swimming-teaser__inner">
<div class="swimming-teaser__content">
<span class="swimming-teaser__icon">🏊</span>
<div>
<p class="swimming-teaser__text">لأكاديميات السباحة: نظام حارات وإيجارات ذكي</p>
<p class="swimming-teaser__sub">إدارة الحارات، حجوزات المسابح، وإيجارات المساحات بنظام متخصص.</p>
</div>
</div>
<a href="swimming.html" class="swimming-teaser__link">
اكتشف المزيد
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="cta-section section"> <section class="cta-section section">
<div class="container"> <div class="container">
......
public/pricing.html
View file @ 9d19f508
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="nav__links" id="navLinks"> <div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a> <a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a> <a href="features.html" class="nav__link">المزايا</a>
<a href="swimming.html" class="nav__link">السباحة</a>
<a href="pricing.html" class="nav__link nav__link--active">التسعير</a> <a href="pricing.html" class="nav__link nav__link--active">التسعير</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a> <a href="contact.html" class="nav__cta">تواصل معنا</a>
</div> </div>
......
public/swimming.html 0 → 100644
View file @ 9d19f508
This diff is collapsed.
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