Dokumen kerja untuk eksekusi frontend. Isinya cuma dua hal: (1) respons ke feedback reviewer, (2) restrukturisasi narasi & urutan section. Semua temuan diverifikasi ke src/pages/index.astro & src/data/prompts.ts.
"tampilan card jalan + yg di bawah itu redundan. kenapa g langsung contoh list sample showcase/prompt? aku udah ngasih contoh di promptstash, preview websitenya sudah langsung animated. ini static"
Reviewer benar, dan sebenarnya lebih benar dari yang dia sadari. Setelah ditelusuri sumbernya, yang bikin terasa redundan bukan marquee vs showcase — tapi delapan item fiktif yang sama dirender di tiga tempat berbeda. Kalau solusinya cuma "hapus salah satu", redundansi hilang sesaat tapi akar masalahnya tetap tinggal.
Marquee memakai screenshot asli dari katalog, tapi diberi nama karangan:
| File aset (asli) | Ditampilkan sebagai | Tier ditampilkan | Realita |
|---|---|---|---|
| candor.png | Aurora Hero | Hero | Candor — Full LP |
| wellspring.png | Pricing Pro | Section | belum ada di katalog |
| aethera.png | Studio Full | Full LP | Aethera |
| pylon.png | Fintech Hero | Hero | Pylon |
| modex.png | Bento Feat | Section | belum ada di katalog |
| kilt.png | Folio Dark | Full LP | Kilt |
| vris-r1.png | Web3 Neon | Hero | VRIS R1 — Full LP |
| vox.png | CTA Glow | Section | belum ada di katalog |
Tiga nama pertama — Aurora Hero / Pricing Pro / Studio Full — muncul lagi di demo search dalam kartu Features ke-3, dan Aurora Hero muncul ketiga kalinya di demo "How it works" lengkap dengan filename aurora-hero.jsx.
Persis inilah yang dirasakan reviewer: marquee menampilkan Aurora Hero, lalu tepat di bawahnya Features menampilkan Aurora Hero lagi. Bukan "mirip" — itu item yang sama, dan item itu tidak ada di katalog.
Marquee dan showcase bukan duplikat kalau isinya jujur dan tugasnya dipisah:
| Marquee (atas) | Showcase (bawah) | |
|---|---|---|
| Tugas AIDA | Attention — ambient | Desire — bisa dievaluasi |
| Pesannya | "isinya banyak & bagus" | "ini yang kamu dapat" |
| Interaksi | tidak diklik, jalan sendiri | hover → Copy / View Detail |
| Isi | item asli, nama asli, tier asli | 9 item asli (sudah benar hari ini) |
| Aturan kunci | Marquee dan grid tidak boleh beririsan — ambil 8 item yang tidak ada di grid bawah | |
Dengan aturan itu, redundansi hilang secara struktural — bukan karena satu section dihapus, tapi karena keduanya menampilkan barang berbeda dan dua-duanya nyata. Bonus: user melihat 17 item, bukan 9.
Poin kedua reviewer valid dan lebih mudah diperbaiki daripada kelihatannya. Di public/assets/hero-downloads/ sudah ada 6 file .mp4 — elan, recall, velo, trainfold, beyond-horizon, pylon. Sudah di-ship, tapi tidak pernah dipakai di homepage. Preview sekarang 100% background-image PNG.
Fix: untuk 6 item yang punya video, ganti jadi <video muted loop playsinline> dengan PNG sebagai poster — tidak ada regresi untuk yang belum punya video, dan tidak ada penalti loading karena poster tampil duluan. Prioritaskan di grid showcase (tempat orang mengevaluasi), bukan di marquee.
Badge "new", headline pendek, lead yang menyebut tool yang dikenal audiens (Cursor / v0 / Lovable), lalu marquee yang langsung memperlihatkan barangnya. Ini bagian terbaik halaman.
Slot kedua paling berharga diisi kapabilitas produk, bukan relevansi ke pembaca. "Ini buat siapa" baru muncul di section ke-7, "gimana cara kerjanya" di section ke-5.
Showcase melakukan tugasnya. Tapi setelah itu tidak ada elemen yang mengubah minat jadi keinginan membeli:
"Log In", "Go to Library", "Browse the Library", "See How It Works", "Unlock More Prompts", "Start Free", "View Showcase", "Copy Prompt". Ditambah 5 link href="#" yang masih mati.
Ketiga kartu Features membuka dengan Feature, bukan Benefit. Untuk audiens pemula yang belum punya kosakata teknis, urutan itu terbalik. Prinsip FAB: Benefit di headline, Feature di badan, Advantage jadi penutup.
"A 120+ component library, ready to copy"
Browse hero sections, pricing tables, dashboards, and more…
"Landing page kamu jadi sore ini — bukan bulan depan"
47 prompt terkurasi yang sudah diuji. Pilih satu, copy, tempel. Nggak perlu mulai dari halaman kosong.
"Every Hero ships with its assets"
Image & video prompts, plus downloadable assets…
"Nggak akan mentok nyari gambar"
Tiap Hero datang lengkap sama prompt gambar & video plus asetnya. Ini yang nggak dikasih tempat lain — mereka cuma jual prompt polos.
"Search the whole library instantly"
Search bukan alasan orang membeli — itu ekspektasi dasar. Slot ini salah satu dari tiga tempat termahal di halaman.
Ganti dengan pembanding: "Kenapa esprompt, bukan yang lain"
Slot inilah tempat positioning "alternative to motionsites.ai / 21st.dev" dari plan seharusnya hidup. Search turunkan jadi bagian dari section Showcase.
Tidak ada satu kalimat pun yang menyebut rasa sakit target user: halaman kosong yang bikin macet, AI yang keluarin hasil generik, bingung mendeskripsikan yang diinginkan. Satu-satunya sentuhan ("Skip the blank page") terkubur di kartu ke-2 section ke-7. Untuk audiens pemula, problem adalah hook terkuat — dan sekarang tidak dipakai sama sekali.
Dalam satu halaman ada tiga angka berbeda: hero "Thousands of curated prompts", Features "A 120+ component library", showcase "+30 more prompts waiting inside". Isi prompts.ts sebenarnya 47 entri.
Fix: satu angka jujur di ketiga tempat. 47 prompt siap pakai justru lebih kredibel — angka spesifik terbaca sebagai hitungan asli, angka bulat besar terbaca sebagai marketing.
Hasil grep di index.astro: 0 match untuk meta description, og:*, twitter:*, canonical, favicon. Yang paling merugikan: <title> masih label kerja internal — "esprompt · Prompts into UI (Version C · Gradient / Reactbits-style)". Itulah judul yang tampil di Google dan di tiap preview link yang dishare.
Fix (≈20 menit): title bersih dengan keyword positioning, meta description 150–160 karakter, og:title/description/image, favicon, canonical, plus <html lang> yang ikut toggle bahasa.
Baris 519: onclick="alert('Mobile menu')". Di bawah 900px .navlinks dan CTA nav di-hide — user mobile tidak punya jalan navigasi sama sekali. Untuk target Indonesia yang mayoritas mobile, ini blocker sungguhan.
Terjemahan ID sudah lengkap dan jalan — tapi user Indonesia harus scroll melewati seluruh halaman berbahasa Inggris untuk menemukannya. Naikkan ke nav, dan pertimbangkan default ID via navigator.language.
5× href="#" masih terpasang, dan 8 label CTA berbeda untuk ~2 tujuan. Kunci jadi 1 primer + 1 sekunder, arahkan semua ke tujuan nyata.
Judulnya menjanjikan diferensiasi, isinya segmentasi audiens. Isinya bagus — namanya yang salah. Ganti jadi "Untuk siapa", lalu pakai nama "Kenapa esprompt" untuk section pembanding yang baru.
Tiga dari enam pertanyaan — beda tier, aset Hero, cara pricing — adalah informasi penjualan inti, bukan objection. Semuanya tertutup by default. Naikkan jadi section sungguhan; sisakan FAQ untuk keraguan saja.
Plan eksplisit: hindari istilah teknis. Sekarang ada UI, component library, Full LP (singkatan tanpa penjelasan), dan aurora-hero.jsx di demo. Ganti "Full LP" → "Halaman penuh", "component" → "bagian halaman", sembunyikan nama file.
Sekarang:
Usulan — kuning = dipindah, hijau = baru:
| # | Section | Status | Kenapa di posisi ini |
|---|---|---|---|
| 1 | Hero + baris problem | ada revisi copy | Attention. Tambah satu baris problem di atas headline (PAS). |
| 2 | Marquee | revisi isi | Data asli, tidak beririsan dengan grid showcase. |
| 3 | Logo strip AI tools | pindah dari #6 | Trust paling murah, konvensinya tepat di bawah hero. Menjawab "apakah nyambung ke tool saya" sebelum user sempat ragu. |
| 4 | Untuk siapa eks "Why esprompt" | pindah dari #7 | Perubahan paling berdampak. Kualifikasi harus datang sebelum kapabilitas — user perlu tahu ini untuk dia sebelum peduli fiturnya. |
| 5 | Cara kerja (3 langkah) | pindah naik | Mekanisme sebelum bukti. Sekarang user lihat 9 kartu "Copy Prompt" sebelum tahu copy itu ngasih apa. Hapus aurora-hero.jsx, ganti item asli. |
| 6 | 3 Tier — Hero / Section / Halaman Penuh | BARU | Taksonomi yang dijual di seluruh halaman tapi tidak pernah dijelaskan. Harus sebelum Showcase supaya tag di kartu punya arti. |
| 7 | Showcase | + animated | Desire. Jauh lebih terbaca karena tier sudah dijelaskan di atasnya. Tambah preview video untuk 6 item ber-.mp4. |
| 8 | Kenapa esprompt + metrik | BARU | Slot positioning "alternative to motionsites / 21st.dev". Digabung dengan metrik kapabilitas (47 prompt · 12 Hero beraset · 8 tool) — keduanya menjawab "kenapa harus percaya", satu kualitatif satu kuantitatif. |
| 9 | Harga — 2 kartu | BARU | Titik Desire→Action. Yearly + Lifetime, sama persis dengan /billing. Plus route publik /pricing. |
| 10 | FAQ (dirampingkan) | ada revisi | Sisakan objection saja. Perbaiki FAQ #6 yang masih bilang harga belum final. |
| 11 | CTA + footer legal | ada | Penutup. Lepas id="harga" — id itu sekarang milik section harga beneran. |
Halaman sekarang bercerita dengan urutan "ini apa → ini bisa apa → lihat barangnya → oh iya, cara pakainya begini → oh iya, ini buat kamu". Urutan usulan menceritakan "ini apa → ini nyambung sama tool kamu → ini buat kamu → begini cara kerjanya → ini pilihannya → lihat barangnya → kenapa kami bukan yang lain → segini harganya → ada pertanyaan? → mulai". Yang kedua percakapan penjualan; yang pertama daftar fitur.
Efek ke rantai AIDA: dengan harga terbuka, metrik kapabilitas, dan preview animated, tahap Desire yang tadinya putus jadi tersambung penuh — bukti (showcase) → pembeda (kenapa esprompt) → angka (metrik) → penawaran (harga) → aksi (CTA). Ini perbaikan struktural terbesar dari seluruh rencana.
Gelombang 1 — kredibilitas (≈2 jam). Kalau cuma sempat satu gelombang, ini yang paling menentukan.
| # | Aksi | Prioritas | Estimasi |
|---|---|---|---|
| 1 | Marquee baca data asli dari prompts.ts, tanpa irisan dengan grid showcase | P0-A | 30 mnt |
| 2 | Hapus nama fiktif dari demo search & How-it-works (termasuk aurora-hero.jsx) | P0-A | 20 mnt |
| 3 | Title tag + meta description + OG + canonical + favicon | P0-C | 20 mnt |
| 4 | Selaraskan angka jadi 47 di hero, features, showcase | P0-B | 15 mnt |
| 5 | Perbaiki FAQ #6 + samakan copy CTA dengan harga asli | P0-B | 20 mnt |
Gelombang 2 — bukti & konversi (≈3,5 jam):
| # | Aksi | Prioritas | Estimasi |
|---|---|---|---|
| 6 | Preview animated untuk 6 item ber-.mp4 (video + PNG poster) | P1-A | 1 jam |
| 7 | Section Harga di home (2 kartu) + route publik /pricing | P0 | 1 jam |
| 8 | Section "Kenapa esprompt + metrik kapabilitas" | P1-E | 1,5 jam |
Gelombang 3 — struktur & UX (≈6 jam):
| # | Aksi | Prioritas | Estimasi |
|---|---|---|---|
| 9 | Section "3 Tier" (Hero / Section / Halaman Penuh) | P1 | 2 jam |
| 10 | Susun ulang urutan section sesuai bagian 5 | P1 | 1 jam |
| 11 | Mobile nav drawer — ganti alert() | P1-B | 1 jam |
| 12 | Toggle bahasa naik ke nav + lang ikut berubah | P1-C | 30 mnt |
| 13 | Konsolidasi CTA + benerin 5 link mati | P1-D | 45 mnt |
| 14 | Tulis ulang 3 kartu Features jadi benefit-first + baris problem di hero | P1 | 1 jam |
| 15 | Rampingkan FAQ, bersihkan istilah teknis, footer legal, Harga masuk nav | P1-F/G | 1,5 jam |
Temuan terberat di dokumen ini — tiga angka jumlah prompt, delapan item fiktif, FAQ yang bilang harga belum final — bukan masalah terpisah. Semuanya gejala dari satu hal: homepage ditulis saat produk masih placeholder, lalu produknya jalan terus (katalog terisi 47 item, harga difinalkan, /billing di-ship) sementara homepage-nya tidak pernah ikut disinkronkan.
Artinya sebagian besar pekerjaan di sini bukan desain — ini sinkronisasi. Data sudah benar di prompts.ts. Harga sudah benar di billing.astro. Video sudah ada di public/.