Landing Page UMKM 2
12 Jun 2026 | Oleh: rastono sumardi
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMKM Modern | Produk Pilihan</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-xl font-extrabold text-indigo-600 tracking-tight">UMKM KITA</h1>
<a href="https://wa.me/6281286230631"
class="bg-slate-900 hover:bg-indigo-600 text-white px-5 py-2.5 rounded-full font-semibold transition-all duration-300 shadow-lg text-sm">
Hubungi Kami
</a>
</div>
</nav>
<header class="pt-32 pb-20 px-6">
<div class="max-w-4xl mx-auto text-center">
<span class="text-indigo-600 font-semibold uppercase tracking-widest text-sm mb-4 block">Koleksi Eksklusif</span>
<h2 class="text-5xl md:text-6xl font-extrabold mb-6 text-slate-900 leading-tight">Produk Premium untuk Kebutuhan Anda</h2>
<p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">Dibuat dengan kualitas terbaik untuk memberikan kepuasan maksimal. Jelajahi produk pilihan kami di bawah ini.</p>
<a href="#produk" class="inline-block bg-indigo-600 text-white px-10 py-4 rounded-2xl font-bold hover:bg-indigo-700 shadow-xl shadow-indigo-500/20 transition-transform hover:-translate-y-1">
Jelajahi Produk
</a>
</div>
</header>
<section id="produk" class="max-w-6xl mx-auto px-6 py-16">
<div class="flex justify-between items-end mb-12">
<h3 class="text-3xl font-bold">Katalog Pilihan</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Produk 1 -->
<div class="group bg-white p-4 rounded-3xl shadow-sm border border-slate-100 hover:shadow-2xl hover:border-indigo-100 transition-all duration-500">
<div class="relative overflow-hidden rounded-2xl mb-4">
<img src="https://placehold.co/400x400/e0e7ff/4f46e5?text=Produk+1" alt="Produk 1" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
</div>
<h4 class="font-bold text-lg mb-1">Produk Premium 1</h4>
<p class="text-indigo-600 font-extrabold text-xl mb-4">Rp 50.000</p>
<button onclick="openOrderModal('Produk Premium 1', 'Rp 50.000')" class="w-full py-3 bg-slate-100 hover:bg-indigo-600 hover:text-white rounded-xl font-bold transition-all">Beli Sekarang</button>
</div>
<!-- Produk 2 -->
<div class="group bg-white p-4 rounded-3xl shadow-sm border border-slate-100 hover:shadow-2xl hover:border-indigo-100 transition-all duration-500">
<div class="relative overflow-hidden rounded-2xl mb-4">
<img src="https://placehold.co/400x400/e0e7ff/4f46e5?text=Produk+2" alt="Produk 2" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
</div>
<h4 class="font-bold text-lg mb-1">Produk Premium 2</h4>
<p class="text-indigo-600 font-extrabold text-xl mb-4">Rp 75.000</p>
<button onclick="openOrderModal('Produk Premium 2', 'Rp 75.000')" class="w-full py-3 bg-slate-100 hover:bg-indigo-600 hover:text-white rounded-xl font-bold transition-all">Beli Sekarang</button>
</div>
<!-- Produk 3 -->
<div class="group bg-white p-4 rounded-3xl shadow-sm border border-slate-100 hover:shadow-2xl hover:border-indigo-100 transition-all duration-500">
<div class="relative overflow-hidden rounded-2xl mb-4">
<img src="https://placehold.co/400x400/e0e7ff/4f46e5?text=Produk+3" alt="Produk 3" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
</div>
<h4 class="font-bold text-lg mb-1">Produk Premium 3</h4>
<p class="text-indigo-600 font-extrabold text-xl mb-4">Rp 100.000</p>
<button onclick="openOrderModal('Produk Premium 3', 'Rp 100.000')" class="w-full py-3 bg-slate-100 hover:bg-indigo-600 hover:text-white rounded-xl font-bold transition-all">Beli Sekarang</button>
</div>
<!-- Produk 4 -->
<div class="group bg-white p-4 rounded-3xl shadow-sm border border-slate-100 hover:shadow-2xl hover:border-indigo-100 transition-all duration-500">
<div class="relative overflow-hidden rounded-2xl mb-4">
<img src="https://placehold.co/400x400/e0e7ff/4f46e5?text=Produk+4" alt="Produk 4" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
</div>
<h4 class="font-bold text-lg mb-1">Produk Premium 4</h4>
<p class="text-indigo-600 font-extrabold text-xl mb-4">Rp 125.000</p>
<button onclick="openOrderModal('Produk Premium 4', 'Rp 125.000')" class="w-full py-3 bg-slate-100 hover:bg-indigo-600 hover:text-white rounded-xl font-bold transition-all">Beli Sekarang</button>
</div>
</div>
</section>
<div id="orderModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden items-center justify-center p-4 z-50">
<div class="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl animate-in fade-in zoom-in duration-300">
<h3 class="text-2xl font-bold mb-6">Detail Pesanan</h3>
<form id="orderForm" onsubmit="sendToWhatsApp(event)">
<input type="hidden" id="productName">
<div class="mb-5">
<label class="block text-sm font-semibold text-slate-600 mb-2">Nama Lengkap</label>
<input type="text" id="customerName" required class="w-full border-slate-200 border-2 rounded-xl p-3 focus:border-indigo-500 outline-none transition">
</div>
<div class="mb-5">
<label class="block text-sm font-semibold text-slate-600 mb-2">Jumlah</label>
<input type="number" id="quantity" min="1" value="1" required class="w-full border-slate-200 border-2 rounded-xl p-3 focus:border-indigo-500 outline-none transition">
</div>
<div class="mb-8">
<label class="block text-sm font-semibold text-slate-600 mb-2">Alamat Lengkap</label>
<textarea id="address" required class="w-full border-slate-200 border-2 rounded-xl p-3 focus:border-indigo-500 outline-none transition"></textarea>
</div>
<div class="flex gap-3">
<button type="button" onclick="closeOrderModal()" class="flex-1 bg-slate-100 hover:bg-slate-200 py-3 rounded-xl font-bold transition">Batal</button>
<button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-xl font-bold transition shadow-lg shadow-indigo-500/30">Kirim Pesanan</button>
</div>
</form>
</div>
</div>
<footer class="bg-white border-t py-16 px-6 text-center">
<h3 class="text-xl font-bold mb-6">Butuh Bantuan Lebih Lanjut?</h3>
<a href="https://wa.me/6281286230631" class="inline-flex items-center gap-3 bg-green-500 text-white px-8 py-4 rounded-full font-bold shadow-lg shadow-green-500/20 hover:scale-105 transition-transform">
<span>Hubungi via WhatsApp</span>
</a>
<p class="mt-12 text-slate-400 text-sm">© 2026 UMKM Modern. Semua Hak Dilindungi.</p>
</footer>
<script>
function openOrderModal(product, price) {
document.getElementById('productName').value = product;
document.getElementById('orderModal').classList.remove('hidden');
document.getElementById('orderModal').classList.add('flex');
}
function closeOrderModal() {
document.getElementById('orderModal').classList.add('hidden');
document.getElementById('orderModal').classList.remove('flex');
}
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;
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>
</body>
</html>
link : https://gemini.google.com/share/0cbc4b0e945d