69 lines
4.9 KiB
PHP
69 lines
4.9 KiB
PHP
<section id="layanan" class="py-16 mt-10">
|
|
<div class="container mx-auto px-4 max-w-7xl">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Layanan Perizinan Lingkungan</h2>
|
|
<div class="w-24 h-1 bg-blue-500 mx-auto mb-6"></div>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Kami menyediakan berbagai layanan berkualitas untuk memenuhi kebutuhan Anda</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Layanan 1 -->
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
|
|
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Pertama</h3>
|
|
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
|
|
Selengkapnya
|
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layanan 2 -->
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
|
|
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Kedua</h3>
|
|
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
<a href="#" class="inline-flex items-center text-green-600 hover:text-green-700 font-medium">
|
|
Selengkapnya
|
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layanan 3 -->
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
|
|
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Ketiga</h3>
|
|
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
<a href="#" class="inline-flex items-center text-purple-600 hover:text-purple-700 font-medium">
|
|
Selengkapnya
|
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|