---
layout: home

hero:
  name: TrackGo
  text: Panduan penjualan dan logistik
  tagline: Cara operator, sales, dan driver memakai TrackGo di web dan di mobile.
  actions:
    - theme: brand
      text: Panduan pengguna
      link: /id/user/
    - theme: alt
      text: Web
      link: /id/user/web/

features:
  - title: Web
    details: Siapkan data perusahaan, pengguna, rencana, faktur, pembayaran, surat jalan, dan riwayat aktivitas.
    link: /id/user/web/
    linkText: Panduan web
  - title: Mobile
    details: Check-in di cabang, ikuti rencana hari ini, kunjungi pelanggan, dan catat pembayaran di lapangan.
    link: /id/user/mobile/
    linkText: Panduan mobile
  - title: Penjualan
    details: Dari permintaan atau pesanan penjualan sampai faktur dan pembayaran.
    link: /id/user/web/sales-workflow
    linkText: Alur penjualan
  - title: Rencana
    details: Buat rencana harian sekali jalan, atau generate rencana dari siklus kunjungan mingguan.
    link: /id/user/web/plans
    linkText: Rencana dan kunjungan
---

<script setup>
import { ShoppingCart, Truck, Smartphone, MapPin } from 'lucide-vue-next'
</script>

<div class="custom-divider"></div>
<div class="bento-container">
  <div class="bento-header">
    <h2>Cara TrackGo dipakai</h2>
    <p>Operator menyiapkan data master dan rencana harian di web. Sales dan driver check-in di mobile, lalu mengerjakan rencana: mengunjungi pelanggan, menagih faktur, atau menyelesaikan pengiriman.</p>
  </div>
  <div class="bento-grid">
    <div class="bento-card">
      <div class="bento-icon">
        <ShoppingCart :size="24" />
      </div>
      <h3>Penjualan di web</h3>
      <p>Buat permintaan, pesanan, faktur, dan pembayaran. Lampirkan faktur ke rencana penjualan agar tim lapangan tahu apa yang harus ditagih.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon">
        <Truck :size="24" />
      </div>
      <h3>Logistik di web</h3>
      <p>Kelola surat jalan dan rencana pengiriman. Lengkapi kuantitas terkirim agar pesanan bisa selesai.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon">
        <Smartphone :size="24" />
      </div>
      <h3>Kerja lapangan di mobile</h3>
      <p>Clock in di cabang awal rencana, buka destinasi hari ini, check-in ke pelanggan, lalu catat pembayaran.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon">
        <MapPin :size="24" />
      </div>
      <h3>Riwayat aktivitas</h3>
      <p>Tinjau jejak dan peristiwa lapangan hari itu di Timeline. Streaming peta langsung di web masih Segera hadir.</p>
    </div>
  </div>
</div>