A five-page store with a bag that persists across pages: a collage home, a filterable shop, a product page with glaze and gallery pickers, a bag with a free-shipping meter and promo code, and a validated checkout. Products are drawn in CSS.
@ballmac
// Ballmac UI: Goods template fonts. https://ui.ballmac.com/templates/template-goods
import { Fraunces, Hanken_Grotesk } from "next/font/google"
export const goodsSerif = Fraunces({ variable: "--goods-serif", subsets: ["latin"], display: "swap", preload: false })
export const goodsSans = Hanken_Grotesk({ variable: "--goods-sans", subsets: ["latin"], display: "swap", preload: false })
Pages are at /goods, /goods/shop, /goods/shop/[id], /goods/cart and /goods/checkout. Products, glazes and reviews live in goods-data.ts. The bag is kept in sessionStorage (goods-cart.ts); swap it for your cart API. The promo code in the demo is KILN10. Replace Piece with product photos.
