219 lines
11 KiB
PHP
219 lines
11 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
require_once __DIR__ . '/includes/layout.php';
|
|
|
|
$isLoggedIn = is_user_logged_in();
|
|
$summary = $isLoggedIn ? dashboard_summary_for_user(current_user_id()) : empty_dashboard_summary();
|
|
$recentServices = $isLoggedIn ? fetch_recent_services_for_user(current_user_id(), 4) : [];
|
|
$primaryCtaUrl = $isLoggedIn ? app_url('dashboard.php') : app_url('register.php');
|
|
$primaryCtaLabel = $isLoggedIn ? 'Buka dashboard saya' : 'Buat akun gratis';
|
|
|
|
render_page_start([
|
|
'title' => 'Pengingat servis kendaraan yang rapi dan gampang dipakai',
|
|
'description' => 'Catat servis terakhir, hitung jadwal berikutnya, dan lihat pengingat oli, CVT, filter udara, busi, dan gardan langsung di dashboard.',
|
|
'page' => 'home',
|
|
]);
|
|
render_flash(consume_flash());
|
|
?>
|
|
<section class="hero-section hero-shell py-5 py-lg-6 border-bottom overflow-hidden">
|
|
<div class="container py-lg-4 position-relative">
|
|
<div class="hero-blur hero-blur-one"></div>
|
|
<div class="hero-blur hero-blur-two"></div>
|
|
<div class="row align-items-center g-4 g-lg-5 position-relative">
|
|
<div class="col-lg-6">
|
|
<span class="eyebrow">Maintenance tracker kendaraan</span>
|
|
<h1 class="display-title mt-3 mb-3">Ingat jadwal servis tanpa ribet, dengan dashboard yang terasa rapi dan privat.</h1>
|
|
<p class="lead text-secondary mb-4">ServisIngat membantu pemilik motor dan mobil mencatat servis terakhir, menghitung servis berikutnya, lalu menampilkan reminder yang jelas di dashboard pribadi masing-masing.</p>
|
|
<div class="d-flex flex-column flex-sm-row gap-2 mb-4">
|
|
<a class="btn btn-dark btn-lg px-4" href="<?= $primaryCtaUrl ?>"><?= $primaryCtaLabel ?></a>
|
|
<a class="btn btn-outline-secondary btn-lg px-4" href="#fitur">Lihat fitur</a>
|
|
</div>
|
|
<div class="hero-note d-flex flex-wrap gap-3 small text-muted mb-4">
|
|
<span>Multi-user dan privat per akun</span>
|
|
<span>Reminder langsung di dashboard</span>
|
|
<span>Detail servis privat per akun</span>
|
|
</div>
|
|
<div class="hero-trust-grid row g-3">
|
|
<div class="col-sm-4">
|
|
<div class="quick-stat-card h-100">
|
|
<div class="quick-stat-value">Privat</div>
|
|
<div class="quick-stat-label">setiap akun hanya melihat datanya sendiri</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="quick-stat-card h-100">
|
|
<div class="quick-stat-value">Ringkas</div>
|
|
<div class="quick-stat-label">buat catatan baru hanya beberapa field inti</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="quick-stat-card h-100">
|
|
<div class="quick-stat-value">Siap pakai</div>
|
|
<div class="quick-stat-label">cocok untuk pemilik kendaraan dan bengkel kecil</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="hero-preview-card surface-card p-4 p-lg-4">
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div>
|
|
<div class="small text-uppercase text-muted mb-1">Ringkasan saat ini</div>
|
|
<h2 class="h4 mb-1"><?= $isLoggedIn ? 'Akun kamu siap dipakai' : 'Preview dashboard pribadi' ?></h2>
|
|
<p class="text-secondary small mb-0"><?= $isLoggedIn ? 'Snapshot singkat dari reminder kamu.' : 'Begitu daftar, setiap user masuk ke ruang reminder masing-masing.' ?></p>
|
|
</div>
|
|
<span class="badge badge-soft"><?= $isLoggedIn ? 'Privat' : 'Multi-user' ?></span>
|
|
</div>
|
|
|
|
<div class="dashboard-summary-grid mb-4">
|
|
<div class="dashboard-stat-card dashboard-stat-primary">
|
|
<div class="metric-label">Total catatan</div>
|
|
<div class="metric-value"><?= (int) $summary['total_services'] ?></div>
|
|
<div class="small text-muted">item servis aktif di akun ini</div>
|
|
</div>
|
|
<div class="dashboard-stat-card">
|
|
<div class="metric-label">Perlu tindakan</div>
|
|
<div class="metric-value"><?= (int) $summary['overdue_count'] ?></div>
|
|
<div class="small text-muted">reminder yang sudah lewat</div>
|
|
</div>
|
|
<div class="dashboard-stat-card">
|
|
<div class="metric-label">Segera due</div>
|
|
<div class="metric-value"><?= (int) $summary['due_soon_count'] ?></div>
|
|
<div class="small text-muted">perlu dicek dalam waktu dekat</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-list-preview">
|
|
<div class="mini-list-header d-flex justify-content-between align-items-center mb-2">
|
|
<span class="fw-semibold"><?= $isLoggedIn ? 'Reminder terbaru kamu' : 'Kenapa aman dipakai ramai-ramai?' ?></span>
|
|
<a class="small text-decoration-none" href="<?= e($isLoggedIn ? app_url('dashboard.php') : app_url('login.php')) ?>"><?= $isLoggedIn ? 'Buka dashboard' : 'Login' ?></a>
|
|
</div>
|
|
<?php if ($isLoggedIn && $recentServices): ?>
|
|
<?php foreach ($recentServices as $service): ?>
|
|
<?php $state = due_state($service['next_due_date'] ?? null); ?>
|
|
<a href="<?= e(app_url('service.php')) ?>?id=<?= (int) $service['id'] ?>" class="preview-row text-decoration-none">
|
|
<div>
|
|
<div class="fw-semibold text-dark"><?= e($service['vehicle_name']) ?></div>
|
|
<div class="small text-muted"><?= e($service['service_name']) ?></div>
|
|
</div>
|
|
<span class="status-pill <?= e($state['class']) ?>"><?= e($state['label']) ?></span>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
<?php elseif ($isLoggedIn): ?>
|
|
<div class="empty-inline">Belum ada catatan di akun kamu. Tambahkan servis pertama untuk mulai melihat reminder pribadi.</div>
|
|
<?php else: ?>
|
|
<div class="preview-note-card">
|
|
<div class="small text-uppercase text-muted mb-2">Privasi default</div>
|
|
<div class="d-flex flex-column gap-2">
|
|
<div class="preview-note-item"><strong>User A</strong> melihat dashboard miliknya sendiri.</div>
|
|
<div class="preview-note-item"><strong>User B</strong> tidak bisa melihat catatan User A.</div>
|
|
<div class="preview-note-item"><strong>Semua akun</strong> hanya melihat reminder miliknya sendiri.</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="fitur" class="py-5">
|
|
<div class="container">
|
|
<div class="section-intro mb-4 mb-lg-5 text-center text-lg-start">
|
|
<span class="eyebrow justify-content-center justify-content-lg-start">Fokus MVP</span>
|
|
<h2 class="section-title mt-2">Alur sederhana yang langsung berguna</h2>
|
|
<p class="text-secondary mb-0 section-copy">Bukan cuma landing page — sekarang user bisa punya akun sendiri, input jadwal servis, melihat reminder jatuh tempo, dan membuka detail tiap catatan tanpa bercampur dengan user lain.</p>
|
|
</div>
|
|
<div class="row g-3 g-lg-4">
|
|
<div class="col-md-4">
|
|
<article class="feature-card feature-card-accent h-100">
|
|
<div class="feature-icon-pill">01</div>
|
|
<h3 class="h5 mt-3">Akun privat</h3>
|
|
<p class="text-secondary mb-0">Setiap pengguna mendaftar dan login ke akun sendiri, sehingga catatan servis tersimpan terpisah dan lebih aman dipakai ramai-ramai.</p>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="feature-card feature-card-accent h-100">
|
|
<div class="feature-icon-pill">02</div>
|
|
<h3 class="h5 mt-3">Reminder dashboard</h3>
|
|
<p class="text-secondary mb-0">Catatan otomatis diklasifikasikan menjadi terlambat, segera jatuh tempo, atau masih aman agar pengguna tahu mana yang perlu action.</p>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="feature-card feature-card-accent h-100">
|
|
<div class="feature-icon-pill">03</div>
|
|
<h3 class="h5 mt-3">Detail servis privat</h3>
|
|
<p class="text-secondary mb-0">Setiap catatan punya halaman detail sendiri agar riwayat servis lebih rapi, mudah dicek, dan tetap terpisah per akun.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-5 border-top border-bottom section-soft">
|
|
<div class="container">
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-lg-5">
|
|
<span class="eyebrow">Cara kerja</span>
|
|
<h2 class="section-title mt-2">Buat pemilik kendaraan maupun bengkel kecil</h2>
|
|
<p class="text-secondary mb-4">Dashboard ini sengaja dibuat ringkas: setiap item servis berdiri sebagai satu reminder yang mudah dicek kapan saja, dengan privasi akun tetap terjaga.</p>
|
|
<div class="surface-subsection d-inline-flex flex-column gap-2">
|
|
<div class="fw-semibold text-dark">Contoh item servis yang umum</div>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="summary-chip">Oli mesin</span>
|
|
<span class="summary-chip">Filter udara</span>
|
|
<span class="summary-chip">CVT</span>
|
|
<span class="summary-chip">Busi</span>
|
|
<span class="summary-chip">Gardan</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-7">
|
|
<div class="workflow-panel surface-card">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="process-card h-100">
|
|
<div class="process-step">01</div>
|
|
<h3 class="h6">Daftar akun</h3>
|
|
<p class="small text-secondary mb-0">User membuat akun sendiri dulu supaya data bisa dipisahkan dengan aman.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="process-card h-100">
|
|
<div class="process-step">02</div>
|
|
<h3 class="h6">Catat servis terakhir</h3>
|
|
<p class="small text-secondary mb-0">Masukkan nama kendaraan, item servis, tanggal, dan interval reminder.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="process-card h-100">
|
|
<div class="process-step">03</div>
|
|
<h3 class="h6">Pantau reminder pribadi</h3>
|
|
<p class="small text-secondary mb-0">Setiap akun hanya melihat reminder miliknya sendiri di dashboard dan halaman detail.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="cta-strip cta-strong d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
|
|
<div>
|
|
<div class="fw-semibold text-dark h5 mb-2">Siap dipakai sekarang sebagai MVP reminder servis multi-user.</div>
|
|
<div class="text-secondary">Versi ini sudah punya register, login, dashboard privat, detail privat, dan alur input reminder yang lebih rapi.</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-sm-row gap-2">
|
|
<a class="btn btn-dark" href="<?= $primaryCtaUrl ?>"><?= $primaryCtaLabel ?></a>
|
|
<a class="btn btn-outline-secondary" href="<?= e(app_url('login.php')) ?>"><?= $isLoggedIn ? 'Ganti akun' : 'Saya sudah punya akun' ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php render_page_end(); ?>
|