ilham
/
sigd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add edukasi page and update navigation links

john
Falih Ananta 2025-12-18 13:06:21 +07:00
parent 056cb9da05
commit b3861f0875
10 changed files with 290 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Http/Controllers/FrontController.php
View File

@ -24,4 +24,9 @@ class FrontController extends Controller
$data['title'] = 'Artikel';
return view('artikel',$data);
}
function edukasi() {
$data['title'] = 'Edukasi';
return view('edukasi',$data);
}
}

BIN
public/assets/images/article-image01.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

BIN
public/assets/images/article-image02.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
public/assets/images/article-image03.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

BIN
public/assets/images/article-image04.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
public/assets/images/article-image05.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

116
resources/views/edukasi.blade.php 100644
View File

@ -0,0 +1,116 @@
@extends('layouts.front')
@section('content')
<div class="min-h-screen bg-white font-['Plus_Jakarta_Sans']">
<!-- Header Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-16">
<div class="mb-8 lg:mb-16">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-black mb-4 lg:mb-6 font-['Plus_Jakarta_Sans']">Materi Edukasi</h1>
<p class="text-gray-600 text-sm sm:text-base leading-relaxed max-w-4xl font-['Plus_Jakarta_Sans']">
Data yang Andal adalah fondasi utama untuk verifikasi kepatuhan regulasi dan pembangunan keberlanjutan daerah.
Kami menyajikan status dan capaian program mitigasi yang terverifikasi.
</p>
</div>
<!-- Featured Article -->
<div class="mb-8 lg:mb-16">
<div class="flex flex-col lg:flex-row gap-4 lg:gap-6 items-start">
<div class="relative w-full lg:flex-shrink-0 lg:w-auto">
<img class="w-full lg:w-[545px] h-48 sm:h-64 lg:h-[320px] rounded-lg object-cover"
src="{{ asset('assets/images/article-image05.png') }}"
alt="Featured Article" />
<div class="absolute top-2 lg:top-4 left-2 lg:left-4 bg-black bg-opacity-50 text-white px-2 lg:px-3 py-1 rounded text-xs lg:text-sm font-['Plus_Jakarta_Sans'] flex items-center gap-1">
<svg class="w-3 lg:w-4 h-3 lg:h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"></path>
</svg>
6 menit
</div>
</div>
<div class="flex-1 w-full lg:w-auto">
<h2 class="text-lg sm:text-xl lg:text-xl font-semibold text-gray-900 mb-3 lg:mb-4 font-['Plus_Jakarta_Sans']">
Jejak Karbon DKI Jakarta: Peran Serta Masyarakat
</h2>
<p class="text-gray-600 text-xs sm:text-sm leading-relaxed mb-4 lg:mb-6 font-['Plus_Jakarta_Sans']">
Jejak karbon adalah total emisi yang dihasilkan langsung maupun tidak langsung oleh individu, rumah tangga,
atau aktivitas tertentu. Dengan menganalisis data Sektor Rumah Tangga dan Transportasi di SIGRD, kami
menunjukkan bagaimana keputusan individu—mulai dari penggunaan AC, pemilihan transportasi publik
versus kendaraan pribadi, hingga pemilahan sampah di rumah—berkontribusi langsung terhadap total emisi kota.
</p>
<a class="btn-minimal btn-outline border px-6 py-3 rounded-full" href="">Baca Artikel</a>
</div>
</div>
</div>
<!-- Articles Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
<!-- Article 1 -->
<div class="flex flex-col">
<img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
src="{{ asset('assets/images/article-image01.png') }}"
alt="Article 1" />
<div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
<div class="w-3 h-3 bg-blue-400 rounded-full"></div>
Edukasi
</div>
<h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
Apa Itu SIGRD dan Mengapa Jakarta Membutuhkannya?
</h3>
<p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
Menjelaskan mengapa Panduan IPCC menjadi standar dan apa itu Tier 1, 2, dan 3.
</p>
</div>
<!-- Article 2 -->
<div class="flex flex-col">
<img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
src="{{ asset('assets/images/article-image02.png') }}"
alt="Article 2" />
<div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
<div class="w-3 h-3 bg-blue-400 rounded-full"></div>
Edukasi
</div>
<h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
Memahami Inventarisasi: Metodologi IPCC dan 4 Sektor Utama
</h3>
<p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
Memperkenalkan 4 sektor utama (Energi, Limbah, IPPU, AFOLU) dan contoh emisi dari setiap sektor (misalnya, Metana dari TPA Limbah.
</p>
</div>
<!-- Article 3 -->
<div class="flex flex-col">
<img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
src="{{ asset('assets/images/article-image03.png') }}"
alt="Article 3" />
<div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
<div class="w-3 h-3 bg-blue-400 rounded-full"></div>
Edukasi
</div>
<h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
Membaca Tren Emisi di Dasbor: Dari Data Mentah Menjadi Kebijakan
</h3>
<p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
Panduan langkah demi langkah cara menggunakan filter dan grafik di Dasbor SIGRD.
</p>
</div>
<!-- Article 4 -->
<div class="flex flex-col">
<img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
src="{{ asset('assets/images/article-image04.png') }}"
alt="Article 4" />
<div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
<div class="w-3 h-3 bg-blue-400 rounded-full"></div>
Edukasi
</div>
<h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
RAD GRK: Status dan Dampak Aksi Mitigasi di Lapangan
</h3>
<p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
Apa itu RAD GRK: Dokumen perencanaan aksi daerah.
</p>
</div>
</div>
</div>
</div>
@endsection

157
resources/views/layouts/front.blade.php
View File

@ -173,6 +173,34 @@
position: relative;
z-index: 2;
}
/* Navbar Scroll Animation */
#navbar {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
/* Mobile menu animation */
#mobile-menu {
transition: all 0.3s ease-in-out;
}
/* Active navigation state */
.nav-active {
color: #2084FF !important;
position: relative;
}
.nav-active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background-color: #2084FF;
border-radius: 50%;
}
</style>
@yield('css')
</head>
@ -181,21 +209,64 @@
<a href="{{ route('index') }}" class="absolute"></a>
<section class="navbar px-5 py-8 relative container mx-auto hidden md:block">
<div class="flex justify-between items-center">
<!-- Navigation -->
<section class="navbar px-5 py-8 relative container mx-auto font-['Plus_Jakarta_Sans'] sticky top-0 z-50 bg-white" id="navbar">
<!-- Desktop Navigation -->
<div class="hidden md:flex justify-between items-center">
<div class="flex gap-[50px] items-center">
<div><a href="{{ route('index') }}"><img src="{{ asset('assets/images/logo.png') }}" width="120" alt=""></a></div>
<div class="flex gap-4">
<a href="">Edukasi & Regulasi</a>
<a href="">Dokumentasi</a>
<a href="{{ url('login') }}">Inventarisasi</a>
<a href="{{ route('edukasi') }}" class="text-black font-['Plus_Jakarta_Sans'] hover:text-gray-600 transition-colors">Edukasi & Regulasi</a>
<a href="#" class="text-black font-['Plus_Jakarta_Sans'] hover:text-gray-600 transition-colors">Dokumentasi</a>
<a href="{{ url('login') }}" class="text-black font-['Plus_Jakarta_Sans'] hover:text-gray-600 transition-colors">Inventarisasi</a>
</div>
</div>
<div><a href="{{ url('login') }}" class="rounded-full px-6 py-3 border border-black font-['Plus_Jakarta_Sans'] hover:bg-gray-50 transition-colors">Login</a></div>
</div>
<!-- Mobile Navigation -->
<div class="md:hidden flex justify-between items-center">
<div><a href="{{ route('index') }}"><img src="{{ asset('assets/images/logo.png') }}" width="100" alt=""></a></div>
<button type="button"
class="p-2 text-black hover:text-gray-600 transition-colors"
id="mobile-menu-button"
aria-controls="mobile-menu"
aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger icon -->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" id="menu-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close icon -->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" id="close-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden mt-4" id="mobile-menu">
<div class="space-y-2 bg-white border-t border-gray-200 pt-4">
<a href="{{ route('edukasi') }}"
class="block px-3 py-2 text-base font-['Plus_Jakarta_Sans'] text-black hover:text-gray-600 transition-colors">
Edukasi & Regulasi
</a>
<a href="#"
class="block px-3 py-2 text-base font-['Plus_Jakarta_Sans'] text-black hover:text-gray-600 transition-colors">
Dokumentasi
</a>
<a href="{{ url('login') }}"
class="block px-3 py-2 text-base font-['Plus_Jakarta_Sans'] text-black hover:text-gray-600 transition-colors">
Inventarisasi
</a>
<div class="pt-4">
<a href="{{ url('login') }}"
class="block text-center rounded-full px-6 py-3 border border-black font-['Plus_Jakarta_Sans'] hover:bg-gray-50 transition-colors">
Login
</a>
</div>
</div>
<div><a href="{{ url('login') }}" class="rounded-full px-6 py-3 border">Login</a></div>
</div>
</section>
<section class="navbar px-5 pt-8 relative container mx-auto md:hidden">
<div><a href="#" class="px-4 py-3 text-[20px]"><i class="bx bx-menu"></i></a></div>
</section>
@yield('content')
@ -213,6 +284,74 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
const isOpen = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isOpen);
if (isOpen) {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
menuIcon.classList.add('block');
closeIcon.classList.remove('block');
closeIcon.classList.add('hidden');
} else {
mobileMenu.classList.remove('hidden');
menuIcon.classList.remove('block');
menuIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
closeIcon.classList.add('block');
}
});
// Close mobile menu when clicking on links
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
mobileMenuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
mobileMenuButton.setAttribute('aria-expanded', 'false');
menuIcon.classList.remove('hidden');
menuIcon.classList.add('block');
closeIcon.classList.remove('block');
closeIcon.classList.add('hidden');
});
});
}
// Navbar scroll behavior
const navbar = document.getElementById('navbar');
let lastScrollTop = 0;
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > 100) {
// Scrolling down & past threshold - hide navbar
navbar.style.transform = 'translateY(-100%)';
} else {
// Scrolling up - show navbar
navbar.style.transform = 'translateY(0)';
}
// Add shadow when scrolling
if (scrollTop > 10) {
navbar.classList.remove('shadow-sm');
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
navbar.classList.add('shadow-sm');
}
lastScrollTop = scrollTop;
});
// Simple fade-in animation
const fadeElements = document.querySelectorAll('.fade-in');

20
resources/views/partials/edukasi/secondary-footer.blade.php 100644
View File

@ -0,0 +1,20 @@
<!-- Seconndary Footer Section -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="flex items-center justify-between">
<span class="text-gray-600 text-sm">© 2026 Sistem Informasi Gas Rumah Kaca Daerah. All rights reserved.</span>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
<i class="bx bxl-facebook text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">
<i class="bx bxl-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-700 transition-colors">
<i class="bx bxl-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-600 transition-colors">
<i class="bx bxl-whatsapp text-xl"></i>
</a>
</div>
</div>
</div>

1
routes/web.php
View File

@ -10,6 +10,7 @@ use App\Http\Controllers\Auth\CustomRegisterController;
Route::get('/',[FrontController::class,'index'])->name('index');
Route::get('/rencana-aksi',[FrontController::class,'rencanaAksi'])->name('rencana-aksi');
Route::get('/artikel',[FrontController::class,'artikel'])->name('artikel');
Route::get('/edukasi',[FrontController::class,'edukasi'])->name('edukasi');
Route::get('forgotpass',[CustomLoginController::class,'forgotpass'])->name('forgotpass');
Route::post('forgotpass',[CustomLoginController::class,'forgotpass_post'])->name('forgotpass_post');