This commit is contained in:
Laucha1312
2026-06-04 15:20:26 -03:00
parent fdd0fef3f0
commit cc049c6cb6
64 changed files with 8914 additions and 0 deletions
+107
View File
@@ -0,0 +1,107 @@
@extends('layouts.app')
@section('title', 'Noticias - OnAPB Media Hub')
@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
<div class="container py-4">
<div class="mb-5">
<span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Comunidad & Actualidad</span>
<h1 class="display-1 fw-bold mb-3" style="line-height: 0.9;">Noticias<span class="text-primary">.</span></h1>
<p class="fs-4 text-muted mx-auto" style="max-width: 800px; margin-left: 0 !important;">El pulso del básquet entrerriano. Crónicas, resultados y las efemérides que marcan nuestra historia.</p>
</div>
@if($noticias->isEmpty())
<div class="p-5 text-center bg-white shadow-sm" style="border-top: 10px solid var(--primary-container);">
<i class="bi bi-newspaper text-muted display-1 mb-4 d-block"></i>
<h3 class="fw-bold text-uppercase">Silencio en la cancha</h3>
<p class="text-muted">No hay noticias publicadas por el momento. Volvé pronto.</p>
</div>
@else
@php $featured = $noticias->first(); $rest = $noticias->skip(1); @endphp
<!-- Featured News: High Impact -->
<div class="row mb-5">
<div class="col-12">
<div class="bg-white p-0 shadow-lg overflow-hidden d-flex flex-column flex-lg-row" style="min-height: 500px; border: 1px solid var(--primary-container);">
<div class="col-lg-7 p-0 overflow-hidden">
@if($featured->imagen)
<img src="{{ str_starts_with($featured->imagen, 'http') ? $featured->imagen : asset($featured->imagen) }}" alt="{{ $featured->titulo }}" class="w-100 h-100" style="object-fit: cover; min-height: 350px;">
@else
<div class="w-100 h-100 bg-dark d-flex align-items-center justify-content-center" style="min-height: 350px;">
<i class="bi bi-image text-muted display-1"></i>
</div>
@endif
</div>
<div class="col-lg-5 p-5 d-flex flex-column justify-content-center">
<div class="mb-4">
@if($featured->categoria)
<span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest">{{ $featured->categoria }}</span>
@else
<span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest">Destacado</span>
@endif
<span class="ms-3 text-muted fw-bold small text-uppercase"><i class="bi bi-calendar3 me-2"></i> {{ $featured->fecha->translatedFormat('d M Y') }}</span>
</div>
<h2 class="display-4 fw-bold font-header mb-4" style="line-height: 1;">{{ $featured->titulo }}<span class="text-primary">.</span></h2>
<p class="fs-5 text-muted mb-5">
{{ Str::limit(strip_tags($featured->contenido), 200) }}
</p>
<a href="{{ route('noticias.show', $featured->id) }}" class="btn-kinetic-primary w-100 py-3 text-center">LEER CRÓNICA COMPLETA <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- News Grid: Editorial Cards -->
<div class="row g-5">
@foreach($rest as $noticia)
<div class="col-md-6 col-lg-4">
<div class="bg-white p-0 h-100 d-flex flex-column" style="border-top: 6px solid var(--outline-variant); transition: 0.3s;" onmouseover="this.style.borderTopColor='var(--primary)'" onmouseout="this.style.borderTopColor='var(--outline-variant)'">
@if($noticia->imagen)
<div style="height: 250px; overflow: hidden;">
<img src="{{ str_starts_with($noticia->imagen, 'http') ? $noticia->imagen : asset($noticia->imagen) }}" alt="{{ $noticia->titulo }}" class="w-100 h-100" style="object-fit: cover;">
</div>
@else
<div class="bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
<i class="bi bi-image text-muted display-4"></i>
</div>
@endif
<div class="p-4 flex-grow-1 d-flex flex-column">
<div class="mb-3 d-flex justify-content-between align-items-center">
<span class="text-primary fw-bold text-uppercase small tracking-widest">{{ $noticia->categoria ?? 'Actualidad' }}</span>
<span class="text-muted fw-bold small">{{ $noticia->fecha->translatedFormat('d/m/Y') }}</span>
</div>
<h3 class="fw-bold font-header mb-3" style="font-size: 1.5rem; line-height: 1.2;">{{ $noticia->titulo }}</h3>
<p class="text-muted small mb-4 flex-grow-1">
{{ Str::limit(strip_tags($noticia->contenido), 120) }}
</p>
<a href="{{ route('noticias.show', $noticia->id) }}" class="text-dark fw-bold text-uppercase small tracking-widest text-decoration-none hover-primary">
Continuar leyendo <i class="bi bi-chevron-right ms-1"></i>
</a>
</div>
</div>
</div>
@endforeach
</div>
@endif
@if(session('admin_logged_in') && session('admin_role') == 1)
<div class="mt-5 pt-5 border-top">
<div class="p-5 bg-dark text-white d-flex flex-column flex-md-row justify-content-between align-items-center">
<div>
<h3 class="fw-bold font-header mb-1 text-uppercase">Modo Editor Activo</h3>
<p class="mb-md-0 text-muted">Añadí nueva información al Media Hub de la OnAPB.</p>
</div>
<a href="{{ route('admin.noticias.create') }}" class="btn-kinetic-primary px-5 py-3"> NUEVA NOTICIA</a>
</div>
</div>
@endif
</div>
</div>
<style>
.hover-primary:hover {
color: var(--primary) !important;
}
</style>
@endsection
+103
View File
@@ -0,0 +1,103 @@
@extends('layouts.app')
@section('title', $noticia->titulo . ' - OnAPB Media Hub')
@section('content')
<article class="news-article" style="background: var(--surface);">
<!-- Article Hero: Digital High Impact -->
<header class="article-hero position-relative overflow-hidden mb-5" style="min-height: 400px; background: #000;">
@if($noticia->imagen)
<img src="{{ str_starts_with($noticia->imagen, 'http') ? $noticia->imagen : asset($noticia->imagen) }}"
class="w-100 h-100 position-absolute top-0 start-0"
style="object-fit: cover; opacity: 0.6; filter: grayscale(30%) contrast(1.1);"
alt="{{ $noticia->titulo }}">
@endif
<div class="container position-relative py-5 d-flex flex-column justify-content-end" style="min-height: 400px; z-index: 2;">
<div class="col-lg-10 col-xl-8">
<div class="mb-4 animate-on-scroll">
@if($noticia->categoria)
<span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest d-inline-block mb-3">
{{ $noticia->categoria }}
</span>
@else
<span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest d-inline-block mb-3">
Comunicado
</span>
@endif
<div class="text-white opacity-75 small fw-bold text-uppercase tracking-widest mb-2 font-header">
<i class="bi bi-calendar3 me-2 text-primary"></i> {{ $noticia->fecha->translatedFormat('d F, Y') }}
</div>
</div>
<h1 class="display-3 fw-bold text-white mb-0 font-header" style="line-height: 1.1; letter-spacing: -2px;">
{{ $noticia->titulo }}<span class="text-primary">.</span>
</h1>
</div>
</div>
<!-- Gradient Overlay -->
<div class="position-absolute bottom-0 start-0 w-100 h-100"
style="background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);">
</div>
</header>
<!-- Article Body -->
<div class="container pb-5">
<div class="row g-5">
<!-- Main Content Column -->
<div class="col-lg-8 mx-auto">
<div class="article-content fs-5 text-dark lh-base font-body mb-5" style="letter-spacing: -0.01em;">
{!! nl2br(e($noticia->contenido)) !!}
</div>
<!-- Share & Interaction -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center py-5 border-top border-bottom mb-5 gap-3">
<div class="d-flex align-items-center gap-3">
<span class="text-muted fw-bold small text-uppercase tracking-widest">Compartir</span>
<div class="d-flex gap-2">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-facebook"></i></a>
<a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($noticia->titulo) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-twitter-x"></i></a>
<a href="https://api.whatsapp.com/send?text={{ urlencode($noticia->titulo . ' ' . url()->current()) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-whatsapp"></i></a>
</div>
</div>
<div>
<a href="{{ route('noticias.index') }}" class="btn-kinetic-outline d-inline-flex align-items-center px-4 py-2 small fw-bold text-uppercase tracking-widest text-decoration-none border border-dark">
<i class="bi bi-arrow-left me-2"></i> Volver al Media Hub
</a>
</div>
</div>
<!-- Comments/Engagement (Optional Placeholder) -->
<div class="p-5 bg-white shadow-sm text-center mb-5" style="border-top: 8px solid var(--primary);">
<i class="bi bi-chat-left-quote text-muted display-4 mb-4 d-block"></i>
<h3 class="fw-bold font-header mb-3"> parte de la conversación</h3>
<p class="text-muted mb-4 mx-auto" style="max-width: 500px;">Sumate a la comunidad OnAPB y compartí tus comentarios sobre esta cobertura en nuestras redes sociales oficiales.</p>
<div class="d-flex justify-content-center gap-3">
<a href="https://instagram.com/prensa_apb" target="_blank" class="btn btn-dark px-4 py-2 rounded-0 fw-bold small"><i class="bi bi-instagram me-2"></i> INSTAGRAM</a>
</div>
</div>
</div>
<!-- Sidebar (Optional for related content) -->
<!-- We keep it empty for now to maintain the clean editorial look, or add related tournaments -->
</div>
</div>
</article>
<style>
.news-article {
min-height: 100vh;
}
.article-content p {
margin-bottom: 2rem;
}
.article-hero {
border-bottom: 8px solid var(--primary);
}
.btn-kinetic-outline:hover {
background: var(--primary);
color: white !important;
border-color: var(--primary) !important;
}
</style>
@endsection