Skip to content

E
El-Captain Sports Management
Commit 45593f71 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Make website light theme + skeletons the default for ALL new instances 

- Auto-seed default sections on first visit when none exist
- Every section now shows skeleton placeholders when empty (branches,
  partners, pricing, trainers, stats, schedule)
- Converted remaining dark sections to light theme (branches, trainers,
  pricing, contact, schedule) for consistency
- Stats band keeps dark bg for visual contrast
- Fresh deploy = beautiful skeleton website ready for client to imagine
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 0c31ec65
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 191 deletions
app/Http/Controllers/PublicWebsiteController.php
View file @ 45593f71
...@@ -32,6 +32,12 @@ public function home() ...@@ -32,6 +32,12 @@ public function home()
app()->instance('website_settings', $settings); app()->instance('website_settings', $settings);
$sections = $this->sectionService->getEnabled($academy); $sections = $this->sectionService->getEnabled($academy);
if ($sections->isEmpty()) {
$this->sectionService->seedDefaults($academy);
$sections = $this->sectionService->getEnabled($academy);
}
$data = $this->gatherSectionData($academy, $sections); $data = $this->gatherSectionData($academy, $sections);
return view('website.index', [ return view('website.index', [
......
resources/views/website/sections/branches.blade.php
View file @ 45593f71
...@@ -2,85 +2,78 @@ ...@@ -2,85 +2,78 @@
$branches = $data['branches'] ?? collect(); $branches = $data['branches'] ?? collect();
@endphp @endphp
@if($branches->count()) <div class="site-section site-section--alt">
<div class="site-section site-section--dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'فروعنا' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'فروعنا' }}</h2>
@if($section->subtitle) @if($section->subtitle)
<p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p> <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif @endif
</div> </div>
{{-- Map --}} @if($branches->count())
@if($section->getSetting('show_map', true) && $branches->where('latitude', '!=', null)->count()) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="map-container mb-10 reveal" id="branches-map"></div> @foreach($branches as $branch)
<script> @php
document.addEventListener('DOMContentLoaded', function() { $branchImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
if (typeof L === 'undefined') return; ->where('academy_id', $academy->id)
const map = L.map('branches-map').setView([{{ $branches->first()->latitude ?? 30.0444 }}, {{ $branches->first()->longitude ?? 31.2357 }}], 11); ->where('collection', 'branch_photo')
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { ->where('mediable_type', 'branch')
attribution: '&copy; OpenStreetMap' ->where('mediable_id', $branch->id)
}).addTo(map); ->first();
@endphp
<div class="site-card reveal reveal--delay-{{ ($loop->index % 3) + 1 }}">
@if($branchImage)
<div class="relative overflow-hidden aspect-[3/2]">
<img src="{{ $branchImage->url }}"
alt="{{ $branch->name_ar }}"
class="site-card__image">
</div>
@endif
@foreach($branches->where('latitude', '!=', null) as $branch) <div class="p-5">
L.marker([{{ $branch->latitude }}, {{ $branch->longitude }}]) <div class="flex items-start justify-between">
.addTo(map) <h3 class="text-lg font-bold text-gray-900">{{ $branch->name_ar }}</h3>
.bindPopup('<strong>{{ $branch->name_ar }}</strong><br>{{ $branch->address }}'); @if($branch->is_main)
@endforeach <span class="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-600 border border-blue-100">
}); رئيسي
</script> </span>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> @endif
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> </div>
@endif
{{-- Branch Cards --}} @if($branch->address)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <p class="mt-2 text-gray-500 text-sm flex items-start gap-2">
@foreach($branches as $branch) <svg class="w-4 h-4 mt-0.5 shrink-0 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
@php {{ $branch->address }}
$branchImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy') </p>
->where('academy_id', $academy->id) @endif
->where('collection', 'branch_photo')
->where('mediable_type', 'branch')
->where('mediable_id', $branch->id)
->first();
@endphp
<div class="site-card reveal reveal--delay-{{ ($loop->index % 3) + 1 }}">
@if($branchImage)
<div class="relative overflow-hidden aspect-[3/2]">
<img src="{{ $branchImage->url }}"
alt="{{ $branch->name_ar }}"
class="site-card__image">
</div>
@endif
<div class="p-5"> @if($branch->phone)
<div class="flex items-start justify-between"> <p class="mt-2 text-gray-500 text-sm flex items-center gap-2">
<h3 class="text-lg font-bold text-white">{{ $branch->name_ar }}</h3> <svg class="w-4 h-4 shrink-0 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
@if($branch->is_main) <span dir="ltr">{{ $branch->phone }}</span>
<span class="px-2 py-0.5 text-xs rounded-full bg-[var(--site-accent)]/10 text-[var(--site-accent)] border border-[var(--site-accent)]/20"> </p>
رئيسي
</span>
@endif @endif
</div> </div>
@if($branch->address)
<p class="mt-2 text-white/50 text-sm flex items-start gap-2">
<svg class="w-4 h-4 mt-0.5 shrink-0 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
{{ $branch->address }}
</p>
@endif
@if($branch->phone)
<p class="mt-2 text-white/50 text-sm flex items-center gap-2">
<svg class="w-4 h-4 shrink-0 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
<span dir="ltr">{{ $branch->phone }}</span>
</p>
@endif
</div> </div>
</div> @endforeach
@endforeach </div>
</div> @else
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@for($i = 0; $i < 3; $i++)
<div class="skeleton-card">
<div class="aspect-[3/2] skeleton-block"></div>
<div class="p-5 space-y-3">
<div class="skeleton-block h-5 w-1/2"></div>
<div class="skeleton-block h-3 w-3/4"></div>
<div class="skeleton-block h-3 w-1/2"></div>
</div>
</div>
@endfor
</div>
<div class="empty-state mt-4">
<p class="text-sm">لم تُضف فروع بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/contact.blade.php
View file @ 45593f71
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
$branches = $data['branches'] ?? collect(); $branches = $data['branches'] ?? collect();
@endphp @endphp
<div class="site-section site-section--dark" x-data="{ <div class="site-section site-section--alt" x-data="{
form: { name: '', phone: '', email: '', message: '' }, form: { name: '', phone: '', email: '', message: '' },
loading: false, loading: false,
success: false, success: false,
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'تواصل معنا' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'تواصل معنا' }}</h2>
@if($section->subtitle) @if($section->subtitle)
<p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p> <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif @endif
</div> </div>
...@@ -41,20 +41,24 @@ ...@@ -41,20 +41,24 @@
<div x-show="!success"> <div x-show="!success">
<form @submit.prevent="submit" class="space-y-4"> <form @submit.prevent="submit" class="space-y-4">
<div> <div>
<input type="text" x-model="form.name" placeholder="الاسم الكامل *" class="site-input" required> <input type="text" x-model="form.name" placeholder="الاسم الكامل *"
<template x-if="errors.name"><p class="text-red-400 text-sm mt-1" x-text="errors.name[0]"></p></template> class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-[var(--site-accent)] focus:border-transparent transition" required>
<template x-if="errors.name"><p class="text-red-500 text-sm mt-1" x-text="errors.name[0]"></p></template>
</div> </div>
<div> <div>
<input type="tel" x-model="form.phone" placeholder="رقم الهاتف *" class="site-input" dir="ltr" required> <input type="tel" x-model="form.phone" placeholder="رقم الهاتف *"
<template x-if="errors.phone"><p class="text-red-400 text-sm mt-1" x-text="errors.phone[0]"></p></template> class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-[var(--site-accent)] focus:border-transparent transition" dir="ltr" required>
<template x-if="errors.phone"><p class="text-red-500 text-sm mt-1" x-text="errors.phone[0]"></p></template>
</div> </div>
<div> <div>
<input type="email" x-model="form.email" placeholder="البريد الإلكتروني (اختياري)" class="site-input" dir="ltr"> <input type="email" x-model="form.email" placeholder="البريد الإلكتروني (اختياري)"
<template x-if="errors.email"><p class="text-red-400 text-sm mt-1" x-text="errors.email[0]"></p></template> class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-[var(--site-accent)] focus:border-transparent transition" dir="ltr">
<template x-if="errors.email"><p class="text-red-500 text-sm mt-1" x-text="errors.email[0]"></p></template>
</div> </div>
<div> <div>
<textarea x-model="form.message" placeholder="رسالتك *" rows="4" class="site-input resize-none" required></textarea> <textarea x-model="form.message" placeholder="رسالتك *" rows="4"
<template x-if="errors.message"><p class="text-red-400 text-sm mt-1" x-text="errors.message[0]"></p></template> class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-[var(--site-accent)] focus:border-transparent transition resize-none" required></textarea>
<template x-if="errors.message"><p class="text-red-500 text-sm mt-1" x-text="errors.message[0]"></p></template>
</div> </div>
<button type="submit" class="site-btn site-btn--primary w-full justify-center" :disabled="loading"> <button type="submit" class="site-btn site-btn--primary w-full justify-center" :disabled="loading">
<span x-show="!loading">إرسال الرسالة</span> <span x-show="!loading">إرسال الرسالة</span>
...@@ -68,44 +72,53 @@ ...@@ -68,44 +72,53 @@
{{-- Success State --}} {{-- Success State --}}
<div x-show="success" x-transition class="text-center py-12"> <div x-show="success" x-transition class="text-center py-12">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-500/10 flex items-center justify-center"> <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-50 flex items-center justify-center">
<svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg> </svg>
</div> </div>
<h3 class="text-xl font-bold text-white">تم إرسال رسالتك بنجاح!</h3> <h3 class="text-xl font-bold text-gray-900">تم إرسال رسالتك بنجاح!</h3>
<p class="text-white/60 mt-2">سنتواصل معك في أقرب وقت</p> <p class="text-gray-500 mt-2">سنتواصل معك في أقرب وقت</p>
</div> </div>
</div> </div>
{{-- Contact Info --}} {{-- Contact Info --}}
<div class="reveal reveal--delay-2 space-y-6"> <div class="reveal reveal--delay-2 space-y-6">
@foreach($branches->take(3) as $branch) @foreach($branches->take(3) as $branch)
<div class="p-5 rounded-xl bg-white/5 border border-white/10"> <div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
<h4 class="font-bold text-white flex items-center gap-2"> <h4 class="font-bold text-gray-900 flex items-center gap-2">
<svg class="w-5 h-5 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg> <svg class="w-5 h-5 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
{{ $branch->name_ar }} {{ $branch->name_ar }}
</h4> </h4>
@if($branch->address) @if($branch->address)
<p class="text-white/50 text-sm mt-2">{{ $branch->address }}</p> <p class="text-gray-500 text-sm mt-2">{{ $branch->address }}</p>
@endif @endif
@if($branch->phone) @if($branch->phone)
<p class="text-white/50 text-sm mt-1" dir="ltr">{{ $branch->phone }}</p> <p class="text-gray-500 text-sm mt-1" dir="ltr">{{ $branch->phone }}</p>
@endif @endif
</div> </div>
@endforeach @endforeach
@if(empty($branches) || $branches->isEmpty())
<div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
<span class="text-gray-500 text-sm">{{ $academy->phone ?? 'أضف رقم هاتف من الإعدادات' }}</span>
</div>
</div>
@endif
{{-- Social Links --}} {{-- Social Links --}}
@if(is_array($settings->social_links) && count(array_filter($settings->social_links))) @if(is_array($settings->social_links ?? null) && count(array_filter($settings->social_links ?? [])))
<div class="p-5 rounded-xl bg-white/5 border border-white/10"> <div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
<h4 class="font-bold text-white mb-3">تابعنا</h4> <h4 class="font-bold text-gray-900 mb-3">تابعنا</h4>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@foreach(['facebook', 'instagram', 'twitter', 'youtube', 'tiktok'] as $platform) @foreach(['facebook', 'instagram', 'twitter', 'youtube', 'tiktok'] as $platform)
@if(!empty($settings->social_links[$platform])) @if(!empty($settings->social_links[$platform]))
<a href="{{ $settings->social_links[$platform] }}" <a href="{{ $settings->social_links[$platform] }}"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center text-white/60 hover:text-[var(--site-accent)] hover:bg-[var(--site-accent)]/10 transition-all"> class="w-10 h-10 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center text-gray-400 hover:text-[var(--site-accent)] hover:border-[var(--site-accent)] transition-all">
@include("website.icons.{$platform}") @include("website.icons.{$platform}")
</a> </a>
@endif @endif
......
resources/views/website/sections/partners.blade.php
View file @ 45593f71
...@@ -2,32 +2,44 @@ ...@@ -2,32 +2,44 @@
$partners = $data['partners'] ?? collect(); $partners = $data['partners'] ?? collect();
@endphp @endphp
@if($partners->count())
<div class="site-section overflow-hidden"> <div class="site-section overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'شركاؤنا' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'شركاؤنا' }}</h2>
@if($section->subtitle)
<p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif
</div> </div>
<div class="relative overflow-hidden reveal"> @if($partners->count())
<div class="partners-track"> <div class="relative overflow-hidden reveal">
@for($i = 0; $i < 2; $i++) <div class="partners-track">
@foreach($partners as $partner) @for($i = 0; $i < 2; $i++)
@if($partner->logo) @foreach($partners as $partner)
<div class="shrink-0 w-36 h-20 flex items-center justify-center grayscale hover:grayscale-0 opacity-60 hover:opacity-100 transition-all duration-300"> @if($partner->logo)
<img src="{{ $partner->logo->url }}" <div class="shrink-0 w-36 h-20 flex items-center justify-center grayscale hover:grayscale-0 opacity-60 hover:opacity-100 transition-all duration-300">
alt="{{ $partner->name }}" <img src="{{ $partner->logo->url }}"
class="max-w-full max-h-full object-contain"> alt="{{ $partner->name }}"
</div> class="max-w-full max-h-full object-contain">
@else </div>
<div class="shrink-0 px-6 py-3 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center"> @else
<span class="text-white/40 text-sm font-medium">{{ $partner->name }}</span> <div class="shrink-0 px-6 py-3 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center">
</div> <span class="text-gray-400 text-sm font-medium">{{ $partner->name }}</span>
@endif </div>
@endforeach @endif
@endforeach
@endfor
</div>
</div>
@else
<div class="flex items-center justify-center gap-6">
@for($i = 0; $i < 5; $i++)
<div class="skeleton-block w-36 h-16 !rounded-lg"></div>
@endfor @endfor
</div> </div>
</div> <div class="empty-state mt-4">
<p class="text-sm">لم يُضف شركاء بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/pricing.blade.php
View file @ 45593f71
...@@ -2,59 +2,77 @@ ...@@ -2,59 +2,77 @@
$plans = json_decode($section->getSetting('plans', '[]'), true) ?? []; $plans = json_decode($section->getSetting('plans', '[]'), true) ?? [];
@endphp @endphp
@if(count($plans))
<div class="site-section"> <div class="site-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'الباقات والأسعار' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'الباقات والأسعار' }}</h2>
@if($section->subtitle) @if($section->subtitle)
<p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p> <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif @endif
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto"> @if(count($plans))
@foreach($plans as $index => $plan) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
@php $highlighted = !empty($plan['highlighted']); @endphp @foreach($plans as $index => $plan)
<div class="relative rounded-2xl p-6 border transition-all reveal reveal--delay-{{ ($index % 3) + 1 }} @php $highlighted = !empty($plan['highlighted']); @endphp
{{ $highlighted <div class="relative rounded-2xl p-6 border transition-all reveal reveal--delay-{{ ($index % 3) + 1 }}
? 'bg-[var(--site-accent)]/5 border-[var(--site-accent)] scale-105 shadow-2xl shadow-[var(--site-accent)]/10' {{ $highlighted
: 'bg-white/5 border-white/10 hover:border-white/20' }}"> ? 'bg-blue-50 border-[var(--site-accent)] scale-105 shadow-2xl shadow-[var(--site-accent)]/10'
: 'bg-white border-gray-200 hover:border-gray-300 shadow-sm' }}">
@if($highlighted) @if($highlighted)
<div class="absolute -top-3 start-1/2 -translate-x-1/2 px-4 py-1 bg-[var(--site-accent)] text-white text-xs font-bold rounded-full"> <div class="absolute -top-3 start-1/2 -translate-x-1/2 px-4 py-1 bg-[var(--site-accent)] text-white text-xs font-bold rounded-full">
الأكثر طلباً الأكثر طلباً
</div> </div>
@endif @endif
<h3 class="text-xl font-bold text-white">{{ $plan['name'] ?? '' }}</h3> <h3 class="text-xl font-bold text-gray-900">{{ $plan['name'] ?? '' }}</h3>
<div class="mt-4 flex items-baseline gap-1"> <div class="mt-4 flex items-baseline gap-1">
<span class="text-3xl font-bold {{ $highlighted ? 'text-[var(--site-accent)]' : 'text-white' }}"> <span class="text-3xl font-bold {{ $highlighted ? 'text-[var(--site-accent)]' : 'text-gray-900' }}">
{{ $plan['price'] ?? '' }} {{ $plan['price'] ?? '' }}
</span> </span>
<span class="text-white/50 text-sm">{{ $plan['period'] ?? '/شهر' }}</span> <span class="text-gray-400 text-sm">{{ $plan['period'] ?? '/شهر' }}</span>
</div> </div>
@if(!empty($plan['features'])) @if(!empty($plan['features']))
<ul class="mt-6 space-y-3"> <ul class="mt-6 space-y-3">
@foreach($plan['features'] as $feature) @foreach($plan['features'] as $feature)
<li class="flex items-start gap-2 text-sm text-white/70"> <li class="flex items-start gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 mt-0.5 text-[var(--site-accent)] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mt-0.5 text-[var(--site-accent)] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg> </svg>
{{ $feature }} {{ $feature }}
</li> </li>
@endforeach @endforeach
</ul> </ul>
@endif @endif
<a href="#section-contact" <a href="#section-contact"
class="mt-6 block text-center site-btn {{ $highlighted ? 'site-btn--primary' : 'site-btn--outline' }} w-full justify-center"> class="mt-6 block text-center site-btn {{ $highlighted ? 'site-btn--primary' : 'site-btn--outline' }} w-full justify-center">
{{ $plan['cta'] ?? 'اشترك الآن' }} {{ $plan['cta'] ?? 'اشترك الآن' }}
</a> </a>
</div> </div>
@endforeach @endforeach
</div> </div>
@else
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
@for($i = 0; $i < 3; $i++)
<div class="skeleton-card p-6 space-y-4 {{ $i === 1 ? 'ring-2 ring-gray-200' : '' }}">
<div class="skeleton-block h-5 w-24"></div>
<div class="skeleton-block h-8 w-20"></div>
<div class="space-y-2 pt-2">
<div class="skeleton-block h-3 w-full"></div>
<div class="skeleton-block h-3 w-3/4"></div>
<div class="skeleton-block h-3 w-5/6"></div>
</div>
<div class="skeleton-block h-10 w-full !rounded-lg mt-4"></div>
</div>
@endfor
</div>
<div class="empty-state mt-4">
<p class="text-sm">لم تُضف باقات أسعار بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/schedule.blade.php
View file @ 45593f71
...@@ -3,48 +3,54 @@ ...@@ -3,48 +3,54 @@
$days = ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة']; $days = ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'];
@endphp @endphp
<div class="site-section"> <div class="site-section site-section--alt">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'مواعيد التدريب' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'مواعيد التدريب' }}</h2>
@if($section->subtitle) @if($section->subtitle)
<p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p> <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif @endif
</div> </div>
@if(count($schedule)) @if(count($schedule))
<div class="overflow-x-auto reveal"> <div class="overflow-x-auto reveal bg-white rounded-xl shadow-sm border border-gray-200">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead> <thead>
<tr class="border-b border-white/10"> <tr class="border-b border-gray-200 bg-gray-50">
<th class="py-3 px-4 text-start text-white/50 font-medium">اليوم</th> <th class="py-3 px-4 text-start text-gray-600 font-medium">اليوم</th>
<th class="py-3 px-4 text-start text-white/50 font-medium">النشاط</th> <th class="py-3 px-4 text-start text-gray-600 font-medium">النشاط</th>
<th class="py-3 px-4 text-start text-white/50 font-medium">الوقت</th> <th class="py-3 px-4 text-start text-gray-600 font-medium">الوقت</th>
<th class="py-3 px-4 text-start text-white/50 font-medium">الفرع</th> <th class="py-3 px-4 text-start text-gray-600 font-medium">الفرع</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@foreach($schedule as $row) @foreach($schedule as $row)
<tr class="border-b border-white/5 hover:bg-white/5 transition-colors"> <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
<td class="py-3 px-4 text-white font-medium">{{ $row['day'] ?? '' }}</td> <td class="py-3 px-4 text-gray-900 font-medium">{{ $row['day'] ?? '' }}</td>
<td class="py-3 px-4 text-white/70">{{ $row['activity'] ?? '' }}</td> <td class="py-3 px-4 text-gray-600">{{ $row['activity'] ?? '' }}</td>
<td class="py-3 px-4 text-white/70" dir="ltr">{{ $row['time'] ?? '' }}</td> <td class="py-3 px-4 text-gray-600" dir="ltr">{{ $row['time'] ?? '' }}</td>
<td class="py-3 px-4 text-white/70">{{ $row['branch'] ?? '' }}</td> <td class="py-3 px-4 text-gray-600">{{ $row['branch'] ?? '' }}</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</div> </div>
@else @else
@if($section->content) <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="text-center text-white/60 leading-relaxed reveal"> <div class="p-4 space-y-3">
{!! nl2br(e($section->content)) !!} @for($i = 0; $i < 4; $i++)
<div class="flex items-center gap-4">
<div class="skeleton-block h-4 w-16"></div>
<div class="skeleton-block h-4 w-24"></div>
<div class="skeleton-block h-4 w-20"></div>
<div class="skeleton-block h-4 w-16"></div>
</div>
@endfor
</div> </div>
@else </div>
<div class="text-center text-white/40 py-8 reveal"> <div class="empty-state mt-4">
<p>تواصل معنا للاستفسار عن مواعيد التدريب</p> <p class="text-sm">لم تُضف مواعيد بعد</p>
</div> </div>
@endif
@endif @endif
</div> </div>
</div> </div>
resources/views/website/sections/stats.blade.php
View file @ 45593f71
...@@ -7,32 +7,47 @@ ...@@ -7,32 +7,47 @@
'programs' => ['label' => 'برنامج تدريبي', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'], 'programs' => ['label' => 'برنامج تدريبي', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'],
'activities' => ['label' => 'نشاط رياضي', 'icon' => 'M13 10V3L4 14h7v7l9-11h-7z'], 'activities' => ['label' => 'نشاط رياضي', 'icon' => 'M13 10V3L4 14h7v7l9-11h-7z'],
]; ];
$hasStats = !empty($stats) && array_sum($stats) > 0;
@endphp @endphp
@if(!empty($stats) && array_sum($stats) > 0)
<div class="stats-band py-16 lg:py-20"> <div class="stats-band py-16 lg:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@if($section->title) @if($section->title)
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'إنجازاتنا' }}</h2>
</div> </div>
@endif @endif
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> @if($hasStats)
@foreach($displayStats as $key => $meta) <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
@if(($stats[$key] ?? 0) > 0) @foreach($displayStats as $key => $meta)
@if(($stats[$key] ?? 0) > 0)
<div class="text-center reveal reveal--delay-{{ $loop->index + 1 }}">
<div class="w-14 h-14 mx-auto mb-4 rounded-xl bg-[var(--site-accent)]/10 flex items-center justify-center">
<svg class="w-7 h-7 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $meta['icon'] }}"/>
</svg>
</div>
<span class="stat-number" data-counter="{{ $stats[$key] }}" data-suffix="+">0</span>
<span class="block mt-2 text-white/60 text-sm">{{ $meta['label'] }}</span>
</div>
@endif
@endforeach
</div>
@else
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
@foreach($displayStats as $key => $meta)
<div class="text-center reveal reveal--delay-{{ $loop->index + 1 }}"> <div class="text-center reveal reveal--delay-{{ $loop->index + 1 }}">
<div class="w-14 h-14 mx-auto mb-4 rounded-xl bg-[var(--site-accent)]/10 flex items-center justify-center"> <div class="w-14 h-14 mx-auto mb-4 rounded-xl bg-white/5 flex items-center justify-center">
<svg class="w-7 h-7 text-[var(--site-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-7 h-7 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $meta['icon'] }}"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $meta['icon'] }}"/>
</svg> </svg>
</div> </div>
<span class="stat-number" data-counter="{{ $stats[$key] }}" data-suffix="+">0</span> <span class="block text-2xl font-bold text-white/20">0+</span>
<span class="block mt-2 text-white/60 text-sm">{{ $meta['label'] }}</span> <span class="block mt-2 text-white/30 text-sm">{{ $meta['label'] }}</span>
</div> </div>
@endif @endforeach
@endforeach </div>
</div> @endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/trainers.blade.php
View file @ 45593f71
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
->get(); ->get();
@endphp @endphp
<div class="site-section site-section--dark site-section--pattern"> <div class="site-section site-section--alt">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal"> <div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'فريق المدربين' }}</h2> <h2 class="section-title mx-auto">{{ $section->title ?? 'فريق المدربين' }}</h2>
@if($section->subtitle) @if($section->subtitle)
<p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p> <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif @endif
</div> </div>
...@@ -27,26 +27,35 @@ ...@@ -27,26 +27,35 @@
alt="{{ $trainer['name'] ?? '' }}" alt="{{ $trainer['name'] ?? '' }}"
class="w-full h-full rounded-full object-cover border-3 border-[var(--site-accent)] shadow-lg shadow-[var(--site-accent)]/10"> class="w-full h-full rounded-full object-cover border-3 border-[var(--site-accent)] shadow-lg shadow-[var(--site-accent)]/10">
@else @else
<div class="w-full h-full rounded-full bg-gradient-to-br from-[var(--site-accent)]/20 to-[var(--site-secondary)] border-3 border-[var(--site-accent)]/40 flex items-center justify-center"> <div class="w-full h-full rounded-full bg-gradient-to-br from-[var(--site-accent)]/10 to-gray-100 border-3 border-gray-200 flex items-center justify-center">
<svg class="w-12 h-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg> </svg>
</div> </div>
@endif @endif
</div> </div>
<h4 class="text-white font-bold">{{ $trainer['name'] ?? '' }}</h4> <h4 class="text-gray-900 font-bold">{{ $trainer['name'] ?? '' }}</h4>
@if(!empty($trainer['role'])) @if(!empty($trainer['role']))
<p class="text-[var(--site-accent)] text-sm mt-1">{{ $trainer['role'] }}</p> <p class="text-[var(--site-accent)] text-sm mt-1">{{ $trainer['role'] }}</p>
@endif @endif
@if(!empty($trainer['bio'])) @if(!empty($trainer['bio']))
<p class="text-white/50 text-sm mt-1">{{ $trainer['bio'] }}</p> <p class="text-gray-500 text-sm mt-1">{{ $trainer['bio'] }}</p>
@endif @endif
</div> </div>
@endforeach @endforeach
</div> </div>
@else @else
<div class="text-center text-white/40 py-8"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<p>سيتم إضافة فريق المدربين قريباً</p> @for($i = 0; $i < 4; $i++)
<div class="text-center">
<div class="mx-auto w-32 h-32 mb-4 skeleton-block !rounded-full"></div>
<div class="skeleton-block h-4 w-20 mx-auto"></div>
<div class="skeleton-block h-3 w-16 mx-auto mt-2"></div>
</div>
@endfor
</div>
<div class="empty-state mt-4">
<p class="text-sm">لم يُضف مدربون بعد</p>
</div> </div>
@endif @endif
</div> </div>
......
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