dikerjakan teliti.} sub="Tiap jalan punya scope yang jelas — timeline, tahap, biaya. Pilih satu yang paling dekat dengan posisi kamu sekarang, atau ngobrol dulu sama kami." />
{SERVICE_DETAILS.map((s, i) => (
Empat minggu pertama jelas.} desc="Kami pegang transparansi sebagai default — kamu akan tahu kapan keputusan ada di tangan kamu." />
{PROCESS.map((p) => (
))}
{p.n}
{p.t}
{p.j}
{p.d}
// what you get
-
{s.deliver.map((d) => (
- {d} ))}
// usually built with
{s.stack.map((x) => (
{x}
))}
// example projects
{s.examples.map((x) => (
{x}
))}
{label}
{value}
jadi versi-nya.} sub="Sebagian besar di bawah NDA — yang di sini bisa kami pamerkan. Klik untuk baca cerita siapa mereka sebelum dan sesudah. Yang lain bisa diceritain pas ngobrol." />
// filter
{CATEGORIES.map((c) => (
))}
{filtered.length} {filtered.length === 1 ? "project" : "projects"}
{filtered.map((w, i) =>
// next
Mau jadi case berikutnya?
Ngobrol dulu sambil ngopi. Kami dengerin, kasih opini, dan kalau cocok — bangun bareng.
Mulai diskusi → { e.currentTarget.style.transform = "translateY(-2px)"; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
);
}
// ============================================================
// CONTACT PAGE — multi-step brief form
// ============================================================
const CONTACT_SERVICES = [
{ id: "web", label: "Website", desc: "Landing / brand / portfolio" },
{ id: "webapp", label: "Web App", desc: "POS, dashboard, internal tools" },
{ id: "ai", label: "AI Integration", desc: "Chatbot, automation, LLM" },
{ id: "consult", label: "Consultation", desc: "Half-day audit & opinion" },
{ id: "other", label: "Not sure yet", desc: "Let's figure it out together" },
];
const BUDGETS = ["< 15jt", "15–35jt", "35–100jt", "100jt+", "Belum tau"];
const TIMELINES = ["ASAP (<1 bln)", "1–3 bulan", "3–6 bulan", "Fleksibel"];
function ContactPage() {
const [step, setStep] = useStateS(1);
const [data, setData] = useStateS({
service: "",
name: "",
email: "",
company: "",
budget: "",
timeline: "",
brief: "",
});
const [sent, setSent] = useStateS(false);
const set = (k, v) => setData({ ...data, [k]: v });
const canNext1 = !!data.service;
const canNext2 = data.name.trim() && data.email.trim().includes("@");
const canSend = data.brief.trim().length > 10;
const submit = () => {
setSent(true);
// In real prod we'd POST. For prototype, open WA with prefilled message.
const lines = [
`Halo INDIE Labs, saya tertarik diskusi proyek.`,
``,
`Service: ${CONTACT_SERVICES.find(s => s.id === data.service)?.label}`,
`Nama: ${data.name}`,
`Email: ${data.email}`,
data.company && `Company: ${data.company}`,
`Budget: ${data.budget || "—"}`,
`Timeline: ${data.timeline || "—"}`,
``,
`Brief:`,
data.brief,
].filter(Boolean).join("\n");
setTimeout(() => {
window.open(WA_LINK(lines), "_blank");
}, 600);
};
if (sent) {
return (
<>
{w.tag}
{w.year}
{w.title}
{w.client}
// {w.category}
Read →
jadi siapa.} sub="3 langkah, kurang dari 2 menit. Brief masuk langsung ke kotak masuk kami — bukan robot, bukan auto-responder. Dijawab sama orang yang akan ngerjain proyek kamu." />
{step > 1 ? (
) : }
{step < 3 ? (
) : (
)}
// or just reach out
// what happens next
-
{[
["Kami baca brief kamu (1×24 jam)"],
["Reply via WA/email — minta klarifikasi kalau perlu"],
["Booking discovery call 30-60 menit (free)"],
["Kirim proposal + estimasi tertulis"],
].map((s, i) => (
- 0{i+1} {s[0]} ))}
{icons[icon]}
{label}
{sub && {sub}
}
{inner}
);
}
function StepBar({ step, total }) {
return (
// step {step} of {total}
{Array.from({ length: total }).map((_, i) => (
))}
Apa yang mau dibangun?
Pilih yang paling dekat. Bisa diubah nanti pas diskusi.
{CONTACT_SERVICES.map((s) => (
))}
);
}
function Step2({ data, set }) {
return (
<>
Kenalan dulu.
Biar kami bisa nyebut nama kamu pas balas.
Sedikit konteks.
Budget & timeline kami pakai buat assess fit — bukan untuk nge-judge.
Budget
{BUDGETS.map((b) => (
set("budget", b)} />
))}
Timeline
{TIMELINES.map((b) => (
set("timeline", b)} />
))}
Brief — apa yang mau dibangun?