Business & Finance AI Prompt

Template Landing Page

Membuat template website landing page statis dengan HTML, CSS, JS, Bootstrap, dan animasi, fokus pada Paket Super Murah FeedDesignID. Perfectly crafted free system prompt or custom instructions for ChatGPT, Gemini, and Claude chatbots and models.

Buat template website landing page statis berdasarkan spesifikasi berikut:

🧱 Tech Stack & Struktur:
- Gunakan HTML5, CSS3 eksternal, dan JavaScript internal hanya jika perlu untuk satu halaman.
- Manfaatkan Bootstrap 5 untuk grid dan komponen dasar.
- Sertakan CDN library tambahan untuk keindahan visual:
  - Animasi: AOS.js
  - Carousel/Slider: Swiper.js
  - Ikon: pilih salah satu antara Material Icons atau Font Awesome.
- Semua gambar menggunakan link dummy (placeholder) atau gambar yang akan diupload.
- Struktur kode harus semantic, rapi, mudah dikustomisasi.
- Beri komentar penanda untuk setiap section pada HTML.
- Jangan menggunakan framework frontend seperti React/Vue; hanya HTML, CSS, JS.
- Proyek harus bisa langsung dijalankan dari index.html tanpa backend/server.

šŸ–¼ļø Desain & UX/UI:
- Desain simple, user-friendly, mobile-friendly, smooth dan menarik.
- Tambahkan animasi ringan yang enak dilihat.
- Pilih warna yang selaras dengan tema hijau pastel, mudah untuk diganti jika perlu.
- Gunakan Offcanvas Navbar responsif.
- Tambahkan ikon WhatsApp fixed di pojok kanan bawah.
- Pastikan optimasi penuh untuk device mobile tanpa bug atau layout berantakan.

šŸ“„ Halaman Website:
Buat tiga halaman:
- index.html (Landing Page)
- semua_template.html (Menampilkan semua template dengan fitur filter kategori)
- detail_template.html (Detail template dengan slider gambar dan info produk)

šŸ“Œ Struktur Section pada index.html:
- Navbar: berisi icon, title, dan subtitle.
- Hero Section: posisi center atau kiri dengan ilustrasi atau gambar background.
- Section Template Pilihan dengan tombol 'Lihat Semua Template'.
- Tentang Paket Website Super Murah.
- Keunggulan: kartu yang berisi ikon, judul, dan deskripsi.
- Penawaran Spesial Template.
- CTA kedua.
- FAQ section.
- Footer.

šŸ“‹ Spesifikasi Halaman Khusus:
- semua_template.html:
  - Tampilkan semua template dalam bentuk card berisi Judul, Deskripsi singkat, kategori, jumlah pengguna, badge, dan tombol lihat.
  - Filter menggunakan tombol kategori berdasarkan Isotope JS (gunakan fungsi kategori saja, tanpa filter harga).

- detail_template.html:
  - Gambar utama dan 4 gambar thumbnail yang bisa dijadikan gambar utama; gunakan slider jika gambar lebih dari 4.
  - Info produk: nama, deskripsi, kode template.
  - Tombol "Pesan Template" yang mengarah ke WhatsApp.
  - Tombol redirect ke "Lihat Preview Template".
  - Tidak perlu form pemesanan.

Tema: Listing Template dengan warna utama hijau pastel, gaya desain simple dan menarik, fokus pada kenyamanan mobile.

Bisnis "FeedDesignID" menyediakan Paket Website Super Murah untuk berbagai kategori bisnis seperti F&B, Laundry, Tour & Travel, dll. Website ini bertujuan memudahkan user memilih template sesuai kebutuhan bisnis mereka secara nyaman dan menarik.

# Langkah-langkah
1. Siapkan struktur folder dan file: index.html, semua_template.html, detail_template.html, styles.css, dan script.js jika perlu.
2. Tambahkan CDN Bootstrap 5, AOS.js, Swiper.js, dan ikon pilihan di setiap halaman.
3. Implementasikan Navbar offcanvas responsif dan icon WhatsApp fix di pojok kanan bawah.
4. Bangun section landing page index.html sesuai urutan dan berikan komentar penanda.
5. Buat halaman semua_template.html dengan tampilan card dan filter kategori menggunakan Isotope JS.
6. Buat halaman detail_template.html dengan slider gambar, info produk, dan tombol aksi.
7. Gunakan warna hijau pastel sebagai warna utama yang mudah diganti.
8. Pastikan responsivitas dan optimasi mobile.
9. Tambahkan animasi ringan menggunakan AOS.js pada elemen yang tepat.

# Format Output
Berikan kode lengkap dalam file terpisah sesuai struktur halaman (index.html, semua_template.html, detail_template.html, styles.css, script.js), dengan komentar dan rapi agar mudah digunakan langsung.

# Contoh pengkodean
- Gunakan komentar HTML seperti <!-- Navbar Section -->, <!-- Hero Section -->, dll.
- Contoh tombol filter kategori:
<button data-filter="*">Semua</button>
<button data-filter=".fb">F&B</button>
<button data-filter=".laundry">Laundry</button>

# Catatan
- Jangan sertakan backend atau form.
- Semua fungsi JavaScript harus internal dan minimal.
- Semua gambar placeholder bisa menggunakan https://via.placeholder.com/ atau Unsplash.
- Pastikan elemen navigasi dan tombol mudah digunakan di device mobile.

Create your own custom GPT chatbot with your own data and knowledge. Use for customer support, internal knowledge sharing, or anything else you can imagine.

Customer avatarCustomer avatarCustomer avatarCustomer avatarCustomer avatar
Loved by 75k+ users
OSZAR »