Landing Page Claude Code: offer jelas, trust, tracking, dan test

Landing page adalah jalur keputusan, bukan sekadar tampilan bagus

Claude Code bisa membuat hero, feature card, pricing, FAQ, dan CTA dengan cepat. Namun landing page yang dipakai untuk konsultasi, penjualan template, atau training tidak cukup hanya rapi. Halaman itu harus menjelaskan offer yang spesifik untuk pembaca yang spesifik, membangun trust, membuat langkah berikutnya mudah, dan meninggalkan data untuk perbaikan.

Konversi bukan hanya pembayaran. Konversi bisa berupa booking konsultasi, download checklist, pembelian template, permintaan training, atau mulai trial. CTA adalah Call To Action, yaitu tombol atau link yang memberi arahan seperti “Book review gratis” atau “Download checklist”. Trust block adalah bagian yang memberi bukti: proses, pengalaman, checklist review, screenshot implementasi, dan batasan yang jujur.

Untuk ClaudeCodeLab, targetnya bukan menjanjikan conversion rate pasti naik. Targetnya adalah menghubungkan consulting Claude Code, produk, dan training ke halaman yang jelas, terukur, accessible, dan cepat. Gunakan dokumentasi resmi sebagai dasar: Claude Code docs, Astro Pages, Tailwind CSS, React forms, GA4 events, dan Playwright.

Mulai dari tiga use case nyata

Sebelum desain, tulis siapa pembacanya. Ini membuat Claude Code tidak jatuh ke copy SaaS yang generik.

Use case	Kondisi pembaca	Offer yang cocok	Event yang diukur
Jual template untuk indie founder	Ingin LP dengan Claude Code, tapi struktur copy belum jelas	Template Astro LP dan prompt copy konversi	Klik produk dan mulai checkout
Konsultasi SaaS atau agency	Ada traffic, tapi kualitas lead belum stabil	Diagnosis 90 menit dan review implementasi	Submit form dan booking
Training tim	Ingin workflow Claude Code yang seragam	Workshop LP, review, analytics, dan test	Inquiry training dan download deck

Pembaca biasanya bertanya: apakah ini untuk saya, apakah bisa dipercaya, dan apa yang terjadi setelah saya klik. Urutan halaman harus menjawab tiga hal itu.

flowchart TD
  A["Traffic dari search, artikel, iklan, atau social"] --> B["First viewport menjelaskan audience, offer, dan CTA"]
  B --> C["Trust block menunjukkan proses dan bukti"]
  C --> D["Use case menghubungkan offer dengan situasi pembaca"]
  D --> E["Pricing atau lead magnet mengurangi friksi"]
  E --> F["Form submit, klik produk, atau inquiry training"]
  F --> G["Event dan A/B test mendorong iterasi berikutnya"]

Prompt produksi untuk Claude Code

Prompt yang jelas menghasilkan implementasi yang lebih berguna.

Implementasikan landing page "Claude Code Landing Page Sprint" dengan Astro, React, dan Tailwind CSS.

Tujuan:
- Mengubah pembaca menjadi booking konsultasi, pembelian template, atau inquiry training.
- Audience: indie founders, operator SaaS, agency, dan engineering managers.
- Jangan menulis janji conversion-rate improvement yang dijamin.

Section wajib:
- First viewport: audience, offer, primary CTA, secondary CTA.
- Trust block: pengalaman implementasi Masa, proses review, checklist pre-launch.
- Tiga use case konkret.
- Pricing atau lead magnet.
- Form: name, email, company, goal, budget, consent.
- Events: lp_view, cta_click, lead_submit, product_click.
- A/B test: bandingkan dua CTA copy.
- Playwright mobile checks: CTA terlihat, label benar, tidak ada horizontal overflow.

Constraint:
- TypeScript yang bisa dicopy, bukan pseudocode.
- Label, focus, keyboard, dan contrast harus diperhatikan.
- Hindari video hero berat yang merusak LCP.
- Jangan kirim data pribadi ke analytics events.

First viewport dengan Astro

