201 lines
15 KiB
PHP
201 lines
15 KiB
PHP
@include('partials.homepage.head')
|
|
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
|
|
@include('partials.homepage.header')
|
|
<!-- start banner -->
|
|
<section class="cover-background full-screen bg-dark-gray ipad-top-space-margin position-relative section-dark md-h-auto" style="background-image: url('{{ asset('assets/homepage/images/demo-hosting-home-bg.jpg') }}')">
|
|
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100"
|
|
data-particle="true" data-particle-options='{"particles": {"number": {"value": 12,"density": {"enable": true,"value_area": 2000}},"color": {"value": ["#A7E6FF", "#A7E6FF", "#A7E6FF", "#A7E6FF"]},"shape": {"type": "edge","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.8,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 5,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}'></div>
|
|
<div class="container d-flex align-items-center justify-content-center h-100">
|
|
<div class="row align-items-center justify-content-center w-100">
|
|
<div class="col-xl-7 col-lg-8 col-md-10 text-white text-center">
|
|
<div class="fs-100 fw-600 mb-20px">
|
|
<div class="d-inline-block">
|
|
Simedkom
|
|
</div>
|
|
</div>
|
|
<div class="fs-20 fw-300 mb-30px w-80 mx-auto opacity-6">
|
|
Sistem Media Komunikasi Kabupaten Purwakarta
|
|
</div>
|
|
<div class="overflow-hidden pt-5px">
|
|
<a href="{{route('login')}}" class="btn btn-large btn-rounded btn-box-shadow btn-switch-text d-inline-block me-15px xs-m-10px align-middle fw-600" data-anime='{ "translateY": [100, 0], "easing": "easeOutCubic", "duration": 900, "delay": 500 }' style="background-color: #F7F7F7; color: black;">
|
|
<span>
|
|
<span class="btn-double-text" data-text="Masuk">Masuk</span>
|
|
<span><i class="feather icon-feather-arrow-right"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end banner -->
|
|
<!-- start section -->
|
|
<section class="pt-5 sm-pt-50px">
|
|
<div class="container">
|
|
<div class="row mb-5 align-items-center">
|
|
<div class="col-lg-5 position-relative md-mb-20">
|
|
<div class="w-70 xs-w-80" data-animation-delay="50" data-shadow-animation="true">
|
|
<img src="{{asset('assets/defaults/diskominfo-building.jpg')}}" alt="" class="border-radius-8px w-100">
|
|
</div>
|
|
<div class="w-60 overflow-hidden position-absolute right-minus-15px xs-right-15px xs-w-60 bottom-minus-50px" data-shadow-animation="true" data-animation-delay="250" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
|
<img src="{{asset('assets/defaults/simedkom-logo-circle.png')}}" alt="" class="border-radius-8px w-100 box-shadow-quadruple-large custom-glass-effect" />
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-lg-6 offset-lg-1" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "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-award fs-16 me-5px"></i>Tentang Kami</span>
|
|
<h3 class="text-dark-gray fs-50 fw-700 ls-minus-2px">Simedkom</h3>
|
|
<p class="mb-40px sm-mb-25px">{{strip_tags($app->about_us)}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="pt-0 ps-15 pe-15 xl-ps-2 xl-pe-2 lg-ps-2 lg-pe-2 sm-mx-0">
|
|
<div class="container-fluid">
|
|
<div class="row" data-anime='{ "translateX": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
|
<div class="col-12 mx-lg-3">
|
|
<span class="text-dark-gray fw-700 fs-30">Berita Terbaru</span>
|
|
<div class="text-gray fw-500 align-middle ls-minus-05px fs-18">Baca Berita terbaru minggu ini.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
|
<li class="grid-sizer"></li>
|
|
@forelse ($news as $item)
|
|
<!-- start blog item -->
|
|
<li class="grid-item">
|
|
<div class="card bg-transparent border-0 h-100">
|
|
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
|
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
|
|
<img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body px-0 pt-30px pb-30px">
|
|
<span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
|
|
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
|
|
<p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
|
|
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- end blog item -->
|
|
@empty
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
Tidak ada berita terbaru pada minggu ini.
|
|
</div>
|
|
@endforelse
|
|
</ul>
|
|
</div>
|
|
@if ($news->count() > 8)
|
|
<div class="col-12 mt-2 d-flex justify-content-center">
|
|
<a href="" style="text-decoration: underline !important; color: #3572EF !important;">Lihat Lebih Banyak Berita</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="pt-0 ps-15 pe-15 xl-ps-2 xl-pe-2 lg-ps-2 lg-pe-2 sm-mx-0" style="margin-top: -2rem !important;">
|
|
<div class="container-fluid">
|
|
<div class="row" data-anime='{ "translateX": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
|
<div class="col-12 mx-lg-3">
|
|
<span class="text-dark-gray fw-700 fs-30">Pengumuman Terbaru</span>
|
|
<div class="text-gray fw-500 align-middle ls-minus-05px fs-18">Baca pengumuman terbaru minggu ini.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
|
<li class="grid-sizer"></li>
|
|
@forelse ($announcements as $item)
|
|
<!-- start blog item -->
|
|
<li class="grid-item">
|
|
<div class="card bg-transparent border-0 h-100">
|
|
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
|
<a href="demo-elearning-blog-single-simple.html">
|
|
<img src="{{asset(display_image($item->image, 'news', 'simedkom-logo-circle.png'))}}" alt="" class="information-img" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body px-0 pt-30px pb-30px">
|
|
<span class="fs-13 text-uppercase mb-5px d-block"><a href="blog-grid.html" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
|
|
<a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
|
|
<p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
|
|
<a href="demo-elearning-blog-single-simple.html" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- end blog item -->
|
|
@empty
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
Tidak ada pengumuman terbaru pada minggu ini.
|
|
</div>
|
|
@endforelse
|
|
</ul>
|
|
</div>
|
|
@if ($announcements->count() > 8)
|
|
<div class="col-12 mt-2 d-flex justify-content-center">
|
|
<a href="" style="text-decoration: underline !important; color: #3572EF !important;">Lihat Lebih Banyak Pengumuman</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="pt-4">
|
|
<div class="container">
|
|
<div class="row position-relative clients-style-08" data-anime='{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<div class="col swiper text-center feather-shadow" data-slider-options='{ "slidesPerView": 2, "spaceBetween":0, "speed": 4000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "effect": "slide" }'>
|
|
<div class="swiper-wrapper marquee-slide">
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-amazon.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
<!-- start client item -->
|
|
<div class="swiper-slide">
|
|
<a href="#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt="" /></a>
|
|
</div>
|
|
<!-- end client item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start footer -->
|
|
@include('partials.homepage.footer')
|