134 lines
6.0 KiB
PHP
134 lines
6.0 KiB
PHP
@extends('template.layout')
|
|
@section('title', __('instalaciones.page_title'))
|
|
|
|
@push('css')
|
|
<!-- LightGallery CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery-bundle.min.css">
|
|
<link rel="stylesheet" href="{{ asset('assets/css/instalaciones.css') }}">
|
|
@endpush
|
|
|
|
@section('content')
|
|
<section class="hero-section">
|
|
<div class="video-container">
|
|
<video class="hero-video" autoplay muted loop playsinline id="heroVideo">
|
|
<source src="{{ asset('assets/videos/Globopuerto-Teotihuacan-Video.mp4') }}" type="video/mp4">
|
|
</video>
|
|
<div class="video-overlay"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<img src="{{ asset('assets/img/vueloenglobo/logo-vueloenglobo.png') }}" alt="" lazy="loading" class="img img-fluid" style="border-radius: 10px!important;" width="200px">
|
|
<h1 class="hero-title">
|
|
{{ __('instalaciones.hero.title_line1') }}<br>
|
|
{{ __('instalaciones.hero.title_line2') }}
|
|
</h1>
|
|
<p class="hero-description">
|
|
{{ __('instalaciones.hero.description') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== -->
|
|
<!-- GALERÍA PREMIUM CON UI/UX MODERNO -->
|
|
<!-- ==================== -->
|
|
<section class="gallery-premium">
|
|
<div class="gallery-premium-header">
|
|
<div class="gallery-premium-subtitle">
|
|
<i class="fas fa-camera-retro"></i> {{ __('instalaciones.gallery.badge') }}
|
|
</div>
|
|
<h2 class="gallery-premium-title">
|
|
{{ __('instalaciones.gallery.title') }}
|
|
</h2>
|
|
<p class="gallery-premium-description">
|
|
{{ __('instalaciones.gallery.description') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Grid de galería -->
|
|
<div class="gallery-premium-container" id="galleryContainer">
|
|
@php
|
|
$directory = public_path('assets/img/instalaciones');
|
|
$images = [];
|
|
|
|
if (is_dir($directory)) {
|
|
$files = scandir($directory);
|
|
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
|
|
|
foreach ($files as $file) {
|
|
$extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));
|
|
if (in_array($extension, $allowedExtensions)) {
|
|
$filePath = $directory . '/' . $file;
|
|
$fileDate = filemtime($filePath);
|
|
$title = pathinfo($file, PATHINFO_FILENAME);
|
|
$title = str_replace(['-', '_'], ' ', $title);
|
|
$title = ucwords($title);
|
|
|
|
$images[] = [
|
|
'file' => $file,
|
|
'title' => $title,
|
|
'date' => $fileDate,
|
|
];
|
|
}
|
|
}
|
|
|
|
// Ordenar por fecha (más reciente primero)
|
|
usort($images, function ($a, $b) {
|
|
return $b['date'] - $a['date'];
|
|
});
|
|
}
|
|
@endphp
|
|
|
|
@forelse($images as $index => $img)
|
|
@php
|
|
$imgPath = asset('assets/img/instalaciones/' . $img['file']);
|
|
$heights = ['320px', '380px', '300px', '360px', '340px', '400px', '310px', '370px'];
|
|
$height = $heights[$index % count($heights)];
|
|
@endphp
|
|
<div class="gallery-item" data-src="{{ $imgPath }}" data-lg-id="{{ $index }}">
|
|
<div class="gallery-image-wrapper">
|
|
<img class="gallery-image" src="{{ $imgPath }}" alt="{{ $img['title'] }}" loading="lazy"
|
|
style="min-height: {{ $height }}; object-fit: cover;">
|
|
<div class="gallery-overlay">
|
|
<div class="zoom-badge">
|
|
<i class="fas fa-expand-alt"></i>
|
|
</div>
|
|
<div class="gallery-info">
|
|
<div class="gallery-title">
|
|
<i class="fas fa-camera"></i>
|
|
{{ $img['title'] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div style="grid-column: 1/-1; text-align: center; padding: 4rem;">
|
|
<i class="fas fa-image"
|
|
style="font-size: 3rem; color: var(--accent); margin-bottom: 1rem; display: block;"></i>
|
|
<p>{{ __('instalaciones.gallery.empty_message') }}</p>
|
|
<p style="font-size: 0.9rem; margin-top: 1rem;">{{ __('instalaciones.gallery.empty_instruction') }}</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Estadísticas -->
|
|
@if (count($images) > 0)
|
|
<div class="gallery-stats">
|
|
<i class="fas fa-images"></i> {{ count($images) }} {{ __('instalaciones.gallery.stats_prefix') }}
|
|
</div>
|
|
@endif
|
|
|
|
</section>
|
|
@endsection
|
|
|
|
@push('js')
|
|
<!-- Librerías JS - Usando CDNs más confiables -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/zoom/lg-zoom.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/fullscreen/lg-fullscreen.min.js">
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
|
|
<script src="{{ asset('assets/js/instalaciones.js') }}"></script>
|
|
@endpush
|