# Angaza Mediation Centre - Landing Page Installation Guide

## Overview
This package contains all the files needed to integrate a professional, modern landing page into your existing Laravel 12 mediation learning portal. The landing page uses the same technology stack as your portal (Laravel 12, Tailwind CSS 4, Alpine.js, Vite 6, MySQL 5.7).

## Quick Installation Steps

### 1. Copy Files to Your Project

Copy the following directories/files into your existing Laravel project:

```bash
# Copy Controllers
cp app/Http/Controllers/LandingPageController.php your-project/app/Http/Controllers/

# Copy Models (if not already existing)
cp app/Models/Organization.php your-project/app/Models/
cp app/Models/Slider.php your-project/app/Models/
cp app/Models/StaffHistory.php your-project/app/Models/
cp app/Models/Gallery.php your-project/app/Models/
cp app/Models/GalleryImage.php your-project/app/Models/
cp app/Models/GalleryType.php your-project/app/Models/

# Copy Migrations
cp database/migrations/*.php your-project/database/migrations/

# Copy Seeders
cp database/seeders/*.php your-project/database/seeders/

# Copy Views
cp -r resources/views/landing/ your-project/resources/views/landing/

# Copy Assets
cp resources/css/app.css your-project/resources/css/app.css
cp resources/js/app.js your-project/resources/js/app.js
cp -r public/images/ your-project/public/images/
```

### 2. Update Routes

Add the landing page routes to your `routes/web.php`:

```php
use App\Http\Controllers\LandingPageController;

// Landing page routes
Route::get('/', [LandingPageController::class, 'index'])->name('landing.home');
Route::get('/home', [LandingPageController::class, 'index'])->name('landing.home.alt');
Route::get('/api/organization', [LandingPageController::class, 'getOrganization'])->name('api.organization');
Route::get('/api/sliders', [LandingPageController::class, 'getSliders'])->name('api.sliders');
```

**Important:** If your existing project has a route for `/`, you may need to adjust it. The landing page should be the default homepage. Move any existing authenticated routes inside authenticated middleware groups.

### 3. Run Migrations

```bash
php artisan migrate
```

### 4. Run Seeders

```bash
# Run all landing page seeders
php artisan db:seed --class=LandingPageSeeder

# Or run individual seeders
php artisan db:seed --class=OrganizationSeeder
php artisan db:seed --class=SliderSeeder
php artisan db:seed --class=StaffHistorySeeder
php artisan db:seed --class=GalleryTypeSeeder
php artisan db:seed --class=GallerySeeder
```

### 5. Build Assets

```bash
npm run build
# Or for development
npm run dev
```

### 6. Storage Link

Ensure the storage link is set up for image uploads:

```bash
php artisan storage:link
```

### 7. Clear Caches

```bash
php artisan view:clear
php artisan route:clear
php artisan config:clear
php artisan cache:clear
```

## File Structure

```
your-project/
├── app/
│   └── Http/
│       └── Controllers/
│           └── LandingPageController.php     # Main controller
├── database/
│   ├── migrations/
│   │   ├── *_create_organizations_table.php
│   │   ├── *_create_sliders_table.php
│   │   ├── *_create_staff_histories_table.php
│   │   ├── *_create_gallery_types_table.php
│   │   ├── *_create_galleries_table.php
│   │   └── *_create_gallery_images_table.php
│   └── seeders/
│       ├── OrganizationSeeder.php
│       ├── SliderSeeder.php
│       ├── StaffHistorySeeder.php
│       ├── GalleryTypeSeeder.php
│       ├── GallerySeeder.php
│       └── LandingPageSeeder.php
├── resources/
│   ├── css/app.css
│   ├── js/app.js
│   └── views/
│       └── landing/
│           ├── layout.blade.php              # Main layout
│           ├── index.blade.php               # Main page
│           └── partials/
│               ├── header.blade.php           # Header with navigation
│               ├── footer.blade.php           # Footer
│               ├── hero-slider.blade.php      # Hero slider section
│               ├── about-why-choose.blade.php # About + Why Choose Us
│               ├── course-topics.blade.php    # Course objectives & topics
│               ├── experts.blade.php          # Mediation experts (dynamic)
│               ├── privileges-who.blade.php   # Privileges & Who Should Study
│               ├── gallery.blade.php          # Gallery/Portfolio (dynamic)
│               ├── assessment.blade.php       # Assessment procedure
│               ├── contact.blade.php          # Contact us (dynamic)
│               └── pagination.blade.php       # Custom pagination
├── public/
│   └── images/
│       └── favicon.svg
└── routes/
    └── web.php (add landing page routes)
```

## Dynamic Sections

The following sections pull data from the database and can be updated from the dashboard:

1. **Header** - Email and phone from Organization model
2. **Hero Slider** - Images from Slider model
3. **Mediation Experts** - Staff from StaffHistory model (current staff only)
4. **Gallery/Portfolio** - Images from Gallery/GalleryImage/GalleryType models
5. **Contact Us** - All contact details from Organization model
6. **Footer** - Contact details from Organization model

## Static Sections (Hardcoded)

These sections use data from the MD files and are hardcoded in the Blade templates:

1. **About Us / Why Choose Us** - Quality features and descriptions
2. **Course Objectives & Topics** - Module topics and objectives
3. **Privileges & Who Should Study** - Accreditation benefits and target audience
4. **Assessment Procedure** - Role-play, reflective practice, written exam, materials

## Navigation Menu

The landing page uses smooth scrolling navigation:

| Menu Item | Section ID | Description |
|-----------|-----------|-------------|
| Home | #home | Hero slider with accreditation cards |
| About | #about | About us + Why choose us |
| Programs | #programs | Course objectives & topics |
| Experts | #experts | Our mediation experts |
| Benefits | #benefits | Privileges + Who should study |
| Gallery | #gallery | Pictorial portfolio |
| Assessment | #assessment | Assessment procedure |
| Contact | #contact | Contact form & details |

## Theme Colors

- **Primary Blue**: #2563eb (Tailwind blue-600)
- **Dark Blue**: #1e3a5f (primary-700)
- **Accent Red**: #dc2626 (Tailwind red-600)

## Key Features

- Responsive design (mobile-first)
- Smooth scroll navigation with active section tracking
- Animated hero slider with 3 transition styles
- Intersection Observer reveal animations
- Dynamic gallery with search, filter, and pagination
- Counter animations for statistics
- Glass morphism header on scroll
- Back-to-top button
- Social media integration from Organization model
- SEO-friendly meta tags

## Notes

- If you already have some of the models (Organization, Slider, etc.), you only need to add any missing methods/relationships
- The gallery images in the seeder use Unsplash URLs as placeholders - replace them with your actual images via the dashboard
- Staff passport photos should be uploaded through the dashboard
- Slider images can be uploaded or linked via external URLs
- The contact form submission endpoint needs to be connected to your existing notification/email system
