Pages — Overview - Bosia Docs

Sebuah page adalah tingkat berikutnya di atas block: layar lengkap yang siap dirangkai, disusun dari block storefront, tanpa backend miliknya sendiri. Instal satu dan Anda mendapatkan page.svelte plus setiap block dan komponen yang menjadi dependensinya:

bun x bosia@latest add page storefront/home

src/lib/pages/storefront/home/page.svelte   ← halaman yang tersusun
src/lib/blocks/storefront/*                  ← bagian-bagiannya (diinstal untuk Anda)

Anda yang memiliki routing-nya. Letakkan halaman ke dalam sebuah rute dan render:

<script lang="ts">
	import Home from "$lib/pages/storefront/home/page.svelte";
</script>

<Home />

Storefront Mercato

Delapan halaman storefront adalah satu template serbaguna — Mercato. Block yang sama merender salah satu dari enam "purpose" toko; mengganti purpose menukar teks dan katalog, dan mengganti tema meng-skin ulangnya. Sunting satu baris di bagian atas halaman mana pun:

import { purposes } from "$lib/blocks/storefront/store/purposes.ts";
const purpose = purposes.fashion; // clay · fashion · grocery · tech · beauty · garden

Pemetaan purpose → tema

Setiap purpose dipasangkan dengan tema Bosia yang ada. Set tema pada aplikasi (atau wrapper apa pun) sebagaimana biasa Anda lakukan; storefront memakai token semantik, jadi ia mengikuti.

Purpose	Store type	Theme
clay	Toko umum	`clay` (baru)
fashion	Fashion & pakaian	`editorial`
grocery	Bahan makanan & segar	`forest`
tech	Elektronik & teknologi	`paper`
beauty	Kecantikan & perawatan kulit	`bloom`
garden	Tanaman & kebun	`sage`

Halaman-halamannya

Home — hero, kategori, koleksi unggulan, editorial, dan lainnya
Listing — filter, urut, dan grid produk (PLP)
Search — overlay command-palette, hasil yang bisa diurut, keadaan tanpa-hasil
Product — galeri, buy box, kepercayaan, detail, dan ulasan (PDP)
Cart — baris item, stepper kuantitas, ringkasan, dan empty state
Wishlist — produk favorit dengan pindah-ke-tas
Checkout — form multi-langkah, ringkasan, dan konfirmasi
Account — riwayat pesanan, pelacakan, alamat, dan pengaturan

Untuk UI yang menghadap pelanggan di sini plus backend, pasangkan dengan scaffold template shop (bun x bosia@latest create my-shop --template shop).

Halaman auth

Keluarga kedua — enam layar login/auth yang disusun dari block auth bersama. Masing-masing default ke kartu terpusat dan beralih ke panel brand/foto terbagi dengan satu prop (variant="split"). Instal satu dan Anda mendapatkan page.svelte plus setiap block auth yang disusunnya:

bun x bosia@latest add page auth/login

Login — baris sosial, email + kata sandi, ingat saya
Register — grid sosial, nama/email/kata sandi, meter kekuatan
Forgot Password — field email, catatan tautan reset
Magic Link — konfirmasi periksa-kotak-masuk
OTP / 2FA — input kode 6 digit bersegmen
SSO — email kerja / domain perusahaan

Ini hanya lapisan visual — tanpa sesi atau hashing kata sandi. Untuk autentikasi sungguhan, pasangkan dengan rangkaian server bosia-auth-flow.

Halaman landing

Dua landing marketing yang dirangkai ujung-ke-ujung dari block section — termasuk navbar dan footer:

SaaS Landing — hero, logos, features, stats, pricing, testimonials, FAQ, CTA
Simple Landing — layout satu-produk yang ramping: hero, split features, spotlight testimonial, panel CTA

Halaman perusahaan

Halaman situs serbaguna untuk rute about dan kontak:

Tentang — hero konsultan, pita statistik, grid tim, panel CTA
Kontak — form kontak split di samping detail perusahaan; pasangkan dengan feature contact-form untuk endpoint tervalidasi yang didukung database

Halaman blog

Indeks blog editorial dan halaman post, lengkap dengan post contoh:

Indeks — tumpukan kartu post-list di antara navbar dan footer
Post — header post, isi prosa 70ch dan baris post terkait; pasangkan dengan feature blog untuk post berbasis database dan loader siap pakai

Halaman error

Tiga layar error mandiri — berbeda dari yang lain, ketiganya tidak menyusun blok dan tanpa dependensi, satu file per halaman:

Not Found — 404 besar, pesan singkat, tautan kembali ke beranda
Server Error — 500 dengan aksi coba lagi dan beranda
Maintenance — layar "kami segera kembali" dengan email kontak opsional