Buat sebuah website profesional multi-page untuk bisnis produk tempe mentah bernama “Tempe Mentah Lancar Abadi”.
Website ini bukan marketplace dan bukan sistem e-commerce kompleks.
Tujuan utama website:
Mempromosikan produk tempe mentah Lancar Abadi.
Memperkenalkan produk kepada calon pelanggan.
Menjelaskan kualitas dan keunggulan tempe.
Menjelaskan proses pembuatan tempe dari awal sampai siap dijual.
Menjelaskan bahan dan alat yang digunakan.
Memberikan informasi tentang bisnis Lancar Abadi.
Menampilkan informasi kontak dan lokasi.
Mengarahkan calon pelanggan untuk melakukan konsultasi atau pemesanan melalui WhatsApp.
Jangan menggunakan backend, database, authentication, dashboard admin, atau sistem checkout.
Semua informasi produk disimpan secara statis di frontend.
Pemesanan dilakukan melalui tombol WhatsApp yang otomatis membuka chat WhatsApp dengan pesan yang sudah disiapkan.
Gunakan gaya:
Simple + Professional + Modern + Natural + UMKM Premium
Website harus terlihat seperti website bisnis sungguhan, bukan template sekolah.
Gunakan visual yang memberikan kesan:
bersih
higienis
alami
terpercaya
berkualitas
sederhana tetapi profesional
Gunakan banyak whitespace dan jangan memenuhi halaman dengan terlalu banyak elemen.
Warna
Gunakan palet yang berhubungan dengan tempe dan bahan alami:
Cream / off-white sebagai background utama
Cokelat kedelai sebagai warna utama
Hijau alami sebagai aksen
Dark brown untuk teks
Putih untuk card dan section tertentu
Hindari warna yang terlalu mencolok.
Typography
Gunakan font modern dan mudah dibaca.
Contoh:
Poppins
Inter
Plus Jakarta Sans
Gunakan hierarchy typography yang jelas antara heading, subheading, body text, dan button.
Website minimal memiliki halaman berikut:
/ — Beranda
/produk.html — Produk
/tentang.html — Tentang Lancar Abadi
/proses.html — Proses Pembuatan Tempe
/bahan-alat.html — Bahan & Alat
/keunggulan.html — Keunggulan Produk
/galeri.html — Galeri
/kontak.html — Kontak & Pemesanan
Gunakan navigasi yang konsisten di semua halaman.
Buat navbar profesional.
Logo/text:
LANCAR ABADI
Subtext:
Tempe Mentah Berkualitas
Menu:
Beranda
Produk
Tentang Kami
Proses Produksi
Bahan & Alat
Keunggulan
Galeri
Kontak
Tambahkan tombol CTA:
Pesan via WhatsApp
Pada desktop gunakan navbar horizontal.
Pada mobile gunakan hamburger menu.
Navbar harus responsive.
Buat hero section yang kuat.
Headline:
Tempe Mentah Berkualitas untuk Kebutuhan Sehari-hari
Subheadline:
Diproduksi dengan bahan pilihan dan proses yang terjaga untuk menghasilkan tempe yang berkualitas, segar, dan siap diolah.
CTA:
Pesan via WhatsApp
CTA kedua:
Lihat Produk
Hero menggunakan foto tempe sebagai visual utama.
Tambahkan section:
Kenapa Lancar Abadi?
Buat 3–4 card:
Bahan Pilihan
Proses Terjaga
Tempe Segar
Cocok untuk Berbagai Kebutuhan
Kemudian buat section:
Tentang Produk
Berikan penjelasan singkat tentang tempe mentah Lancar Abadi.
Tambahkan tombol:
Selengkapnya
Kemudian section:
Dari Kedelai Menjadi Tempe
Tampilkan proses secara singkat:
Kedelai → Perebusan → Pengupasan → Pencucian → Peragian → Fermentasi → Tempe Siap Dijual
Tambahkan tombol:
Lihat Proses Produksi
Kemudian section CTA:
Butuh Tempe Mentah?
“Untuk informasi produk, konsultasi pesanan, atau pemesanan langsung, hubungi Lancar Abadi melalui WhatsApp.”
Button:
Konsultasi via WhatsApp
Judul:
Produk Lancar Abadi
Tampilkan produk dalam card.
Contoh:
Tempe Mentah Lancar Abadi
Deskripsi: “Tempe mentah yang dibuat dari kedelai pilihan melalui proses produksi dan fermentasi yang terjaga.”
Informasi yang bisa ditampilkan:
Bahan utama
Kondisi produk
Kegunaan
Pilihan ukuran/kemasan jika tersedia
Jangan membuat fitur cart.
Jangan membuat quantity selector yang membutuhkan backend.
Tambahkan tombol:
Tanya Produk via WhatsApp
Ketika diklik, arahkan ke WhatsApp dengan template:
“Halo Lancar Abadi, saya ingin mengetahui informasi tentang produk tempe mentah.”
Judul:
Tentang Lancar Abadi
Ceritakan bisnis Lancar Abadi sebagai usaha yang memproduksi tempe mentah untuk memenuhi kebutuhan masyarakat.
Buat struktur:
Siapa kami
Apa yang kami lakukan
Komitmen kami
Nilai yang kami pegang
Gunakan bahasa yang natural dan tidak terlalu berlebihan.
Hindari klaim seperti “terbaik nomor satu” jika tidak memiliki bukti.
Tambahkan section:
Visi
“Menjadi usaha tempe yang dipercaya masyarakat melalui produk yang berkualitas dan pelayanan yang baik.”
Misi
Buat beberapa poin misi yang realistis.
Ini menjadi salah satu halaman utama website.
Judul:
Bagaimana Tempe Lancar Abadi Dibuat?
Tampilkan proses dalam bentuk timeline/step-by-step.
Tahap 1 — Pemilihan Kedelai
Jelaskan pentingnya memilih kedelai yang sesuai untuk produksi tempe.
Tahap 2 — Perendaman
Kedelai direndam agar mengalami perubahan yang diperlukan sebelum proses berikutnya.
Tahap 3 — Perebusan
Kedelai direbus untuk mempersiapkan biji kedelai sebelum tahap berikutnya.
Tahap 4 — Pengupasan & Pencucian
Kulit kedelai dipisahkan dan kedelai dibersihkan.
Tahap 5 — Pemberian Ragi
Kedelai yang sudah siap diberi ragi tempe secara merata.
Tahap 6 — Pengemasan
Kedelai yang sudah diberi ragi dikemas menggunakan kemasan yang sesuai.
Tahap 7 — Fermentasi
Kedelai dibiarkan mengalami proses fermentasi sampai terbentuk tempe.
Tahap 8 — Tempe Siap
Tempe yang sudah melalui proses fermentasi siap dipasarkan.
Gunakan ilustrasi/foto pada setiap tahap jika tersedia.
Jangan membuat klaim waktu fermentasi yang terlalu spesifik jika data produksi asli belum diberikan.
Judul:
Bahan dan Alat dalam Pembuatan Tempe
Bagi menjadi dua bagian.
Bahan
Contoh:
Kedelai
Ragi tempe
Air bersih
Bahan pendukung sesuai proses produksi
Alat
Contoh:
Wadah
Panci/peralatan perebusan
Saringan
Alat pengaduk
Tempat fermentasi
Kemasan tempe
Buat card sederhana dengan icon.
Tambahkan catatan:
“Bahan dan peralatan dapat disesuaikan dengan skala serta metode produksi.”
Judul:
Mengapa Memilih Lancar Abadi?
Buat beberapa poin:
Kualitas Bahan
Menggunakan bahan yang sesuai untuk menghasilkan tempe yang baik.
Proses Terjaga
Setiap tahap produksi dilakukan dengan perhatian terhadap kebersihan dan kualitas.
Produk Segar
Tempe dipasarkan dalam kondisi yang sesuai untuk kebutuhan pelanggan.
Cocok untuk Berbagai Kebutuhan
Dapat digunakan untuk kebutuhan rumah tangga, usaha kuliner, maupun kebutuhan lainnya.
Jangan membuat klaim kesehatan atau kualitas yang tidak dapat dibuktikan.
Buat gallery grid modern.
Kategori foto:
Produk
Proses Produksi
Bahan
Aktivitas Produksi
Kemasan
Gunakan placeholder image terlebih dahulu jika foto asli belum tersedia.
Pastikan struktur HTML/CSS mudah diedit sehingga foto placeholder dapat diganti dengan foto asli dengan mudah.
Tambahkan lightbox sederhana menggunakan JavaScript.
Judul:
Hubungi Lancar Abadi
Informasi:
Alamat
Jam pelayanan
Informasi pemesanan
Tambahkan CTA besar:
Pesan Tempe via WhatsApp
Buat tombol WhatsApp menggunakan format:
https://wa.me/628XXXXXXXXXX?text=…
Nomor WhatsApp jangan di-hardcode ke banyak file.
Simpan nomor WhatsApp di satu konfigurasi JavaScript agar mudah diganti.
Website tidak menggunakan backend.
Semua komunikasi menggunakan WhatsApp.
Buat beberapa jenis tombol WhatsApp:
Konsultasi
Pesan otomatis:
“Halo Lancar Abadi, saya ingin berkonsultasi mengenai produk tempe mentah.”
Tanya Produk
“Halo Lancar Abadi, saya ingin mengetahui informasi mengenai produk tempe mentah.”
Pemesanan
“Halo Lancar Abadi, saya ingin melakukan pemesanan tempe mentah. Mohon informasi mengenai ketersediaan dan pemesanannya.”
Jika tombol berada di halaman produk, tambahkan nama produk ke pesan otomatis.
Contoh:
“Halo Lancar Abadi, saya ingin memesan Tempe Mentah Lancar Abadi. Mohon informasi mengenai harga dan ketersediaannya.”
Footer harus konsisten di semua halaman.
Isi:
LANCAR ABADI
“Tempe Mentah Berkualitas”
Menu singkat:
Beranda
Produk
Tentang Kami
Proses Produksi
Kontak
Kontak:
Alamat
Media sosial jika tersedia
Copyright:
© 2026 Lancar Abadi. All rights reserved.
Gunakan:
HTML5
CSS3
JavaScript ES6+
Tidak perlu backend.
Tidak perlu database.
Tidak perlu login.
Tidak perlu framework berat kecuali memang diperlukan.
Prioritaskan kode yang:
mudah dipahami
mudah diedit
terstruktur
reusable
responsive
ringan
cepat loading
Struktur file yang disarankan:
lancar-abadi/ │ ├── index.html ├── produk.html ├── tentang.html ├── proses.html ├── bahan-alat.html ├── keunggulan.html ├── galeri.html ├── kontak.html │ ├── css/ │ └── style.css │ ├── js/ │ └── script.js │ └── assets/ ├── images/ └── icons/
Website wajib optimal untuk:
Smartphone
Tablet
Laptop
Desktop
Prioritaskan mobile-first design.
Pastikan:
navbar tidak rusak
teks tidak keluar layar
gambar responsive
button mudah ditekan
card menyesuaikan ukuran layar
spacing tetap nyaman
gallery berubah menjadi grid yang sesuai
Gunakan animasi ringan dan profesional.
Contoh:
fade-up saat section muncul
hover effect pada card
smooth scrolling
button hover
image hover
navbar transition
Jangan menggunakan animasi berlebihan.
Website harus tetap terasa cepat.
Setiap halaman memiliki:
title
meta description
heading hierarchy
alt text pada gambar
semantic HTML
Contoh title:
| Tempe Mentah Lancar Abadi | Tempe Berkualitas |
Gunakan keyword secara natural seperti:
“tempe mentah” “tempe Lancar Abadi” “produk tempe” “pembuatan tempe” “tempe berkualitas”
Jangan melakukan keyword stuffing.
Jangan membuat website terlihat seperti marketplace.
Tidak perlu:
Shopping cart
Checkout
Login
Register
Dashboard
Database
Payment gateway
Order management
Backend API
Website ini adalah company profile + product showcase + edukasi + WhatsApp ordering.
Alur pengguna:
Google/Search/Media Sosial ↓ Website Lancar Abadi ↓ Melihat Produk ↓ Mengenal Lancar Abadi ↓ Melihat Proses Produksi ↓ Melihat Keunggulan ↓ Tertarik ↓ Klik WhatsApp ↓ Konsultasi / Pesan ↓ Transaksi dilakukan melalui WhatsApp
Buat website yang ketika dibuka memberikan kesan:
“Ini website usaha tempe yang benar-benar serius dan profesional.”
Tetapi tetap sederhana sehingga pemilik usaha dapat mengelolanya tanpa sistem yang rumit.
Kode harus bersih, modular, mudah dikembangkan, dan mudah dipindahkan dari GitHub Pages ke hosting cPanel di kemudian hari.
Jangan membuat backend atau database sekarang.
Siapkan struktur kode agar suatu saat fitur seperti:
katalog lebih lengkap
sistem pemesanan
dashboard
database
pembayaran online
dapat ditambahkan jika bisnis Lancar Abadi sudah berkembang.
This project was built with Lovable.
Continue developing this project in the Lovable editor.
main on GitHub and your changes sync back into Lovable, ready for your next prompt.Prefer working locally? You need Node.js and npm — install with nvm.
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev