170 lines
10 KiB
PHP
170 lines
10 KiB
PHP
<div>
|
|
<!-- start hero section -->
|
|
<section class="cover-background full-screen ipad-top-space-margin py-0 md-h-750px sm-h-650px"
|
|
style="
|
|
background-image:
|
|
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
|
|
url('https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg');
|
|
">
|
|
<div class="opacity-very-light bg-black"></div>
|
|
<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 h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-xl-6 col-lg-8 col-md-10 position-relative z-index-1"
|
|
data-anime='{ "el": "childs", "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex w-70 sm-w-100"><i
|
|
class="bi bi-megaphone text-white icon-small me-10px"></i>Simedkom</span>
|
|
<h1 class="text-white fw-600 ls-minus-2px mb-25px">Sistem Media Komunikasi</h1>
|
|
<div>
|
|
<p class="fw-300 fs-18 w-85 sm-w-95 text-white opacity-6">Merupakan sebuah aplikasi berbasis
|
|
digital untuk mempermudah bidang informasi dan komunikasi publik di Diskominfo Purwakarta
|
|
dalam menjalankan monitoring media di Kabupaten Purwakarta.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end hero section -->
|
|
|
|
<!-- start news section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-12 col-lg-7 text-center"
|
|
data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-gradient-very-light-gray-transparent d-inline-flex"><i
|
|
class="bi bi-newspaper fs-16 me-5px"></i>Berita Terbaru</span>
|
|
<h3 class="text-dark-gray fw-700 ls-minus-2px">Berita Terbaru Purwakarta</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center"
|
|
data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 400, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
@foreach ($news as $item)
|
|
<div class="col mb-30px">
|
|
<div
|
|
class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover h-100 overflow-hidden">
|
|
<div class="blog-image">
|
|
<a wire:navigate href="{{ route('news.show', $item->slug) }}">
|
|
<img src="{{ $item->thumbnail }}" alt="{{ $item->title }}" class="w-100">
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-30px bg-white">
|
|
<div class="entry-meta mb-10px fs-14">
|
|
<span class="text-medium-gray"><i
|
|
class="feather icon-feather-calendar me-5px"></i>{{ $item->formatted_date }}</span>
|
|
</div>
|
|
<a wire:navigate href="{{ route('news.show', $item->slug) }}"
|
|
class="card-title mb-10px fw-600 fs-18 text-dark-gray text-primary-hover d-block lh-26">{{ $item->title }}</a>
|
|
<p class="mb-0 text-medium-gray">{{ $item->excerpt }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col-12 text-center">
|
|
<a wire:navigate href="{{ route('news.index') }}"
|
|
class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
|
|
<span>
|
|
<span class="btn-text">Lihat Semua Berita</span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end news section -->
|
|
|
|
<!-- start announcement section -->
|
|
<section class="bg-very-light-gray py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-12 col-lg-7 text-center"
|
|
data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-gradient-very-light-gray-transparent d-inline-flex"><i
|
|
class="bi bi-megaphone fs-16 me-5px"></i>Pengumuman</span>
|
|
<h3 class="text-dark-gray fw-700 ls-minus-2px">Pengumuman Penting</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row"
|
|
data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 400, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
@foreach ($announcements as $announcement)
|
|
<div class="col-12 mb-20px">
|
|
<div
|
|
class="card border-0 border-radius-4px box-shadow-quadruple-large box-shadow-quadruple-large-hover overflow-hidden">
|
|
<div class="card-body p-30px">
|
|
<div class="mb-5px">
|
|
<span class="text-uppercase text-medium-gray fs-12 fw-600 ls-05px d-inline-block">
|
|
<i class="bi bi-calendar-event me-5px"></i>{{ $announcement->formatted_date }}
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray">
|
|
{{ $announcement->title }}</h5>
|
|
<div class="mb-0 text-medium-gray">
|
|
{!! $announcement->excerpt !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col-12 text-center">
|
|
<a wire:navigate href="{{ route('announcement') }}"
|
|
class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
|
|
<span>
|
|
<span class="btn-text">Lihat Semua Pengumuman</span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end announcement section -->
|
|
|
|
<!-- start call to action section -->
|
|
<section class="cover-background one-third-screen sm-h-500px pb-0 position-relative"
|
|
style="background-image:url('https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg');">
|
|
<div class="opacity-extra-medium bg-dark-gray"></div>
|
|
<div class="container h-100">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col-xl-8 col-lg-10 position-relative z-index-1 text-center d-flex flex-wrap align-items-center justify-content-center"
|
|
data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-inline-flex align-items-center text-start sm-lh-20"><i
|
|
class="bi bi-megaphone text-white d-inline-block align-middle icon-small me-10px"></i>
|
|
Ayo menjadi bagian dari kami.</span>
|
|
<h1 class="text-white fw-600 ls-minus-2px mb-50px">Sistem Media Komunikasi Diskominfo Purwakarta!
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
<!-- start scroll progress -->
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
<!-- end scroll progress -->
|
|
</div>
|