Laucha1312
104 lines
5.9 KiB
PHP
104 lines
5.9 KiB
PHP
@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">Sé 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
|