213 lines
13 KiB
Plaintext
213 lines
13 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Bulky Waste - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Layanan pengelolaan sampah besar";
|
|
ViewData["Keywords"] = "Bulky Waste, Sampah Besar, Pengelolaan Sampah, Daur Ulang, Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgTitle"] = "Bulky Waste - Layanan Pengelolaan Sampah Besar | Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Layanan Bulky Waste untuk pengelolaan sampah besar. Solusi pengolahan sampah rumah tangga berukuran besar, furniture bekas, dan barang besar lainnya di DKI Jakarta.";
|
|
ViewData["TwitterTitle"] = "Bulky Waste - Layanan Pengelolaan Sampah Besar | Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Layanan Bulky Waste untuk pengelolaan sampah besar. Solusi pengolahan sampah rumah tangga berukuran besar, furniture bekas, dan barang besar lainnya di DKI Jakarta.";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Bulky Waste";
|
|
ViewData["TitleBeforeHighlight"] = "Layanan Pengelolaan";
|
|
ViewData["TitleHighlight"] = "Sampah Besar";
|
|
}
|
|
|
|
<!-- Breadcumb -->
|
|
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
|
|
|
<div class="container mx-auto max-w-6xl py-8">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="text-center py-8">
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Layanan Bulky Waste</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
|
|
Layanan pengelolaan sampah besar untuk mengurangi dampak lingkungan dari limbah rumah tangga berukuran besar.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
|
|
<div class="lg:col-span-12">
|
|
<div class="relative bg-gradient-to-br from-orange-500 via-orange-600 to-red-500 rounded-2xl p-8 text-white overflow-hidden">
|
|
<div class="absolute inset-0 opacity-10">
|
|
<svg class="w-full h-full" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
|
|
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.3"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#grid)"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="relative flex flex-col lg:flex-row lg:items-center justify-between">
|
|
<div class="lg:flex-1 mb-6 lg:mb-0">
|
|
<div class="flex items-center mb-4">
|
|
<div class="bg-white/20 backdrop-blur-sm rounded-full p-3 mr-4">
|
|
<i data-lucide="star" class="w-8 h-8"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold">Halo Sahabat Lingkungan! 👋</h3>
|
|
</div>
|
|
<p class="text-lg leading-relaxed text-white/90">
|
|
Punya sampah berukuran besar? Kami siap membantu Anda mengelolanya dengan tepat dan ramah lingkungan.
|
|
</p>
|
|
</div>
|
|
<div class="lg:ml-8">
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLSe960f7Ll5PZPuADP5zdGTfTTHQemvUMXoy62wGO9v40eR5gw/viewform" target="_blank" class="group">
|
|
<button class="bg-white text-orange-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-gray-50 transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl flex items-center">
|
|
<span>Daftar Sekarang</span>
|
|
<i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Criteria Section -->
|
|
<div class="lg:col-span-6">
|
|
<div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
|
|
<div class="flex items-center mb-6">
|
|
<div class="bg-oren rounded-xl p-3 mr-4">
|
|
<i data-lucide="user-round" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Kriteria Pemohon</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center p-4 bg-orange-50 rounded-xl border-l-4 border-orange-500">
|
|
<div class="bg-orange-500 rounded-full p-2 mr-4">
|
|
<i data-lucide="id-card" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700">Warga DKI Jakarta (dibuktikan dengan KTP)</span>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-orange-50 rounded-xl border-l-4 border-orange-500">
|
|
<div class="bg-orange-500 rounded-full p-2 mr-4">
|
|
<i data-lucide="user" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700">Perorangan (bukan instansi)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-6">
|
|
<div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
|
|
<div class="flex items-center mb-6">
|
|
<div class="bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl p-3 mr-4">
|
|
<i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Kriteria Pra Kondisi</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center p-4 bg-green-50 rounded-xl border-l-4 border-green-500">
|
|
<div class="bg-green-500 rounded-full p-2 mr-4">
|
|
<i data-lucide="ruler" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700">Dimensi sampah maksimal 2 x 3 x 1.5 m</span>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-green-50 rounded-xl border-l-4 border-green-500">
|
|
<div class="bg-green-500 rounded-full p-2 mr-4">
|
|
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700">Dalam kondisi sudah dibongkar</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waste Types Section -->
|
|
<div class="lg:col-span-6">
|
|
<div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
|
|
<div class="flex items-center mb-8">
|
|
<div class="bg-oren rounded-xl p-3 mr-4">
|
|
<i data-lucide="trash-2" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Jenis Sampah yang Dilayani</h2>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="bed" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Tempat tidur / Kasur</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="archive" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Rak / Cabinet / Lemari</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="shopping-cart" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Troli / Gerobak</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="sofa" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Kursi / Sofa / Bangku</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="table" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Meja Makan</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex flex-col items-center text-center gap-3">
|
|
<div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="bike" class="w-6 h-6"></i>
|
|
</div>
|
|
<span class="font-semibold text-gray-800 text-sm">Sepeda</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Process Section -->
|
|
<div class="lg:col-span-6">
|
|
<div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
|
|
<div class="flex items-center mb-8">
|
|
<div class="bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl p-3 mr-4">
|
|
<i data-lucide="repeat" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Proses Penjemputan</h2>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center p-4 bg-teal-50 rounded-xl border-l-4 border-teal-500">
|
|
<div class="bg-teal-500 rounded-full p-2 mr-4 mt-1">
|
|
<i data-lucide="map-pin" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700 leading-relaxed">Petugas akan menjemput sampah langsung ke lokasi Anda</span>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-teal-50 rounded-xl border-l-4 border-teal-500">
|
|
<div class="bg-teal-500 rounded-full p-2 mr-4 mt-1">
|
|
<i data-lucide="form-input" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-700 leading-relaxed">Pendaftaran dapat dilakukan dengan mengisi Google Form</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></div> |