141 lines
8.6 KiB
PHP
141 lines
8.6 KiB
PHP
<div>
|
|
<section class="pt-0 cover-background ipad-top-space-margin sm-pb-0"
|
|
style="background-image:
|
|
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
|
|
url('https://images.pexels.com/photos/4050291/pexels-photo-4050291.jpeg');">
|
|
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
|
|
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
|
|
<animate attributeName="d" dur="5s"
|
|
values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center h-500px sm-h-300px">
|
|
<div class="col-12 col-lg-6 col-md-10 position-relative text-center page-title-extra-large d-flex flex-wrap flex-column align-items-center justify-content-center"
|
|
data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px pt-5px pb-5px mb-15px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex"><i
|
|
class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span>
|
|
<h5 class="mb-20px text-white fw-600 ls-minus-1px">{{ $pageDescription }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pt-0 right-side-bar">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
|
|
@forelse($news as $item)
|
|
<!-- start blog item -->
|
|
<div class="col-12 mb-40px" wire:key="news-{{ $item->id }}">
|
|
<div class="card border-0 no-border-radius box-shadow-extra-large">
|
|
@if ($item->thumbnail)
|
|
<div class="blog-image">
|
|
<a href="{{ route('news.show', $item->slug) }}">
|
|
<img src="{{ $item->thumbnail }}" alt="{{ $item->title }}"
|
|
class="w-100" />
|
|
</a>
|
|
</div>
|
|
@endif
|
|
<div class="card-body p-9 bg-white">
|
|
<div class="entry-meta mb-20px fs-15">
|
|
<span><i class="feather icon-feather-calendar"></i><a
|
|
href="javascript:void(0)">{{ $item->formatted_date }}</a></span>
|
|
<span><i class="feather icon-feather-user"></i><a
|
|
href="javascript:void(0)">{{ $item->author_name }}</a></span>
|
|
<span><i class="feather icon-feather-eye"></i><a
|
|
href="javascript:void(0)">{{ $item->formatted_views }}</a></span>
|
|
</div>
|
|
<a href="{{ route('news.show', $item->slug) }}"
|
|
class="text-dark-gray card-title mb-20px fw-600 fs-24 d-block">{{ $item->title }}</a>
|
|
<p class="text-medium-gray mb-20px">
|
|
{{ $item->excerpt }}
|
|
</p>
|
|
<a href="{{ route('news.show', $item->slug) }}"
|
|
class="btn btn-link btn-large text-base-color fw-600">Teruskan Membaca<span
|
|
class="bg-base-color"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
@empty
|
|
<div class="col-12 text-center">
|
|
<p>Tidak ada berita ditemukan.</p>
|
|
</div>
|
|
@endforelse
|
|
|
|
<div class="col-12 mt-8 d-flex justify-content-center">
|
|
{{ $news->links('livewire.home.custom-pagination') }}
|
|
</div>
|
|
</div>
|
|
<!-- start sidebar -->
|
|
<aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
|
|
<div class="mb-15 md-mb-50px xs-mb-35px">
|
|
<div
|
|
class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
|
|
Cari</div>
|
|
<div class="position-relative">
|
|
<input class="form-control" type="text" wire:model.live.debounce.300ms="search"
|
|
placeholder="Cari berita...">
|
|
<button class="bg-transparent border-0 position-absolute right-15px top-10px"
|
|
type="submit"><i class="feather icon-feather-search"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-15 md-mb-50px xs-mb-35px">
|
|
<div
|
|
class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
|
|
Berita Terpopuler</div>
|
|
<ul class="popular-post-sidebar position-relative">
|
|
@foreach ($popularPosts as $post)
|
|
<li class="d-flex align-items-start">
|
|
@if ($post->thumbnail)
|
|
<figure>
|
|
<a href="{{ route('news.show', $post->slug) }}">
|
|
<img src="{{ $post->thumbnail }}" alt="image" class="w-100">
|
|
</a>
|
|
</figure>
|
|
@endif
|
|
<div class="col media-body">
|
|
<a href="{{ route('news.show', $post->slug) }}"
|
|
class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">{{ $post->title }}</a>
|
|
<div><a href="javascript:void(0)"
|
|
class="d-inline-block fs-15">{{ $post->formatted_date }}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
@if ($tags->count() > 0)
|
|
<div class="mb-15 md-mb-50px xs-mb-35px">
|
|
<div
|
|
class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
|
|
Tags</div>
|
|
<div class="tag-cloud">
|
|
@foreach ($tags as $item)
|
|
<a href="javascript:void(0)" wire:click="$set('tag', '{{ $item->name }}')"
|
|
class="{{ $tag == $item->name ? 'bg-base-color text-white' : '' }}">{{ $item->name }}</a>
|
|
@endforeach
|
|
@if ($tag)
|
|
<a href="javascript:void(0)" wire:click="$set('tag', '')"
|
|
class="bg-dark-gray text-white">Reset Tag</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</aside>
|
|
<!-- end sidebar -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|