amar
/
perling
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update news dan home

main
marszayn 2025-04-09 09:14:03 +07:00
parent c76655e0bd
commit 9b9892cd75
9 changed files with 288 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/build/assets/app-DJ73LIus.css
View File

File diff suppressed because one or more lines are too long

1
public/build/assets/app-RbkO0MrB.css 100644
View File

File diff suppressed because one or more lines are too long

2
public/build/manifest.json
View File

@ -1,6 +1,6 @@
{
"resources/css/app.css": {
"file": "assets/app-DJ73LIus.css",
"file": "assets/app-RbkO0MrB.css",
"src": "resources/css/app.css",
"isEntry": true
},

2
resources/views/components/frontend/home/hero.blade.php
View File

@ -1,4 +1,4 @@
<div class="relative w-full overflow-hidden min-h-[800px] pt-2">
<div class="relative w-full overflow-hidden min-h-[600px] md:min-h-[800px]">
<!-- Background -->
<div class="absolute inset-0 z-0">
<img src="{{ asset('assets/images/home/bg-home.png') }}" alt="Hero Background" class="w-full h-full object-contain md:object-cover rounded-b-2xl">

134
resources/views/components/frontend/home/popup.blade.php 100644
View File

@ -0,0 +1,134 @@
<!-- Add this code right after the closing </style> tag in your provided code -->
<div id="popupBanner" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-20 hidden">
<div class="relative bg-white w-11/12 max-w-6xl rounded-lg shadow-2xl overflow-hidden">
<!-- Header with title and close button -->
<div class="flex justify-between items-center px-6 py-3 border-b border-gray-200">
<h3 class="text-xl font-medium text-gray-800">Banner</h3>
<button id="closePopup" class="text-gray-600 hover:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Slider container -->
<div id="bannerSlider" class="relative w-full">
<!-- Slide 1 - Government Banner -->
<div class="banner-slide">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Government Banner" class="w-[800px] h-[400px]">
</div>
<!-- Slide 2 - Government Banner -->
<div class="banner-slide hidden">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Government Banner" class="w-[800px] h-[400px]">
</div>
<!-- Slide 3 - Government Banner -->
<div class="banner-slide hidden">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Government Banner" class="w-[800px] h-[400px]">
</div>
<!-- Navigation arrows -->
<button id="prevSlide" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 hover:bg-opacity-90 rounded-full p-3 shadow-md transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button id="nextSlide" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 hover:bg-opacity-90 rounded-full p-3 shadow-md transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Dots indicator -->
<div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
<button class="w-3 h-3 rounded-full bg-gray-300 dot-indicator active"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 dot-indicator"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 dot-indicator"></button>
</div>
</div>
</div>
</div>
<style>
.banner-slide {
transition: opacity 0.5s ease;
}
.dot-indicator.active {
background-color: #3182ce;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Show popup with slight delay after page load
setTimeout(function() {
document.getElementById('popupBanner').classList.remove('hidden');
}, 800);
// Close popup when clicking the close button
document.getElementById('closePopup').addEventListener('click', function() {
document.getElementById('popupBanner').classList.add('hidden');
});
// Close popup when clicking outside the banner
document.getElementById('popupBanner').addEventListener('click', function(e) {
if (e.target === this) {
this.classList.add('hidden');
}
});
// Slider functionality
const slides = document.querySelectorAll('.banner-slide');
const dots = document.querySelectorAll('.dot-indicator');
let currentSlide = 0;
function showSlide(index) {
slides.forEach(slide => slide.classList.add('hidden'));
dots.forEach(dot => dot.classList.remove('active'));
slides[index].classList.remove('hidden');
dots[index].classList.add('active');
currentSlide = index;
}
// Auto slide every 5 seconds
let slideInterval = setInterval(() => {
let nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}, 5000);
// Navigation buttons
document.getElementById('nextSlide').addEventListener('click', function() {
clearInterval(slideInterval);
let nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
slideInterval = setInterval(() => {
nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}, 5000);
});
document.getElementById('prevSlide').addEventListener('click', function() {
clearInterval(slideInterval);
let prevSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(prevSlide);
slideInterval = setInterval(() => {
let nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}, 5000);
});
// Dot indicators
dots.forEach((dot, index) => {
dot.addEventListener('click', function() {
clearInterval(slideInterval);
showSlide(index);
slideInterval = setInterval(() => {
let nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}, 5000);
});
});
});
</script>

136
resources/views/components/frontend/news/detail_artikel.blade.php 100644
View File