First viewport harus menjawab siapa, offer apa, dan langkah berikutnya. Komponen ini memakai variant agar siap untuk A/B test.

---
// src/components/LandingHero.astro
export interface Props {
  variant: "control" | "lead_magnet";
}

const { variant } = Astro.props;

const copy = {
  control: {
    eyebrow: "Claude Code Landing Page Sprint",
    headline: "Bangun landing page Claude Code dengan offer, form, dan tracking",
    body: "Kami merapikan first viewport, trust block, pricing, lead form, analytics events, dan QA mobile menjadi implementasi siap rilis.",
    primary: "Book review gratis",
    secondary: "Lihat template",
  },
  lead_magnet: {
    eyebrow: "Termasuk checklist gratis",
    headline: "Temukan celah konversi sebelum menulis UI",
    body: "Cek offer, CTA, pricing, form, speed, accessibility, dan event naming sebelum halaman dipublikasikan.",
    primary: "Ambil checklist",
    secondary: "Lihat training",
  },
}[variant];
---

<section class="bg-slate-950 px-4 py-16 text-white sm:py-20">
  <div class="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
    <div>
      <p class="text-sm font-semibold uppercase tracking-wide text-cyan-300">{copy.eyebrow}</p>
      <h1 class="mt-4 max-w-3xl text-4xl font-bold leading-tight sm:text-5xl">{copy.headline}</h1>
      <p class="mt-5 max-w-2xl text-lg leading-8 text-slate-200">{copy.body}</p>
      <div class="mt-8 flex flex-col gap-3 sm:flex-row">
        <a data-cta-id="hero-primary" href="#lead-form" class="inline-flex min-h-12 items-center justify-center rounded-md bg-cyan-300 px-6 font-semibold text-slate-950 hover:bg-cyan-200 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">{copy.primary}</a>
        <a data-cta-id="hero-secondary" href="/products" class="inline-flex min-h-12 items-center justify-center rounded-md border border-slate-500 px-6 font-semibold text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">{copy.secondary}</a>
      </div>
      <p class="mt-4 text-sm text-slate-400">Tidak ada janji lift yang dijamin. Fokusnya adalah clarity, implementasi, dan jalur pengukuran.</p>
    </div>
    <div class="rounded-lg border border-slate-700 bg-slate-900 p-6">
      <h2 class="text-lg font-semibold">Checklist sebelum rilis</h2>
      <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-200">
        <li>Audience, offer, dan next step jelas di first viewport?</li>
        <li>Trust block menjelaskan proses dan pengalaman nyata?</li>
        <li>Form submit, product click, dan training inquiry diukur terpisah?</li>
        <li>Di mobile, CTA dan form tetap bisa dipakai?</li>
      </ul>
    </div>
  </div>
</section>

data-cta-id membuat tracking stabil walaupun teks tombol berubah.

Trust, proof, pricing, dan lead magnet

Bagian tengah halaman harus mengurangi keraguan.

Block	Tampilkan	Hindari
Trust	Checklist, screenshot, bio, proses QA	Badge kosong dan jargon AI
Proof	Apa yang Masa test, apa yang gagal, apa yang diubah	Testimoni palsu dan angka tanpa bukti
Pricing	Bedanya template, review, dan training	Menyembunyikan semua harga di balik form
Lead magnet	Checklist, audit worksheet, prompt copy	PDF tipis hanya untuk mengambil email

Untuk ClaudeCodeLab, jalurnya sederhana: products untuk self-serve, training untuk tim, dan form untuk review.

Form schema dan Astro API

Schema adalah kontrak data form. Endpoint ini tidak perlu dependency tambahan.

// src/pages/api/lead.ts
import type { APIRoute } from "astro";

type LeadInput = {
  name: string;
  email: string;
  company: string;
  goal: string;
  budget: "template" | "consulting" | "training" | "undecided";
  consent: boolean;
};

