feat: slicing edukasi page
shola
parent
86482e3688
commit
1caeb65630
|
|
@ -100,6 +100,18 @@ public class HomeController : Controller
|
||||||
return View();
|
return View();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Halaman edukasi aplikasi
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>Edukasi view</returns>
|
||||||
|
[HttpGet("Edukasi")]
|
||||||
|
[ResponseCache(Duration = 3600, Location = ResponseCacheLocation.Any)]
|
||||||
|
public IActionResult Edukasi()
|
||||||
|
{
|
||||||
|
_logger.LogInformation("Edukasi page accessed");
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Halaman error dengan enhanced error handling
|
/// Halaman error dengan enhanced error handling
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,399 @@
|
||||||
|
@{
|
||||||
|
ViewData["Title"] = "BPS-RW Jakarta - Edukasi";
|
||||||
|
ViewData["FooterBgColor"] = "bg-black";
|
||||||
|
ViewData["FooterHoverColor"] = "bg-black-800/20";
|
||||||
|
ViewData["FooterShowLeaf"] = "false";
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Edukasi Section -->
|
||||||
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-12 lg:py-18 bg-white">
|
||||||
|
<div class="w-full mx-auto gap-10">
|
||||||
|
<div class="inline-flex px-4 py-2 bg-primary-50 rounded-full mb-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-primary-500 rounded-full"></div>
|
||||||
|
<span class="text-primary-500 text-base font-semibold font-jakarta">BPS RW</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center">
|
||||||
|
<h1 class="text-gray-900 text-3xl lg:text-5xl font-bold font-jakarta mb-4">Edukasi BPS-RW</h1>
|
||||||
|
<p class="text-gray-500 text:sm lg:text-lg font-normal font-jakarta leading-relaxed max-w-3xl">
|
||||||
|
Pusat pembelajaran dan sumber informasi tentang Bidang Pengolahan Sampah Lingkup Rukun Warga (BPS-RW)
|
||||||
|
DKI Jakarta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Video Pembelajaran Section -->
|
||||||
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
||||||
|
<!-- Filter -->
|
||||||
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-8 gap-6 lg:gap-2">
|
||||||
|
<h2 class="text-black text-3xl lg:text-4xl font-semibold font-jakarta">Konten</h2>
|
||||||
|
<div class="flex gap-2 ">
|
||||||
|
<button data-filter="all"
|
||||||
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors bg-gray-900 text-white">
|
||||||
|
Semua
|
||||||
|
</button>
|
||||||
|
<button data-filter="video"
|
||||||
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors text-gray-600 hover:bg-gray-200">
|
||||||
|
Video
|
||||||
|
</button>
|
||||||
|
<button data-filter="ebook"
|
||||||
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors text-gray-600 hover:bg-gray-200">
|
||||||
|
E-Book
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Video Pembelajaran -->
|
||||||
|
<div id="videoSection" class="w-full mx-auto content-section">
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">Video Pembelajaran</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button id="videoPrevBtn"
|
||||||
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
||||||
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button id="videoNextBtn"
|
||||||
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
||||||
|
<svg class="w-5 h-5 text-gray-700" 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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative overflow-hidden">
|
||||||
|
<div id="videoCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- E-Book -->
|
||||||
|
<div id="ebookSection" class="w-full mx-auto content-section mt-12">
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">E-Book</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button id="ebookPrevBtn"
|
||||||
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
||||||
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button id="ebookNextBtn"
|
||||||
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
||||||
|
<svg class="w-5 h-5 text-gray-700" 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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative overflow-hidden">
|
||||||
|
<div id="ebookCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
@{
|
||||||
|
ViewData["ContactBgColor"] = "bg-black";
|
||||||
|
ViewData["ContactBgCardColor"] = "bg-black";
|
||||||
|
ViewData["ContactBorderCardColor"] = "bg-black";
|
||||||
|
ViewData["ContactTitleTextColor"] = "text-white";
|
||||||
|
ViewData["ContactTitleCardColor"] = "text-white";
|
||||||
|
ViewData["ContactIconBgColor"] = "bg-primary-700";
|
||||||
|
ViewData["ContactLinkColor"] = "text-primary-500";
|
||||||
|
}
|
||||||
|
@await Html.PartialAsync("_ContactSection")
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Data Dummy
|
||||||
|
const videos = [
|
||||||
|
{
|
||||||
|
youtubeId: '_vx9Lzx794o',
|
||||||
|
title: 'Video Sosialisasi BPS RW',
|
||||||
|
description: 'Tonton video ini untuk memahami cara kerja dan manfaat program BPS-RW.',
|
||||||
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
youtubeId: '_vx9Lzx794o',
|
||||||
|
title: 'Webinar Edukasi BPS-RW',
|
||||||
|
description: 'Ikuti webinar ini untuk mendapatkan informasi mendalam tentang pelaksanaan program BPS-RW.',
|
||||||
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
youtubeId: '_vx9Lzx794o',
|
||||||
|
title: 'Sesi Tanya Jawab BPS-RW',
|
||||||
|
description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
|
||||||
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
youtubeId: '_vx9Lzx794o',
|
||||||
|
title: 'Sesi Tanya Jawab BPS-RW',
|
||||||
|
description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
|
||||||
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
youtubeId: '_vx9Lzx794o',
|
||||||
|
title: 'Sosialisasi Program BPS-RW',
|
||||||
|
description: 'Tips mensosialisasikan program BPS-RW kepada warga',
|
||||||
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const ebooks = [
|
||||||
|
{
|
||||||
|
title: 'Panduan Praktis BPS-RW',
|
||||||
|
description: 'Simak lankah-langkah mudah dan contoh sukses penerapan BPS-RW',
|
||||||
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pelatihan Intensif BPS-RW',
|
||||||
|
description: 'Pelajari strategi implementasi BPS-RW yang efektif dan berkelanjutan',
|
||||||
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Kupas Tuntas BPS-RW',
|
||||||
|
description: 'Dapatkan jawaban dari pakar terkait pengelolaan sampah di lingkungan RW',
|
||||||
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Forum Diskusi BPS-RW',
|
||||||
|
description: 'Diskusi dan bertukar pikiran tentang pengelolaan sampah bersama BPS-RW',
|
||||||
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Laporan Tahunan 2024',
|
||||||
|
description: 'Laporan pencapaian program BPS-RW Jakarta tahun 2024',
|
||||||
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
||||||
|
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Filter functionality
|
||||||
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||||
|
const videoSection = document.getElementById('videoSection');
|
||||||
|
const ebookSection = document.getElementById('ebookSection');
|
||||||
|
|
||||||
|
filterBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', function () {
|
||||||
|
const filter = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
// Update active button
|
||||||
|
filterBtns.forEach(b => {
|
||||||
|
b.classList.remove('bg-gray-900', 'text-white');
|
||||||
|
b.classList.add('text-gray-600', 'hover:bg-gray-200');
|
||||||
|
});
|
||||||
|
this.classList.add('bg-gray-900', 'text-white');
|
||||||
|
this.classList.remove('text-gray-600', 'hover:bg-gray-200');
|
||||||
|
|
||||||
|
// Show/hide sections
|
||||||
|
if (filter === 'all') {
|
||||||
|
videoSection.style.display = 'block';
|
||||||
|
ebookSection.style.display = 'block';
|
||||||
|
ebookSection.classList.add('mt-12');
|
||||||
|
} else if (filter === 'video') {
|
||||||
|
videoSection.style.display = 'block';
|
||||||
|
ebookSection.style.display = 'none';
|
||||||
|
} else if (filter === 'ebook') {
|
||||||
|
videoSection.style.display = 'none';
|
||||||
|
ebookSection.style.display = 'block';
|
||||||
|
ebookSection.classList.remove('mt-12');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Render Videos
|
||||||
|
const videoCarousel = document.getElementById('videoCarousel');
|
||||||
|
videos.forEach(video => {
|
||||||
|
const videoCard = `
|
||||||
|
<div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
|
||||||
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<div class="relative w-full aspect-video overflow-hidden bg-gray-300" data-video-id="${video.youtubeId}">
|
||||||
|
<img src="${video.thumbnailUrl}"
|
||||||
|
alt="${video.title}"
|
||||||
|
class="absolute inset-0 w-full h-full object-cover video-thumbnail cursor-pointer"
|
||||||
|
loading="lazy">
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center video-play-btn cursor-pointer">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM16 29V11L28 20L16 29Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-5">
|
||||||
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${video.title}</h3>
|
||||||
|
<p class="text-gary-500 text-sm font-normal font-jakarta line-clamp-2">${video.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
videoCarousel.innerHTML += videoCard;
|
||||||
|
});
|
||||||
|
|
||||||
|
// E-books
|
||||||
|
const ebookCarousel = document.getElementById('ebookCarousel');
|
||||||
|
ebooks.forEach(ebook => {
|
||||||
|
const ebookCard = `
|
||||||
|
<div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
|
||||||
|
<div class="group">
|
||||||
|
<div class="bg-primary-100 min-h-56 rounded-2xl p-12 mb-4 flex items-center justify-center hover:opacity-80 transition-opacity">
|
||||||
|
<i class="ph-fill ph-file-text text-8xl text-primary-500"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${ebook.title}</h3>
|
||||||
|
<p class="text-gray-500 text-sm font-normal font-jakarta mb-4 line-clamp-2">${ebook.description}</p>
|
||||||
|
<a href="${ebook.documentUrl}" target="_blank"
|
||||||
|
class="block w-full px-6 py-2.5 bg-white rounded-full text-primary-700 text-base font-semibold transition-colors border border-primary-500 text-center">
|
||||||
|
Baca Dokumen
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
ebookCarousel.innerHTML += ebookCard;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lazy load YouTube videos - dipindahkan setelah video cards di-render
|
||||||
|
setTimeout(() => {
|
||||||
|
const videoContainers = document.querySelectorAll('[data-video-id]');
|
||||||
|
|
||||||
|
videoContainers.forEach(container => {
|
||||||
|
const videoId = container.dataset.videoId;
|
||||||
|
|
||||||
|
const loadVideo = () => {
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.className = 'absolute inset-0 w-full h-full border-0';
|
||||||
|
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
||||||
|
iframe.title = 'YouTube video player';
|
||||||
|
iframe.frameBorder = '0';
|
||||||
|
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
|
||||||
|
iframe.allowFullscreen = true;
|
||||||
|
|
||||||
|
// Hide thumbnail and play button
|
||||||
|
const thumbnail = container.querySelector('.video-thumbnail');
|
||||||
|
const playBtn = container.querySelector('.video-play-btn');
|
||||||
|
if (thumbnail) thumbnail.classList.add('hidden');
|
||||||
|
if (playBtn) playBtn.classList.add('hidden');
|
||||||
|
|
||||||
|
container.appendChild(iframe);
|
||||||
|
};
|
||||||
|
|
||||||
|
const thumbnail = container.querySelector('.video-thumbnail');
|
||||||
|
const playBtn = container.querySelector('.video-play-btn');
|
||||||
|
|
||||||
|
if (thumbnail) thumbnail.addEventListener('click', loadVideo);
|
||||||
|
if (playBtn) playBtn.addEventListener('click', loadVideo);
|
||||||
|
});
|
||||||
|
}, 50);
|
||||||
|
|
||||||
|
// Video Carousel
|
||||||
|
const carousel = document.getElementById('videoCarousel');
|
||||||
|
const prevBtn = document.getElementById('videoPrevBtn');
|
||||||
|
const nextBtn = document.getElementById('videoNextBtn');
|
||||||
|
|
||||||
|
let currentIndex = 0;
|
||||||
|
const totalVideos = videos.length;
|
||||||
|
|
||||||
|
function getVisibleItems() {
|
||||||
|
if (window.innerWidth >= 1024) return 4;
|
||||||
|
if (window.innerWidth >= 768) return 2;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCarousel() {
|
||||||
|
const visibleItems = getVisibleItems();
|
||||||
|
const maxIndex = totalVideos - visibleItems;
|
||||||
|
|
||||||
|
if (currentIndex < 0) currentIndex = 0;
|
||||||
|
if (currentIndex > maxIndex) currentIndex = maxIndex;
|
||||||
|
|
||||||
|
const itemWidth = carousel.children[0]?.offsetWidth || 0;
|
||||||
|
const gap = 20;
|
||||||
|
const offset = -(currentIndex * (itemWidth + gap));
|
||||||
|
|
||||||
|
carousel.style.transform = `translateX(${offset}px)`;
|
||||||
|
|
||||||
|
prevBtn.disabled = currentIndex === 0;
|
||||||
|
nextBtn.disabled = currentIndex >= maxIndex;
|
||||||
|
|
||||||
|
prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1';
|
||||||
|
nextBtn.style.opacity = currentIndex >= maxIndex ? '0.5' : '1';
|
||||||
|
}
|
||||||
|
|
||||||
|
prevBtn.addEventListener('click', function () {
|
||||||
|
currentIndex--;
|
||||||
|
updateCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
nextBtn.addEventListener('click', function () {
|
||||||
|
currentIndex++;
|
||||||
|
updateCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
let resizeTimeout;
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(function () {
|
||||||
|
currentIndex = 0;
|
||||||
|
updateCarousel();
|
||||||
|
}, 250);
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(updateCarousel, 100);
|
||||||
|
|
||||||
|
// E-Book Carousel
|
||||||
|
const ebookCarouselEl = document.getElementById('ebookCarousel');
|
||||||
|
const ebookPrevBtn = document.getElementById('ebookPrevBtn');
|
||||||
|
const ebookNextBtn = document.getElementById('ebookNextBtn');
|
||||||
|
|
||||||
|
let ebookCurrentIndex = 0;
|
||||||
|
const totalEbooks = ebooks.length;
|
||||||
|
|
||||||
|
function updateEbookCarousel() {
|
||||||
|
const visibleItems = getVisibleItems();
|
||||||
|
const maxIndex = totalEbooks - visibleItems;
|
||||||
|
|
||||||
|
if (ebookCurrentIndex < 0) ebookCurrentIndex = 0;
|
||||||
|
if (ebookCurrentIndex > maxIndex) ebookCurrentIndex = maxIndex;
|
||||||
|
|
||||||
|
const itemWidth = ebookCarouselEl.children[0]?.offsetWidth || 0;
|
||||||
|
const gap = 20;
|
||||||
|
const offset = -(ebookCurrentIndex * (itemWidth + gap));
|
||||||
|
|
||||||
|
ebookCarouselEl.style.transform = `translateX(${offset}px)`;
|
||||||
|
|
||||||
|
ebookPrevBtn.disabled = ebookCurrentIndex === 0;
|
||||||
|
ebookNextBtn.disabled = ebookCurrentIndex >= maxIndex;
|
||||||
|
|
||||||
|
ebookPrevBtn.style.opacity = ebookCurrentIndex === 0 ? '0.5' : '1';
|
||||||
|
ebookNextBtn.style.opacity = ebookCurrentIndex >= maxIndex ? '0.5' : '1';
|
||||||
|
}
|
||||||
|
|
||||||
|
ebookPrevBtn.addEventListener('click', function () {
|
||||||
|
ebookCurrentIndex--;
|
||||||
|
updateEbookCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
ebookNextBtn.addEventListener('click', function () {
|
||||||
|
ebookCurrentIndex++;
|
||||||
|
updateEbookCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(function () {
|
||||||
|
currentIndex = 0;
|
||||||
|
ebookCurrentIndex = 0;
|
||||||
|
updateCarousel();
|
||||||
|
updateEbookCarousel();
|
||||||
|
}, 250);
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(updateEbookCarousel, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -433,70 +433,7 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
@await Html.PartialAsync("_ContactSection")
|
||||||
<div class="w-full mx-auto">
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="mb-10">
|
|
||||||
<!-- Badge -->
|
|
||||||
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
||||||
<span class="text-primary-700 text-base font-semibold font-jakarta">Hubungi Kami</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Informasi Kontak</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Contact Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<!-- Phone Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M18.0338 5.741C18.0677 5.61409 18.1263 5.49511 18.2063 5.39086C18.2862 5.28661 18.3859 5.19914 18.4997 5.13344C18.6134 5.06773 18.739 5.02509 18.8693 5.00794C18.9995 4.99079 19.1319 4.99948 19.2588 5.0335C21.1126 5.51718 22.804 6.4863 24.1587 7.84104C25.5135 9.19578 26.4826 10.8872 26.9663 12.741C27.0003 12.8679 27.009 13.0002 26.9918 13.1305C26.9747 13.2607 26.932 13.3863 26.8663 13.5001C26.8006 13.6138 26.7131 13.7135 26.6089 13.7935C26.5047 13.8734 26.3857 13.9321 26.2588 13.966C26.1743 13.9882 26.0873 13.9995 26 13.9997C25.7798 13.9998 25.5657 13.9272 25.391 13.7932C25.2163 13.6591 25.0907 13.4712 25.0338 13.2585C24.6395 11.7449 23.8486 10.3639 22.7428 9.2578C21.6369 8.15171 20.256 7.36059 18.7425 6.966C18.6155 6.93219 18.4964 6.87366 18.392 6.79378C18.2876 6.71389 18.2 6.61421 18.1342 6.50044C18.0683 6.38666 18.0256 6.26103 18.0084 6.13071C17.9911 6.0004 17.9998 5.86797 18.0338 5.741ZM17.7425 10.966C19.4663 11.426 20.5738 12.5347 21.0338 14.2585C21.0907 14.4712 21.2163 14.6591 21.391 14.7932C21.5657 14.9272 21.7798 14.9998 22 14.9997C22.0873 14.9995 22.1743 14.9882 22.2588 14.966C22.3857 14.9321 22.5047 14.8734 22.6089 14.7935C22.7131 14.7135 22.8006 14.6138 22.8663 14.5001C22.932 14.3863 22.9747 14.2607 22.9918 14.1305C23.009 14.0002 23.0003 13.8679 22.9663 13.741C22.3263 11.346 20.6538 9.6735 18.2588 9.0335C18.0025 8.96504 17.7295 9.00118 17.4999 9.13398C17.2703 9.26678 17.1028 9.48536 17.0344 9.74162C16.9659 9.99789 17.0021 10.2709 17.1349 10.5005C17.2677 10.7301 17.4862 10.8975 17.7425 10.966ZM26.7963 20.8072L20.9075 18.1685L20.8913 18.161C20.5856 18.0302 20.2521 17.9778 19.921 18.0083C19.5899 18.0389 19.2716 18.1515 18.995 18.336C18.9624 18.3575 18.9311 18.3809 18.9013 18.406L15.8588 20.9997C13.9313 20.0635 11.9413 18.0885 11.005 16.186L13.6025 13.0972C13.6275 13.066 13.6513 13.0347 13.6738 13.001C13.8543 12.7251 13.9638 12.4089 13.9926 12.0805C14.0214 11.752 13.9686 11.4216 13.8388 11.1185V11.1035L11.1925 5.20475C11.0209 4.80883 10.7259 4.47902 10.3515 4.26455C9.97707 4.05007 9.54333 3.96245 9.11501 4.01475C7.42122 4.23763 5.86649 5.06946 4.74118 6.35487C3.61587 7.64028 2.99695 9.29136 3.00001 10.9997C3.00001 20.9247 11.075 28.9997 21 28.9997C22.7084 29.0028 24.3595 28.3839 25.6449 27.2586C26.9303 26.1333 27.7621 24.5785 27.985 22.8847C28.0374 22.4566 27.95 22.0229 27.7357 21.6485C27.5215 21.2741 27.1919 20.979 26.7963 20.8072Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Phone</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Senin-Jumat, 08.00-16.00 WIB</p>
|
|
||||||
<a href="tel:02138657455" class="text-primary-500 text-base hover:underline">(021) 3865745</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M28 6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7V24C3 24.5304 3.21071 25.0391 3.58579 25.4142C3.96086 25.7893 4.46957 26 5 26H27C27.5304 26 28.0391 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V7C29 6.73478 28.8946 6.48043 28.7071 6.29289C28.5196 6.10536 28.2652 6 28 6ZM12.3387 16L5 22.7262V9.27375L12.3387 16ZM13.8188 17.3563L15.3188 18.7375C15.5032 18.9069 15.7446 19.0008 15.995 19.0008C16.2454 19.0008 16.4868 18.9069 16.6712 18.7375L18.1712 17.3563L25.4212 24H6.57125L13.8188 17.3563ZM19.6612 16L27 9.2725V22.7275L19.6612 16Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Email</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Respon dalam 1-2 hari kerja</p>
|
|
||||||
<a href="mailto:sampah@jakarta.go.id"
|
|
||||||
class="text-primary-500 text-base hover:underline break-all">sampah@jakarta.go.id</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Office Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M29.9662 26.0004H28V12.0004C28 11.47 27.7893 10.9612 27.4142 10.5862C27.0391 10.2111 26.5304 10.0004 26 10.0004H20.5C20.3674 10.0004 20.2402 10.0531 20.1464 10.1468C20.0527 10.2406 20 10.3678 20 10.5004V26.0004H18V4.05164C18.0033 3.74012 17.9357 3.43192 17.8023 3.15039C17.6689 2.86885 17.4732 2.62136 17.23 2.42664C16.8985 2.16819 16.494 2.02075 16.0739 2.00526C15.6539 1.98978 15.2396 2.10704 14.89 2.34039L4.89 9.00039C4.61567 9.18341 4.39086 9.43143 4.23558 9.72237C4.0803 10.0133 3.99937 10.3381 4 10.6679V26.0004H2.03375C1.77533 25.9966 1.52506 26.0908 1.33327 26.264C1.14148 26.4372 1.0224 26.6767 1 26.9341C0.990918 27.0709 1.01006 27.2081 1.05623 27.3372C1.1024 27.4663 1.17462 27.5845 1.2684 27.6845C1.36218 27.7845 1.47552 27.8641 1.60137 27.9185C1.72723 27.9728 1.86291 28.0007 2 28.0004H30C30.1371 28.0007 30.2728 27.9728 30.3986 27.9185C30.5245 27.8641 30.6378 27.7845 30.7316 27.6845C30.8254 27.5845 30.8976 27.4663 30.9438 27.3372C30.9899 27.2081 31.0091 27.0709 31 26.9341C30.9776 26.6767 30.8585 26.4372 30.6667 26.264C30.4749 26.0908 30.2247 25.9966 29.9662 26.0004ZM9.5 23.0004C9.5003 23.1375 9.47241 23.2732 9.41807 23.399C9.36372 23.5249 9.28408 23.6382 9.18409 23.732C9.08409 23.8258 8.96589 23.898 8.83681 23.9442C8.70773 23.9903 8.57054 24.0095 8.43375 24.0004C8.17606 23.978 7.93644 23.8587 7.76317 23.6667C7.5899 23.4746 7.49586 23.224 7.5 22.9654V21.0341C7.49648 20.7758 7.59076 20.5257 7.76394 20.334C7.93712 20.1422 8.17639 20.0231 8.43375 20.0004C8.57054 19.9913 8.70773 20.0104 8.83681 20.0566C8.96589 20.1028 9.08409 20.175 9.18409 20.2688C9.28408 20.3626 9.36372 20.4759 9.41807 20.6018C9.47241 20.7276 9.5003 20.8633 9.5 21.0004V23.0004ZM9.5 16.0004C9.5003 16.1375 9.47241 16.2732 9.41807 16.399C9.36372 16.5249 9.28408 16.6382 9.18409 16.732C9.08409 16.8258 8.96589 16.898 8.83681 16.9442C8.70773 16.9903 8.57054 17.0095 8.43375 17.0004C8.17617 16.9777 7.93672 16.8583 7.76351 16.6664C7.5903 16.4744 7.49616 16.2239 7.5 15.9654V14.0341C7.49648 13.7758 7.59076 13.5257 7.76394 13.334C7.93712 13.1422 8.17639 13.0231 8.43375 13.0004C8.57054 12.9913 8.70773 13.0104 8.83681 13.0566C8.96589 13.1028 9.08409 13.175 9.18409 13.2688C9.28408 13.3626 9.36372 13.4759 9.41807 13.6018C9.47241 13.7276 9.5003 13.8633 9.5 14.0004V16.0004ZM14.5 23.0004C14.5003 23.1375 14.4724 23.2732 14.4181 23.399C14.3637 23.5249 14.2841 23.6382 14.1841 23.732C14.0841 23.8258 13.9659 23.898 13.8368 23.9442C13.7077 23.9903 13.5705 24.0095 13.4338 24.0004C13.1765 23.978 12.9372 23.8591 12.764 23.6676C12.5908 23.4761 12.4965 23.2261 12.5 22.9679V21.0341C12.4968 20.776 12.5912 20.5262 12.7644 20.3348C12.9375 20.1433 13.1766 20.0243 13.4338 20.0016C13.5705 19.9926 13.7077 20.0117 13.8368 20.0579C13.9659 20.104 14.0841 20.1763 14.1841 20.27C14.2841 20.3638 14.3637 20.4772 14.4181 20.603C14.4724 20.7289 14.5003 20.8646 14.5 21.0016V23.0004ZM14.5 16.0004C14.5003 16.1375 14.4724 16.2732 14.4181 16.399C14.3637 16.5249 14.2841 16.6382 14.1841 16.732C14.0841 16.8258 13.9659 16.898 13.8368 16.9442C13.7077 16.9903 13.5705 17.0095 13.4338 17.0004C13.1766 16.9777 12.9375 16.8587 12.7644 16.6673C12.5912 16.4758 12.4968 16.226 12.5 15.9679V14.0341C12.4968 13.776 12.5912 13.5262 12.7644 13.3348C12.9375 13.1433 13.1766 13.0243 13.4338 13.0016C13.5705 12.9926 13.7077 13.0117 13.8368 13.0579C13.9659 13.104 14.0841 13.1763 14.1841 13.27C14.2841 13.3638 14.3637 13.4772 14.4181 13.603C14.4724 13.7289 14.5003 13.8646 14.5 14.0016V16.0004Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Office</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Dinas Lingkungan Hidup DKI Jakarta</p>
|
|
||||||
<p class="text-primary-500 text-base">Jl. Mandala V No. 67, Cililitan, Jakarta Timur</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
@{
|
@{
|
||||||
ViewData["Title"] = "BPS-RW Jakarta - Panduan";
|
ViewData["Title"] = "BPS-RW Jakarta - Panduan";
|
||||||
|
ViewData["FooterBgColor"] = "bg-black";
|
||||||
|
ViewData["FooterHoverColor"] = "bg-black-800/20";
|
||||||
|
ViewData["FooterShowLeaf"] = "false";
|
||||||
}
|
}
|
||||||
|
|
||||||
<!-- Panduan Section -->
|
<!-- Panduan Section -->
|
||||||
|
|
@ -98,70 +101,16 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
@{
|
||||||
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
ViewData["ContactBgColor"] = "bg-black";
|
||||||
<div class="w-full mx-auto">
|
ViewData["ContactBgCardColor"] = "bg-black";
|
||||||
<div class="mb-10">
|
ViewData["ContactBorderCardColor"] = "bg-black";
|
||||||
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
ViewData["ContactTitleTextColor"] = "text-white";
|
||||||
<div class="flex items-center gap-2">
|
ViewData["ContactTitleCardColor"] = "text-white";
|
||||||
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
ViewData["ContactIconBgColor"] = "bg-primary-700";
|
||||||
<span class="text-primary-700 text-base font-semibold font-jakarta">Hubungi Kami</span>
|
ViewData["ContactLinkColor"] = "text-primary-500";
|
||||||
</div>
|
}
|
||||||
</div>
|
@await Html.PartialAsync("_ContactSection")
|
||||||
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Informasi Kontak</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Contact Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<!-- Phone Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M18.0338 5.741C18.0677 5.61409 18.1263 5.49511 18.2063 5.39086C18.2862 5.28661 18.3859 5.19914 18.4997 5.13344C18.6134 5.06773 18.739 5.02509 18.8693 5.00794C18.9995 4.99079 19.1319 4.99948 19.2588 5.0335C21.1126 5.51718 22.804 6.4863 24.1587 7.84104C25.5135 9.19578 26.4826 10.8872 26.9663 12.741C27.0003 12.8679 27.009 13.0002 26.9918 13.1305C26.9747 13.2607 26.932 13.3863 26.8663 13.5001C26.8006 13.6138 26.7131 13.7135 26.6089 13.7935C26.5047 13.8734 26.3857 13.9321 26.2588 13.966C26.1743 13.9882 26.0873 13.9995 26 13.9997C25.7798 13.9998 25.5657 13.9272 25.391 13.7932C25.2163 13.6591 25.0907 13.4712 25.0338 13.2585C24.6395 11.7449 23.8486 10.3639 22.7428 9.2578C21.6369 8.15171 20.256 7.36059 18.7425 6.966C18.6155 6.93219 18.4964 6.87366 18.392 6.79378C18.2876 6.71389 18.2 6.61421 18.1342 6.50044C18.0683 6.38666 18.0256 6.26103 18.0084 6.13071C17.9911 6.0004 17.9998 5.86797 18.0338 5.741ZM17.7425 10.966C19.4663 11.426 20.5738 12.5347 21.0338 14.2585C21.0907 14.4712 21.2163 14.6591 21.391 14.7932C21.5657 14.9272 21.7798 14.9998 22 14.9997C22.0873 14.9995 22.1743 14.9882 22.2588 14.966C22.3857 14.9321 22.5047 14.8734 22.6089 14.7935C22.7131 14.7135 22.8006 14.6138 22.8663 14.5001C22.932 14.3863 22.9747 14.2607 22.9918 14.1305C23.009 14.0002 23.0003 13.8679 22.9663 13.741C22.3263 11.346 20.6538 9.6735 18.2588 9.0335C18.0025 8.96504 17.7295 9.00118 17.4999 9.13398C17.2703 9.26678 17.1028 9.48536 17.0344 9.74162C16.9659 9.99789 17.0021 10.2709 17.1349 10.5005C17.2677 10.7301 17.4862 10.8975 17.7425 10.966ZM26.7963 20.8072L20.9075 18.1685L20.8913 18.161C20.5856 18.0302 20.2521 17.9778 19.921 18.0083C19.5899 18.0389 19.2716 18.1515 18.995 18.336C18.9624 18.3575 18.9311 18.3809 18.9013 18.406L15.8588 20.9997C13.9313 20.0635 11.9413 18.0885 11.005 16.186L13.6025 13.0972C13.6275 13.066 13.6513 13.0347 13.6738 13.001C13.8543 12.7251 13.9638 12.4089 13.9926 12.0805C14.0214 11.752 13.9686 11.4216 13.8388 11.1185V11.1035L11.1925 5.20475C11.0209 4.80883 10.7259 4.47902 10.3515 4.26455C9.97707 4.05007 9.54333 3.96245 9.11501 4.01475C7.42122 4.23763 5.86649 5.06946 4.74118 6.35487C3.61587 7.64028 2.99695 9.29136 3.00001 10.9997C3.00001 20.9247 11.075 28.9997 21 28.9997C22.7084 29.0028 24.3595 28.3839 25.6449 27.2586C26.9303 26.1333 27.7621 24.5785 27.985 22.8847C28.0374 22.4566 27.95 22.0229 27.7357 21.6485C27.5215 21.2741 27.1919 20.979 26.7963 20.8072Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Phone</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Senin-Jumat, 08.00-16.00 WIB</p>
|
|
||||||
<a href="tel:02138657455" class="text-primary-500 text-base hover:underline">(021) 3865745</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M26 6H6C4.89543 6 4 6.89543 4 8V24C4 25.1046 4.89543 26 6 26H26C27.1046 26 28 25.1046 28 24V8C28 6.89543 27.1046 6 26 6Z"
|
|
||||||
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M28 8L16 17L4 8" stroke="white" stroke-width="2" stroke-linecap="round"
|
|
||||||
stroke-linejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Email</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Respon dalam 1-2 hari kerja</p>
|
|
||||||
<a href="mailto:sampah@jakarta.go.id"
|
|
||||||
class="text-primary-500 text-base hover:underline break-all">sampah@@jakarta.go.id</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Office Card -->
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M29.9662 26.0004H28V12.0004C28 11.47 27.7893 10.9612 27.4142 10.5862C27.0391 10.2111 26.5304 10.0004 26 10.0004H20.5C20.3674 10.0004 20.2402 10.0531 20.1464 10.1468C20.0527 10.2406 20 10.3678 20 10.5004V26.0004H18V4.05164C18.0033 3.74012 17.9357 3.43192 17.8023 3.15039C17.6689 2.86885 17.4732 2.62136 17.23 2.42664C16.8985 2.16819 16.494 2.02075 16.0739 2.00526C15.6539 1.98978 15.2396 2.10704 14.89 2.34039L4.89 9.00039C4.61567 9.18341 4.39086 9.43143 4.23558 9.72237C4.0803 10.0133 3.99937 10.3381 4 10.6679V26.0004H2.03375C1.77533 25.9966 1.52506 26.0908 1.33327 26.264C1.14148 26.4372 1.0224 26.6767 1 26.9341C0.990918 27.0709 1.01006 27.2081 1.05623 27.3372C1.1024 27.4663 1.17462 27.5845 1.2684 27.6845C1.36218 27.7845 1.47552 27.8641 1.60137 27.9185C1.72723 27.9728 1.86291 28.0007 2 28.0004H30C30.1371 28.0007 30.2728 27.9728 30.3986 27.9185C30.5245 27.8641 30.6378 27.7845 30.7316 27.6845C30.8254 27.5845 30.8976 27.4663 30.9438 27.3372C30.9899 27.2081 31.0091 27.0709 31 26.9341C30.9776 26.6767 30.8585 26.4372 30.6667 26.264C30.4749 26.0908 30.2247 25.9966 29.9662 26.0004Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Office</h3>
|
|
||||||
<p class="text-gray-500 text-base mb-4 leading-relaxed">Dinas Lingkungan Hidup DKI Jakarta</p>
|
|
||||||
<p class="text-primary-500 text-base">Jl. Mandala V No. 67, Cililitan, Jakarta Timur</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Data Dummy
|
// Data Dummy
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,17 @@
|
||||||
<footer class="w-full py-8 lg:py-20 relative bg-green-950 overflow-hidden">
|
@{
|
||||||
|
var bgColor = ViewData["FooterBgColor"]?.ToString() ?? "bg-green-950";
|
||||||
|
var hoverColor = ViewData["FooterHoverColor"]?.ToString() ?? "bg-green-800/20";
|
||||||
|
var showLeaf = ViewData["FooterShowLeaf"]?.ToString() != "false";
|
||||||
|
}
|
||||||
|
|
||||||
|
<footer class="w-full py-8 lg:py-20 relative @bgColor overflow-hidden">
|
||||||
|
@if (showLeaf)
|
||||||
|
{
|
||||||
<!-- Background overlay -->
|
<!-- Background overlay -->
|
||||||
<div class="absolute inset-0 overflow-hidden">
|
<div class="absolute inset-0 overflow-hidden">
|
||||||
<img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern" style="mix-blend-mode: overlay;" />
|
<img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern" style="mix-blend-mode: overlay;" />
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
<!-- Footer Content -->
|
<!-- Footer Content -->
|
||||||
<div class="w-full mx-auto px-4 lg:px-28 xl:px-48 relative z-10 flex flex-col justify-start items-start gap-2 lg:gap-20">
|
<div class="w-full mx-auto px-4 lg:px-28 xl:px-48 relative z-10 flex flex-col justify-start items-start gap-2 lg:gap-20">
|
||||||
|
|
@ -16,19 +25,19 @@
|
||||||
|
|
||||||
<!-- Navigation Menu -->
|
<!-- Navigation Menu -->
|
||||||
<div class="grid gap-1 lg:gap-3 grid-cols-5">
|
<div class="grid gap-1 lg:gap-3 grid-cols-5">
|
||||||
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
|
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
|
||||||
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Beranda</div>
|
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Beranda</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
|
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
|
||||||
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Tentang</div>
|
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Tentang</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
|
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
|
||||||
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Regulasi</div>
|
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Regulasi</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
|
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
|
||||||
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Panduan</div>
|
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Panduan</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
|
<a href="#" class="rounded-full flex justify-center items-center gap-2 hover:@hoverColor px-4 py-2 transition-colors">
|
||||||
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Edukasi</div>
|
<div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Edukasi</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<a href="/Panduan"
|
<a href="/Panduan"
|
||||||
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">Panduan
|
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">Panduan
|
||||||
</a>
|
</a>
|
||||||
<a href="#"
|
<a href="/Edukasi"
|
||||||
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
|
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
|
||||||
Edukasi
|
Edukasi
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<a href="/Panduan" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
<a href="/Panduan" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
||||||
Panduan
|
Panduan
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
<a href="/Edukasi" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
||||||
Edukasi
|
Edukasi
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue