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
Hide whitespace changes
Inline Side-by-side
Showing with 438 additions and 342 deletions
resources/css/website.css
View file @ 85cf6677
@import 'tailwindcss'; @import 'tailwindcss';
/* ═══════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════
BOLD & ATHLETIC — Public Academy Website Template CLEAN & PROFESSIONAL — Public Academy Website Template
Dark, diagonal, dynamic. Sports energy. Light, minimal, structured. Ready out of the box.
═══════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════ */
@theme { @theme {
--color-website-primary: var(--site-primary, #1a1a2e); --color-website-primary: var(--site-primary, #1e3a5f);
--color-website-secondary: var(--site-secondary, #16213e); --color-website-secondary: var(--site-secondary, #2d5a87);
--color-website-accent: var(--site-accent, #e94560); --color-website-accent: var(--site-accent, #2563eb);
--color-website-text: var(--site-text, #ffffff); --color-website-text: var(--site-text, #1f2937);
--color-website-muted: oklch(0.75 0.01 260); --color-website-muted: #6b7280;
--color-website-surface: oklch(0.15 0.02 260); --color-website-surface: #ffffff;
--color-website-surface-raised: oklch(0.18 0.02 260); --color-website-surface-raised: #f9fafb;
--color-website-border: oklch(0.25 0.02 260); --color-website-border: #e5e7eb;
} }
@layer base { @layer base {
.website-body { .website-body {
background: linear-gradient(135deg, var(--site-primary, #1a1a2e) 0%, var(--site-secondary, #16213e) 100%); background: var(--site-bg, #ffffff);
color: var(--site-text, #ffffff); color: var(--site-text, #1f2937);
font-family: var(--site-body-font, 'Cairo'), 'Noto Sans Arabic', system-ui, sans-serif; font-family: var(--site-body-font, 'Cairo'), 'Noto Sans Arabic', system-ui, sans-serif;
direction: rtl; direction: rtl;
min-height: 100vh; min-height: 100vh;
...@@ -41,28 +41,27 @@ ...@@ -41,28 +41,27 @@
inset-inline: 0; inset-inline: 0;
z-index: 100; z-index: 100;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(0px); background: var(--site-primary, #1e3a5f);
} }
.site-nav--scrolled { .site-nav--scrolled {
background: oklch(0.12 0.02 260 / 0.95); background: var(--site-primary, #1e3a5f);
backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.1);
box-shadow: 0 4px 30px oklch(0 0 0 / 0.3);
} }
.site-nav--solid { .site-nav--solid {
background: oklch(0.12 0.02 260 / 0.98); background: var(--site-primary, #1e3a5f);
backdrop-filter: blur(12px);
} }
/* ─── Hero ─── */ /* ─── Hero ─── */
.hero-section { .hero-section {
position: relative; position: relative;
min-height: 100vh; min-height: 85vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, var(--site-primary, #1e3a5f) 0%, var(--site-secondary, #2d5a87) 100%);
} }
.hero-section::after { .hero-section::after {
...@@ -71,13 +70,13 @@ ...@@ -71,13 +70,13 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 120px; height: 80px;
background: linear-gradient(to top, var(--site-primary, #1a1a2e), transparent); background: linear-gradient(to top, var(--site-bg, #ffffff), transparent);
z-index: 2; z-index: 2;
} }
.hero-clip { .hero-clip {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); clip-path: none;
} }
.hero-overlay { .hero-overlay {
...@@ -85,8 +84,8 @@ ...@@ -85,8 +84,8 @@
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
oklch(0.1 0.02 260 / var(--overlay-opacity, 0.7)) 0%, rgba(0,0,0, var(--overlay-opacity, 0.4)) 0%,
oklch(0.05 0.03 260 / calc(var(--overlay-opacity, 0.7) + 0.1)) 100% rgba(0,0,0, calc(var(--overlay-opacity, 0.4) + 0.1)) 100%
); );
z-index: 1; z-index: 1;
} }
...@@ -99,186 +98,166 @@ ...@@ -99,186 +98,166 @@
} }
.hero-title { .hero-title {
font-size: clamp(2.5rem, 6vw, 5rem); font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800; font-weight: 800;
line-height: 1.1; line-height: 1.15;
text-shadow: 0 4px 20px oklch(0 0 0 / 0.5); color: #ffffff;
letter-spacing: -0.02em; letter-spacing: -0.01em;
} }
.hero-accent-line { .hero-accent-line {
width: 0; width: 0;
height: 4px; height: 4px;
margin: 1.5rem auto; margin: 1.5rem auto;
background: var(--site-accent, #e94560); background: var(--site-accent, #2563eb);
border-radius: 2px; border-radius: 2px;
animation: accent-expand 1s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: accent-expand 1s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} }
@keyframes accent-expand { @keyframes accent-expand {
to { width: 120px; } to { width: 80px; }
} }
/* ─── Section Shared ─── */ /* ─── Section Shared ─── */
.site-section { .site-section {
position: relative; position: relative;
padding: 6rem 0; padding: 5rem 0;
overflow: hidden; overflow: hidden;
background: var(--site-bg, #ffffff);
}
.site-section--alt {
background: #f8fafc;
} }
.site-section--dark { .site-section--dark {
background: oklch(0.1 0.015 260); background: var(--site-primary, #1e3a5f);
color: #ffffff;
} }
.site-section--pattern { .site-section--pattern {
background-image: repeating-linear-gradient( background-image: none;
-45deg,
transparent,
transparent 40px,
oklch(1 0 0 / 0.02) 40px,
oklch(1 0 0 / 0.02) 41px
);
} }
.section-title { .section-title {
font-size: clamp(1.75rem, 4vw, 3rem); font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 700; font-weight: 700;
color: var(--site-text, #1f2937);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.site-section--dark .section-title {
color: #ffffff;
}
.section-title::after { .section-title::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -8px; bottom: -8px;
inset-inline-start: 0; inset-inline-start: 0;
width: 60px; width: 50px;
height: 3px; height: 3px;
background: var(--site-accent, #e94560); background: var(--site-accent, #2563eb);
border-radius: 2px; border-radius: 2px;
} }
/* ─── Cards (Activity / Program / Branch) ─── */ /* ─── Cards ─── */
.site-card { .site-card {
position: relative; position: relative;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
background: oklch(0.15 0.02 260); background: #ffffff;
border: 1px solid oklch(0.25 0.02 260); border: 1px solid #e5e7eb;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} }
.site-card:hover { .site-card:hover {
transform: translateY(-4px); transform: translateY(-2px);
border-color: var(--site-accent, #e94560); border-color: var(--site-accent, #2563eb);
box-shadow: 0 20px 40px oklch(0 0 0 / 0.3), box-shadow: 0 10px 30px rgba(0,0,0,0.08);
0 0 0 1px var(--site-accent, #e94560);
} }
.site-card__image { .site-card__image {
width: 100%; width: 100%;
aspect-ratio: 4/3; aspect-ratio: 4/3;
object-fit: cover; object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
.site-card:hover .site-card__image { .site-card:hover .site-card__image {
transform: scale(1.08); transform: scale(1.03);
} }
.site-card__overlay { .site-card__overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(to top, oklch(0.08 0.02 260 / 0.9) 0%, transparent 60%); background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
opacity: 0; opacity: 0.8;
transition: opacity 0.4s; transition: opacity 0.3s;
}
.site-card:hover .site-card__overlay {
opacity: 1;
} }
/* ─── Stats Counter ─── */ /* ─── Stats ─── */
.stats-band { .stats-band {
position: relative; position: relative;
background: oklch(0.08 0.02 260); background: var(--site-primary, #1e3a5f);
overflow: hidden; overflow: hidden;
} }
.stats-band::before,
.stats-band::after {
content: '';
position: absolute;
width: 200px;
height: 200%;
background: var(--site-accent, #e94560);
opacity: 0.05;
transform: rotate(-15deg);
}
.stats-band::before { left: 10%; top: -50%; }
.stats-band::after { right: 15%; top: -50%; }
.stat-number { .stat-number {
font-size: clamp(2.5rem, 5vw, 4rem); font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800; font-weight: 800;
color: var(--site-accent, #e94560); color: var(--site-accent, #2563eb);
line-height: 1; line-height: 1;
} }
/* ─── Testimonials Carousel ─── */ /* ─── Testimonials ─── */
.testimonial-card { .testimonial-card {
background: oklch(0.15 0.02 260); background: #ffffff;
border-radius: 1.5rem; border-radius: 1rem;
padding: 2.5rem; padding: 2rem;
border: 1px solid oklch(0.25 0.02 260); border: 1px solid #e5e7eb;
position: relative; position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} }
.testimonial-card::before { .testimonial-card::before {
content: '\201C'; content: '\201C';
position: absolute; position: absolute;
top: 1rem; top: 0.75rem;
inset-inline-start: 1.5rem; inset-inline-start: 1.25rem;
font-size: 5rem; font-size: 4rem;
line-height: 1; line-height: 1;
color: var(--site-accent, #e94560); color: var(--site-accent, #2563eb);
opacity: 0.3; opacity: 0.15;
font-family: serif; font-family: serif;
} }
/* ─── FAQ Accordion ─── */ /* ─── FAQ ─── */
.faq-item { .faq-item {
border: 1px solid oklch(0.25 0.02 260); border: 1px solid #e5e7eb;
border-radius: 0.75rem; border-radius: 0.75rem;
overflow: hidden; overflow: hidden;
transition: border-color 0.3s; transition: border-color 0.3s;
background: #ffffff;
} }
.faq-item:hover, .faq-item:hover,
.faq-item[data-open="true"] { .faq-item[data-open="true"] {
border-color: var(--site-accent, #e94560); border-color: var(--site-accent, #2563eb);
} }
/* ─── CTA Section ─── */ /* ─── CTA Section ─── */
.cta-section { .cta-section {
position: relative; position: relative;
background: linear-gradient(135deg, var(--site-accent, #e94560), oklch(0.55 0.2 350)); background: linear-gradient(135deg, var(--site-primary, #1e3a5f), var(--site-secondary, #2d5a87));
overflow: hidden; overflow: hidden;
} }
.cta-section::before { .cta-section::before {
content: ''; content: none;
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 30px,
oklch(1 0 0 / 0.05) 30px,
oklch(1 0 0 / 0.05) 31px
);
} }
/* ─── Buttons ─── */ /* ─── Buttons ─── */
...@@ -296,31 +275,32 @@ ...@@ -296,31 +275,32 @@
} }
.site-btn--primary { .site-btn--primary {
background: var(--site-accent, #e94560); background: var(--site-accent, #2563eb);
color: white; color: white;
box-shadow: 0 4px 15px oklch(0.6 0.2 15 / 0.3); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
} }
.site-btn--primary:hover { .site-btn--primary:hover {
transform: scale(1.05); transform: translateY(-1px);
box-shadow: 0 8px 25px oklch(0.6 0.2 15 / 0.5); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
} }
.site-btn--outline { .site-btn--outline {
background: transparent; background: transparent;
color: white; color: white;
border: 2px solid oklch(1 0 0 / 0.3); border: 2px solid rgba(255,255,255,0.4);
} }
.site-btn--outline:hover { .site-btn--outline:hover {
border-color: var(--site-accent, #e94560); border-color: white;
color: var(--site-accent, #e94560); background: rgba(255,255,255,0.1);
} }
/* ─── Footer ─── */ /* ─── Footer ─── */
.site-footer { .site-footer {
background: oklch(0.06 0.015 260); background: var(--site-primary, #1e3a5f);
border-top: 1px solid oklch(0.2 0.02 260); color: #ffffff;
border-top: none;
} }
/* ─── WhatsApp Float ─── */ /* ─── WhatsApp Float ─── */
...@@ -336,7 +316,7 @@ ...@@ -336,7 +316,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 4px 15px oklch(0.5 0.2 150 / 0.4); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
transition: transform 0.3s; transition: transform 0.3s;
animation: whatsapp-pulse 2s infinite; animation: whatsapp-pulse 2s infinite;
} }
...@@ -346,15 +326,15 @@ ...@@ -346,15 +326,15 @@
} }
@keyframes whatsapp-pulse { @keyframes whatsapp-pulse {
0%, 100% { box-shadow: 0 4px 15px oklch(0.5 0.2 150 / 0.4); } 0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
50% { box-shadow: 0 4px 25px oklch(0.5 0.2 150 / 0.6), 0 0 0 8px oklch(0.5 0.2 150 / 0.1); } 50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5), 0 0 0 6px rgba(37, 211, 102, 0.08); }
} }
/* ─── Animations ─── */ /* ─── Animations ─── */
.reveal { .reveal {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(20px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
} }
.reveal--visible { .reveal--visible {
...@@ -371,7 +351,7 @@ ...@@ -371,7 +351,7 @@
.map-container { .map-container {
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
border: 1px solid oklch(0.25 0.02 260); border: 1px solid #e5e7eb;
height: 350px; height: 350px;
} }
...@@ -388,6 +368,7 @@ ...@@ -388,6 +368,7 @@
overflow: hidden; overflow: hidden;
aspect-ratio: 3/2; aspect-ratio: 3/2;
cursor: pointer; cursor: pointer;
border: 1px solid #e5e7eb;
} }
.gallery-item img { .gallery-item img {
...@@ -398,19 +379,7 @@ ...@@ -398,19 +379,7 @@
} }
.gallery-item:hover img { .gallery-item:hover img {
transform: scale(1.1); transform: scale(1.05);
}
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: oklch(0.1 0 0 / 0);
transition: background 0.3s;
}
.gallery-item:hover::after {
background: oklch(0.1 0 0 / 0.4);
} }
/* ─── Partners Logo Bar ─── */ /* ─── Partners Logo Bar ─── */
...@@ -429,33 +398,74 @@ ...@@ -429,33 +398,74 @@
.site-input { .site-input {
width: 100%; width: 100%;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
background: oklch(0.12 0.02 260); background: #ffffff;
border: 1px solid oklch(0.25 0.02 260); border: 1px solid #d1d5db;
border-radius: 0.75rem; border-radius: 0.75rem;
color: white; color: #1f2937;
font-size: 1rem; font-size: 1rem;
transition: border-color 0.3s; transition: border-color 0.3s;
} }
.site-input:focus { .site-input:focus {
outline: none; outline: none;
border-color: var(--site-accent, #e94560); border-color: var(--site-accent, #2563eb);
box-shadow: 0 0 0 3px oklch(0.6 0.2 15 / 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
} }
.site-input::placeholder { .site-input::placeholder {
color: oklch(0.55 0.01 260); color: #9ca3af;
}
.site-section--dark .site-input {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
color: #ffffff;
}
.site-section--dark .site-input::placeholder {
color: rgba(255,255,255,0.5);
}
/* ─── Empty/Skeleton States ─── */
.skeleton-card {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 1rem;
overflow: hidden;
}
.skeleton-block {
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: #9ca3af;
}
.empty-state svg {
margin: 0 auto 1rem;
opacity: 0.4;
} }
} }
/* ─── Responsive ─── */ /* ─── Responsive ─── */
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-section { .hero-section {
min-height: 70vh; min-height: 65vh;
} }
.site-section { .site-section {
padding: 3.5rem 0; padding: 3rem 0;
} }
.gallery-grid { .gallery-grid {
......
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