function validateLead(form: FormData): { ok: true; data: LeadInput } | { ok: false; errors: string[] } {
  const data: LeadInput = {
    name: String(form.get("name") ?? "").trim().slice(0, 80),
    email: String(form.get("email") ?? "").trim().slice(0, 120),
    company: String(form.get("company") ?? "").trim().slice(0, 120),
    goal: String(form.get("goal") ?? "").trim().slice(0, 1000),
    budget: String(form.get("budget") ?? "undecided") as LeadInput["budget"],
    consent: form.get("consent") === "on",
  };

  const errors: string[] = [];
  if (!data.name) errors.push("Name is required.");
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errors.push("A valid email is required.");
  if (data.goal.length < 20) errors.push("Please describe the goal in at least 20 characters.");
  if (!["template", "consulting", "training", "undecided"].includes(data.budget)) errors.push("Budget is invalid.");
  if (!data.consent) errors.push("Consent is required.");

  return errors.length ? { ok: false, errors } : { ok: true, data };
}

export const POST: APIRoute = async ({ request }) => {
  const result = validateLead(await request.formData());

  if (!result.ok) {
    return new Response(JSON.stringify({ ok: false, errors: result.errors }), {
      status: 400,
      headers: { "content-type": "application/json" },
    });
  }

  console.info("new_lp_lead", {
    emailDomain: result.data.email.split("@")[1],
    budget: result.data.budget,
    goalLength: result.data.goal.length,
  });

  return new Response(JSON.stringify({ ok: true }), {
    status: 200,
    headers: { "content-type": "application/json" },
  });
};

Jangan kirim nama, email, perusahaan, atau teks bebas ke analytics. Simpan data pribadi di sistem lead, bukan di event marketing.

// src/components/LeadForm.tsx
import { useState } from "react";
import { trackLpEvent } from "../lib/lp-events";

export function LeadForm() {
  const [message, setMessage] = useState("");
  const [sending, setSending] = useState(false);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSending(true);

    const response = await fetch("/api/lead", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });

    setSending(false);
    if (!response.ok) {
      const body = await response.json();
      setMessage(body.errors?.join(" ") ?? "Periksa form.");
      return;
    }

    trackLpEvent({ eventName: "lead_submit", ctaId: "lead-form", value: "consulting" });
    setMessage("Request terkirim. Cek email untuk langkah berikutnya.");
    event.currentTarget.reset();
  }

  return (
    <form id="lead-form" onSubmit={onSubmit} className="space-y-5 rounded-lg border border-slate-200 p-6">
      <label className="block text-sm font-medium">Nama<input name="name" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Email<input name="email" type="email" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Tujuan landing page<textarea name="goal" required minLength={20} rows={5} className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Jenis bantuan
        <select name="budget" className="mt-1 w-full rounded-md border px-3 py-2">
          <option value="template">Template</option>
          <option value="consulting">Consulting</option>
          <option value="training">Training tim</option>
          <option value="undecided">Belum yakin</option>
        </select>
      </label>
      <label className="flex gap-2 text-sm"><input name="consent" type="checkbox" required />Saya setuju dihubungi terkait request ini.</label>
      <button disabled={sending} className="min-h-11 w-full rounded-md bg-slate-950 px-5 font-semibold text-white disabled:opacity-60">{sending ? "Mengirim..." : "Kirim request"}</button>
      <p role="status" aria-live="polite" className="text-sm">{message}</p>
    </form>
  );
}

Event, speed, dan A/B test

Tetapkan event sebelum rilis.

// src/lib/lp-events.ts
type LpEventName = "lp_view" | "cta_click" | "lead_submit" | "product_click";

type LpEvent = {
  eventName: LpEventName;
  ctaId?: string;
  variant?: "control" | "lead_magnet";
  value?: "template" | "consulting" | "training";
};

declare global {
  interface Window {
    dataLayer?: Array<Record<string, unknown>>;
    gtag?: (command: "event", name: string, params: Record<string, unknown>) => void;
  }
}

export function trackLpEvent(event: LpEvent) {
  if (typeof window === "undefined") return;

  const params = {
    page_slug: "claude-code-landing-page",
    cta_id: event.ctaId,
    variant: event.variant,
    value_type: event.value,
  };

  window.dataLayer?.push({ event: event.eventName, ...params });
  window.gtag?.("event", event.eventName, params);
}

