Skip to content

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

Redesign academy website to light theme with skeleton empty states 

- Default background: white, text: dark gray, accent: blue
- Hero/navbar/footer stay dark (branded primary color)
- All sections show skeleton placeholder cards when no data exists
- Removed all hard-coded oklch dark values from section views
- Cards, testimonials, FAQ items now use white bg + subtle borders
- Empty states show shimmer animation + "لم تُضف ... بعد" message
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 9ea528af
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 438 additions and 342 deletions
resources/css/website.css
View file @ 85cf6677
This diff is collapsed.
resources/views/website/footer.blade.php
View file @ 85cf6677
...@@ -17,8 +17,7 @@ class="h-12 w-12 rounded-lg object-contain"> ...@@ -17,8 +17,7 @@ class="h-12 w-12 rounded-lg object-contain">
</p> </p>
@endif @endif
{{-- Social Links --}} @if(is_array($settings->social_links ?? null) && count(array_filter($settings->social_links)))
@if(is_array($settings->social_links) && count(array_filter($settings->social_links)))
<div class="flex items-center gap-3 mt-6"> <div class="flex items-center gap-3 mt-6">
@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]))
......
resources/views/website/layout.blade.php
View file @ 85cf6677
...@@ -26,10 +26,11 @@ ...@@ -26,10 +26,11 @@
{{-- Dynamic CSS Variables from Academy Branding --}} {{-- Dynamic CSS Variables from Academy Branding --}}
<style> <style>
:root { :root {
--site-primary: {{ $settings->primary_color ?? '#1a1a2e' }}; --site-primary: {{ $settings->primary_color ?? '#1e3a5f' }};
--site-secondary: {{ $settings->secondary_color ?? '#16213e' }}; --site-secondary: {{ $settings->secondary_color ?? '#2d5a87' }};
--site-accent: {{ $settings->accent_color ?? '#e94560' }}; --site-accent: {{ $settings->accent_color ?? '#2563eb' }};
--site-text: {{ $settings->text_color ?? '#ffffff' }}; --site-text: {{ $settings->text_color ?? '#1f2937' }};
--site-bg: {{ $settings->background_color ?? '#ffffff' }};
--site-heading-font: '{{ $settings->heading_font ?? 'Cairo' }}', 'Noto Sans Arabic', sans-serif; --site-heading-font: '{{ $settings->heading_font ?? 'Cairo' }}', 'Noto Sans Arabic', sans-serif;
--site-body-font: '{{ $settings->body_font ?? 'Cairo' }}', 'Noto Sans Arabic', sans-serif; --site-body-font: '{{ $settings->body_font ?? 'Cairo' }}', 'Noto Sans Arabic', sans-serif;
} }
......
resources/views/website/sections/about.blade.php
View file @ 85cf6677
...@@ -10,23 +10,26 @@ ...@@ -10,23 +10,26 @@
<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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{{-- Text Content --}}
<div class="reveal"> <div class="reveal">
<h2 class="section-title">{{ $section->title ?? 'من نحن' }}</h2> <h2 class="section-title">{{ $section->title ?? 'من نحن' }}</h2>
@if($section->content) @if($section->content)
<div class="mt-8 text-white/70 leading-relaxed text-lg space-y-4"> <div class="mt-8 text-gray-600 leading-relaxed text-lg space-y-4">
{!! nl2br(e($section->content)) !!} {!! nl2br(e($section->content)) !!}
</div> </div>
@else
<div class="mt-8 text-gray-400 leading-relaxed text-lg">
<p>أضف وصفاً عن أكاديميتك من إعدادات الموقع</p>
</div>
@endif @endif
@if($section->getSetting('show_stats', true)) @if($section->getSetting('show_stats', true) && !empty($data['stats'] ?? []))
<div class="mt-8 flex items-center gap-8"> <div class="mt-8 flex items-center gap-8">
@foreach(($data['stats'] ?? []) as $key => $value) @foreach(($data['stats'] ?? []) as $key => $value)
@if($loop->index < 3 && $value > 0) @if($loop->index < 3 && $value > 0)
<div class="text-center"> <div class="text-center">
<span class="block text-2xl font-bold text-[var(--site-accent)]">{{ $value }}+</span> <span class="block text-2xl font-bold text-[var(--site-accent)]">{{ $value }}+</span>
<span class="text-sm text-white/50"> <span class="text-sm text-gray-500">
{{ match($key) { 'participants' => 'طالب', 'trainers' => 'مدرب', 'branches' => 'فرع', 'programs' => 'برنامج', default => $key } }} {{ match($key) { 'participants' => 'طالب', 'trainers' => 'مدرب', 'branches' => 'فرع', 'programs' => 'برنامج', default => $key } }}
</span> </span>
</div> </div>
...@@ -36,19 +39,17 @@ ...@@ -36,19 +39,17 @@
@endif @endif
</div> </div>
{{-- Image --}}
<div class="reveal reveal--delay-2"> <div class="reveal reveal--delay-2">
@if($sectionImage) @if($sectionImage)
<div class="relative"> <div class="relative">
<img src="{{ $sectionImage->url }}" <img src="{{ $sectionImage->url }}"
alt="{{ $section->title }}" alt="{{ $section->title }}"
class="rounded-2xl w-full object-cover shadow-2xl"> class="rounded-2xl w-full object-cover shadow-lg">
{{-- Decorative accent corner --}} <div class="absolute -bottom-3 -start-3 w-20 h-20 border-b-4 border-s-4 border-[var(--site-accent)] rounded-bl-2xl"></div>
<div class="absolute -bottom-4 -start-4 w-24 h-24 border-b-4 border-s-4 border-[var(--site-accent)] rounded-bl-2xl"></div>
</div> </div>
@else @else
<div class="relative rounded-2xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-[var(--site-accent)]/20 to-transparent border border-white/10 flex items-center justify-center"> <div class="relative rounded-2xl overflow-hidden aspect-[4/3] bg-gray-50 border border-gray-200 flex items-center justify-center">
<svg class="w-20 h-20 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
</div> </div>
......
resources/views/website/sections/activities.blade.php
View file @ 85cf6677
...@@ -3,62 +3,71 @@ ...@@ -3,62 +3,71 @@
$maxItems = $section->getSetting('max_items', 6); $maxItems = $section->getSetting('max_items', 6);
@endphp @endphp
@if($activities->count()) <div class="site-section site-section--alt">
<div class="site-section site-section--dark site-section--pattern">
<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 sm:grid-cols-2 lg:grid-cols-3 gap-6"> @if($activities->count())
@foreach($activities->take($maxItems) as $activity) <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@php @foreach($activities->take($maxItems) as $activity)
$activityImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy') @php
->where('academy_id', $academy->id) $activityImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
->where('collection', 'activity_photo') ->where('academy_id', $academy->id)
->where('mediable_type', 'activity') ->where('collection', 'activity_photo')
->where('mediable_id', $activity->id) ->where('mediable_type', 'activity')
->first(); ->where('mediable_id', $activity->id)
@endphp ->first();
<div class="site-card reveal reveal--delay-{{ ($loop->index % 4) + 1 }}"> @endphp
<div class="relative overflow-hidden aspect-[4/3]"> <div class="site-card reveal reveal--delay-{{ ($loop->index % 4) + 1 }}">
@if($activityImage) <div class="relative overflow-hidden aspect-[4/3]">
<img src="{{ $activityImage->url }}" @if($activityImage)
alt="{{ $activity->name_ar }}" <img src="{{ $activityImage->url }}"
class="site-card__image"> alt="{{ $activity->name_ar }}"
@else class="site-card__image">
<div class="w-full h-full bg-gradient-to-br from-[var(--site-accent)]/30 to-[var(--site-secondary)] flex items-center justify-center"> @else
@if($activity->icon) <div class="w-full h-full bg-gradient-to-br from-[var(--site-accent)]/10 to-gray-100 flex items-center justify-center">
<span class="text-5xl">{{ $activity->icon }}</span> @if($activity->icon ?? null)
@else <span class="text-5xl">{{ $activity->icon }}</span>
<svg class="w-16 h-16 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"> @else
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/> <svg class="w-14 h-14 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
@endif
</div>
@endif
<div class="site-card__overlay"></div>
<div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
<h3 class="text-white font-bold text-lg">{{ $activity->name_ar }}</h3>
@if($activity->description_ar ?? null)
<p class="text-white/80 text-sm mt-1 line-clamp-2">{{ $activity->description_ar }}</p>
@endif @endif
</div> </div>
@endif
<div class="site-card__overlay"></div>
{{-- Activity Name Overlay --}}
<div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<h3 class="text-white font-bold text-lg">{{ $activity->name_ar }}</h3>
@if($activity->description_ar)
<p class="text-white/70 text-sm mt-1 line-clamp-2">{{ $activity->description_ar }}</p>
@endif
</div> </div>
<div class="h-1 w-full" style="background: {{ $activity->color ?? 'var(--site-accent)' }}"></div>
</div> </div>
@endforeach
@if($activity->color) </div>
<div class="h-1 w-full" style="background: {{ $activity->color }}"></div> @else
@else {{-- Empty skeleton state --}}
<div class="h-1 w-full bg-[var(--site-accent)]"></div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@endif @for($i = 0; $i < 3; $i++)
</div> <div class="skeleton-card">
@endforeach <div class="aspect-[4/3] skeleton-block"></div>
</div> <div class="p-4 space-y-2">
<div class="skeleton-block h-5 w-2/3"></div>
<div class="skeleton-block h-3 w-full"></div>
</div>
</div>
@endfor
</div>
<div class="empty-state mt-6">
<p class="text-sm">لم تُضف أنشطة بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/faq.blade.php
View file @ 85cf6677
...@@ -2,37 +2,49 @@ ...@@ -2,37 +2,49 @@
$faqs = $data['faqs'] ?? collect(); $faqs = $data['faqs'] ?? collect();
@endphp @endphp
@if($faqs->count()) <div class="site-section site-section--alt">
<div class="site-section">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-3xl 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="space-y-3" x-data="{ open: null }"> @if($faqs->count())
@foreach($faqs as $faq) <div class="space-y-3" x-data="{ open: null }">
<div class="faq-item reveal reveal--delay-{{ min($loop->index + 1, 4) }}" @foreach($faqs as $faq)
:data-open="open === {{ $faq->id }} ? 'true' : 'false'"> <div class="faq-item reveal reveal--delay-{{ min($loop->index + 1, 4) }}"
<button @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}" :data-open="open === {{ $faq->id }} ? 'true' : 'false'">
class="w-full flex items-center justify-between p-5 text-start"> <button @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}"
<span class="text-white font-medium pe-4">{{ $faq->question }}</span> class="w-full flex items-center justify-between p-5 text-start">
<svg class="w-5 h-5 text-[var(--site-accent)] shrink-0 transition-transform duration-300" <span class="text-gray-900 font-medium pe-4">{{ $faq->question }}</span>
:class="open === {{ $faq->id }} ? 'rotate-180' : ''" <svg class="w-5 h-5 text-[var(--site-accent)] shrink-0 transition-transform duration-300"
fill="none" stroke="currentColor" viewBox="0 0 24 24"> :class="open === {{ $faq->id }} ? 'rotate-180' : ''"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> fill="none" stroke="currentColor" viewBox="0 0 24 24">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</button> </svg>
<div x-show="open === {{ $faq->id }}" </button>
x-collapse <div x-show="open === {{ $faq->id }}"
class="px-5 pb-5"> x-collapse
<p class="text-white/60 leading-relaxed">{{ $faq->answer }}</p> class="px-5 pb-5">
<p class="text-gray-600 leading-relaxed">{{ $faq->answer }}</p>
</div>
</div> </div>
</div> @endforeach
@endforeach </div>
</div> @else
<div class="space-y-3">
@for($i = 0; $i < 3; $i++)
<div class="skeleton-card p-5 flex items-center justify-between">
<div class="skeleton-block h-5 w-2/3"></div>
<div class="skeleton-block h-5 w-5 !rounded-full"></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/gallery.blade.php
View file @ 85cf6677
...@@ -2,30 +2,40 @@ ...@@ -2,30 +2,40 @@
$gallery = $data['gallery'] ?? collect(); $gallery = $data['gallery'] ?? collect();
@endphp @endphp
@if($gallery->count()) <div class="site-section" x-data="{ lightbox: null }">
<div class="site-section site-section--dark" x-data="{ lightbox: null }">
<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="gallery-grid reveal"> @if($gallery->count())
@foreach($gallery as $image) <div class="gallery-grid reveal">
<div class="gallery-item" @click="lightbox = '{{ $image->url }}'"> @foreach($gallery as $image)
<img src="{{ $image->url }}" <div class="gallery-item" @click="lightbox = '{{ $image->url }}'">
alt="{{ $image->alt_text_ar ?? 'صورة من المعرض' }}" <img src="{{ $image->url }}"
loading="lazy"> alt="{{ $image->alt_text_ar ?? 'صورة من المعرض' }}"
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity z-10"> loading="lazy">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity z-10 bg-black/30">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
</svg>
</div>
</div> </div>
</div> @endforeach
@endforeach </div>
</div> @else
<div class="gallery-grid">
@for($i = 0; $i < 6; $i++)
<div class="aspect-[3/2] skeleton-block rounded-lg"></div>
@endfor
</div>
<div class="empty-state mt-4">
<p class="text-sm">لم تُضف صور بعد</p>
</div>
@endif
</div> </div>
{{-- Lightbox --}} {{-- Lightbox --}}
...@@ -43,4 +53,3 @@ class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-4 cu ...@@ -43,4 +53,3 @@ class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-4 cu
</button> </button>
</div> </div>
</div> </div>
@endif
resources/views/website/sections/news.blade.php
View file @ 85cf6677
...@@ -2,48 +2,64 @@ ...@@ -2,48 +2,64 @@
$news = $data['news'] ?? collect(); $news = $data['news'] ?? collect();
@endphp @endphp
@if($news->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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @if($news->count())
@foreach($news as $article) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="site-card reveal reveal--delay-{{ ($loop->index % 3) + 1 }}"> @foreach($news as $article)
@if($article->image) <article class="site-card reveal reveal--delay-{{ ($loop->index % 3) + 1 }}">
<div class="relative overflow-hidden aspect-[16/9]"> @if($article->image)
<img src="{{ $article->image->url }}" <div class="relative overflow-hidden aspect-[16/9]">
alt="{{ $article->title }}" <img src="{{ $article->image->url }}"
class="site-card__image" alt="{{ $article->title }}"
loading="lazy"> class="site-card__image"
</div> loading="lazy">
@endif </div>
<div class="p-5">
@if($article->published_at)
<time class="text-xs text-white/40">
{{ $article->published_at->translatedFormat('j F Y') }}
</time>
@endif @endif
<h3 class="text-lg font-bold text-white mt-2 line-clamp-2"> <div class="p-5">
{{ $article->title }} @if($article->published_at)
</h3> <time class="text-xs text-gray-400">
{{ $article->published_at->translatedFormat('j F Y') }}
</time>
@endif
@if($article->excerpt) <h3 class="text-lg font-bold text-gray-900 mt-2 line-clamp-2">
<p class="text-white/50 text-sm mt-2 line-clamp-3"> {{ $article->title }}
{{ $article->excerpt }} </h3>
</p>
@endif @if($article->excerpt)
<p class="text-gray-500 text-sm mt-2 line-clamp-3">
{{ $article->excerpt }}
</p>
@endif
</div>
</article>
@endforeach
</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-[16/9] skeleton-block"></div>
<div class="p-5 space-y-3">
<div class="skeleton-block h-3 w-20"></div>
<div class="skeleton-block h-5 w-3/4"></div>
<div class="skeleton-block h-3 w-full"></div>
</div>
</div> </div>
</article> @endfor
@endforeach </div>
</div> <div class="empty-state mt-4">
<p class="text-sm">لم تُضف أخبار بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/programs.blade.php
View file @ 85cf6677
...@@ -3,78 +3,95 @@ ...@@ -3,78 +3,95 @@
$maxItems = $section->getSetting('max_items', 6); $maxItems = $section->getSetting('max_items', 6);
@endphp @endphp
@if($programs->count())
<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="space-y-8"> @if($programs->count())
@foreach($programs->take($maxItems) as $program) <div class="space-y-8">
@php @foreach($programs->take($maxItems) as $program)
$programImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy') @php
->where('academy_id', $academy->id) $programImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
->where('collection', 'section_image') ->where('academy_id', $academy->id)
->where('mediable_type', 'training_program') ->where('collection', 'section_image')
->where('mediable_id', $program->id) ->where('mediable_type', 'training_program')
->first(); ->where('mediable_id', $program->id)
$isReversed = $loop->index % 2 !== 0; ->first();
@endphp $isReversed = $loop->index % 2 !== 0;
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center reveal {{ $isReversed ? '' : '' }}"> @endphp
{{-- Image --}} <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center reveal">
<div class="{{ $isReversed ? 'lg:order-2' : '' }}"> <div class="{{ $isReversed ? 'lg:order-2' : '' }}">
@if($programImage) @if($programImage)
<img src="{{ $programImage->url }}" <img src="{{ $programImage->url }}"
alt="{{ $program->name_ar }}" alt="{{ $program->name_ar }}"
class="rounded-xl w-full aspect-[16/10] object-cover border border-white/10"> class="rounded-xl w-full aspect-[16/10] object-cover border border-gray-200">
@else @else
<div class="rounded-xl w-full aspect-[16/10] bg-gradient-to-br from-[var(--site-accent)]/10 to-[var(--site-secondary)] border border-white/10 flex items-center justify-center"> <div class="rounded-xl w-full aspect-[16/10] bg-gradient-to-br from-[var(--site-accent)]/5 to-gray-50 border border-gray-200 flex items-center justify-center">
<svg class="w-16 h-16 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-14 h-14 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/>
</svg> </svg>
</div> </div>
@endif
</div>
{{-- Content --}}
<div class="{{ $isReversed ? 'lg:order-1' : '' }}">
<h3 class="text-2xl font-bold text-white">{{ $program->name_ar }}</h3>
<div class="flex items-center gap-3 mt-3">
@if(($program->age_from ?? null) && ($program->age_to ?? null))
<span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-[var(--site-accent)]/10 text-[var(--site-accent)] border border-[var(--site-accent)]/20">
{{ $program->age_from }} - {{ $program->age_to }} سنة
</span>
@endif
@if($program->duration_months ?? null)
<span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-white/5 text-white/70 border border-white/10">
{{ $program->duration_months }} شهر
</span>
@endif @endif
</div> </div>
@if($program->description_ar ?? null) <div class="{{ $isReversed ? 'lg:order-1' : '' }}">
<p class="mt-4 text-white/60 leading-relaxed"> <h3 class="text-2xl font-bold text-gray-900">{{ $program->name_ar }}</h3>
{{ Str::limit($program->description_ar, 200) }}
</p> <div class="flex items-center gap-3 mt-3">
@endif @if(($program->age_from ?? null) && ($program->age_to ?? null))
<span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-[var(--site-accent)]/10 text-[var(--site-accent)] border border-[var(--site-accent)]/20">
{{ $program->age_from }} - {{ $program->age_to }} سنة
</span>
@endif
@if($program->duration_months ?? null)
<span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">
{{ $program->duration_months }} شهر
</span>
@endif
</div>
@if($program->description_ar ?? null)
<p class="mt-4 text-gray-500 leading-relaxed">
{{ Str::limit($program->description_ar, 200) }}
</p>
@endif
<a href="#section-contact" class="inline-flex items-center gap-2 mt-6 text-[var(--site-accent)] font-medium hover:gap-3 transition-all"> <a href="#section-contact" class="inline-flex items-center gap-2 mt-6 text-[var(--site-accent)] font-medium hover:gap-3 transition-all">
سجّل الآن سجّل الآن
<svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a> </a>
</div>
</div> </div>
</div>
@if(!$loop->last) @if(!$loop->last)
<div class="h-px w-full bg-gradient-to-l from-transparent via-white/10 to-transparent"></div> <div class="h-px w-full bg-gray-100"></div>
@endif @endif
@endforeach @endforeach
</div> </div>
@else
{{-- Empty skeleton state --}}
<div class="space-y-8">
@for($i = 0; $i < 2; $i++)
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="{{ $i % 2 !== 0 ? 'lg:order-2' : '' }}">
<div class="rounded-xl w-full aspect-[16/10] skeleton-block"></div>
</div>
<div class="{{ $i % 2 !== 0 ? 'lg:order-1' : '' }} space-y-3">
<div class="skeleton-block h-7 w-1/2"></div>
<div class="skeleton-block h-4 w-full"></div>
<div class="skeleton-block h-4 w-3/4"></div>
</div>
</div>
@endfor
</div>
<div class="empty-state mt-6">
<p class="text-sm">لم تُضف برامج تدريبية بعد</p>
</div>
@endif
</div> </div>
</div> </div>
@endif
resources/views/website/sections/stats.blade.php
View file @ 85cf6677
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</svg> </svg>
</div> </div>
<span class="stat-number" data-counter="{{ $stats[$key] }}" data-suffix="+">0</span> <span class="stat-number" data-counter="{{ $stats[$key] }}" data-suffix="+">0</span>
<span class="block mt-2 text-white/50 text-sm">{{ $meta['label'] }}</span> <span class="block mt-2 text-white/60 text-sm">{{ $meta['label'] }}</span>
</div> </div>
@endif @endif
@endforeach @endforeach
......
resources/views/website/sections/testimonials.blade.php
View file @ 85cf6677
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
@endphp @endphp
@if($testimonials->count()) @if($testimonials->count())
<div class="site-section" x-data="{ current: 0, total: {{ $testimonials->count() }} }" x-init="setInterval(() => current = (current + 1) % total, 5000)"> <div class="site-section site-section--alt" x-data="{ current: 0, total: {{ $testimonials->count() }} }" x-init="setInterval(() => current = (current + 1) % total, 5000)">
<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>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
x-transition:leave="transition ease-in duration-300" x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"> x-transition:leave-end="opacity-0">
<p class="text-white/80 text-lg leading-relaxed italic relative z-10"> <p class="text-gray-600 text-lg leading-relaxed italic relative z-10">
{{ $testimonial->content }} {{ $testimonial->content }}
</p> </p>
...@@ -32,21 +32,20 @@ ...@@ -32,21 +32,20 @@
alt="{{ $testimonial->name }}" alt="{{ $testimonial->name }}"
class="w-12 h-12 rounded-full object-cover border-2 border-[var(--site-accent)]"> class="w-12 h-12 rounded-full object-cover border-2 border-[var(--site-accent)]">
@else @else
<div class="w-12 h-12 rounded-full bg-[var(--site-accent)]/20 flex items-center justify-center"> <div class="w-12 h-12 rounded-full bg-[var(--site-accent)]/10 flex items-center justify-center">
<span class="text-[var(--site-accent)] font-bold">{{ mb_substr($testimonial->name, 0, 1) }}</span> <span class="text-[var(--site-accent)] font-bold">{{ mb_substr($testimonial->name, 0, 1) }}</span>
</div> </div>
@endif @endif
<div> <div>
<span class="block text-white font-medium">{{ $testimonial->name }}</span> <span class="block text-gray-900 font-medium">{{ $testimonial->name }}</span>
@if($testimonial->role) @if($testimonial->role)
<span class="block text-white/40 text-sm">{{ $testimonial->role }}</span> <span class="block text-gray-400 text-sm">{{ $testimonial->role }}</span>
@endif @endif
</div> </div>
{{-- Stars --}}
<div class="ms-auto flex gap-0.5"> <div class="ms-auto flex gap-0.5">
@for($i = 1; $i <= 5; $i++) @for($i = 1; $i <= 5; $i++)
<svg class="w-4 h-4 {{ $i <= $testimonial->rating ? 'text-amber-400' : 'text-white/20' }}" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-4 h-4 {{ $i <= $testimonial->rating ? 'text-amber-400' : 'text-gray-200' }}" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg> </svg>
@endfor @endfor
...@@ -55,12 +54,11 @@ class="w-12 h-12 rounded-full object-cover border-2 border-[var(--site-accent)]" ...@@ -55,12 +54,11 @@ class="w-12 h-12 rounded-full object-cover border-2 border-[var(--site-accent)]"
</div> </div>
@endforeach @endforeach
{{-- Dots Navigation --}}
<div class="flex items-center justify-center gap-2 mt-8"> <div class="flex items-center justify-center gap-2 mt-8">
@foreach($testimonials as $testimonial) @foreach($testimonials as $testimonial)
<button @click="current = {{ $loop->index }}" <button @click="current = {{ $loop->index }}"
class="w-2.5 h-2.5 rounded-full transition-all duration-300" class="w-2.5 h-2.5 rounded-full transition-all duration-300"
:class="current === {{ $loop->index }} ? 'bg-[var(--site-accent)] w-6' : 'bg-white/20 hover:bg-white/40'" :class="current === {{ $loop->index }} ? 'bg-[var(--site-accent)] w-6' : 'bg-gray-300 hover:bg-gray-400'"
aria-label="شهادة {{ $loop->iteration }}"> aria-label="شهادة {{ $loop->iteration }}">
</button> </button>
@endforeach @endforeach
...@@ -68,4 +66,28 @@ class="w-2.5 h-2.5 rounded-full transition-all duration-300" ...@@ -68,4 +66,28 @@ class="w-2.5 h-2.5 rounded-full transition-all duration-300"
</div> </div>
</div> </div>
</div> </div>
@else
<div class="site-section site-section--alt">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="section-title mx-auto">{{ $section->title ?? 'آراء عملائنا' }}</h2>
</div>
<div class="max-w-3xl mx-auto">
<div class="skeleton-card p-8 space-y-4">
<div class="skeleton-block h-4 w-full"></div>
<div class="skeleton-block h-4 w-3/4"></div>
<div class="flex items-center gap-3 mt-6">
<div class="skeleton-block w-12 h-12 !rounded-full"></div>
<div class="space-y-2">
<div class="skeleton-block h-4 w-24"></div>
<div class="skeleton-block h-3 w-16"></div>
</div>
</div>
</div>
</div>
<div class="empty-state mt-4">
<p class="text-sm">لم تُضف آراء عملاء بعد</p>
</div>
</div>
</div>
@endif @endif
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