PageSourceSearch

https://kepul.id/catalog/

html kepul.id collected 2026-10-01 15:48:27 UTC 89,959 bytes, 177 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.png"><meta name="generator" content="Astro v5.5.2"><!-- <link rel="preload" as="image" href={src} alt="Hero" /> --><title>Catalog | Kepul</title><link rel="canonical" href="https://kepul.id/catalog/"><meta name="description" content="Kepul - Jual Sampah Lebih Mudah"><meta name="robots" content="index, follow"><meta property="og:title" content="Kepul - Jual Sampah Lebih Mudah"><meta property="og:type" content="website"><meta property="og:image" content="https://kepul.id/opengraph.png"><meta property="og:url" content="https://kepul.id/catalog/"><meta property="og:image:url" content="https://kepul.id/opengraph.png"><meta property="og:image:alt" content="Kepul Homepage Screenshot"><link rel="stylesheet" href="/_astro/blog.B6KbQAfY.css"></head> <body class="antialiased text-slate-800 bg-white"> <div class="fixed top-0 left-0 right-0 z-50"> <header id="main-navbar" data-transparent="false" data-stuck="false" class="fixed top-0 w-full z-50 transition-all duration-300 border-b bg-white/80 backdrop-blur-md border-slate-200/50 shadow-sm"> <div class="max-w-screen-xl mx-auto px-5"> <div id="navbar-inner" class="group flex flex-col lg:flex-row justify-between items-center transition-all duration-300 py-2">  <div class="flex w-full lg:w-auto items-center justify-between"> <a href="/" class="flex items-center gap-2 group/logo"> <picture> <source srcset="/_astro/kepul-logo.NI3o_8OI_Z1ogFiH.webp 40w, /_astro/kepul-logo.NI3o_8OI_4fUS0.webp 52w" type="image/webp" sizes="(max-width: 120px) 40px, 80px">  <img src="/_astro/kepul-logo.NI3o_8OI_Z1QnhJ2.png" srcset="/_astro/kepul-logo.NI3o_8OI_1KheSc.png 40w, /_astro/kepul-logo.NI3o_8OI_Z1QnhJ2.png 52w" alt="Kepul" sizes="(max-width: 120px) 40px, 80px" loading="eager" width="52" height="52" decoding="async" class="w-8 md:w-10 h-auto group-hover/logo:scale-105 transition-transform"> </picture> <span class="font-bold text-xl tracking-tight transition-colors text-slate-800">Kepul</span> </a> <div class="block lg:hidden"> <!-- Mobile Menu Toggle --> <button id="astronav-menu" aria-label="Toggle Menu">  <svg fill="currentColor" class="w-6 h-6 transition-colors text-slate-800" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>Toggle Menu</title> <path class="astronav-close-icon astronav-toggle hidden" fill-rule="evenodd" clip-rule="evenodd" d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"></path> <path class="astronav-open-icon astronav-toggle" fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path> </svg>  </button> </div> </div> <nav class="astronav-items astronav-toggle hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">  <ul class="flex flex-col lg:flex-row lg:gap-1 bg-white lg:bg-transparent rounded-xl lg:rou
1nded-none p-4 lg:p-0 shadow-lg lg:shadow-none border lg:border-none border-slate-100 mt-2 lg:mt-0"> <li> <a href="/catalog" class="flex lg:px-4 py-2 items-center font-medium transition-colors text-sm text-slate-600 hover:text-primary"> <span> Catalog</span>  </a> </li><li> <a href="/team" class="flex lg:px-4 py-2 items-center font-medium transition-colors text-sm text-slate-600 hover:text-primary"> <span> Team</span>  </a> </li><li> <a href="/blog" class="flex lg:px-4 py-2 items-center font-medium transition-colors text-sm text-slate-600 hover:text-primary"> <span> Blog</span>  </a> </li><li> <a href="/contact" class="flex lg:px-4 py-2 items-center font-medium transition-colors text-sm text-slate-600 hover:text-primary"> <span> Contact</span>  </a> </li> <li> <a href="https://play.google.com/store/apps/details?id=app.kepul.id&hl=id" class="lg:ml-4 px-5 py-2 rounded-full bg-primary hover:bg-sky-600 text-white font-medium text-sm transition-colors shadow-lg shadow-primary/20 block text-center mt-2 lg:mt-0 mb-4 lg:mb-0">
2Download App
3</a> </li> </ul>  </nav>  
3<script>(function(){const closeOnClick = false;
4
5["DOMContentLoaded", "astro:after-swap"].forEach((event) => {
6  document.addEventListener(event, addListeners);
7});
8
9// Function to clone and replace elements
10function cloneAndReplace(element) {
11  const clone = element.cloneNode(true);
12  element.parentNode.replaceChild(clone, element);
13}
14
15function addListeners() {
16  // Clean up existing listeners
17  const oldMenuButton = document.getElementById("astronav-menu");
18  if (oldMenuButton) {
19    cloneAndReplace(oldMenuButton);
20  }
21
22  const oldDropdownMenus = document.querySelectorAll(".astronav-dropdown");
23  oldDropdownMenus.forEach((menu) => {
24    cloneAndReplace(menu);
25  });
26
27  // Mobile nav toggle
28  const menuButton = document.getElementById("astronav-menu");
29  menuButton && menuButton.addEventListener("click", toggleMobileNav);
30
31  // Dropdown menus
32  const dropdownMenus = document.querySelectorAll(".astronav-dropdown");
33  dropdownMenus.forEach((menu) => {
34    const button = menu.querySelector("button");
35    button &&
36      button.addEventListener("click", (event) =>
37        toggleDropdownMenu(event, menu, dropdownMenus)
38      );
39
40    // Handle Submenu Dropdowns
41    const dropDownSubmenus = menu.querySelectorAll(
42      ".astronav-dropdown-submenu"
43    );
44
45    dropDownSubmenus.forEach((submenu) => {
46      const submenuButton = submenu.querySelector("button");
47      submenuButton &&
48        submenuButton.addEventListener("click", (event) => {
49          event.stopImmediatePropagation();
50          toggleSubmenuDropdown(event, submenu);
51        });
52    });
53  });
54
55  // Clicking away from dropdown will remove the dropdown class
56  document.addEventListener("click", closeAllDropdowns);
57
58  if (closeOnClick) {
59    handleCloseOnClick();
60  }
61}
62
63function toggleMobileNav() {
64  [...document.querySelectorAll(".astronav-toggle")].forEach((el) => {
65    el.classList.toggle("hidden");
66  });
67}
68
69function toggleDropdownMenu(event, menu, dropdownMenus) {
70  toggleMenu(menu);
71
72  // Close one dropdown when selecting another
73  Array.from(dropdownMenus)
74    .filter((el) => el !== menu && !menu.contains(el))
75    .forEach(closeMenu);
76
77  event.stopPropagation();
78}
79
80function toggleSubmenuDropdown(event, submenu) {
81  event.stopPropagation();
82  toggleMenu(submenu);
83
84  // Close sibling submenus at the same nesting level
85  const siblingSubmenus = submenu
86    .closest(".astronav-dropdown")
87    .querySelectorAll(".astronav-dropdown-submenu");
88  Array.from(siblingSubmenus)
89    .filter((el) => el !== submenu && !submenu.contains(el))
90    .forEach(closeMenu);
91}
92
93function closeAllDropdowns(event) {
94  const dropdownMenus = document.querySelectorAll(".dropdown-toggle");
95  const dropdownParent = document.querySelectorAll(
96    ".astronav-dropdown, .astronav-dropdown-submenu"
97  );
98  const isButtonInsideDropdown = [
99    ...document.querySelectorAll(
100      `.astronav-dropdown button, .astronav-dropdown label, .astronav-dropdown input,
101	  .astronav-dropdown-submenu button, .astronav-dropdown-submenu label, .astronav-dropdown-submenu input,
102	  #astronav-menu`
103    ),
104  ].some((button) => button.contains(event.target));
105  if (!isButtonInsideDropdown) {
106    dropdownMenus.forEach((d) => {
107      // console.log("I ran", d);
108      // if (!d.contains(event.target)) {
109      d.classList.remove("open");
110      d.removeAttribute("open");
111      d.classList.add("hidden");
112      // }
113    });
114    dropdownParent.forEach((d) => {
115      d.classList.remove("open");
116      d.removeAttribute("open");
117      d.setAttribute("aria-expanded", "false");
118    });
119  }
120}
121
122function toggleMenu(menu) {
123  menu.classList.toggle("open");
124  const expanded = menu.getAttribute("aria-expanded") === "true";
125  menu.setAttribute("aria-expanded", expanded ? "false" : "true");
126  menu.hasAttribute("open")
127    ? menu.removeAttribute("open")
128    : menu.setAttribute("open", "");
129
130  const dropdownToggle = menu.querySelector(".dropdown-toggle");
131  const dropdownExpanded = dropdownToggle.getAttribute("aria-expanded");
132  dropdownToggle.classList.toggle("hidden");
133  dropdownToggle.setAttribute(
134    "aria-expanded",
135    dropdownExpanded === "true" ? "false" : "true"
136  );
137}
138
139function closeMenu(menu) {
140  // console.log("closing", menu);
141  menu.classList.remove("open");
142  menu.removeAttribute("open");
143  menu.setAttribute("aria-expanded", "false");
144  const dropdownToggles = menu.querySelectorAll(".dropdown-toggle");
145  dropdownToggles.forEach((toggle) => {
146    toggle.classList.add("hidden");
147    toggle.setAttribute("aria-expanded", "false");
148  });
149}
150
151function handleCloseOnClick() {
152  const navMenuItems = document.querySelector(".astronav-items");
153  const navToggle = document.getElementById("astronav-menu");
154  const navLink = navMenuItems && navMenuItems.querySelectorAll("a");
155
156  const MenuIcons = navToggle.querySelectorAll(".astronav-toggle");
157
158  navLink &&
159    navLink.forEach((item) => {
160      item.addEventListener("click", () => {
161        navMenuItems?.classList.add("hidden");
162        MenuIcons.forEach((el) => {
163          el.classList.toggle("hidden");
164        });
165      });
166    });
167}
168})();</script>
168 </div> </div> </header> 
168<script type="module">const t=document.getElementById("main-navbar"),a=document.getElementById("navbar-inner");function e(){if(!t)return;const n=window.scrollY>20;t.setAttribute("data-stuck",n.toString()),a?.setAttribute("data-stuck",n.toString())}t&&t.getAttribute("data-transparent")==="true"&&(window.addEventListener("scroll",e),e());</script>
168 </div> <!-- Add padding top to account for fixed navbar only if not transparent/blended --> <div class="pt-20">  <div class="max-w-(--breakpoint-xl) mx-auto px-5">  <div class="mt-16 text-center"> <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight"> Catalog </h1> <p class="text-lg mt-4 text-slate-600"> Daftar harga produk terkini. </p> </div> <div class="mt-12"> <div class="mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-4">Plastik</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20LM%20-%20Tutup%20Botol_LGTgF.webp" alt="Tutup Botol (Le Minerale)" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Tutup Botol (Le Minerale)</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.800</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20LM%20-%20Botol_Z1FqvI5.webp" alt="Botol Plastik (Le Minerale)" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Plastik (Le Minerale)</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.200</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20LM%20-%20Galon_Zm4lli.webp" alt="Galon (Le Minerale)" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Galon (Le Minerale)</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Asoy_Z1ErOY1.webp" alt="Asoy" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Asoy</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Atom%20Botol_Z3haUO.webp" alt="Atom Botol" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Atom Botol</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Atom%20Ember_Z2orfMA.webp" alt="Atom Ember" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Atom Ember</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 700</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Atom%20Hitam_Zbbbus.webp" alt="Atom Hitam" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Atom Hitam</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Botol%20Bersih_2vi3oB.webp" alt="Botol Bersih" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Bersih</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Botol%20Label_7KRUD.webp" alt="Botol Plastik Kotor" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Plastik Kotor</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Bubble%20Wrap_Z1oDsip.webp" alt="Bubble Wrap" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Bubble Wrap</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20CD_TnfKa.webp" alt="CD" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">CD</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Gelas_Z2hxgqb.webp" alt="Cup Plastik Label" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Cup Plastik Label</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Impek_ZFmdGh.webp" alt="Impek" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Impek</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 300</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Jerigen_BMNjT.webp" alt="Jerigen" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Jerigen</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspec
168t-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Kursi_Y0SGI.webp" alt="Kursi Plastik" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kursi Plastik</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.200</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Mainan%20Anak_6x1bB.webp" alt="Mainan Anak" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Mainan Anak</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 700</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20PE_tEJrS.webp" alt="Plastik PE bersih" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Plastik PE bersih</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Paralon_1vCj6J.webp" alt="Pipa Paralon" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Pipa Paralon</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Tutup%20Botol_Z2d4w1C.webp" alt="Tutup Botol" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Tutup Botol</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Wadah%20Bening_14pJ6x.webp" alt="Wadah Bening" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Wadah Bening</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Skincare_ZeQGkj.webp" alt="Skincare" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Skincare</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Botol%20Plastik%20Bersih_ZqhNT5.webp" alt="Botol Plastik Bersih" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Plastik Bersih</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Plastik%20-%20Botol%20Plastik%20Tanpa%20Tutup_i9p6p.webp" alt="Botol Plastik Bersih Tanpa Tutup" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Plastik Bersih Tanpa Tutup</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div><div class="mb-8">
168 <h2 class="text-2xl font-bold text-gray-800 mb-4">Kaca</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Bir_Zafd7i.webp" alt="Botol Bir" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Bir</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Fanta%20Cola%20Sprite_5ldkm.webp" alt="Botol Soda" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Soda</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Guinness_2t98IF.webp" alt="Botol Guinness" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Guinness</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Kecap_1codPG.webp" alt="Botol Kecap" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Kecap</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Kurnia_2k1tIQ.webp" alt="Botol Kurnia" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Kurnia</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Sirup_28hbUw.webp" alt="Botol Sirup " width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Sirup </h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Botol%20Kaca%20-%20Tehbotol_1FNU7S.webp" alt="Botol Tehbotol" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Botol Tehbotol</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto">  <span class="text-primary">Rp 100</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div><div class="mb-8">
168 <h2 class="text-2xl font-bold text-gray-800 mb-4">Besi</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Babet_Z1vTbJ.webp" alt="Babet" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Babet</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 4.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Besi%20Tua_ZDr9FA.webp" alt="Besi Tua" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Besi Tua</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 2.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Kabin_Z1CbFuG.webp" alt="Kabin" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kabin</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Kaleng_9apRJ.webp" alt="Kaleng" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kaleng</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Samsam_18j966.webp" alt="Besi Sam Sam" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Besi Sam Sam</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Besi%20-%20Seng_28RLzE.webp" alt="Seng" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Seng</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div><div class="mb-8">
168 <h2 class="text-2xl font-bold text-gray-800 mb-4">Elektronik</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20AC%20Komplit_ZBNElG.webp" alt="AC Komplit" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">AC Komplit</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 150.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20CPU_ZBtp8f.webp" alt="CPU" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">CPU</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 12.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Dispenser_Z9oyKG.webp" alt="Dispenser" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Dispenser</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Keyboard_5DmhF.webp" alt="Keyboard" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Keyboard</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Komputer%20Set_Z1NDpj1.webp" alt="Komputer Set" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Komputer Set</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 35.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Kulkas%201%20Pintu_ZXsgFJ.webp" alt="Kulkas 1 Pintu" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kulkas 1 Pintu</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 22.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Kulkas%202%20Pintu_Z2askmY.webp" alt="Kulkas 2 Pintu" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kulkas 2 Pintu</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 30.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Laptop_Z2uaFiv.webp" alt="Laptop" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Laptop</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 15.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Mesin%20Cuci%201%20Tabung_V7psa.webp" alt="Mesin Cuci 1 Tabung" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Mesin Cuci 1 Tabung</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 25.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Mesin%20Cuci%202%20Tabung_2hAyuX.webp" alt="Mesin Cuci 2 Tabung" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Mesin Cuci 2 Tabung</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 30.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Monitor%20LCD_Zb0CQx.webp" alt="Monitor LCD" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Monitor LCD</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 5.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Monitor%20Tabung_1WIm1x.webp" alt="Monitor Tabung" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Monitor Tabung</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 7.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Mouse_Z1a7JGa.webp" alt="Mouse" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Mouse</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Pompa%20Air_cWYyU.webp" alt="Pompa Air" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Pompa Air</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Printer_ZyY6nK.webp" alt="Printer" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </d
168iv> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Printer</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 400</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Rice%20Cooker_1t0Kxu.webp" alt="Rice Cooker" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Rice Cooker</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20Speaker_Z2poiGz.webp" alt="Speaker" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Speaker</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 200</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20TV%20LCD_hiWJ4.webp" alt="TV LCD" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">TV LCD</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 5.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Elektronik%20-%20TV%20Tabung_T8bze.webp" alt="TV Tabung" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">TV Tabung</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 8.000</span> <span class="text-xs text-slate-400 font-normal">/Unit</span> </p> </div> </div> </div> </div><div class="mb-8">
168 <h2 class="text-2xl font-bold text-gray-800 mb-4">Kertas</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Berwarna_Z11OTS9.webp" alt="Kertas Berwarna" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kertas Berwarna</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 700</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Bon_Z9wHWA.webp" alt="Kertas Bon" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kertas Bon</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Cacah_19a8eU.webp" alt="Kertas Cacah" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kertas Cacah</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Duplek_Z1XqWhl.webp" alt="Duplek" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Duplek</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 200</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20HVS_2ttpuV.webp" alt="HVS" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">HVS</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 700</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Kardus_6tPEi.webp" alt="Kardus" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kardus</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 1.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Koran%20Analisa_ZRSbTz.webp" alt="Koran Analisa" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Koran Analisa</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.200</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Koran_Z1DsURC.webp" alt="Koran" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Koran</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 2.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Sarang%20Telur_2qGmvD.webp" alt="Sarang Telur" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Sarang Telur</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 300</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Tungkul_hqbWU.webp" alt="Tungkul" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Tungkul</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 300</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Kertas%20-%20Buku_viFB2.webp" alt="Buku" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Buku</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path> </svg> <span class="text-primary">Rp 500</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div><div class="mb-8">
168 <h2 class="text-2xl font-bold text-gray-800 mb-4">Minyak</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Khusus%20-%20Jelantah_2erksn.webp" alt="Minyak Jelantah" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Minyak Jelantah</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 5.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div><div class="mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-4">Logam</h2> <div class="flex overflow-x-auto space-x-4 pb-4"> <div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Logam%20-%20Aki_Z1v418k.webp" alt="Aki kering" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Aki kering</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 3.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Logam%20-%20Aluminium%20Kaleng_ZdMq1X.webp" alt="Kaleng Aluminium" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kaleng Aluminium</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 3.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Logam%20-%20Aluminium_Z1gNOMr.webp" alt="Aluminium" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Aluminium</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 7.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Logam%20-%20Kuningan_Z1ceti0.webp" alt="Kuningan" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Kuningan</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 30.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div><div class="flex-none w-56 flex flex-col bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group overflow-hidden"> <div class="w-full aspect-square bg-slate-50 relative overflow-hidden"> <img src="/_astro/SampahOutline_Logam%20-%20Tembaga_253sRD.webp" alt="Tembaga" width="400" height="400" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-500"> </div> <div class="text-left py-4 px-4 flex flex-col flex-1"> <h4 class="font-medium text-slate-500 text-sm truncate mb-1">Tembaga</h4> <p class="text-lg font-bold text-slate-800 flex items-center gap-1 mt-auto"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-emerald-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path> </svg> <span class="text-primary">Rp 50.000</span> <span class="text-xs text-slate-400 font-normal">/Kg</span> </p> </div> </div> </div> </div> </div>  </div>  </div> <footer class="py-20 bg-white relative z-20"> <p class="text-center text-sm text-slate-500">
169Copyright © 2026 kepul.id. All rights reserved.
170</p> <!--
171    Can we ask you a favor 🙏
172    Please keep this backlink on your website if possible.
173    or Purchase a commercial license from https://web3templates.com
174  --> <p class="text-center text-xs text-slate-500 mt-1">
175Made by <a href="https://web3templates.com" target="_blank" rel="noopener" class="hover:underline">
176W3T
177</a> </p> </footer>  </body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.