@ -0,0 +1,136 @@
<section class="relative bg-gray-100 font-sans" style="z-index: 10;">
<div class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white" >
<div class="container mx-auto px-4 py-16 md:py-24">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Teknologi Masa Depan</h1>
<p class="text-xl md:text-2xl opacity-90">Menjelajahi Inovasi yang Mengubah Dunia</p>
<div class="mt-8 flex justify-center">
<span class="inline-block bg-white bg-opacity-20 rounded-full px-4 py-2 text-sm text-black">Dipublikasikan: 8 April 2025</span>
</div>
</div>
</div>
</div>
<div class="container mx-auto px-4 py-12 mx-auto max-w-7xl">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Main Article (Kiri) -->
<div class="w-full lg:w-2/3">
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Teknologi Masa Depan" class="w-full h-64 md:h-80 object-cover object-center">
<div class="p-6 md:p-10">
<div class="prose max-w-none">
<p class="text-lg leading-relaxed mb-6">
Era transformasi digital telah membawa perubahan signifikan dalam kehidupan manusia.
Dari kecerdasan buatan hingga energi terbarukan, teknologi terus berkembang dengan kecepatan
yang belum pernah terjadi sebelumnya.
</p>
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Kecerdasan Buatan: Mitra Masa Depan</h2>
<p class="mb-6">
Kecerdasan buatan (AI) telah menjadi bagian integral dari kehidupan kita.
Dari chatbot yang membantu pelanggan hingga sistem diagnosis medis,
AI telah meningkatkan efisiensi dalam berbagai bidang.
</p>
<p class="mb-6">
Kemajuan dalam pembelajaran mesin dan jaringan saraf telah membuka
kemungkinan baru untuk memecahkan masalah kompleks yang sebelumnya sulit ditangani.
</p>
<blockquote class="bg-blue-50 border-l-4 border-blue-500 p-4 italic my-8">
"Kecerdasan buatan adalah teknologi yang akan mendefinisikan ulang hubungan manusia dengan mesin
dan membentuk masa depan pekerjaan seperti yang kita kenal."
</blockquote>
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Energi Terbarukan: Solusi Berkelanjutan</h2>
<p class="mb-6">
Kebutuhan akan sumber energi yang berkelanjutan telah mendorong inovasi dalam
teknologi energi terbarukan. Panel surya dengan efisiensi tinggi dan turbin angin generasi baru
menjanjikan masa depan energi yang lebih bersih.
</p>
<p class="mb-6">
Penyimpanan energi juga mengalami terobosan dengan baterai yang lebih efisien
dan berumur panjang, mengatasi salah satu tantangan utama dalam adopsi energi terbarukan.
</p>
<div class="bg-gray-100 rounded-lg p-6 my-8">
<h3 class="font-bold text-lg mb-3">Fakta Menarik</h3>
<ul class="list-disc pl-5 space-y-2">
<li>Kapasitas energi surya global meningkat 22% setiap tahun sejak 2020</li>
<li>Lebih dari 60% perusahaan Fortune 500 menggunakan AI dalam operasi mereka</li>
<li>Biaya penyimpanan baterai telah turun sebesar 85% dalam dekade terakhir</li>
</ul>
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Tantangan dan Peluang</h2>
<p class="mb-6">
Meskipun kemajuan teknologi menawarkan banyak manfaat, kita juga menghadapi tantangan
baru seperti keamanan siber, privasi data, dan kesenjangan digital. Bagaimana kita mengatasi
tantangan ini akan menentukan masa depan teknologi.
</p>
<p class="mb-6">
Namun, peluang untuk menciptakan dunia yang lebih baik melalui teknologi belum pernah
sebesar ini. Dengan pendekatan yang berfokus pada manusia dan etika, kita dapat menggunakan
teknologi untuk mengatasi beberapa masalah terbesar dunia.
</p>
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Kesimpulan</h2>
<p class="mb-6">
Teknologi masa depan menawarkan janji besar untuk meningkatkan kehidupan manusia.
Dengan investasi dalam penelitian, kebijakan yang tepat, dan kesadaran akan implikasi etis,
kita dapat memanfaatkan kekuatan teknologi untuk menciptakan dunia yang lebih baik bagi semua.
</p>
</div>
<div class="mt-10 pt-6 border-t border-gray-200">
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Teknologi</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">AI</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Energi Terbarukan</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Inovasi</span>
</div>
</div>
</div>
</article>
</div>
<!-- Related (Kanan) -->
<div class="w-full lg:w-1/3">
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Artikel Terkait</h3>
<div class="space-y-5">
<!-- Article 1 -->
<div class="group transition-all duration-300 hover:translate-y-[-2px]">
<div class="relative overflow-hidden rounded-lg mb-2">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
alt="Revolusi Quantum Computing"
class="w-full h-40 object-cover transform group-hover:scale-105 transition-transform duration-300">
</div>
<h4 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Revolusi Quantum Computing</h4>
<p class="text-gray-500 text-sm mt-1 mb-2 line-clamp-2">Bagaimana komputasi kuantum akan mengubah cara kita memproses informasi di masa depan.</p>
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-800 inline-flex items-center">
Baca selengkapnya
<svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
<!-- Article 2 -->
<div class="group transition-all duration-300 hover:translate-y-[-2px]">
<div class="relative overflow-hidden rounded-lg mb-2">
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
alt="Masa Depan Transportasi"
class="w-full h-40 object-cover transform group-hover:scale-105 transition-transform duration-300">
</div>
<h4 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Masa Depan Transportasi</h4>
<p class="text-gray-500 text-sm mt-1 mb-2 line-clamp-2">Dari mobil listrik hingga hyperloop, menjelajahi cara kita akan berpergian di masa depan.</p>
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-800 inline-flex items-center">
Baca selengkapnya
<svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

2
resources/views/frontend/home.blade.php
View File

@ -2,7 +2,7 @@
@section('content')
{{-- @include('components.home.hero') --}}
{{-- @include('components.frontend.home.popup') --}}
@include('components.frontend.home.hero')
@include('components.frontend.home.layanan')
@include('components.frontend.home.faq')

10
resources/views/frontend/news.blade.php 100644
View File

@ -0,0 +1,10 @@
@extends('components.frontend.layout')
@section('content')
@include('components.frontend.news.detail_artikel')
@include('components.frontend.footer')
@endsection

4
routes/web.php
View File

@ -13,6 +13,10 @@ Route::get('/', function () {
return view('/frontend/home');
});
Route::get('/news', function () {
return view('/frontend/news');
});
Route::get('/surat', [SuratArahanController::class, 'show']);
Route::post('/surat/save', [SuratArahanController::class, 'save'])->name('surat.save');
Route::get('/surat/exportPDF', [SuratArahanController::class, 'exportPDF'])->name('surat.exportPDF');