Masukkan Core Web Vitals ke checklist. Hero image berat, script pihak ketiga, dan layout shift bisa merusak pengalaman dan konversi.

// src/lib/landing-ab.ts
export type LandingVariant = "control" | "lead_magnet";

export function chooseLandingVariant(visitorId: string): LandingVariant {
  let hash = 2166136261;
  for (let index = 0; index < visitorId.length; index += 1) {
    hash ^= visitorId.charCodeAt(index);
    hash = Math.imul(hash, 16777619);
  }
  return Math.abs(hash) % 2 === 0 ? "control" : "lead_magnet";
}

---
// src/pages/lp.astro
import LandingHero from "../components/LandingHero.astro";
import { chooseLandingVariant } from "../lib/landing-ab";

const visitorId = Astro.cookies.get("lp_visitor")?.value ?? crypto.randomUUID();
Astro.cookies.set("lp_visitor", visitorId, {
  path: "/",
  sameSite: "lax",
  secure: import.meta.env.PROD,
  maxAge: 60 * 60 * 24 * 30,
});

const variant = chooseLandingVariant(visitorId);
---

<LandingHero variant={variant} />
<script define:vars={{ variant }}>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "lp_view", page_slug: "claude-code-landing-page", variant });
</script>

A/B test bukan mesin jaminan. Kalau traffic kecil, hasilnya sinyal, bukan bukti final. Hindari assignment hanya dengan localStorage karena bisa menyebabkan flicker dan data exposure yang tidak cocok.

QA mobile dengan Playwright

// tests/landing-page.spec.ts
import { test, expect, devices } from "@playwright/test";

test.use({ ...devices["iPhone 13"] });

test("mobile LP keeps CTA visible and avoids horizontal overflow", async ({ page }) => {
  await page.goto("/lp");

  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
  await expect(page.locator('[data-cta-id="hero-primary"]')).toBeVisible();

  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
  const viewportWidth = page.viewportSize()?.width ?? 390;
  expect(scrollWidth).toBeLessThanOrEqual(viewportWidth + 1);
});

test("lead form requires consent", async ({ page }) => {
  await page.goto("/lp");
  await page.getByLabel("Nama").fill("Masa");
  await page.getByLabel("Email").fill("masa@example.com");
  await page.getByLabel("Tujuan landing page").fill("Saya ingin memperbaiki kualitas inquiry untuk landing page consulting Claude Code.");
  await page.getByRole("button", { name: "Kirim request" }).click();

  await expect(page.getByLabel("Saya setuju dihubungi terkait request ini.")).toBeFocused();
});

Kesalahan umum

Pertama, offer terlalu kabur. “AI automation untuk bisnis” terlalu luas. “Kami implementasikan landing page, form, event, dan QA mobile untuk offer Claude Code Anda” lebih jelas.

Kedua, proof palsu. Jangan membuat testimoni atau angka konversi. Tampilkan proses, checklist, dan apa yang Masa benar-benar uji.

Ketiga, semua langkah berikutnya dipaksa lewat form. Ada pembaca yang mau membeli template, ada yang butuh training, ada yang butuh review singkat.

Keempat, accessibility dianggap kosmetik. Label, contrast, dan keyboard support memengaruhi konversi nyata.

Kelima, tracking ditambahkan belakangan. Tanpa event stabil, optimasi berubah menjadi opini.

Langkah berikutnya dengan ClaudeCodeLab

Untuk self-serve, lihat products. Untuk tim, lihat training. Untuk review LP, gunakan form. Baca juga Claude Code analytics implementation, Claude Code A/B testing, Claude Code Playwright testing, dan Claude Code SEO optimization.

Hasil praktik

Saat Masa mencoba workflow ini pada LP kecil, manfaat terbesar bukan angka konversi ajaib. Yang berguna adalah CTA ids, schema form, dan mobile checks sudah ditetapkan sebelum polishing visual. Halaman menjadi bisa dipelajari: tombol mana yang diklik, form mobile apakah bisa digunakan, dan variant mana yang tampil.