From cefa285009ce3a8c0d4130561d215537114857a2 Mon Sep 17 00:00:00 2001 From: Yuri Dimas Date: Tue, 2 Dec 2025 00:46:04 +0700 Subject: [PATCH] refactor (landing): publication section --- Views/Home/Index.cshtml | 282 ++++++++++++++++++++++++++++++---------- wwwroot/css/input.css | 38 ++++++ 2 files changed, 249 insertions(+), 71 deletions(-) diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index 501a852..35c64f0 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -92,86 +92,205 @@ -
-
+
+
-
+
-
-
-
-
-
Posting Terkini
-
+
Posting Terkini

Publikasi

+
+ Lihat Semua +
+ + +
+
- -
- -
- Article Image -
-

- Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform -

-

- 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. -

-
-
- - Selengkapnya - - - - -
-
+ +
+
+ +
+
+ Article Image +
+
+

+ Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH + Luncurkan + Platform +

+

+ 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. +

+
+ + Selengkapnya + + +
+
+
- -
- Article Image -
-

- Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta -

-

- 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). -

-
-
- - Selengkapnya - - - - -
-
+ +
+
+ Article Image +
+
+

+ Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta +

+

+ 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). +

+
+ + Selengkapnya + + +
+
+
- -
- Article Image -
-

- Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform -

-

- 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. -

-
-
- - Selengkapnya - - - - -
-
+ +
+
+ Article Image +
+
+

+ Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH + Luncurkan + Platform +

+

+ 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. +

+
+ + Selengkapnya + + +
+
+
+ + +
+
+ Article Image +
+
+

+ Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH + Luncurkan + Platform +

+

+ 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. +

+
+ + Selengkapnya + + +
+
+
+ + +
+
+ Article Image +
+
+

+ Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH + Luncurkan + Platform +

+

+ 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. +

+
+ + Selengkapnya + + +
+
+
+ + +
+
+ Article Image +
+
+

+ Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH + Luncurkan + Platform +

+

+ 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. +

+
+ + Selengkapnya + + +
+
+
+
@@ -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); + }); + }); + })(); } \ No newline at end of file diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css index b18380d..fc0f36e 100644 --- a/wwwroot/css/input.css +++ b/wwwroot/css/input.css @@ -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 {