# Page Spec 01 — الصفحة الرئيسية (Home) **Page ID:** `page-home` **Route:** `/` **Component:** `App\Livewire\Home` (Full-page Livewire) **Objective:** اكتشاف سريع + تحويل للتسجيل + بناء ثقة **Language:** AR (RTL) افتراضي + FR (LTR) كامل --- ## 1) Purpose + CTAs ### Primary CTA (واحد فقط) | Lang | Text | Destination | |------|------|-------------| | AR | **استعرض البرامج** | `/courses` | | FR | **Découvrir les programmes** | `/courses` | ### Secondary CTA | Lang | Text | Destination | |------|------|-------------| | AR | احجز الآن | `/courses?sort=soonest` | | FR | S'inscrire | `/courses?sort=soonest` | --- ## 2) Layout Structure ``` ┌─────────────────────────────────────────────────────────────────┐ │ HEADER (Sticky) │ │ Logo ◄─► Nav: البرامج │ من نحن │ اتصل │ [AR/FR] │ تسجيل دخول │ ├─────────────────────────────────────────────────────────────────┤ │ HERO (Full-width, Video/Image BG) │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ "اكتشف البرامج التكوينية التي تناسب طموحك" │ │ │ │ Subline: تكوين حضوري/مختلط مع مدربين محترفين │ │ │ │ │ │ │ │ [استعرض البرامج] ← Primary (White on Teal) │ │ │ │ [احجز الآن →] ← Secondary (Outline) │ │ │ └─────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ TRUST BAR (Horizontal) │ │ ┌───────────┬───────────┬───────────┬───────────┐ │ │ │ 🎓 500+ │ 📚 25+ │ ⭐ 98% │ 🏆 معتمد │ │ │ │ متكوّن │ برنامج │ رضا │ وطنياً │ │ │ └───────────┴───────────┴───────────┴───────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ FEATURED PROGRAMS (3-4 Cards, Horizontal Scroll on Mobile) │ │ Section Title: "البرامج الأكثر طلباً" │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ Prog 1 │ │ Prog 2 │ │ Prog 3 │ │ Prog 4 │ │ │ │ Badge │ │ Badge │ │ Badge │ │ Badge │ │ │ │ "قريباً"│ │ │ │ │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ [عرض جميع البرامج →] │ ├─────────────────────────────────────────────────────────────────┤ │ VALUE PROPOSITION (3 Columns) │ │ Section Title: "لماذا تختارنا؟" │ │ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │ │ │ 🎯 تكوين عملي │ │ 📜 شهادات │ │ 💳 دفع مرن │ │ │ │ تطبيقي 100% │ │ معترف بها │ │ CCP/BaridiMob │ │ │ └───────────────┘ └───────────────┘ └───────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ UPCOMING SESSIONS (Quick Access) │ │ Section Title: "البرامج التي تنطلق قريباً" │ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ Session 1 │ 15 جانفي │ Python │ 5 مقاعد │ [سجّل الآن] │ │ │ │ Session 2 │ 22 جانفي │ Excel │ 8 مقاعد │ [سجّل الآن] │ │ │ │ Session 3 │ 01 فيفري │ Compta │ 3 مقاعد │ [سجّل الآن] │ │ │ └───────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ CTA BANNER (Full-width Gradient) │ │ "هل أنت جاهز للخطوة القادمة؟" │ │ [استعرض البرامج] ← Repeat Primary CTA │ ├─────────────────────────────────────────────────────────────────┤ │ FOOTER │ │ Columns: عن المركز │ روابط سريعة │ تواصل معنا │ تابعنا │ │ Copyright + Legal Links │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 3) Core Components ### 3.1 Header ```blade
ECOIN
@guest @else @endguest
{{ __('البرامج') }} {{ __('من نحن') }} {{ __('اتصل بنا') }} {{ __('تسجيل الدخول') }}
``` ### 3.2 Hero Section ```blade

{{ __('اكتشف البرامج التكوينية التي تناسب طموحك') }}

{{ __('تكوين حضوري ومختلط مع مدربين محترفين وشهادات معتمدة') }}

{{ __('استعرض البرامج') }} {{ __('احجز الآن') }} →
``` ### 3.3 Trust Bar ```blade
500+
{{ __('متكوّن') }}
25+
{{ __('برنامج') }}
98%
{{ __('نسبة الرضا') }}
🏆
{{ __('معتمد وطنياً') }}
``` ### 3.4 Featured Programs Card ```blade
@if($course->cover_image) {{ $course->title[app()->getLocale()] }} @endif @if($nextSession = $course->sessions->first()) {{ __('ينطلق') }} {{ $nextSession->start_date->format('d M') }} @endif {{ $course->category->name[app()->getLocale()] ?? $course->category->name['ar'] }}

{{ $course->title[app()->getLocale()] ?? $course->title['ar'] }}

{{ $course->short_description[app()->getLocale()] ?? Str::limit($course->description[app()->getLocale()] ?? '', 80) }}

{{ $course->duration_hours }}{{ __('س') }} @if($nextSession) {{ max(0, $nextSession->max_capacity - $nextSession->enrolled_count) }} {{ __('مقعد') }} @endif
{{ number_format($course->price, 0) }} {{ __('دج') }}
{{ __('التفاصيل والتسجيل') }}
``` ### 3.5 Upcoming Sessions Table ```blade

