<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Madu Hutan Asli Cap MATOA - Nusantara</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-color: #1b4332; /* Hijau Hutan */ --secondary-color: #d4a373; /* Emas Madu */ --dark-color: #2b2d42; --light-color: #f8f9fa; } body { background-color: var(--light-color); color: var(--dark-color); line-height: 1.6; } /* Header / Navbar */ header { background-color: var(--primary-color); color: white; padding: 15px 20px; text-align: center; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } header h1 { font-size: 1.5rem; letter-spacing: 2px; } /* Hero Section */ .hero { margin-top: 60px; padding: 80px 20px; text-align: center; background: linear-gradient(rgba(27, 67, 50, 0.85), rgba(27, 67, 50, 0.95)), url('LINK_FOTO_TOKO_ANDA') no-index center/cover; color: white; } .hero img { width: 180px; height: auto; margin-bottom: 20px; border-radius: 12px; } .hero h2 { font-size: 2.5rem; margin-bottom: 15px; color: var(--secondary-color); } .hero p { font-size: 1.2rem; max-width: 600px; margin: 0 auto 30px auto; } /* Buttons */ .btn { display: inline-block; background-color: var(--secondary-color); color: var(--primary-color); padding: 15px 30px; text-decoration: none; font-weight: bold; border-radius: 30px; font-size: 1.1rem; transition: 0.3s ease; box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4); } .btn:hover { transform: translateY(-3px); background-color: #e6b88a; } /* Pricing Section */ .pricing { padding: 60px 20px; max-width: 1000px; margin: 0 auto; text-align: center; } .pricing h3 { font-size: 2rem; margin-bottom: 40px; color: var(--primary-color); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; transition: 0.3s; } .card:hover { transform: translateY(-5px); border-color: var(--secondary-color); } .card h4 { font-size: 1.5rem; margin-bottom: 10px; color: var(--primary-color); } .card .price { font-size: 1.8rem; font-weight: bold; color: var(--dark-color); margin-bottom: 15px; } .card p { color: #666; font-size: 0.95rem; } /* Footer */ footer { background-color: var(--primary-color); color: white; text-align: center; padding: 40px 20px; margin-top: 60px; } footer p { margin-bottom: 15px; } .footer-links a { color: var(--secondary-color); text-decoration: none; margin: 0 10px; font-weight: bold; } @media (max-width: 768px) { .hero h2 { font-size: 2rem; } .hero p { font-size: 1rem; } } </style> </head> <body> <header> <h1>CAP MATOA NUSANTARA</h1> </header> <section class="hero"> <img src="LINK_FOTO_LOGO_ANDA" alt="Logo Madu Cap Matoa"> <h2>Madu Hutan Asli 100% Murni</h2> <p>Dipanen langsung dari pedalaman hutan Nusantara oleh lebah liar jenis <strong>Apis Dorsata</strong>. Menawarkan kemurnian rasa dan khasiat alami terbaik untuk stamina keluarga Anda.</p> <a href="https://wa.me/6285321521555?text=Halo%20Admin%20Matoa%2C%20saya%20tertarik%20ingin%20pesan%20Madu%20Hutan%20Aslinya" class="btn" target="_blank">📱 PESAN SEKARANG VIA WHATSAPP</a> </section> <section class="pricing"> <h3>Pilihan Ukuran Kemasan</h3> <div class="grid"> <div class="card"> <h4>250 Gram</h4> <div class="price">Rp 80.000</div> <p>Pas untuk uji coba, praktis, dan mudah dibawa ke mana saja untuk konsumsi pribadi.</p> </div> <div class="card"> <h4>500 Gram</h4> <div class="price">Rp 120.000</div> <p><strong>Paling Laris!</strong> Ukuran paling ideal untuk kebutuhan rutin keluarga kecil Anda.</p> </div> <div class="card"> <h4>1000 Gram</h4> <div class="price">Rp 170.000</div> <p>Porsi puas sekeluarga, paling hemat, dan untung banyak untuk stok kesehatan bulanan.</p> </div> </div> </section> <footer> <p>© 2026 Madu Hutan Asli Cap MATOA. All Rights Reserved.</p> <p>Madu Asli, Hidup Sehat, Ingat Cap MATOA! 🍯</p> <div class="footer-links"> <a href="https://linktr.ee/maduhutanaslicapmatoa" target="_blank">Linktree</a> | <a href="https://wa.me/6285321521555" target="_blank">WhatsApp Admin</a> </div> </footer> </body> </html>
11d ago
I can see you've shared a complete landing page for Madu Hutan Asli Cap MATOA (pure forest honey). Before I build it, I want to make sure I deliver exactly what you need.
11d ago
No need for clarification; just proceed with your best judgment.
11d ago
I'll build a polished version of this honey product landing page. Let me first explore the project structure.
Let me read the key files.
I have a clear picture. Let me generate the product imagery, then build a polished landing page with a forest-green and honey-gold palette.
Now let me set up the theme colors and fonts, then build the page components.
Now let me update the layout with proper fonts and metadata.
Now update the font-heading in globals.css to use Playfair, then build the page.
Now let me build the page components.
Now the page that assembles everything.
Let me verify it renders correctly in the browser.
The landing page renders beautifully and is fully functional. I've rebuilt your Cap MATOA honey landing page as a polished Next.js app with a forest-green and honey-gold palette, an elegant Playfair Display serif for headings, and real generated product photography in the hero and features sections.
Key improvements over the original HTML:
- Modular components (header, hero, features, pricing, footer) with a sticky nav and proper anchor links to Keunggulan, Harga, and Kontak.
- Working WhatsApp ordering — every "Pesan" button deep-links to WhatsApp with a pre-filled message, and each pricing card passes its specific size into the message.
- Real imagery instead of broken placeholder links, plus a new "Kenapa Cap Matoa?" features section highlighting purity, the Apis Dorsata bees, and health benefits.
- Responsive, accessible, and SEO-friendly with proper metadata in Indonesian.
11d ago