Laucha1312
308 lines
19 KiB
PHP
308 lines
19 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'OnAPB - Inicio')
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="{{ asset('static/index.css') }}">
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div id="main-content">
|
|
<!-- HERO SECTION: The Editorial Statement -->
|
|
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
@foreach($carouselItems as $index => $item)
|
|
<div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
|
|
<div class="row g-0 align-items-center" style="min-height: 80vh; background: var(--surface);">
|
|
<div class="col-md-6 p-5">
|
|
<div class="p-lg-5">
|
|
<span class="kfx-live-pill mb-4">ONAPB Exclusivo · En vivo</span>
|
|
<h1 class="hero-title fw-bold mt-3" style="font-size: clamp(3rem, 10vw, 6rem); transition: all 0.5s ease;">{{ $item->titulo }}</h1>
|
|
<p class="fs-5 mb-5 text-kinetic-muted kfx-reveal" data-fx="up" style="max-width: 500px;">{{ $item->subtitulo }}</p>
|
|
@if($item->boton_texto && $item->boton_enlace)
|
|
<a href="{{ url($item->boton_enlace) }}" class="btn-kinetic-primary text-decoration-none" data-magnetic data-magnetic-strength="0.18" style="padding: 1.2rem 3rem; font-size: 1.1rem; border-radius: 0;">{{ $item->boton_texto }} <span class="ms-2">→</span></a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 position-relative kfx-img-cover">
|
|
<img src="{{ Str::startsWith($item->imagen, 'http') ? $item->imagen : asset($item->imagen) }}" class="w-100 hero-clip" data-parallax="0.08" style="height: 80vh; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);" alt="{{ $item->titulo }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NEWS & TOURNAMENTS: The Pulse of ONAPB -->
|
|
<div class="container-fluid py-5" style="background: var(--surface);">
|
|
<div class="container py-4">
|
|
<div class="row g-5">
|
|
<!-- Latest News Column -->
|
|
<div class="col-lg-8">
|
|
<div class="d-flex justify-content-between align-items-end mb-4">
|
|
<div>
|
|
<span class="kfx-section-tag">Últimas Noticias</span>
|
|
<h2 class="display-5 fw-bold mb-0 kinetic-reveal-text">Cobertura Exclusiva<span class="text-primary">.</span></h2>
|
|
</div>
|
|
<a href="{{ route('noticias.index') }}" class="kfx-link text-muted small fw-bold">VER TODO <i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
|
|
@foreach($noticias as $n)
|
|
<div class="kinetic-news-item mb-4 pb-4 border-bottom">
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-4 col-md-3">
|
|
<div class="ratio ratio-1x1 overflow-hidden">
|
|
<img src="{{ str_starts_with($n->imagen, 'http') ? $n->imagen : asset($n->imagen) }}" class="object-fit-cover" alt="{{ $n->titulo }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-8 col-md-9">
|
|
<span class="badge bg-primary-container text-primary mb-2">{{ $n->categoria ?? 'Media' }}</span>
|
|
<h3 class="h4 fw-bold mb-2">
|
|
<a href="{{ route('noticias.show', $n->id) }}" class="text-decoration-none text-dark hover-primary">{{ $n->titulo }}</a>
|
|
</h3>
|
|
<p class="text-muted small mb-0 line-clamp-2">{{ Str::limit(strip_tags($n->contenido), 120) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@if($noticias->isEmpty())
|
|
<p class="text-muted italic">No hay noticias recientes.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Active Tournaments Column -->
|
|
<div class="col-lg-4">
|
|
<div class="p-4 bg-dark text-white h-100 position-relative animate-on-scroll" style="border-left: 8px solid var(--primary); min-height: 540px; display: flex; flex-direction: column;">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h3 fw-bold mb-0">Tablas <span class="text-primary">Live</span></h2>
|
|
</div>
|
|
|
|
<div id="standingsCarousel" class="carousel slide flex-grow-1" data-bs-ride="carousel">
|
|
<!-- Custom Indicators -->
|
|
<div class="carousel-indicators" style="bottom: -40px;">
|
|
@php $slideIdx = 0; @endphp
|
|
@foreach($standingsData as $torneoId => $grupos)
|
|
@foreach($grupos as $nombreGrupo => $equipos)
|
|
<button type="button" data-bs-target="#standingsCarousel" data-bs-slide-to="{{ $slideIdx }}" class="{{ $slideIdx === 0 ? 'active' : '' }}" aria-current="{{ $slideIdx === 0 ? 'true' : '' }}" aria-label="Slide {{ $slideIdx + 1 }}" style="width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); background: transparent;"></button>
|
|
@php $slideIdx++; @endphp
|
|
@endforeach
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="carousel-inner">
|
|
@php $isFirst = true; $totalSlides = 0; @endphp
|
|
@foreach($standingsData as $torneoId => $grupos)
|
|
@php $torneoObj = $torneos->firstWhere('id', $torneoId); @endphp
|
|
@foreach($grupos as $nombreGrupo => $equipos)
|
|
@php $totalSlides++; @endphp
|
|
<div class="carousel-item {{ $isFirst ? 'active' : '' }}">
|
|
<div class="standings-header mb-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<span class="text-primary fw-bold small text-uppercase" style="letter-spacing: 0.1em;">{{ $torneoObj->nombre }}</span>
|
|
<h4 class="h5 fw-bold text-white mb-0">{{ $nombreGrupo }}</h4>
|
|
</div>
|
|
<a href="{{ route('torneos.topScorers', $torneoId) }}" class="text-kinetic-muted hover-primary" title="Ver Goleadores">
|
|
<i class="bi bi-person-lines-fill fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-hover table-borderless align-middle mb-0" style="font-size: 0.85rem;">
|
|
<thead>
|
|
<tr class="text-kinetic-muted border-bottom border-secondary border-opacity-50">
|
|
<th class="ps-0 py-2" style="width: 30px;">#</th>
|
|
<th class="py-2">EQUIPO</th>
|
|
<th class="py-2 text-center">PJ</th>
|
|
<th class="pe-0 py-2 text-end">PTS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach(array_slice($equipos, 0, 8) as $index => $e)
|
|
<tr class="border-bottom border-secondary border-opacity-10">
|
|
<td class="ps-0 py-2 fw-bold {{ $index < 2 ? 'text-primary' : '' }}">{{ $index + 1 }}</td>
|
|
<td class="py-2">
|
|
<div class="d-flex align-items-center">
|
|
<img src="{{ $e['logo'] ? asset($e['logo']) : asset('logo.png') }}"
|
|
class="me-2 rounded-circle border border-secondary border-opacity-25"
|
|
style="width: 24px; height: 24px; object-fit: cover;"
|
|
onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
|
|
<a href="{{ route('equipos.show', $e['id']) }}" class="text-decoration-none text-white hover-primary text-truncate d-inline-block" style="max-width: 120px;">
|
|
{{ $e['nombre'] ?? 'TBD' }}
|
|
</a>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 text-center">{{ $e['pj'] }}</td>
|
|
<td class="pe-0 py-2 text-end fw-bold text-primary">{{ $e['pts'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-2">
|
|
<a href="{{ route('torneos.standings', $torneoId) }}" class="btn btn-outline-light btn-sm rounded-0 w-100 py-2 fw-bold" style="letter-spacing: 0.05em;">
|
|
VER TABLA COMPLETA <i class="bi bi-arrow-right ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@php $isFirst = false; @endphp
|
|
@endforeach
|
|
@endforeach
|
|
|
|
@if($totalSlides === 0)
|
|
<div class="carousel-item active text-center py-5">
|
|
<i class="bi bi-info-circle text-kinetic-muted display-4 mb-3"></i>
|
|
<p class="text-kinetic-muted">No hay posiciones registradas para este torneo.</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($totalSlides > 1)
|
|
<div class="d-flex justify-content-center gap-3 mt-5">
|
|
<button class="btn btn-dark btn-sm rounded-circle border-secondary bg-opacity-50" type="button" data-bs-target="#standingsCarousel" data-bs-slide="prev" style="width: 32px; height: 32px; padding: 0;">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</button>
|
|
<button class="btn btn-dark btn-sm rounded-circle border-secondary bg-opacity-50" type="button" data-bs-target="#standingsCarousel" data-bs-slide="next" style="width: 32px; height: 32px; padding: 0;">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mt-auto p-3 bg-secondary bg-opacity-10 border border-secondary border-opacity-25 mt-4">
|
|
<span class="d-block small text-primary fw-bold mb-1">CENTRO DE ESTADÍSTICAS</span>
|
|
<p class="small text-kinetic-muted mb-0">Datos actualizados en tiempo real según los últimos informes arbitrales.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid py-5" style="background: var(--surface-container-low);">
|
|
<div class="container py-5">
|
|
<div class="d-flex justify-content-between align-items-end mb-5">
|
|
<div>
|
|
<span class="kfx-section-tag">Agenda</span>
|
|
<h2 class="display-3 fw-bold mb-0 kinetic-reveal-text">Próximos Partidos</h2>
|
|
<div class="kfx-divider-sweep" style="width: 140px; margin-top: 1rem; margin-bottom: 0;"></div>
|
|
</div>
|
|
<a href="{{ route('eventos.index') }}" class="kfx-link text-muted small fw-bold d-none d-md-inline">VER CALENDARIO COMPLETO <i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
|
|
@if(count($eventos) === 0)
|
|
<div class="kinetic-card text-center p-5">
|
|
<p class="text-kinetic-muted mb-0 fs-5">No hay eventos activos.</p>
|
|
</div>
|
|
@else
|
|
<div class="row g-4" data-stagger>
|
|
@php
|
|
$eventosList = is_array($eventos) ? $eventos : $eventos->toArray();
|
|
@endphp
|
|
@foreach(array_slice($eventosList, 0, 6) as $e)
|
|
<div class="col-md-4">
|
|
<div class="kinetic-card h-100 d-flex flex-column" data-tilt data-tilt-max="5" style="padding: 0; overflow: hidden; border-radius: 0;">
|
|
<div class="p-4 flex-grow-1">
|
|
<div class="d-flex justify-content-between mb-4">
|
|
@if($e['estado'] === 'Activo')
|
|
<span class="kfx-live-pill" style="font-size: 0.6rem; padding: 4px 10px;">En Vivo</span>
|
|
@else
|
|
<span class="fw-bold small text-kinetic-muted text-uppercase tracking-widest">{{ $e['estado'] }}</span>
|
|
@endif
|
|
<span class="small text-kinetic-muted">{{ \Carbon\Carbon::parse($e['fecha_evento'])->translatedFormat('d M') }}</span>
|
|
</div>
|
|
<h3 class="mb-4 h2">{{ $e['nombre_evento'] ?? ($e['clubLocal']['nombre'] . ' vs ' . $e['clubVisitante']['nombre']) }}</h3>
|
|
<p class="text-kinetic-muted small mb-0"><i class="bi bi-geo-alt"></i> {{ $e['sede'] ?? 'TBD' }}</p>
|
|
</div>
|
|
<a href="{{ route('eventos.show', $e['id_evento']) }}" class="bg-primary text-white p-3 text-center text-decoration-none fw-bold small kfx-event-cta justify-content-center" style="letter-spacing: 0.1em;">VER FICHA TÉCNICA</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROMOS: Editorial Grid -->
|
|
<div class="container py-5 my-5">
|
|
<div class="text-center mb-5">
|
|
<span class="kfx-section-tag justify-content-center" style="display: inline-flex;">Beneficios para Socios</span>
|
|
<h2 class="display-3 fw-bold mb-0 kinetic-reveal-text">Beneficios <span class="kfx-text-gradient">Premium</span></h2>
|
|
</div>
|
|
@if($promociones->isEmpty())
|
|
<div class="kinetic-card text-center p-5">
|
|
<p class="text-kinetic-muted mb-0 fs-5">Sin promociones activas.</p>
|
|
</div>
|
|
@else
|
|
<div class="row g-5" data-stagger>
|
|
@foreach($promociones->take(3) as $p)
|
|
<div class="col-md-4">
|
|
<div class="position-relative overflow-hidden mb-4 kfx-img-cover kfx-img-spotlight" style="height: 400px;">
|
|
<img src="{{ asset('storage/' . $p->imagen) }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ $p->nombre }}">
|
|
<div class="position-absolute bottom-0 start-0 p-4 w-100" style="background: linear-gradient(transparent, rgba(245, 243, 239, 0.95)); z-index: 2;">
|
|
<span class="badge bg-primary mb-2">{{ $p->categoria }}</span>
|
|
<h4 class="h3 mb-0">{{ $p->nombre }}</h4>
|
|
</div>
|
|
</div>
|
|
<p class="text-kinetic-muted small mb-4">{{ $p->descripcion }}</p>
|
|
<a href="{{ route('promo.qr', $p->id) }}" class="kfx-link fw-bold text-primary small d-inline-flex align-items-center gap-2">
|
|
SOLICITAR BENEFICIO <i class="bi bi-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#splash {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: #ffffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
color: #ff0000ff;
|
|
z-index: 9999;
|
|
transition: opacity 0.6s ease, visibility 0.6s ease;
|
|
}
|
|
#splash img {
|
|
width: 300px;
|
|
margin-bottom: 20px;
|
|
animation: bounce 1.5s infinite;
|
|
}
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
#splash.hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.addEventListener("load", function() {
|
|
const splash = document.getElementById("splash");
|
|
const main = document.getElementById("main-content");
|
|
|
|
// Solo mostrar splash si es la primera vez en esta sesión
|
|
if (!sessionStorage.getItem('splashShown')) {
|
|
sessionStorage.setItem('splashShown', 'true');
|
|
splash.style.display = 'flex';
|
|
setTimeout(() => {
|
|
splash.style.opacity = '0';
|
|
splash.style.visibility = 'hidden';
|
|
main.style.display = 'block';
|
|
}, 2000);
|
|
} else {
|
|
main.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|