{{ __('البرامج التي تنطلق قريباً') }}

{{ __('سجّل الآن قبل اكتمال المقاعد') }}

@foreach($upcomingSessions as $session) @endforeach
{{ __('البرنامج') }} {{ __('تاريخ الانطلاق') }} {{ __('المدة') }} {{ __('المقاعد') }} {{ __('السعر') }}
{{ $session->course->title[app()->getLocale()] }}
{{ $session->name }}
 {{ $session->start_date->translatedFormat('d F Y') }} {{ $session->course->duration_hours }}{{ __('س') }} @php $remaining = max(0, $session->max_capacity - $session->enrolled_count); @endphp {{ $remaining }} {{ __('متبقي') }} {{ number_format($session->course->price, 0) }} {{ __('دج') }} {{ __('سجّل الآن') }}
``` --- ## 4) States + Microcopy (AR/FR) ### 4.1 Loading (Skeleton) ```blade
``` ### 4.2 Empty State (No Programs) | Element | العربية | Français | |---------|--------|----------| | Icon | 📚 | 📚 | | Title | لا توجد برامج متاحة حالياً | Aucun programme disponible | | Description | سنضيف برامج جديدة قريباً. اترك بريدك للإشعار. | De nouveaux programmes arrivent. Inscrivez-vous pour être notifié. | | CTA | أُعلمني | Me notifier | ### 4.3 Error State | Element | العربية | Français | |---------|--------|----------| | Title | حدث خطأ في تحميل البرامج | Erreur de chargement | | Description | يرجى تحديث الصفحة أو المحاولة لاحقاً | Actualisez la page ou réessayez plus tard | | CTA | تحديث الصفحة | Actualiser | ### 4.4 Low Seats Warning | Context | العربية | Français | |---------|--------|----------| | Badge | آخر 3 مقاعد! | 3 dernières places ! | | Tooltip | الطلب مرتفع على هذا البرنامج | Programme très demandé | --- ## 5) CX/LX Guidelines ### Friction Reduction | Point | Problem | Solution | |-------|---------|----------| | Hero | Too much text | Headline + Subline + 2 CTAs only | | Programs | Scroll to find | Featured first + "soonest" sort | | Trust | Unknown brand | Stats bar + "معتمد" badge | | Seats | FOMO unclear | Live seat count + amber warning | | Mobile | Long scroll | Sticky CTA bar at bottom | ### "What happens next" ```blade

{{ __('التسجيل يأخذ 3 دقائق فقط') }} ✓

``` ### Accessibility - Focus ring on all interactive elements - `aria-label` on icon-only buttons - Skip to content link - Contrast ratio ≥ 4.5:1 for text --- ## 6) Analytics Events | Event | Trigger | Properties | |-------|---------|------------| | `home_viewed` | Page load | `language`, `device`, `referrer` | | `hero_cta_clicked` | Click Primary | `cta: 'discover_programs'` | | `hero_secondary_clicked` | Click Secondary | `cta: 'book_now'` | | `program_card_clicked` | Click card | `course_id`, `position`, `has_upcoming` | | `upcoming_session_clicked` | Click "سجّل الآن" | `session_id`, `course_id`, `seats_remaining` | | `view_all_clicked` | Click "عرض جميع" | - | | `language_switched` | Toggle | `from`, `to` | | `scroll_to_section` | Scroll into view | `section: 'trust' | 'programs' | 'upcoming'` | --- ## 7) Security Notes | Aspect | Rule | |--------|------| | **Access** | Public page, no auth required | | **Data** | Only `published` courses via scope | | **Images** | Public storage, no signed URLs needed | | **Stats** | Aggregated only, no PII exposed | | **Cache** | Page-level cache OK (5 min TTL) | | **Rate Limit** | None for viewing | --- ## 8) Acceptance Criteria | # | Criterion | |---|-----------| | 1 | Hero displays with gradient background and 2 CTAs visible above fold | | 2 | Primary CTA "استعرض البرامج" links to `/courses` | | 3 | Secondary CTA "احجز الآن" links to `/courses?sort=soonest` | | 4 | Trust bar shows 4 stats horizontally on desktop, 2x2 on mobile | | 5 | Featured programs show max 4 cards with seat count | | 6 | Upcoming sessions table shows 3-5 rows with "سجّل الآن" buttons | | 7 | Language toggle switches between AR (RTL) and FR (LTR) | | 8 | Empty state displays when no published courses exist | | 9 | Page loads in < 2.5s (LCP) on 4G connection | | 10 | Mobile sticky bar appears after scrolling past hero | --- ## Implementation Notes ```php // App\Livewire\Home.php public function render() { $featuredCourses = Course::published() ->with(['category', 'sessions' => fn($q) => $q->open()->upcoming()->orderBy('start_date')]) ->take(4) ->get(); $upcomingSessions = Session::open() ->upcoming() ->with(['course' => fn($q) => $q->published()]) ->orderBy('start_date') ->take(5) ->get(); return view('livewire.home', compact('featuredCourses', 'upcomingSessions')) ->layout('components.layouts.app'); } ``` --- *Document generated from ECOIN v3 PRD specifications.*