refactor (landing): publication section
parent
8b5105757c
commit
cefa285009
|
|
@ -92,86 +92,205 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Publications Section -->
|
<!-- Publications Section -->
|
||||||
<section class="px-4 lg:px-28 py-24 bg-gray-100">
|
<section id="publications" class="px-4 lg:px-28 py-24 bg-gray-100">
|
||||||
<div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
|
<div class="w-full flex flex-col justify-start items-start gap-20">
|
||||||
<div class="flex flex-col justify-start items-start gap-14 w-full">
|
<div class="flex flex-col justify-start items-start gap-14 w-full">
|
||||||
<div class="flex flex-col justify-start items-start gap-8 w-full">
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-6 w-full">
|
||||||
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
||||||
<!-- Badge -->
|
<!-- Badge -->
|
||||||
<div class="px-4 py-2 bg-green-800 rounded-3xl flex justify-center items-center gap-2">
|
<div class="text-green-600 text-base font-jakarta">Posting Terkini</div>
|
||||||
<div class="w-4 h-4 relative">
|
|
||||||
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-white rounded-full"></div>
|
|
||||||
</div>
|
|
||||||
<div class="text-white text-base font-bold font-jakarta">Posting Terkini</div>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Publikasi</h2>
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Publikasi</h2>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-row w-full justify-end items-center gap-3">
|
||||||
|
<a href="#" class="btn btn-neutral shadow-none rounded-full">Lihat Semua</a>
|
||||||
|
<div class="article-nav-controls flex items-center gap-2 ">
|
||||||
|
<button type="button" class="article-nav-btn" data-article-carousel-btn="prev"
|
||||||
|
aria-label="Artikel sebelumnya">
|
||||||
|
<i class="ph ph-arrow-left"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="article-nav-btn" data-article-carousel-btn="next"
|
||||||
|
aria-label="Artikel selanjutnya">
|
||||||
|
<i class="ph ph-arrow-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Articles Grid -->
|
<!-- Articles Carousel -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
|
<div class="article-carousel-wrapper">
|
||||||
<!-- Article 1 -->
|
<div class="article-carousel" data-article-carousel>
|
||||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
<!-- Article 1 -->
|
||||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-01.png" alt="Article Image" />
|
<article class="carousel-item article-card">
|
||||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
<figure>
|
||||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-01.png"
|
||||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
alt="Article Image" />
|
||||||
</h3>
|
</figure>
|
||||||
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
<div class="card-body">
|
||||||
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah sampah dan bertransaksi di bank sampah.
|
<h2 class="card-title line-clamp-2">
|
||||||
</p>
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||||
</div>
|
Luncurkan
|
||||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
Platform
|
||||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
</h2>
|
||||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
<p class="text-gray-500 line-clamp-3">
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
||||||
</svg>
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
||||||
</a>
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
||||||
</div>
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
||||||
</article>
|
sampah dan bertransaksi di bank sampah.
|
||||||
|
</p>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<!-- Article 2 -->
|
<!-- Article 2 -->
|
||||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
<article class="carousel-item article-card">
|
||||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-02.png" alt="Article Image" />
|
<figure>
|
||||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-02.png"
|
||||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
alt="Article Image" />
|
||||||
Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
|
</figure>
|
||||||
</h3>
|
<div class="card-body">
|
||||||
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
<h2 class="card-title line-clamp-2">
|
||||||
JAKARTA — Menteri Lingkungan Hidup, Hanif Faisol Nurofiq, mendukung penuh langkah Pemerintah Provinsi DKI Jakarta untuk menerapkan Retribusi Pelayanan Kebersihan mulai 1 Januari 2025. Dukungan ini disampaikan Menteri Hanif dalam acara "Kolaborasi Bersih Sampah Jakarta - Indonesia Bersih" yang berlangsung di Hutan Kota GBK, Jakarta, Minggu (17/11).
|
Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
|
||||||
</p>
|
</h2>
|
||||||
</div>
|
<p class="text-gray-500 line-clamp-3">
|
||||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
JAKARTA — Menteri Lingkungan Hidup, Hanif Faisol Nurofiq, mendukung penuh langkah
|
||||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
Pemerintah
|
||||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
Provinsi DKI Jakarta untuk menerapkan Retribusi Pelayanan Kebersihan mulai 1 Januari
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
2025.
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
Dukungan ini disampaikan Menteri Hanif dalam acara "Kolaborasi Bersih Sampah Jakarta -
|
||||||
</svg>
|
Indonesia Bersih" yang berlangsung di Hutan Kota GBK, Jakarta, Minggu (17/11).
|
||||||
</a>
|
</p>
|
||||||
</div>
|
<div class="card-actions">
|
||||||
</article>
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<!-- Article 3 -->
|
<!-- Article 3 -->
|
||||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
<article class="carousel-item article-card">
|
||||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-03.png" alt="Article Image" />
|
<figure>
|
||||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
||||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
alt="Article Image" />
|
||||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
</figure>
|
||||||
</h3>
|
<div class="card-body">
|
||||||
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
<h3 class="card-title line-clamp-2">
|
||||||
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah sampah dan bertransaksi di bank sampah.
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||||
</p>
|
Luncurkan
|
||||||
</div>
|
Platform
|
||||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
</h3>
|
||||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
||||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
||||||
</svg>
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
||||||
</a>
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
||||||
</div>
|
sampah dan bertransaksi di bank sampah.
|
||||||
</article>
|
</p>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Article 4 -->
|
||||||
|
<article class="carousel-item article-card">
|
||||||
|
<figure>
|
||||||
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
||||||
|
alt="Article Image" />
|
||||||
|
</figure>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title line-clamp-2">
|
||||||
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||||
|
Luncurkan
|
||||||
|
Platform
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
||||||
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
||||||
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
||||||
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
||||||
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
||||||
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
||||||
|
sampah dan bertransaksi di bank sampah.
|
||||||
|
</p>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Article 4 -->
|
||||||
|
<article class="carousel-item article-card">
|
||||||
|
<figure>
|
||||||
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
||||||
|
alt="Article Image" />
|
||||||
|
</figure>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title line-clamp-2">
|
||||||
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||||
|
Luncurkan
|
||||||
|
Platform
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
||||||
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
||||||
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
||||||
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
||||||
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
||||||
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
||||||
|
sampah dan bertransaksi di bank sampah.
|
||||||
|
</p>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Article 4 -->
|
||||||
|
<article class="carousel-item article-card">
|
||||||
|
<figure>
|
||||||
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
||||||
|
alt="Article Image" />
|
||||||
|
</figure>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title line-clamp-2">
|
||||||
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||||
|
Luncurkan
|
||||||
|
Platform
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
||||||
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
||||||
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
||||||
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
||||||
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
||||||
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
||||||
|
sampah dan bertransaksi di bank sampah.
|
||||||
|
</p>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
||||||
|
Selengkapnya
|
||||||
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -521,5 +640,26 @@
|
||||||
document.querySelectorAll('section').forEach(section => {
|
document.querySelectorAll('section').forEach(section => {
|
||||||
observer.observe(section);
|
observer.observe(section);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Article carousel controls
|
||||||
|
(function () {
|
||||||
|
const carousel = document.querySelector('[data-article-carousel]');
|
||||||
|
if (!carousel) return;
|
||||||
|
|
||||||
|
const handleNavClick = (direction) => {
|
||||||
|
const distance = carousel.clientWidth;
|
||||||
|
carousel.scrollBy({
|
||||||
|
left: direction * distance,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-article-carousel-btn]').forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const direction = button.dataset.articleCarouselBtn === 'next' ? 1 : -1;
|
||||||
|
handleNavClick(direction);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|
@ -99,6 +99,44 @@
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-nav-controls {
|
||||||
|
@apply flex items-center gap-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-nav-btn {
|
||||||
|
@apply btn btn-neutral btn-outline btn-circle shadow-none transition-transform duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-nav-btn:hover {
|
||||||
|
@apply -translate-y-0.5 shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-nav-btn:focus-visible {
|
||||||
|
@apply outline-none ring-2 ring-bank-sampah-primary-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-carousel-wrapper {
|
||||||
|
@apply relative w-full overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-carousel {
|
||||||
|
@apply carousel carousel-start w-full gap-6 scroll-smooth;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-carousel::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-carousel .carousel-item {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-card {
|
||||||
|
@apply card bg-base-100 shadow-sm w-[320px] md:w-[360px];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility icon {
|
@utility icon {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue