refactor (landing): publication section
parent
8b5105757c
commit
cefa285009
|
|
@ -92,86 +92,205 @@
|
|||
</section>
|
||||
|
||||
<!-- Publications Section -->
|
||||
<section 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">
|
||||
<section id="publications" class="px-4 lg:px-28 py-24 bg-gray-100">
|
||||
<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-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">
|
||||
<!-- Badge -->
|
||||
<div class="px-4 py-2 bg-green-800 rounded-3xl flex justify-center items-center gap-2">
|
||||
<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>
|
||||
<div class="text-green-600 text-base font-jakarta">Posting Terkini</div>
|
||||
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Publikasi</h2>
|
||||
</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>
|
||||
|
||||
<!-- Articles Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
|
||||
<!-- Article 1 -->
|
||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-01.png" alt="Article Image" />
|
||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
||||
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>
|
||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
||||
<svg class="w-5 h-5" 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>
|
||||
<!-- Articles Carousel -->
|
||||
<div class="article-carousel-wrapper">
|
||||
<div class="article-carousel" data-article-carousel>
|
||||
<!-- Article 1 -->
|
||||
<article class="carousel-item article-card">
|
||||
<figure>
|
||||
<img class="w-full h-64 object-cover" src="/images/publikasi/image-01.png"
|
||||
alt="Article Image" />
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
||||
Luncurkan
|
||||
Platform
|
||||
</h2>
|
||||
<p class="text-gray-500 line-clamp-3">
|
||||
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 2 -->
|
||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-02.png" alt="Article Image" />
|
||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
||||
Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
|
||||
</h3>
|
||||
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
||||
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).
|
||||
</p>
|
||||
</div>
|
||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
||||
<svg class="w-5 h-5" 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>
|
||||
<!-- Article 2 -->
|
||||
<article class="carousel-item article-card">
|
||||
<figure>
|
||||
<img class="w-full h-64 object-cover" src="/images/publikasi/image-02.png"
|
||||
alt="Article Image" />
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title line-clamp-2">
|
||||
Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
|
||||
</h2>
|
||||
<p class="text-gray-500 line-clamp-3">
|
||||
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).
|
||||
</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 3 -->
|
||||
<article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
|
||||
<img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-03.png" alt="Article Image" />
|
||||
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
||||
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
|
||||
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>
|
||||
<div class="pt-1 pb-1 flex justify-start items-start w-full">
|
||||
<a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
|
||||
<span class="text-base font-semibold font-jakarta">Selengkapnya</span>
|
||||
<svg class="w-5 h-5" 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>
|
||||
<!-- Article 3 -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -521,5 +640,26 @@
|
|||
document.querySelectorAll('section').forEach(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>
|
||||
}
|
||||
|
|
@ -99,6 +99,44 @@
|
|||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue