275 lines
14 KiB
PHP
275 lines
14 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
|
||
require_once __DIR__ . '/store.php';
|
||
|
||
$categories = store_categories();
|
||
$selectedCategory = (string)($_GET['category'] ?? 'all');
|
||
if (!isset($categories[$selectedCategory])) {
|
||
$selectedCategory = 'all';
|
||
}
|
||
|
||
$products = store_filtered_products($selectedCategory);
|
||
$summary = store_cart_summary();
|
||
$cartLines = array_slice($summary['lines'], 0, 3);
|
||
$currentUser = store_current_user();
|
||
$paymentMethods = store_payment_methods();
|
||
|
||
store_page_start(
|
||
'Home',
|
||
'Website toko online bakery dengan halaman home, daftar kue, info pembayaran, kontak, dan login user yang lebih rapi.'
|
||
);
|
||
?>
|
||
<section class="hero-panel mb-4 mb-lg-5">
|
||
<div class="row g-4 align-items-center">
|
||
<div class="col-lg-7">
|
||
<span class="eyebrow">Home</span>
|
||
<h1 class="display-title">Pesan kue lebih jelas dengan menu user yang lengkap.</h1>
|
||
<p class="lead-copy">
|
||
Tampilan user bakery kini dibuat lebih mudah dipahami: ada menu <strong>Home</strong>,
|
||
<strong>Daftar Kue</strong>, <strong>Info Pembayaran</strong>, <strong>Kontak Kami</strong>,
|
||
serta <strong>Login / Register</strong> agar alur pemesanan terasa lebih terstruktur.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-2 mt-4">
|
||
<a class="btn btn-dark btn-lg" href="#catalog">Daftar kue</a>
|
||
<a class="btn btn-outline-secondary btn-lg" href="auth.php"><?= $currentUser ? 'Akun saya' : 'Login / Register' ?></a>
|
||
<a class="btn btn-outline-secondary btn-lg" href="#payment-info">Info pembayaran</a>
|
||
</div>
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value"><?= h((string)count(store_products())) ?></div>
|
||
<div class="metric-label">produk bakery tampil di daftar kue</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value"><?= h((string)count($paymentMethods)) ?></div>
|
||
<div class="metric-label">metode pembayaran siap dipilih</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value"><?= h((string)store_cart_count()) ?></div>
|
||
<div class="metric-label">item tersimpan di keranjang</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<aside class="summary-card h-100">
|
||
<div class="card-kicker">Alur pengguna</div>
|
||
<h2 class="summary-title">Dari login sampai cek status pesanan.</h2>
|
||
<ul class="list-clean compact-list mb-4">
|
||
<li><span class="list-index">1</span><span>Pengguna login dengan email dan password atau membuat akun baru.</span></li>
|
||
<li><span class="list-index">2</span><span>Pengguna membuka daftar kue dan memilih produk bakery yang diinginkan.</span></li>
|
||
<li><span class="list-index">3</span><span>Checkout menyimpan pesanan, alamat, dan metode pembayaran ke sistem.</span></li>
|
||
<li><span class="list-index">4</span><span>Kode pesanan dipakai lagi untuk melacak status dan konfirmasi pembayaran.</span></li>
|
||
</ul>
|
||
|
||
<div class="receipt-card">
|
||
<div class="receipt-card__head">
|
||
<span>Ringkasan keranjang</span>
|
||
<strong><?= h((string)store_cart_count()) ?> item</strong>
|
||
</div>
|
||
<?php if ($cartLines): ?>
|
||
<?php foreach ($cartLines as $line): ?>
|
||
<div class="receipt-line">
|
||
<span><?= h($line['product']['name']) ?> × <?= h((string)$line['quantity']) ?></span>
|
||
<strong><?= h(store_money((float)$line['line_total'])) ?></strong>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<div class="receipt-line receipt-line--total">
|
||
<span>Total sementara</span>
|
||
<strong><?= h(store_money((float)$summary['grand_total'])) ?></strong>
|
||
</div>
|
||
<a class="btn btn-dark w-100 mt-3" href="cart.php">Lanjutkan checkout</a>
|
||
<?php else: ?>
|
||
<p class="text-muted mb-3">Keranjang masih kosong. Mulai dari daftar kue untuk mencoba alur pemesanan user.</p>
|
||
<a class="btn btn-outline-secondary w-100" href="#catalog">Buka daftar kue</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mb-4">
|
||
<div class="row g-3">
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Login user lebih jelas</div>
|
||
<p class="feature-card__copy">Halaman login/register kini menjadi pintu masuk yang jelas bagi pengguna yang sudah atau belum memiliki akun.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Daftar kue lebih mudah dicari</div>
|
||
<p class="feature-card__copy">Produk dibagi per kategori agar pengguna lebih cepat menemukan cake, bread, atau pastry yang dibutuhkan.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Pembayaran & status tetap terhubung</div>
|
||
<p class="feature-card__copy">Setelah checkout, pelanggan tetap bisa melihat metode bayar dan memeriksa progress pesanan dari halaman status.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="section-block">
|
||
<div class="section-heading d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3 mb-4">
|
||
<div>
|
||
<span class="eyebrow">Daftar Kue</span>
|
||
<h2 class="section-title">Pilihan cake, bread, dan pastry untuk pengguna.</h2>
|
||
<p class="section-copy mb-0">Gunakan filter kategori untuk melihat produk yang paling relevan sebelum ditambahkan ke keranjang belanja.</p>
|
||
</div>
|
||
<div class="d-flex flex-wrap gap-2 filter-pills" data-filter-bar>
|
||
<?php foreach ($categories as $key => $category): ?>
|
||
<?php $isActive = $key === $selectedCategory; ?>
|
||
<a class="filter-pill<?= $isActive ? ' is-active' : '' ?>" href="index.php?category=<?= h($key) ?>#catalog">
|
||
<?= h($category['label']) ?>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<?php foreach ($products as $product): ?>
|
||
<div class="col-sm-6 col-xl-4">
|
||
<article class="product-card h-100">
|
||
<div class="product-visual product-visual--<?= h($product['tone']) ?>">
|
||
<span class="product-visual__meta"><?= h($product['category_label']) ?></span>
|
||
<strong class="product-visual__code"><?= h($product['visual_code']) ?></strong>
|
||
<span class="product-visual__name"><?= h($product['name']) ?></span>
|
||
</div>
|
||
<div class="product-card__body">
|
||
<div class="d-flex align-items-start justify-content-between gap-3 mb-2">
|
||
<div>
|
||
<h3 class="product-card__title"><?= h($product['name']) ?></h3>
|
||
<p class="text-muted small mb-0"><?= h($product['lead_time']) ?></p>
|
||
</div>
|
||
<span class="price-tag"><?= h(store_money((float)$product['price'])) ?></span>
|
||
</div>
|
||
<p class="product-card__copy"><?= h($product['short_description']) ?></p>
|
||
<div class="detail-chip-group mb-3">
|
||
<?php foreach ($product['highlights'] as $highlight): ?>
|
||
<span class="detail-chip"><?= h($highlight) ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="d-flex flex-column gap-2 mt-auto">
|
||
<a class="btn btn-outline-secondary w-100" href="product.php?slug=<?= h($product['slug']) ?>">Lihat detail</a>
|
||
<form action="cart_action.php" method="post" class="d-grid" data-auto-disable>
|
||
<input type="hidden" name="action" value="add">
|
||
<input type="hidden" name="slug" value="<?= h($product['slug']) ?>">
|
||
<input type="hidden" name="quantity" value="1">
|
||
<input type="hidden" name="redirect_to" value="<?= h($_SERVER['REQUEST_URI'] ?? 'index.php') ?>">
|
||
<button class="btn btn-dark" type="submit">Tambah ke keranjang</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="payment-info" class="section-block pt-0">
|
||
<div class="section-heading mb-4">
|
||
<span class="eyebrow">Info Pembayaran</span>
|
||
<h2 class="section-title">Pilihan pembayaran yang bisa diakses pengguna.</h2>
|
||
<p class="section-copy mb-0">Bagian ini menjelaskan metode pembayaran sejak awal agar proses checkout terasa lebih meyakinkan.</p>
|
||
</div>
|
||
<div class="row g-3">
|
||
<?php foreach ($paymentMethods as $method): ?>
|
||
<div class="col-lg-4">
|
||
<article class="payment-info-card h-100">
|
||
<div class="payment-info-card__label"><?= h($method['label']) ?></div>
|
||
<p class="payment-info-card__copy"><?= h($method['description']) ?></p>
|
||
<p class="payment-info-card__instruction mb-0"><?= h($method['instruction']) ?></p>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section-block pt-0">
|
||
<div class="row g-4 align-items-stretch">
|
||
<div class="col-lg-6">
|
||
<div class="surface-panel h-100 contact-panel">
|
||
<span class="eyebrow">Kontak Kami</span>
|
||
<h2 class="section-title">Area bantuan untuk kebutuhan pengguna.</h2>
|
||
<p class="section-copy">Bagian kontak diposisikan sebagai tempat pengguna memahami kapan harus menghubungi admin toko.</p>
|
||
<ul class="list-clean compact-list mb-0">
|
||
<li><span class="list-index">1</span><span>Konfirmasi ketersediaan produk dan estimasi pengerjaan pesanan.</span></li>
|
||
<li><span class="list-index">2</span><span>Menanyakan jadwal pengiriman, perubahan alamat, atau detail pesanan.</span></li>
|
||
<li><span class="list-index">3</span><span>Mengirim bukti pembayaran setelah checkout jika metode bayar memerlukannya.</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<aside class="summary-card h-100 contact-panel">
|
||
<div class="card-kicker">Langkah cepat</div>
|
||
<h2 class="summary-title">Yang sebaiknya dilakukan pengguna lebih dulu.</h2>
|
||
<div class="contact-checklist">
|
||
<div class="contact-checklist__item">
|
||
<strong>Login / Register</strong>
|
||
<span>Masuk dengan email dan password agar proses pemesanan lebih rapi.</span>
|
||
</div>
|
||
<div class="contact-checklist__item">
|
||
<strong>Pilih produk</strong>
|
||
<span>Tambahkan cake, bread, atau pastry ke keranjang sesuai kebutuhan.</span>
|
||
</div>
|
||
<div class="contact-checklist__item">
|
||
<strong>Lihat status</strong>
|
||
<span>Gunakan order number dan email untuk memeriksa perkembangan pesanan.</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-grid gap-2 mt-4">
|
||
<a class="btn btn-dark" href="auth.php"><?= $currentUser ? 'Buka akun saya' : 'Buka login user' ?></a>
|
||
<a class="btn btn-outline-secondary" href="order_status.php">Lacak pesanan</a>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-block pt-0">
|
||
<div class="section-heading mb-4">
|
||
<span class="eyebrow">Cara Order</span>
|
||
<h2 class="section-title">Alur sederhana yang siap dipakai pada tampilan user.</h2>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">01</div>
|
||
<h3>Login / Register</h3>
|
||
<p>Pengguna masuk dengan email dan password, atau membuat akun baru jika belum terdaftar.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">02</div>
|
||
<h3>Pilih dan checkout</h3>
|
||
<p>Setelah memilih produk, pengguna melanjutkan ke checkout untuk menyimpan alamat dan metode pembayaran.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">03</div>
|
||
<h3>Lacak status</h3>
|
||
<p>Gunakan kode pesanan dan email untuk melihat instruksi pembayaran dan status order secara mandiri.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-block pt-0">
|
||
<div class="documentation-note">
|
||
<strong>Dokumentasi use case tetap tersedia.</strong>
|
||
<p>Halaman use case diagram versi pertama masih bisa dibuka untuk kebutuhan laporan, revisi, atau presentasi sistem.</p>
|
||
<a class="btn btn-outline-secondary mt-3" href="use_case.php">Buka use case diagram</a>
|
||
</div>
|
||
</section>
|
||
<?php store_page_end(); ?>
|