Pages — Overview - Bosia Docs

A page is the next tier up from a block: a complete, ready-to-wire screen composed from storefront blocks, with no backend of its own. Install one and you get the page.svelte plus every block and component it depends on:

bun x bosia@latest add page storefront/home

src/lib/pages/storefront/home/page.svelte   ← the composed page
src/lib/blocks/storefront/*                  ← its sections (installed for you)

You own the routing. Drop the page into a route and render it:

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

<Home />

The Mercato storefront

The eight storefront pages are one multi-purpose template — Mercato. The same blocks render any of six store "purposes"; switching the purpose swaps the copy and catalogue, and switching the theme re-skins it. Edit one line at the top of any page:

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

Purpose → theme mapping

Each purpose pairs with an existing Bosia theme. Set the theme on the app (or any wrapper) the way you normally do; the storefront uses semantic tokens, so it follows along.

Purpose	Store type	Theme
clay	General store	`clay` (new)
fashion	Fashion & apparel	`editorial`
grocery	Grocery & fresh	`forest`
tech	Electronics & tech	`paper`
beauty	Beauty & skincare	`bloom`
garden	Plants & garden	`sage`

The pages

Home — hero, categories, featured collection, editorial, more
Listing — filters, sort and a product grid (PLP)
Search — command-palette overlay, sortable results, no-results state
Product — gallery, buy box, trust, details and reviews (PDP)
Cart — line items, quantity steppers, summary and empty state
Wishlist — favourited products with move-to-bag
Checkout — multi-step form, summary and confirmation
Account — order history, tracking, addresses and settings

For the customer-facing UI here plus a backend, pair with the shop template scaffold (bun x bosia@latest create my-shop --template shop).

The auth pages

A second family — six login/auth screens composed from shared auth blocks. Each defaults to a centered card and switches to a split brand/photo panel with one prop (variant="split"). Install one and you get the page.svelte plus every auth block it composes:

bun x bosia@latest add page auth/login

Login — social row, email + password, remember me
Register — social grid, name/email/password, strength meter
Forgot Password — email field, reset-link note
Magic Link — check-your-inbox confirmation
OTP / 2FA — segmented 6-digit code input
SSO — enterprise work email / domain

These are the visual layer only — no sessions or password hashing. For real authentication, pair them with the bosia-auth-flow server wiring.

The landing pages

Two marketing landings composed end to end from section blocks — navbar and footer included:

SaaS Landing — hero, logos, features, stats, pricing, testimonials, FAQ, CTA
Simple Landing — lean single-product layout: hero, split features, spotlight testimonial, CTA panel

The company pages

General-purpose site pages for an about and a contact route:

About — consulting hero, stats band, team grid, CTA panel
Contact — split contact form beside company details; pair with the contact-form feature for the validated, database-backed endpoint

The blog pages

An editorial blog index and post page, sample posts included:

Index — post-list card stack between navbar and footer
Post — post header, 70ch prose body and related-posts row; pair with the blog feature for database-backed posts and ready-made loaders

The error pages

Three standalone error screens — unlike the rest, they compose no blocks and have zero dependencies, one file each:

Not Found — big 404, short message, back-to-home link
Server Error — 500 with retry and home actions
Maintenance — "we'll be right back" screen with an optional contact email