landing Page UMKM 3
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">
<meta name="description" content="Temukan koleksi produk UMKM berkualitas premium dengan harga terjangkau. Layanan cepat, terpercaya, dan siap kirim langsung ke lokasi Anda.">
<meta name="keywords" content="UMKM, Produk Lokal, Toko Online, Belanja Murah, Kualitas Premium, Produk Eksklusif">
<meta name="author" content="UMKM Pro">
<!-- Open Graph / Social Media Preview -->
<meta property="og:title" content="UMKM Pro | Koleksi Eksklusif & Produk Berkualitas">
<meta property="og:description" content="Dapatkan produk UMKM pilihan dengan harga terbaik. Pesan mudah via WhatsApp!">
<meta property="og:image" content="https://placehold.co/1200x630/6366f1/ffffff?text=UMKM+PRO">
<meta property="og:type" content="website">
<meta property="og:site_name" content="UMKM Pro">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="UMKM Pro | Koleksi Eksklusif & Produk Berkualitas">
<meta name="twitter:description" content="Belanja produk lokal kualitas premium. Mudah, cepat, dan terpercaya.">
<meta name="twitter:image" content="https://placehold.co/1200x630/6366f1/ffffff?text=UMKM+PRO">
<title>UMKM Pro | Koleksi Eksklusif & Produk Berkualitas</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hover-lift:hover { transform: translateY(-8px); }
.gradient-text { background: linear-gradient(90deg, #4f46e5, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
</head>
<body class="bg-slate-50 text-slate-900 selection:bg-indigo-200">
<nav class="fixed w-full z-50 glass border-b border-white/20">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-2xl font-black gradient-text italic tracking-tighter">UMKM PRO</h1>
<a href="https://wa.me/6281286230631"
class="hidden md:flex bg-slate-900 hover:bg-indigo-600 text-white px-6 py-2.5 rounded-full font-bold transition-all hover:scale-105 shadow-xl shadow-indigo-500/20 text-sm">
Hubungi Kami
</a>
</div>
</nav>
<header class="relative pt-32 pb-24 overflow-hidden">
<div class="absolute top-0 right-0 w-1/2 h-full bg-indigo-50 rounded-l-[100px] -z-10"></div>
<div class="max-w-6xl mx-auto px-6">
<div class="animate-fade-in text-center md:text-left max-w-2xl">
<span class="inline-block py-1 px-4 rounded-full bg-indigo-100 text-indigo-700 font-bold text-xs uppercase tracking-widest mb-6">Produk Terbaik 2026</span>
<h2 class="text-6xl md:text-7xl font-extrabold mb-8 text-slate-900 leading-[1.1] tracking-tight">
Kualitas Premium, <span class="gradient-text">Harga Teman</span>.
</h2>
<p class="text-xl text-slate-600 mb-10 leading-relaxed">Nikmati pengalaman belanja produk UMKM berkualitas tinggi langsung dari pengrajin lokal dengan layanan kilat.</p>
<div class="flex gap-4 justify-center md:justify-start">
<a href="#katalog" class="bg-indigo-600 text-white px-10 py-4 rounded-2xl font-bold hover:bg-indigo-700 shadow-2xl shadow-indigo-500/30 transition-transform hover:scale-105">
Lihat Katalog
</a>
</div>
</div>
</div>
</header>
<section id="katalog" class="max-w-6xl mx-auto px-6 py-20">
<div class="flex flex-col items-center mb-16">
<h3 class="text-4xl font-bold mb-4">Produk Pilihan</h3>
<div class="h-1.5 w-20 bg-indigo-600 rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Product Cards -->
<div class="hover-lift group bg-white p-4 rounded-3xl shadow-lg shadow-slate-200/50 border border-slate-100">
<div class="relative overflow-hidden rounded-2xl mb-6">
<img src="https://placehold.co/400x400/6366f1/ffffff?text=Produk+1" alt="Produk 1" class="w-full h-64 object-cover">
</div>
<h4 class="font-bold text-lg mb-1">Eksklusif Product A</h4>
<p class="text-indigo-600 font-black text-xl mb-6">Rp 75.000</p>
<button onclick="openModal('Eksklusif Product A', 'Rp 75.000')" class="w-full py-3.5 bg-slate-900 text-white rounded-xl font-bold transition hover:bg-indigo-600">Beli Sekarang</button>
</div>
<div class="hover-lift group bg-white p-4 rounded-3xl shadow-lg shadow-slate-200/50 border border-slate-100">
<div class="relative overflow-hidden rounded-2xl mb-6">
<img src="https://placehold.co/400x400/8b5cf6/ffffff?text=Produk+2" alt="Produk 2" class="w-full h-64 object-cover">
</div>
<h4 class="font-bold text-lg mb-1">Limited Edition B</h4>
<p class="text-indigo-600 font-black text-xl mb-6">Rp 120.000</p>
<button onclick="openModal('Limited Edition B', 'Rp 120.000')" class="w-full py-3.5 bg-slate-900 text-white rounded-xl font-bold transition hover:bg-indigo-600">Beli Sekarang</button>
</div>
<div class="hover-lift group bg-white p-4 rounded-3xl shadow-lg shadow-slate-200/50 border border-slate-100">
<div class="relative overflow-hidden rounded-2xl mb-6">
<img src="https://placehold.co/400x400/ec4899/ffffff?text=Produk+3" alt="Produk 3" class="w-full h-64 object-cover">
</div>
<h4 class="font-bold text-lg mb-1">Premium Choice C</h4>
<p class="text-indigo-600 font-black text-xl mb-6">Rp 95.000</p>
<button onclick="openModal('Premium Choice C', 'Rp 95.000')" class="w-full py-3.5 bg-slate-900 text-white rounded-xl font-bold transition hover:bg-indigo-600">Beli Sekarang</button>
</div>
<div class="hover-lift group bg-white p-4 rounded-3xl shadow-lg shadow-slate-200/50 border border-slate-100">
<div class="relative overflow-hidden rounded-2xl mb-6">
<img src="https://placehold.co/400x400/10b981/ffffff?text=Produk+4" alt="Produk 4" class="w-full h-64 object-cover">
</div>
<h4 class="font-bold text-lg mb-1">Best Value D</h4>
<p class="text-indigo-600 font-black text-xl mb-6">Rp 50.000</p>
<button onclick="openModal('Best Value D', 'Rp 50.000')" class="w-full py-3.5 bg-slate-900 text-white rounded-xl font-bold transition hover:bg-indigo-600">Beli Sekarang</button>
</div>
</div>
</section>
<footer class="bg-slate-900 text-white py-20 px-6 mt-20">
<div class="max-w-4xl mx-auto text-center">
<h3 class="text-3xl font-bold mb-8">Siap untuk Memesan?</h3>
<p class="text-slate-400 mb-10 max-w-md mx-auto">Kami siap melayani kebutuhan Anda dengan sepenuh hati. Silakan hubungi admin kami melalui WhatsApp.</p>
<a href="https://wa.me/6281286230631" class="inline-flex items-center gap-3 bg-indigo-600 text-white px-10 py-5 rounded-full font-bold shadow-xl shadow-indigo-600/30 hover:scale-105 transition-transform">
<span>Chat via WhatsApp</span>
</a>
<p class="mt-16 text-slate-500 text-sm">© 2026 UMKM PRO. All rights reserved.</p>
</div>
</footer>
<div id="modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
<div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
<div class="bg-white w-full max-w-md rounded-3xl p-8 relative shadow-2xl animate-fade-in">
<h3 class="text-2xl font-bold mb-6">Detail Pesanan</h3>
<form onsubmit="handleSend(event)">
<input type="hidden" id="itemInput">
<div class="mb-4">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Nama Lengkap</label>
<input type="text" id="nameInput" required class="w-full bg-slate-50 border-0 p-4 rounded-xl focus:ring-2 ring-indigo-500 outline-none">
</div>
<div class="mb-4">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Alamat Pengiriman</label>
<textarea id="addressInput" required class="w-full bg-slate-50 border-0 p-4 rounded-xl focus:ring-2 ring-indigo-500 outline-none h-24"></textarea>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold hover:bg-indigo-700 mt-4 shadow-lg shadow-indigo-600/20">
Kirim Pesanan
</button>
</form>
</div>
</div>
<script>
function openModal(item, price) {
document.getElementById('itemInput').value = item;
document.getElementById('modal').classList.remove('hidden');
document.getElementById('modal').classList.add('flex');
}
function closeModal() {
document.getElementById('modal').classList.add('hidden');
document.getElementById('modal').classList.remove('flex');
}
function handleSend(e) {
e.preventDefault();
const item = document.getElementById('itemInput').value;
const name = document.getElementById('nameInput').value;
const address = document.getElementById('addressInput').value;
const phone = "6281286230631";
const text = `Halo Admin, saya ingin memesan:\nProduk: ${item}\nNama: ${name}\nAlamat: ${address}`;
const url = `https://wa.me/${phone}?text=${encodeURIComponent(text)}`;
window.open(url, '_blank');
closeModal();
}
</script>
</body>
</html>
Link
https://gemini.google.com/share/dc8a9e925391