Landing Page UMKM 1
12 Jun 2026 | Oleh: rastono sumardi
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko UMKM 1</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-indigo-600">UMKM Kita</h1>
<a href="https://wa.me/6281286230631?text=Halo,%20saya%20ingin%20bertanya%20tentang%20produk%20Anda."
class="bg-green-500 hover:bg-green-600 text-white px-5 py-2 rounded-full font-medium transition text-sm">
Hubungi Kami
</a>
</div>
</nav>
<header class="bg-indigo-600 py-16 text-white text-center">
<div class="max-w-3xl mx-auto px-4">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Produk Pilihan Terbaik Kami</h2>
<p class="text-indigo-100 text-lg mb-8">Kualitas premium, harga terjangkau. Dibuat dengan penuh cinta untuk Anda.</p>
<a href="#produk" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-indigo-50 transition">
Lihat Produk
</a>
</div>
</header>
<section id="produk" class="max-w-6xl mx-auto px-4 py-16">
<h3 class="text-2xl font-bold text-center mb-10">Katalog Produk</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Produk 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://placehold.co/400x300/e0e7ff/4f46e5?text=Produk+1" alt="Produk 1" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-bold text-lg">Nama Produk 1</h4>
<p class="text-indigo-600 font-bold my-2">Rp 50.000</p>
<button onclick="openOrderModal('Nama Produk 1', 'Rp 50.000')" class="block text-center w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">Beli Sekarang</button>
</div>
</div>
<!-- Produk 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://placehold.co/400x300/e0e7ff/4f46e5?text=Produk+2" alt="Produk 2" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-bold text-lg">Nama Produk 2</h4>
<p class="text-indigo-600 font-bold my-2">Rp 75.000</p>
<button onclick="openOrderModal('Nama Produk 2', 'Rp 75.000')" class="block text-center w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">Beli Sekarang</button>
</div>
</div>
<!-- Produk 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://placehold.co/400x300/e0e7ff/4f46e5?text=Produk+3" alt="Produk 3" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-bold text-lg">Nama Produk 3</h4>
<p class="text-indigo-600 font-bold my-2">Rp 100.000</p>
<button onclick="openOrderModal('Nama Produk 3', 'Rp 100.000')" class="block text-center w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">Beli Sekarang</button>
</div>
</div>
<!-- Produk 4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://placehold.co/400x300/e0e7ff/4f46e5?text=Produk+4" alt="Produk 4" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-bold text-lg">Nama Produk 4</h4>
<p class="text-indigo-600 font-bold my-2">Rp 125.000</p>
<button onclick="openOrderModal('Nama Produk 4', 'Rp 125.000')" class="block text-center w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">Beli Sekarang</button>
</div>
</div>
</div>
</section>
<div id="orderModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-2xl p-6 w-full max-w-md">
<h3 class="text-xl font-bold mb-4">Pesan Produk</h3>
<form id="orderForm" onsubmit="sendToWhatsApp(event)">
<input type="hidden" id="productName">
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Nama Lengkap</label>
<input type="text" id="customerName" required class="w-full border rounded-lg p-2">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Jumlah</label>
<input type="number" id="quantity" min="1" value="1" required class="w-full border rounded-lg p-2">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Alamat Pengiriman</label>
<textarea id="address" required class="w-full border rounded-lg p-2"></textarea>
</div>
<div class="flex gap-2">
<button type="button" onclick="closeOrderModal()" class="flex-1 bg-gray-200 py-2 rounded-lg">Batal</button>
<button type="submit" class="flex-1 bg-green-500 text-white py-2 rounded-lg">Kirim Pesanan</button>
</div>
</form>
</div>
</div>
<script>
function openOrderModal(product, price) {
document.getElementById('productName').value = product;
document.getElementById('orderModal').classList.remove('hidden');
}
function closeOrderModal() {
document.getElementById('orderModal').classList.add('hidden');
}
function sendToWhatsApp(e) {
e.preventDefault();
const product = document.getElementById('productName').value;
const name = document.getElementById('customerName').value;
const quantity = document.getElementById('quantity').value;
const address = document.getElementById('address').value;
// Target WhatsApp Number
const phone = "6281286230631";
const message = `Halo Admin, saya ingin memesan:\n\nProduk: ${product}\nJumlah: ${quantity}\nNama: ${name}\nAlamat: ${address}`;
const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
closeOrderModal();
}
</script>
<footer class="bg-gray-800 text-white py-10 text-center">
<p class="mb-4">Butuh bantuan? Silakan hubungi kami di WhatsApp</p>
<a href="https://wa.me/6281286230631?text=Halo%20Admin," class="inline-flex items-center gap-2 bg-green-500 px-8 py-4 rounded-full font-bold hover:bg-green-600 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.01 2C6.48 2 2 6.48 2 12.01c0 2.05.6 3.96 1.63 5.58L2.01 22l4.57-1.57c1.55 1.03 3.42 1.63 5.43 1.63 5.53 0 10.01-4.48 10.01-10.01C22.02 6.48 17.54 2 12.01 2zM17 15.54c-.18.49-.9.91-1.33 1-.39.08-1.07.24-2.85-.48-2.39-1-3.92-3.41-4.04-3.58-.12-.17-1-1.34-1-2.55 0-1.2.62-1.78.85-2.01.23-.23.63-.37.89-.37.26 0 .52.01.75.02.23.01.55.02.83.69l.73 1.77c.05.12.08.26.04.41-.04.15-.17.24-.31.39l-.42.42c-.14.14-.3.29-.12.6.18.3.79 1.31 1.7 2.12.59.53 1.33.86 1.7.99.37.13.53.11.75-.12.22-.23.95-1.11 1.2-1.48.24-.36.49-.31.83-.19.34.12 2.16 1.01 2.53 1.2.37.19.62.28.71.44.09.16.09.91-.09 1.4z"/></svg>
<span>Hubungi WhatsApp: 0812-8623-0631</span>
</a>
<p class="mt-8 text-gray-400 text-sm">© 2026 UMKM Kita. All rights reserved.</p>
</footer>
</body>
</html>