Bundle: Landing page deadline 5 hari, budget IDR

Konteks

Klien SMB sering datang dengan: “Mas/Mbak, butuh landing page minggu depan. Anggaran Rp 3-8 juta. Bisa?”

Bundle ini saya pakai untuk 15+ proyek serupa di 2024-2026. Ship time average: 4-6 hari kerja.

The stack

Framework:    Astro 6 (static site, zero JS by default)
Styling:      Tailwind CSS v4 (utility-first, no config gymnastics)
Forms:        Astro Action atau native HTML form + Resend API
Email:        Resend (transactional)
Analytics:    Plausible (privacy-friendly, IDR-friendly pricing)
Hosting:      Cloudflare Pages (gratis, edge worldwide)
Domain:       Niagahoster atau Cloudflare Registrar

Mengapa bundle ini

Astro 6: zero JS by default = LCP < 1s, SEO friendly out-of-box. Pakai React/Vue island hanya kalau perlu form interaktif. Build time 5-15 detik.

Tailwind v4: tidak butuh tailwind.config.js di v4 (config bisa inline). Setup 30 detik. Setiap utility class predictable.

Cloudflare Pages: gratis, deploy dari git push, edge worldwide (termasuk Jakarta). SSL otomatis. Custom domain mudah.

Resend untuk form: $0 sampai 3,000 email/bulan. Setup 10 menit (verify domain, API key).

Plausible: privacy-friendly, tidak butuh cookie banner. Rp 130rb/bulan untuk 10K page view, atau pakai PostHog free tier.

Day-by-day timeline

Hari 1: Setup & wireframe

• 2 jam: Discovery call (kirim form pre-call dengan brand asset request)
• 2 jam: Wireframe di Figma (sections: hero, value props, testimonial, FAQ, CTA, footer)
• 1 jam: Setup repo, deploy hello-world ke CF Pages dengan domain klien

bun create astro@latest landing-klien-x
cd landing-klien-x
bun add @astrojs/tailwind
# git init, push to GitHub, connect CF Pages

Hari 2: Build sections

• 4 jam: Hero + value props sections (HTML + Tailwind)
• 2 jam: Testimonial section (kalau klien punya testimonial real, embed via embed code; kalau tidak, jangan fake, hapus section ini)

Hari 3: Form + CTA + FAQ

• 3 jam: Form (WhatsApp atau email) — pakai Astro Action

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { Resend } from 'resend';

const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  contact: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string().min(2),
      phone: z.string().regex(/^0[8]\d{8,11}$/, 'Nomor HP Indonesia tidak valid'),
      message: z.string().min(10),
    }),
    handler: async ({ name, phone, message }) => {
      await resend.emails.send({
        from: '[email protected]',
        to: '[email protected]',
        subject: `New lead: ${name}`,
        text: `Nama: ${name}\nHP: ${phone}\n\n${message}`,
      });
      return { success: true };
    },
  }),
};

• 2 jam: FAQ section (accordion native HTML <details> — no JS)
• 1 jam: Footer + meta tags + favicon

Hari 4: Polish + responsive + SEO

• 3 jam: Mobile responsive test (chrome devtools + actual phone)
• 2 jam: SEO basics: meta tags, OG image, sitemap.xml, robots.txt
• 1 jam: Schema markup LocalBusiness (kalau SMB punya lokasi fisik)

Hari 5: Review + handover

• 2 jam: Klien review revisi minor (copy tweak, color tweak)
• 2 jam: Setup Plausible analytics
• 1 jam: Handover doc (cara update content, cara cek analytics, cara handle lead dari form)

Astro project structure

src/
├── components/
│   ├── Hero.astro
│   ├── ValueProp.astro
│   ├── Testimonial.astro
│   ├── FAQ.astro
│   ├── ContactForm.astro
│   └── Footer.astro
├── layouts/
│   └── BaseLayout.astro
├── pages/
│   ├── index.astro
│   └── terimakasih.astro    # post-form-submit page
├── actions/
│   └── index.ts             # form handler
└── styles/
    └── global.css

Total file di project: ~12-15. Setiap section adalah component, klien bisa minta tambah/hapus section dengan ease.

Boilerplate components

Saya punya template ready-to-use untuk:

• Hero dengan headline + CTA + image
• 3-column value props
• Testimonial dengan author + photo
• FAQ accordion
• Contact form (WhatsApp atau email)
• Footer dengan social + contact info

Template ini di-fork untuk setiap klien, edit copy + brand asset, ship.

Performance budget

Target untuk landing page SMB Indonesia:

• LCP: < 1.5s di 4G
• CLS: < 0.1
• FID/INP: < 100ms
• Total page weight: < 500KB

Astro default capable hit semua target ini. Hanya hati-hati dengan:

• Image size: pakai <Image> Astro component untuk auto-format AVIF/WebP
• Font loading: preload + font-display: swap
• Third-party scripts: hanya Plausible (single 1KB script). Hindari GTM/Hotjar/intercom kecuali truly needed.

Cost summary

Total cost per bulan untuk landing page klien:

Item	Cost
Cloudflare Pages hosting	Rp 0
Domain (Niagahoster .com)	Rp 14rb/bulan rata-rata (Rp 165rb/tahun)
Resend email (untuk form)	Rp 0 sampai 3K email/bulan
Plausible analytics	Rp 130rb/bulan (atau pakai PostHog free)
Total	Rp 14-145rb/bulan

Klien bayar saya: Rp 3-8 juta one-time untuk build. Setelah itu, klien bayar infra direct (atau Anda manage sebagai retainer Rp 200-500rb/bulan).

Yang sering bermasalah

Klien tidak punya copy yang siap: solve dengan template copy yang Anda siapkan. Klien edit dari template, tidak nulis dari nol.

Klien minta perubahan setelah deploy: include 1 minggu support gratis. Setelah itu, charge per perubahan (Rp 100-300rb per minor change).

Form spam: implement honeypot field + rate limiting di Cloudflare (gratis di Pro plan). Atau pakai Turnstile (Cloudflare CAPTCHA, gratis).

Custom domain DNS migration: kalau klien punya domain di registrar lain (e.g., Domainesia, IDWebHost), butuh ubah DNS ke Cloudflare. Walk klien through process via WhatsApp + screenshot.

Verdict

Recommended untuk landing page SMB Indonesia 5-hari deadline.

Stack ini sudah saya ship 15+ project tanpa major issue. Klien suka karena cepat. Saya suka karena tidak ada surprise — stack yang predictable.

Hindari:

• WordPress (overkill, lambat, security maintenance heavy)
• Webflow (mahal untuk klien, lock-in)
• Wix/Squarespace (control terbatas, brand cuztom limit)
• Custom React from scratch (over-engineered untuk simple landing page)

Apa yang tidak termasuk

Bundle ini fokus ke build cepat. Hal yang sering dibutuhkan lanjutan: Google Business Profile setup, schema LocalBusiness implementation, citation cleanup, GBP review strategy. Untuk klien yang butuh ini, saya rujuk ke Eranya Digital — mereka handle full audit + execution.