Initial commit: Lash Vanshy - Complete project with admin panel, gallery, products, and contact

resources/views/frontend/galeria/index.blade.php

@@ -0,0 +1,167 @@
+@extends('frontend.layouts.main')
+
+@section('title', 'Galería - Lash Vanshy')
+
+@section('content')
+<!-- Page Header -->
+<section class="page-header">
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h1>Nuestra Galería</h1>
+                <p>Explora nuestros trabajos realizados y transforma tu mirada</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Gallery Section -->
+<section class="gallery-section section-padding">
+    <div class="container">
+        <!-- Filters -->
+        <div class="gallery-filters">
+            <button class="filter-btn {{ $tipo === 'todos' ? 'active' : '' }}" 
+                    onclick="filterGallery('todos')">
+                <i class="fas fa-th-large me-2"></i>Todos ({{ $stats['total'] }})
+            </button>
+            <button class="filter-btn {{ $tipo === 'imagen' ? 'active' : '' }}" 
+                    onclick="filterGallery('imagen')">
+                <i class="fas fa-image me-2"></i>Imágenes ({{ $stats['imagenes'] }})
+            </button>
+            <button class="filter-btn {{ $tipo === 'video' ? 'active' : '' }}" 
+                    onclick="filterGallery('video')">
+                <i class="fas fa-video me-2"></i>Videos ({{ $stats['videos'] }})
+            </button>
+        </div>
+        
+        <!-- Gallery Grid -->
+        @if($galeria->isNotEmpty())
+        <div class="gallery-grid">
+            @foreach($galeria as $item)
+            <div class="gallery-item" data-type="{{ $item->tipo }}">
+                @if($item->tipo === 'video')
+                    @if($item->thumbnail)
+                    <img src="{{ asset('storage/' . $item->thumbnail) }}" 
+                         alt="{{ $item->titulo }}"
+                         loading="lazy">
+                    @elseif($item->archivo)
+                    <video poster="{{ asset('storage/' . $item->archivo . '/preview.jpg') }}">
+                        <source src="{{ asset('storage/' . $item->archivo) }}" type="video/mp4">
+                    </video>
+                    @else
+                    <div class="placeholder-img w-100 h-100">
+                        <i class="fas fa-video fa-2x"></i>
+                    </div>
+                    @endif
+                    <div class="play-icon">
+                        <i class="fas fa-play"></i>
+                    </div>
+                @else
+                    @if($item->archivo)
+                    <a href="{{ asset('storage/' . $item->archivo) }}" 
+                       data-lightbox="gallery" 
+                       data-title="{{ $item->titulo }}">
+                        <img src="{{ asset('storage/' . $item->archivo) }}" 
+                             alt="{{ $item->titulo }}"
+                             loading="lazy">
+                    </a>
+                    @else
+                    <div class="placeholder-img w-100 h-100">
+                        <i class="fas fa-image fa-2x"></i>
+                    </div>
+                    @endif
+                @endif
+                
+                <div class="overlay">
+                    <div class="overlay-content">
+                        <h4>{{ $item->titulo }}</h4>
+                        @if($item->descripcion)
+                        <p>{{ Str::limit($item->descripcion, 60) }}</p>
+                        @endif
+                        <span class="badge bg-light text-dark mt-2">
+                            <i class="fas {{ $item->tipo === 'video' ? 'fa-video' : 'fa-image' }} me-1"></i>
+                            {{ $item->tipo === 'video' ? 'Video' : 'Imagen' }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            @endforeach
+        </div>
+        
+        <!-- Pagination -->
+        <div class="pagination-wrapper">
+            {{ $galeria->appends(['tipo' => $tipo])->links() }}
+        </div>
+        @else
+        <div class="empty-state">
+            <i class="fas fa-images"></i>
+            <h4>No hay elementos en la galería</h4>
+            <p>Próximamente subiremos más contenido. ¡Vuelve pronto!</p>
+        </div>
+        @endif
+    </div>
+</section>
+
+<style>
+.page-header {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+    padding: 60px 0;
+    text-align: center;
+}
+
+.page-header h1 {
+    font-size: 2.5rem;
+    color: var(--text);
+    margin-bottom: 0.5rem;
+}
+
+.page-header p {
+    color: var(--text-light);
+    font-size: 1.1rem;
+}
+
+.pagination-wrapper {
+    margin-top: 3rem;
+    text-align: center;
+}
+
+.pagination .page-link {
+    color: var(--text);
+    border: 2px solid var(--border);
+    margin: 0 0.25rem;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+}
+
+.pagination .page-link:hover {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+.pagination .page-item.active .page-link {
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    border-color: transparent;
+    color: white;
+}
+</style>
+
+@push('scripts')
+<script>
+function filterGallery(tipo) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('tipo', tipo);
+    window.location.href = url.toString();
+}
+
+// Configurar Lightbox
+lightbox.option({
+    'resizeDuration': 200,
+    'wrapAround': true,
+    'albumLabel': 'Imagen %1 de %2',
+    'fadeDuration': 300,
+    'imageFadeDuration': 300
+});
+</script>
+@endpush
+@endsection