20:I[96580,["/_next/static/immutable/chunks/3rmx3ew-chqol.js","/_next/static/immutable/chunks/3h9ac4v3b-c6q.js","/_next/static/immutable/chunks/139plfw92atsf.js","/_next/static/immutable/chunks/2vcfs2cpb-3ds.js","/_next/static/immutable/chunks/3htftmzxnejvc.js"],"TemplateStudio"] 36:I[65365,["/_next/static/immutable/chunks/19-bz465dggxg.js"],"IconMark"] 21:T700,"use client"; import { CartProvider } from "../lib/cart-context"; import { NavProvider } from "../lib/nav-context"; import { SiteFooter } from "../components/site-footer"; import { SiteHeader } from "../components/site-header"; export default function BazaarShell({ children }: { children: React.ReactNode }) { return (

{/* Awning stripe motif — unique to Bazaar */}

{children}

); } 22:T47d,"use client"; import { useBazaarNav } from "../lib/nav-context"; import { AboutView } from "../views/about"; import { AccountView } from "../views/account"; import { CartView } from "../views/cart"; import { CatalogView } from "../views/catalog"; import { CheckoutView } from "../views/checkout"; import { ContactView } from "../views/contact"; import { HomeView } from "../views/home"; import { LoginView } from "../views/login"; import { ProductView } from "../views/product"; import { SignupView } from "../views/signup"; export default function BazaarStallsPage() { const { view } = useBazaarNav(); return (

{view === "home" ? : null} {view === "catalog" ? : null} {view === "product" ? : null} {view === "cart" ? : null} {view === "checkout" ? : null} {view === "login" ? : null} {view === "signup" ? : null} {view === "account" ? : null} {view === "about" ? : null} {view === "contact" ? : null}

); } 23:Teab,"use client"; import { useEffect, useState } from "react"; import { formatPrice, getProduct, heroSlides } from "../lib/data"; import { useBazaarNav } from "../lib/nav-context"; import { Button } from "./ui"; /** Full-bleed stall film strip — not a floating Lumina-style glass card. */ export function HeroSpotlight() { const { openProduct } = useBazaarNav(); const [index, setIndex] = useState(0); const [fade, setFade] = useState(true); const slide = heroSlides[index] ?? heroSlides[0]; const product = getProduct(slide.productId); function goTo(next: number) { setFade(false); window.setTimeout(() => { setIndex((next + heroSlides.length) % heroSlides.length); setFade(true); }, 180); } useEffect(() => { const id = window.setInterval(() => { setFade(false); window.setTimeout(() => { setIndex((i) => (i + 1) % heroSlides.length); setFade(true); }, 180); }, 4500); return () => window.clearInterval(id); }, []); if (!product) return null; return (

Featured stall

{product.name}

{product.maker} · {slide.tagline}

{formatPrice(product.price)}

{heroSlides.map((s, i) => (

); } 24:T143a,/** Market awning stripes + compact B — terracotta field, linen strokes. */ export function BazaarMark({ className }: { className?: string }) { return ( ); } export function SearchGlyph({ className }: { className?: string }) { return ( ); } export function BagGlyph({ className }: { className?: string }) { return ( ); } export function MenuGlyph({ className }: { className?: string }) { return ( ); } export function CloseGlyph({ className }: { className?: string }) { return ( ); } export function StarGlyph({ className, filled }: { className?: string; filled?: boolean }) { return ( ); } export function UserGlyph({ className }: { className?: string }) { return ( ); } export function TruckGlyph({ className }: { className?: string }) { return ( ); } export function TentGlyph({ className }: { className?: string }) { return ( ); } export function ReturnGlyph({ className }: { className?: string }) { return ( ); } export function ShieldGlyph({ className }: { className?: string }) { return ( ); } 25:Tb2d,"use client"; import { BazaarMark } from "./marks"; import { useBazaarNav } from "../lib/nav-context"; export function SiteFooter() { const { setView, goHome, openCatalog } = useBazaarNav(); return ( ); } 26:T14a2,"use client"; import { useState } from "react"; import { BagGlyph, BazaarMark, CloseGlyph, MenuGlyph, UserGlyph } from "./marks"; import { useCart } from "../lib/cart-context"; import { useBazaarNav, type BazaarView } from "../lib/nav-context"; const links: { label: string; view: BazaarView }[] = [ { label: "Home", view: "home" }, { label: "Shop", view: "catalog" }, { label: "About", view: "about" }, { label: "Contact", view: "contact" }, ]; export function SiteHeader() { const { view, setView, goHome, openCatalog } = useBazaarNav(); const { count } = useCart(); const [open, setOpen] = useState(false); const go = (next: BazaarView) => { if (next === "catalog") openCatalog("all"); else if (next === "home") goHome(); else setView(next); setOpen(false); }; return ( <>

Saturday market · Lisbon river · Pickup from 10:00

{links.map((link) => { const active = view === link.view || (link.view === "catalog" && view === "product"); return ( ); })}

{open ? (

{links.map((link) => ( ))}

) : null}

); } 27:T16d3,"use client"; import { useState } from "react"; import { formatPrice, type Product } from "../lib/data"; import { useCart } from "../lib/cart-context"; import { useBazaarNav } from "../lib/nav-context"; import { CloseGlyph, StarGlyph } from "./marks"; import { Badge, Button, Panel } from "./ui"; export function StallCard({ product }: { product: Product }) { const { openProduct } = useBazaarNav(); const [quickOpen, setQuickOpen] = useState(false); return ( <>

{product.badge ? ( {product.badge} ) : ( {product.category} )}

{quickOpen ? setQuickOpen(false)} /> : null} ); } function QuickViewModal({ product, onClose }: { product: Product; onClose: () => void }) { const { addItem } = useCart(); const { openProduct, setView } = useBazaarNav(); return ( ); } 28:Tbeb,import type { ButtonHTMLAttributes, ReactNode } from "react"; const panel = "bg-[#FBF7F1] border border-[#1c1410]/15"; export function Panel({ children, className = "", as: Tag = "div", }: { children: ReactNode; className?: string; as?: "div" | "section" | "article" | "aside" | "li"; }) { return {children}; } type ButtonVariant = "primary" | "secondary" | "ghost" | "ink"; const buttonStyles: Record = { primary: "bg-[#e07a3d] text-[#1c1410] hover:bg-[#d46d32] border-2 border-[#e07a3d]", secondary: "bg-transparent text-[#1c1410] border-2 border-[#1c1410] hover:bg-[#1c1410] hover:text-[#f6ede4]", ghost: "bg-transparent text-[#1c1410] border-2 border-transparent hover:border-[#1c1410]/20", ink: "bg-[#1c1410] text-[#f6ede4] border-2 border-[#1c1410] hover:bg-[#e07a3d] hover:border-[#e07a3d] hover:text-[#1c1410]", }; export function Button({ variant = "primary", className = "", children, ...props }: ButtonHTMLAttributes & { variant?: ButtonVariant }) { return ( ); } export function Badge({ children, tone = "accent", }: { children: ReactNode; tone?: "accent" | "ink" | "muted"; }) { const tones = { accent: "bg-[#e07a3d] text-[#1c1410]", ink: "bg-[#1c1410] text-[#f6ede4]", muted: "bg-[#F3EBE1] text-[#7a6558] border border-[#1c1410]/20", }; return ( {children} ); } export function Field({ label, type = "text", placeholder, defaultValue, }: { label: string; type?: string; placeholder?: string; defaultValue?: string; }) { return ( {label} ); } export function SectionTitle({ eyebrow, title, body }: { eyebrow?: string; title: string; body?: string }) { return (

{eyebrow ? (

{eyebrow}

) : null}

{title}

{body ?

{body}

: null}

); } 29:T76d,"use client"; import { createContext, useContext, useMemo, useState, type ReactNode } from "react"; import { getProduct } from "./data"; export type CartLine = { productId: string; qty: number }; type Ctx = { lines: CartLine[]; count: number; subtotal: number; addItem: (productId: string, qty?: number) => void; removeItem: (productId: string) => void; setQty: (productId: string, qty: number) => void; clear: () => void; }; const CartContext = createContext(null); export function CartProvider({ children }: { children: ReactNode }) { const [lines, setLines] = useState([]); const addItem = (productId: string, qty = 1) => { setLines((prev) => { const existing = prev.find((l) => l.productId === productId); if (existing) { return prev.map((l) => (l.productId === productId ? { ...l, qty: l.qty + qty } : l)); } return [...prev, { productId, qty }]; }); }; const removeItem = (productId: string) => { setLines((prev) => prev.filter((l) => l.productId !== productId)); }; const setQty = (productId: string, qty: number) => { if (qty <= 0) { removeItem(productId); return; } setLines((prev) => prev.map((l) => (l.productId === productId ? { ...l, qty } : l))); }; const clear = () => setLines([]); const count = lines.reduce((sum, l) => sum + l.qty, 0); const subtotal = lines.reduce((sum, l) => { const p = getProduct(l.productId); return sum + (p?.price ?? 0) * l.qty; }, 0); const value = useMemo( () => ({ lines, count, subtotal, addItem, removeItem, setQty, clear }), [lines, count, subtotal], ); return {children}; } export function useCart() { const ctx = useContext(CartContext); if (!ctx) throw new Error("useCart must be used within CartProvider"); return ctx; } 2a:T4451,export type CategoryId = "ceramics" | "textiles" | "food" | "objects"; export type Product = { id: string; name: string; maker: string; category: CategoryId; price: number; compareAt?: number; image: string; gallery: string[]; rating: number; reviewCount: number; badge?: "This week" | "New" | "Pickup"; description: string; details: string[]; tagline: string; }; export type Review = { id: string; productId: string; author: string; rating: number; date: string; body: string; }; export type Order = { id: string; date: string; status: "Delivered" | "Shipped" | "Pickup ready" | "Processing"; total: number; items: { productId: string; qty: number }[]; }; export const categories: { id: CategoryId; label: string; blurb: string; image: string }[] = [ { id: "ceramics", label: "Ceramics", blurb: "River clay, ash glaze, cups still warm from the kiln.", image: "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "textiles", label: "Textiles", blurb: "Wool, linen, and saffron weave from weekend looms.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "food", label: "Food", blurb: "Preserves, honey, and market snacks for the river walk.", image: "https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "objects", label: "Objects", blurb: "Paper, jewelry, and small tools with a maker’s hand.", image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=900&h=700&q=80", }, ]; export const products: Product[] = [ { id: "clay-hour", name: "Clay Hour cup", maker: "João Mira", category: "ceramics", price: 68, image: "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1610701596007-11522138254d?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.9, reviewCount: 38, badge: "This week", tagline: "Ash glaze · river clay", description: "Twelve cups from Saturday’s firing. Ash glaze, a thumb rest, and the last of the river clay from Alcântara.", details: ["Stoneware, ash glaze", "≈ 280 ml", "Food safe", "Fired Thursdays in Alcântara"], }, { id: "kiln-cup", name: "Kiln Cup set", maker: "Ada Marin", category: "ceramics", price: 36, compareAt: 44, image: "https://images.unsplash.com/photo-1610701596007-11522138254d?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1610701596007-11522138254d?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.7, reviewCount: 52, badge: "Pickup", tagline: "Speckled set of two", description: "A pair of everyday cups with a soft speckled lip—stackable for open shelves above the sink.", details: ["Stoneware", "Set of 2", "Microwave safe", "Pickup at Cais do Sodré"], }, { id: "arc-bowl", name: "Arc serving bowl", maker: "João Mira", category: "ceramics", price: 92, image: "https://images.unsplash.com/photo-1578500494198-344bba3450eb?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1578500494198-344bba3450eb?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1610701596007-11522138254d?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.8, reviewCount: 21, badge: "New", tagline: "Wide rim · matte glaze", description: "A wide serving bowl for market salads and fruit. Matte glaze, quiet weight, made for the table not the shelf.", details: ["Stoneware", "Ø 28 cm", "Dishwasher safe", "Hand finished"], }, { id: "wool-room", name: "Wool Room throw", maker: "Mara Ellison", category: "textiles", price: 110, image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.8, reviewCount: 44, badge: "This week", tagline: "Hand loom · Lisbon wool", description: "A soft wool throw woven on a floor loom near the castle. Warm enough for the river wind, light enough for summer evenings.", details: ["100% wool", "140 × 180 cm", "Hand loomed", "Dry clean or cold wash"], }, { id: "saffron-weave", name: "Saffron weave scarf", maker: "Niels Voss", category: "textiles", price: 88, compareAt: 98, image: "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.6, reviewCount: 31, badge: "Pickup", tagline: "Saffron stripe · linen blend", description: "A linen-blend scarf with a saffron stripe—easy over a jacket for Saturday market mornings.", details: ["Linen & cotton", "180 × 55 cm", "Plant-dyed accent", "Machine wash cold"], }, { id: "linen-napkins", name: "River linen napkins", maker: "Mara Ellison", category: "textiles", price: 42, image: "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.7, reviewCount: 27, badge: "New", tagline: "Stone-washed set of four", description: "Stone-washed linen napkins in a soft linen tone—made for long tables and olive oil stains that wash out.", details: ["100% linen", "Set of 4", "42 × 42 cm", "Gets softer with each wash"], }, { id: "market-honey", name: "Alentejo jar honey", maker: "Casa do Mel", category: "food", price: 14, image: "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.9, reviewCount: 86, badge: "This week", tagline: "Wildflower · glass jar", description: "Wildflower honey from Alentejo hives. Thick on toast, soft in tea—sold only while the Saturday jar lasts.", details: ["350 g glass jar", "Raw, unfiltered", "Pickup preferred", "Ship Tue–Thu"], }, { id: "olive-tin", name: "River olive tin", maker: "Quinta Verde", category: "food", price: 9, image: "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.5, reviewCount: 64, badge: "Pickup", tagline: "Brined · picnic ready", description: "A small tin of brined olives for the river walk—herbs, lemon peel, and a cork you can reseal.", details: ["180 g tin", "Herb brine", "Best within 5 days open", "Saturday pickup"], }, { id: "ink-grain", name: "Ink & Grain notebook", maker: "Lila Costa", category: "objects", price: 42, image: "https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.8, reviewCount: 49, badge: "This week", tagline: "Letterpress cover · blank", description: "A cloth-bound notebook with letterpress title and blank pages—for market lists, glaze notes, and train rides.", details: ["A5, 96 pages", "Cloth cover", "Letterpress stamp", "Made in Lisbon"], }, { id: "field-notes", name: "Field Notes pack", maker: "Leo Park", category: "objects", price: 18, image: "https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.6, reviewCount: 73, badge: "New", tagline: "Pocket trio · kraft", description: "Three pocket notebooks in kraft—grid, ruled, and blank. Fits a tote with honey and a scarf.", details: ["Pack of 3", "Pocket size", "Kraft covers", "FSC paper"], }, { id: "gilt-line", name: "Gilt Line pendant", maker: "Inês Vale", category: "objects", price: 240, compareAt: 280, image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.9, reviewCount: 17, badge: "This week", tagline: "Hand-cut brass · linen cord", description: "A hand-cut brass pendant on a linen cord—light enough for everyday, warm enough for evening market light.", details: ["Brass & linen", "Adjustable length", "Hand polished", "Gift box available"], }, { id: "river-ring", name: "River ring", maker: "Sable Quinn", category: "objects", price: 164, image: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.7, reviewCount: 23, badge: "Pickup", tagline: "Hammered silver · band", description: "A hammered silver band with a soft river curve—sizes try-on at the stall every Saturday.", details: ["Sterling silver", "Sizes 48–56", "Try-on at tent", "Resize once free"], }, ]; export const reviews: Review[] = [ { id: "r1", productId: "clay-hour", author: "Helena M.", rating: 5, date: "Sep 7, 2026", body: "Picked up at the tent—still warm from the kiln talk. The thumb rest is perfect.", }, { id: "r2", productId: "clay-hour", author: "Tomás R.", rating: 5, date: "Aug 24, 2026", body: "Shipped in recycled paper, no chips. Ash glaze looks exactly like the photo.", }, { id: "r3", productId: "wool-room", author: "Nina P.", rating: 5, date: "Sep 1, 2026", body: "Soft without being heavy. Wore it on the tram home from Cais do Sodré.", }, { id: "r4", productId: "market-honey", author: "Ivo S.", rating: 5, date: "Sep 10, 2026", body: "Bought two jars—one for us, one for the neighbors. Thick and floral.", }, { id: "r5", productId: "gilt-line", author: "Clara V.", rating: 5, date: "Aug 16, 2026", body: "Inês adjusted the cord at the stall. Feels like a keepsake, not costume.", }, { id: "r6", productId: "ink-grain", author: "Leo F.", rating: 4, date: "Sep 5, 2026", body: "Letterpress cover is lovely. Paper takes fountain ink without bleed.", }, ]; export const orders: Order[] = [ { id: "BZ-1842", date: "Aug 22, 2026", status: "Delivered", total: 110, items: [{ productId: "wool-room", qty: 1 }], }, { id: "BZ-1901", date: "Sep 6, 2026", status: "Shipped", total: 82, items: [ { productId: "kiln-cup", qty: 1 }, { productId: "ink-grain", qty: 1 }, ], }, { id: "BZ-1920", date: "Sep 13, 2026", status: "Pickup ready", total: 68, items: [{ productId: "clay-hour", qty: 1 }], }, ]; export const profile = { name: "Sofia Almeida", email: "sofia@atelier.lisboa", phone: "+351 912 000 441", address: "Rua da Alegria 18, 2º", city: "Lisbon 1250-012", }; export const makerOfWeek = { name: "João Mira", stall: "Clay Hour", bio: "João fires on Thursdays in Alcântara. Pickup at the riverside tent, or we ship in recycled paper from Tuesday.", portrait: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&h=900&q=80", }; /** Hero stall spotlight slides (image + copy rotate together). */ export const heroSlides: { productId: string; tagline: string }[] = [ { productId: "clay-hour", tagline: "Ash glaze · river clay" }, { productId: "wool-room", tagline: "Hand loom · Lisbon wool" }, { productId: "gilt-line", tagline: "Hand-cut brass · linen cord" }, { productId: "market-honey", tagline: "Wildflower · Saturday jar" }, ]; export const trustItems = [ { id: "pickup", title: "Saturday pickup", body: "Cais do Sodré tent · 10–16" }, { id: "ship", title: "Ship from Tuesday", body: "Recycled paper packing" }, { id: "vetted", title: "Maker-vetted", body: "Independent stalls only" }, { id: "return", title: "Easy returns", body: "14 days · no fuss" }, ] as const; export const homeTestimonials = [ { id: "t1", name: "Helena M.", role: "Lisbon", rating: 5, body: "Picked up Clay Hour cups at the tent—still talking glaze with João. Feels like a real market, not a catalog.", }, { id: "t2", name: "Nina P.", role: "Cascais", rating: 5, body: "Wool Room throw shipped Tuesday in recycled paper. Soft, warm, and exactly as photographed.", }, { id: "t3", name: "Ivo S.", role: "Porto", rating: 5, body: "Ordered honey and a notebook. Checkout was calm; the stall list email is the best part of my week.", }, ] as const; export const howItWorks = [ { step: "01", title: "Find a stall", body: "Browse ceramics, textiles, food, and objects from independent makers.", }, { step: "02", title: "Reserve or order", body: "Add to bag, reserve for Saturday, or checkout for Tuesday shipping.", }, { step: "03", title: "Pickup or ship", body: "Collect at the riverside tent, or we pack in recycled paper from Tuesday.", }, { step: "04", title: "Live with it", body: "Need a swap? Easy returns within 14 days—makers stay in the loop.", }, ] as const; export function getProduct(id: string | null | undefined) { if (!id) return undefined; return products.find((p) => p.id === id); } export function getReviews(productId: string) { return reviews.filter((r) => r.productId === productId); } export function formatPrice(n: number) { return new Intl.NumberFormat("pt-PT", { style: "currency", currency: "EUR", maximumFractionDigits: 0, }).format(n); } export function relatedProducts(product: Product, limit = 4) { return products.filter((p) => p.category === product.category && p.id !== product.id).slice(0, limit); } 2b:Taa8,"use client"; import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react"; import type { CategoryId } from "./data"; export type BazaarView = | "home" | "catalog" | "product" | "cart" | "checkout" | "login" | "signup" | "account" | "about" | "contact"; export type SortOption = "featured" | "price-asc" | "price-desc" | "rating"; type CatalogFilters = { category: CategoryId | "all"; maxPrice: number; sort: SortOption; page: number; query: string; }; type Ctx = { view: BazaarView; productId: string | null; filters: CatalogFilters; setView: (view: BazaarView) => void; goHome: () => void; openCatalog: (category?: CategoryId | "all") => void; openProduct: (id: string) => void; setFilters: (patch: Partial) => void; resetFilters: () => void; }; const defaultFilters: CatalogFilters = { category: "all", maxPrice: 300, sort: "featured", page: 1, query: "", }; const NavContext = createContext(null); export function NavProvider({ children }: { children: ReactNode }) { const [view, setViewState] = useState("home"); const [productId, setProductId] = useState(null); const [filters, setFiltersState] = useState(defaultFilters); const setView = useCallback((next: BazaarView) => { setViewState(next); if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" }); }, []); const goHome = useCallback(() => { setProductId(null); setView("home"); }, [setView]); const openCatalog = useCallback( (category: CategoryId | "all" = "all") => { setFiltersState((prev) => ({ ...prev, category, page: 1 })); setProductId(null); setView("catalog"); }, [setView], ); const openProduct = useCallback( (id: string) => { setProductId(id); setView("product"); }, [setView], ); const setFilters = useCallback((patch: Partial) => { setFiltersState((prev) => ({ ...prev, ...patch })); }, []); const resetFilters = useCallback(() => { setFiltersState(defaultFilters); }, []); const value = useMemo( () => ({ view, productId, filters, setView, goHome, openCatalog, openProduct, setFilters, resetFilters, }), [view, productId, filters, setView, goHome, openCatalog, openProduct, setFilters, resetFilters], ); return {children}; } export function useBazaarNav() { const ctx = useContext(NavContext); if (!ctx) throw new Error("useBazaarNav must be used within NavProvider"); return ctx; } 2c:Tf5e,"use client"; import { Button, Panel, SectionTitle } from "../components/ui"; import { useBazaarNav } from "../lib/nav-context"; const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" }; const stats = [ { value: "8 yrs", label: "on the Lisbon river" }, { value: "40+", label: "makers in the roster" }, { value: "Sat", label: "market every week" }, ]; const timeline = [ { year: "2018", body: "Started as a ceramics stall under a striped awning." }, { year: "2021", body: "Opened the riverside tent at Cais do Sodré." }, { year: "2024", body: "Added textiles, food, and objects from vetted makers." }, { year: "2026", body: "Bazaar—online holds, Tuesday shipping, same Saturday spirit." }, ]; export function AboutView() { const { openCatalog, setView } = useBazaarNav(); return (

{stats.map((s) => (

{s.value}

{s.label}

))}

Market note

Warm linen, striped awnings, makers you can meet.

We work with independent makers along the Tagus. Every stall is photographed in natural light and vetted for materials you can live with—not just scroll past.

{item.year}

{item.body}

{[ { title: "Makers first", body: "Ceramics, wool, honey, brass—finishes with a maker’s hand." }, { title: "River logistics", body: "Saturday pickup at the tent, recycled packing from Tuesday." }, { title: "Member care", body: "Easy returns, order history, and the weekly stall list." }, ].map((item) => (

{item.title}

{item.body}

))}

); } 2d:T1155,"use client"; import { formatPrice, getProduct, orders, profile } from "../lib/data"; import { Badge, Button, Field, Panel, SectionTitle } from "../components/ui"; import { useBazaarNav } from "../lib/nav-context"; export function AccountView() { const { openProduct, setView, openCatalog } = useBazaarNav(); return (

Recent orders

{orders.map((order) => (

{order.id}

{order.date}

{order.status}

{order.items.map((item) => { const product = getProduct(item.productId); if (!product) return null; return ( ); })}

{order.items.reduce((n, i) => n + i.qty, 0)} items {formatPrice(order.total)}

))}

Profile

Preferences

Order updates by email Weekly stall list

Saved for later

Wishlist is empty in this demo—open the shop to start one.

); } 2e:T17fe,"use client"; import { formatPrice, getProduct } from "../lib/data"; import { Button, Panel, SectionTitle } from "../components/ui"; import { useCart } from "../lib/cart-context"; import { useBazaarNav } from "../lib/nav-context"; const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" }; const FREE_SHIP = 80; export function CartView() { const { lines, subtotal, setQty, removeItem } = useCart(); const { setView, openCatalog, openProduct } = useBazaarNav(); const shipping = subtotal >= FREE_SHIP || subtotal === 0 ? 0 : 8; const total = subtotal + shipping; return (

{!lines.length ? (

Your bag is empty

Browse the stalls and add a few Saturday finds.

) : (

{lines.map((line) => { const product = getProduct(line.productId); if (!product) return null; return (

{product.maker} · {product.category}

{formatPrice(product.price)}

{line.qty}

); })}

Order summary

{subtotal < FREE_SHIP ? (

Add {formatPrice(FREE_SHIP - subtotal)} more for free shipping (or choose Saturday pickup).

) : (

Free shipping unlocked — or pickup at the tent.

)}

Subtotal {formatPrice(subtotal)}

Shipping {shipping === 0 ? "Free" : formatPrice(shipping)}

Total {formatPrice(total)}

Saturday pickup · Ship from Tuesday · 14-day returns

)}

); } 2f:T1f4e,"use client"; import { categories, formatPrice, products, type CategoryId } from "../lib/data"; import { StallCard } from "../components/stall-card"; import { SearchGlyph } from "../components/marks"; import { Button, Panel, SectionTitle } from "../components/ui"; import { useBazaarNav, type SortOption } from "../lib/nav-context"; const PAGE_SIZE = 8; export function CatalogView() { const { filters, setFilters, resetFilters, openCatalog, goHome } = useBazaarNav(); const q = filters.query.trim().toLowerCase(); const filtered = products .filter((p) => (filters.category === "all" ? true : p.category === filters.category)) .filter((p) => p.price <= filters.maxPrice) .filter((p) => !q ? true : p.name.toLowerCase().includes(q) || p.maker.toLowerCase().includes(q) || p.description.toLowerCase().includes(q) || p.category.toLowerCase().includes(q), ) .sort((a, b) => { if (filters.sort === "price-asc") return a.price - b.price; if (filters.sort === "price-desc") return b.price - a.price; if (filters.sort === "rating") return b.rating - a.rating; return 0; }); const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); const page = Math.min(filters.page, totalPages); const pageItems = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE); const categoryLabel = filters.category === "all" ? "Shop" : categories.find((c) => c.id === filters.category)?.label ?? "Shop"; return (

setFilters({ query: e.target.value, page: 1 })} placeholder="Search stalls, makers, honey…" className="h-10 w-full bg-transparent text-sm text-[#1c1410] outline-none placeholder:text-[#7a6558]/70" aria-label="Search stalls" />

Order placed

Demo checkout—no payment charged.{" "} {fulfillment === "pickup" ? "Your stall hold is ready for Saturday at Cais do Sodré." : "We’d pack in recycled paper from Tuesday."}

); } if (!lines.length) { return (

Nothing to checkout

); } return (

{i + 1} {label} {i < 3 ? — : null}

Fulfillment

{( [ { id: "pickup" as const, title: "Saturday pickup", body: "Cais do Sodré tent · free" }, { id: "ship" as const, title: "Ship from Tuesday", body: "Recycled paper · free over €80" }, ] as const ).map((opt) => ( ))}

{fulfillment === "pickup" ? "Contact for pickup" : "Shipping address"}

{fulfillment === "ship" ? ( <> ) : ( )}

Payment

Demo only — cards are not processed.

Order summary

{lines.map((line) => { const product = getProduct(line.productId); if (!product) return null; return (

{product.name}

Qty {line.qty}

{formatPrice(product.price * line.qty)}

); })}

Subtotal {formatPrice(subtotal)}

{fulfillment === "pickup" ? "Pickup" : "Shipping"} {shipping === 0 ? "Free" : formatPrice(shipping)}

Tax {formatPrice(tax)}

Total {formatPrice(total)}

); } 31:T114e,"use client"; import { useState } from "react"; import { Button, Field, Panel, SectionTitle } from "../components/ui"; const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" }; const faqs = [ { q: "When is Saturday pickup?", a: "Cais do Sodré tent, Saturdays 10:00–16:00. Bring your order code or name—holds stay until closing.", }, { q: "How does shipping work?", a: "Orders ship Tuesday–Thursday in recycled paper. Most Portugal deliveries arrive in 1–3 days; EU a little longer.", }, { q: "Can I apply for a stall?", a: "Yes—email sellers@bazaar.stalls with photos, materials, and your city. We review monthly.", }, ]; export function ContactView() { const [sent, setSent] = useState(false); const [openFaq, setOpenFaq] = useState(0); return (

{sent ? (

Message sent

Thanks—we’ll get back to you shortly. (Demo only.)

) : ( <>

Message

</label>
              <Button onClick={() => setSent(true)}>Send message</Button>
            </>
          )}
        </Panel>

<div className="space-y-6">
          <Panel className="space-y-6 p-6">
            <div>
              <p className="text-[11px] font-semibold tracking-[0.2em] text-[#e07a3d] uppercase">Tent</p>
              <p className="mt-2 text-sm leading-7 text-[#7a6558]">
                Cais do Sodré riverside tent
                <br />
                Lisbon
                <br />
                Saturdays · 10:00–16:00
              </p>
            </div>
            <div>
              <p className="text-[11px] font-semibold tracking-[0.2em] text-[#e07a3d] uppercase">Email</p>
              <p className="mt-2 text-sm text-[#1c1410]">hello@bazaar.stalls</p>
            </div>
            <img
              src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1000&h=700&q=80"
              alt="Market tent by the river"
              className="aspect-[4/3] w-full rounded-2xl object-cover"
            />
          </Panel>

<Panel className="divide-y divide-[#e2d4c6] overflow-hidden">
            {faqs.map((item, i) => {
              const open = openFaq === i;
              return (
                <div key={item.q}>
                  <button
                    type="button"
                    onClick={() => setOpenFaq(open ? null : i)}
                    className="flex w-full items-center justify-between gap-3 px-5 py-4 text-left text-sm font-medium text-[#1c1410]"
                  >
                    {item.q}
                    <span className="text-[#7a6558]">{open ? "−" : "+"}</span>
                  </button>
                  {open ? <p className="px-5 pb-4 text-sm leading-6 text-[#7a6558]">{item.a}</p> : null}
                </div>
              );
            })}
          </Panel>
        </div>
      </div>
    </div>
  );
}
32:T285b,"use client";

import { categories, howItWorks, homeTestimonials, makerOfWeek, products, trustItems } from "../lib/data";
import { HeroSpotlight } from "../components/hero-spotlight";
import { StallCard } from "../components/stall-card";
import { ReturnGlyph, ShieldGlyph, StarGlyph, TentGlyph, TruckGlyph } from "../components/marks";
import { Button, Panel, SectionTitle } from "../components/ui";
import { useBazaarNav } from "../lib/nav-context";

const featured = products.filter((p) => p.badge === "This week" || p.badge === "New").slice(0, 4);

const trustIcons = {
  pickup: TentGlyph,
  ship: TruckGlyph,
  vetted: ShieldGlyph,
  return: ReturnGlyph,
} as const;

export function HomeView() {
  const { openCatalog, setView } = useBazaarNav();

return (
    <div className="bazaar-fade">
      {/* Full-bleed poster hero — editorial market, not Lumina split glass */}
      <section className="relative min-h-[78vh] overflow-hidden border-b-2 border-[#1c1410]">
        <img
          src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=2400&h=1400&q=80"
          alt="Lisbon riverside market stalls"
          className="absolute inset-0 h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-[#1c1410]/72" />
        <div className="relative mx-auto flex min-h-[78vh] max-w-6xl flex-col justify-end px-4 pb-12 pt-28 sm:px-6 sm:pb-16">
          <p className="text-[11px] font-bold tracking-[0.32em] text-[#e07a3d] uppercase">Lisbon · Saturday</p>
          <p className="mt-4 text-5xl font-extrabold tracking-[0.08em] text-[#f6ede4] uppercase sm:text-6xl lg:text-7xl">
            Bazaar
          </p>
          <h1 className="mt-4 max-w-xl text-xl font-semibold leading-snug tracking-tight text-[#f6ede4] sm:text-2xl">
            Independent makers, one Saturday by the river.
          </h1>
          <p className="mt-4 max-w-md text-sm leading-7 text-[#d4c4b4]">
            Ceramics, textiles, food, and objects from Lisbon stalls—reserve for pickup or ship from Tuesday.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Button onClick={() => openCatalog("all")}>Explore stalls</Button>
            <Button
              variant="secondary"
              className="!border-[#f6ede4] !text-[#f6ede4] hover:!bg-[#f6ede4] hover:!text-[#1c1410]"
              onClick={() => openCatalog("all")}
            >
              This week
            </Button>
          </div>
        </div>
      </section>

<section className="grid border-y-2 border-[#1c1410] sm:grid-cols-2 lg:grid-cols-4">
          {trustItems.map((item, i) => {
            const Icon = trustIcons[item.id];
            return (
              <div
                key={item.id}
                className={`flex items-start gap-3 bg-[#FBF7F1] px-4 py-5 ${
                  i < trustItems.length - 1 ? "border-b-2 border-[#1c1410] lg:border-b-0 lg:border-r-2" : ""
                } ${i % 2 === 0 && i < 2 ? "sm:border-r-2 sm:border-[#1c1410]" : ""} ${i === 1 ? "sm:border-r-0 lg:border-r-2" : ""}`}
              >
                <span className="flex size-9 shrink-0 items-center justify-center bg-[#e07a3d] text-[#1c1410]">
                  <Icon className="size-4" />
                </span>
                <div>
                  <p className="text-xs font-bold tracking-[0.12em] text-[#1c1410] uppercase">{item.title}</p>
                  <p className="mt-1 text-xs leading-5 text-[#7a6558]">{item.body}</p>
                </div>
              </div>
            );
          })}
        </section>

<section>
          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
            <SectionTitle
              eyebrow="This week"
              title="Independent makers, one grid."
              body="Featured stalls rotating through the riverside tent."
            />
            <Button variant="secondary" onClick={() => openCatalog("all")}>
              View all
            </Button>
          </div>
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {featured.map((product) => (
              <StallCard key={product.id} product={product} />
            ))}
          </div>
        </section>

<section>
          <SectionTitle eyebrow="Categories" title="Four corners of the market." />
          <div className="mt-8 grid gap-0 border-2 border-[#1c1410] sm:grid-cols-2 lg:grid-cols-4">
            {categories.map((cat, i) => (
              <button
                key={cat.id}
                type="button"
                onClick={() => openCatalog(cat.id)}
                className={`group overflow-hidden border-[#1c1410] bg-[#FBF7F1] text-left transition hover:bg-[#e07a3d]/10 ${
                  i < categories.length - 1 ? "border-b-2 lg:border-b-0 lg:border-r-2" : ""
                } ${i % 2 === 0 && i < 2 ? "sm:border-r-2" : ""} ${i === 1 ? "sm:border-r-0 lg:border-r-2" : ""}`}
              >
                <img
                  src={cat.image}
                  alt={cat.label}
                  className="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-[1.03]"
                />
                <div className="border-t-2 border-[#1c1410] p-4">
                  <p className="text-sm font-extrabold tracking-[0.08em] text-[#1c1410] uppercase">{cat.label}</p>
                  <p className="mt-1 text-xs leading-5 text-[#7a6558]">{cat.blurb}</p>
                </div>
              </button>
            ))}
          </div>
        </section>

<section>
          <SectionTitle
            eyebrow="How it works"
            title="From stall to bag."
            body="Find, reserve, pickup or ship—then live with it."
          />
          <ol className="mt-8 grid gap-0 border-2 border-[#1c1410] sm:grid-cols-2 lg:grid-cols-4">
            {howItWorks.map((item, i) => (
              <li
                key={item.step}
                className={`bg-[#FBF7F1] p-5 ${
                  i < howItWorks.length - 1 ? "border-b-2 border-[#1c1410] lg:border-b-0 lg:border-r-2" : ""
                } ${i % 2 === 0 && i < 2 ? "sm:border-r-2 sm:border-[#1c1410]" : ""} ${i === 1 ? "sm:border-r-0 lg:border-r-2" : ""}`}
              >
                <p className="text-3xl font-extrabold text-[#e07a3d]">{item.step}</p>
                <h3 className="mt-3 text-sm font-extrabold tracking-[0.1em] text-[#1c1410] uppercase">{item.title}</h3>
                <p className="mt-2 text-sm leading-6 text-[#7a6558]">{item.body}</p>
              </li>
            ))}
          </ol>
        </section>

<section>
          <SectionTitle eyebrow="Reviews" title="From the river walk." body="Shoppers on pickup, packing, and makers." />
          <div className="mt-8 grid gap-4 md:grid-cols-3">
            {homeTestimonials.map((t) => (
              <Panel key={t.id} className="flex flex-col border-2 border-[#1c1410] p-6">
                <div className="flex gap-0.5">
                  {Array.from({ length: 5 }, (_, i) => (
                    <StarGlyph key={i} className="size-3.5" filled={i < t.rating} />
                  ))}
                </div>
                <p className="mt-4 flex-1 text-sm leading-6 text-[#7a6558]">“{t.body}”</p>
                <div className="mt-5 border-t border-[#1c1410]/15 pt-4">
                  <p className="text-xs font-bold tracking-[0.12em] text-[#1c1410] uppercase">{t.name}</p>
                  <p className="mt-1 text-xs text-[#7a6558]">{t.role}</p>
                </div>
              </Panel>
            ))}
          </div>
        </section>

<section className="grid overflow-hidden border-2 border-[#1c1410] md:grid-cols-[0.85fr_1.15fr]">
          <img
            src={makerOfWeek.portrait}
            alt={makerOfWeek.name}
            width={700}
            height={900}
            className="min-h-[320px] w-full object-cover"
          />
          <div className="flex flex-col justify-center bg-[#1c1410] px-8 py-12 text-[#f6ede4]">
            <p className="text-[11px] font-bold tracking-[0.28em] text-[#e07a3d] uppercase">Maker of the week</p>
            <h2 className="mt-3 text-4xl font-extrabold tracking-tight">{makerOfWeek.name}</h2>
            <p className="mt-2 text-sm text-[#d4c4b4]">{makerOfWeek.stall}</p>
            <p className="mt-5 max-w-md text-sm leading-7 text-[#d4c4b4]">{makerOfWeek.bio}</p>
            <div className="mt-6">
              <Button onClick={() => openCatalog("ceramics")}>See ceramics</Button>
            </div>
          </div>
        </section>

<section className="grid gap-8 border-t-2 border-[#1c1410] py-12 md:grid-cols-[1.2fr_0.8fr]">
          <div>
            <h2 className="text-3xl font-extrabold tracking-tight text-[#1c1410]">Saturday market, Lisbon river</h2>
            <p className="mt-3 max-w-md text-sm leading-6 text-[#7a6558]">
              Stalls rotate every week. Pickup at the riverside tent, or we ship in recycled paper from Tuesday.
            </p>
            <form className="mt-6 flex max-w-md gap-0 border-2 border-[#1c1410]" onSubmit={(e) => e.preventDefault()}>
              <input
                className="h-11 flex-1 bg-white px-4 text-sm outline-none"
                placeholder="Email for the stall list"
              />
              <Button variant="ink" type="button" className="!rounded-none !border-0">
                Subscribe
              </Button>
            </form>
            <p className="mt-4 text-xs text-[#7a6558]">
              Prefer an account?{" "}
              <button type="button" className="font-bold text-[#e07a3d] uppercase tracking-wide" onClick={() => setView("signup")}>
                Join Bazaar
              </button>
            </p>
          </div>
          <img
            src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=1000&h=700&q=80"
            alt="Market produce and crafts"
            width={1000}
            height={700}
            className="aspect-[4/3] w-full border-2 border-[#1c1410] object-cover"
          />
        </section>
      </div>
    </div>
  );
}
33:T828,"use client";

import { Button, Field, Panel } from "../components/ui";
import { BazaarMark } from "../components/marks";
import { useBazaarNav } from "../lib/nav-context";

const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" };

export function LoginView() {
  const { setView, goHome } = useBazaarNav();

return (
    <div className="bazaar-fade mx-auto grid max-w-4xl gap-6 px-4 py-12 sm:px-6 lg:grid-cols-[0.95fr_1.05fr]">
      <Panel className="hidden flex-col justify-between overflow-hidden p-0 lg:flex">
        <img
          src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1000&h=1200&q=80"
          alt=""
          className="h-full min-h-[420px] w-full object-cover"
        />
      </Panel>
      <Panel className="p-8">
        <div className="flex flex-col items-center text-center">
          <BazaarMark className="size-10" />
          <h1 className="mt-4 text-2xl text-[#1c1410]" style={display}>
            Welcome back
          </h1>
          <p className="mt-2 text-sm text-[#7a6558]">Sign in to track orders and Saturday holds.</p>
        </div>
        <div className="mt-8 space-y-4">
          <Field label="Email" type="email" placeholder="you@atelier.lisboa" />
          <Field label="Password" type="password" placeholder="••••••••" />
          <div className="flex justify-end">
            <button type="button" className="text-xs font-medium text-[#e07a3d]">
              Forgot password?
            </button>
          </div>
          <Button className="w-full" onClick={() => setView("account")}>
            Sign in
          </Button>
          <Button variant="ghost" className="w-full" onClick={goHome}>
            Continue as guest
          </Button>
        </div>
        <p className="mt-6 text-center text-sm text-[#7a6558]">
          New here?{" "}
          <button type="button" className="font-medium text-[#e07a3d]" onClick={() => setView("signup")}>
            Create an account
          </button>
        </p>
      </Panel>
    </div>
  );
}
34:T209c,"use client";

import { useState } from "react";
import { getProduct, getReviews, relatedProducts, formatPrice } from "../lib/data";
import { StallCard } from "../components/stall-card";
import { StarGlyph } from "../components/marks";
import { Badge, Button, Panel, SectionTitle } from "../components/ui";
import { useCart } from "../lib/cart-context";
import { useBazaarNav } from "../lib/nav-context";

const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" };

export function ProductView() {
  const { productId, openCatalog, setView, goHome } = useBazaarNav();
  const { addItem } = useCart();
  const product = getProduct(productId);
  const [activeImage, setActiveImage] = useState(0);
  const [qty, setQty] = useState(1);

if (!product) {
    return (
      <div className="bazaar-fade mx-auto max-w-6xl px-4 py-16 text-center sm:px-6">
        <Panel className="mx-auto max-w-md p-10">
          <p className="text-[#1c1410]" style={display}>
            Stall not found
          </p>
          <p className="mt-2 text-sm text-[#7a6558]">Choose another piece from the market.</p>
          <Button className="mt-6" onClick={() => openCatalog("all")}>
            Back to shop
          </Button>
        </Panel>
      </div>
    );
  }

const productReviews = getReviews(product.id);
  const related = relatedProducts(product);
  const gallery = product.gallery.length ? product.gallery : [product.image];
  const categoryLabel = product.category.charAt(0).toUpperCase() + product.category.slice(1);

return (
    <div className="bazaar-fade mx-auto max-w-6xl space-y-14 px-4 py-8 sm:px-6 sm:py-10">
      <nav className="flex flex-wrap items-center gap-2 text-sm text-[#7a6558]" aria-label="Breadcrumb">
        <button type="button" onClick={goHome} className="transition hover:text-[#1c1410]">
          Home
        </button>
        <span aria-hidden>/</span>
        <button type="button" onClick={() => openCatalog("all")} className="transition hover:text-[#1c1410]">
          Shop
        </button>
        <span aria-hidden>/</span>
        <button type="button" onClick={() => openCatalog(product.category)} className="transition hover:text-[#1c1410]">
          {categoryLabel}
        </button>
        <span aria-hidden>/</span>
        <span className="font-medium text-[#1c1410]">{product.name}</span>
      </nav>

<div className="grid gap-8 lg:grid-cols-[1.05fr_0.95fr]">
        <div>
          <Panel className="overflow-hidden p-3">
            <img
              src={gallery[activeImage] ?? product.image}
              alt={product.name}
              className="aspect-square w-full rounded-xl object-cover"
            />
          </Panel>
          <div className="mt-3 grid grid-cols-3 gap-3">
            {gallery.map((src, i) => (
              <button
                key={src}
                type="button"
                onClick={() => setActiveImage(i)}
                className={`overflow-hidden rounded-2xl border transition ${
                  i === activeImage
                    ? "border-[#e07a3d] ring-2 ring-[#e07a3d]/20"
                    : "border-[#e2d4c6] opacity-80 hover:opacity-100"
                }`}
              >
                <img src={src} alt="" className="aspect-square w-full object-cover" />
              </button>
            ))}
          </div>
        </div>

<div>
          <div className="flex flex-wrap items-center gap-2">
            {product.badge ? <Badge tone="accent">{product.badge}</Badge> : null}
            <Badge tone="muted">{product.category}</Badge>
          </div>
          <h1 className="mt-3 text-3xl text-[#1c1410] sm:text-4xl" style={display}>
            {product.name}
          </h1>
          <p className="mt-2 text-sm text-[#7a6558]">
            {product.maker} · {product.tagline}
          </p>
          <div className="mt-3 flex items-center gap-2 text-sm text-[#7a6558]">
            <StarGlyph className="size-4" filled />
            <span>
              {product.rating} · {product.reviewCount} reviews
            </span>
          </div>
          <div className="mt-5 flex items-baseline gap-3">
            <p className="text-3xl font-semibold text-[#e07a3d]">{formatPrice(product.price)}</p>
            {product.compareAt ? (
              <p className="text-sm text-[#7a6558] line-through">{formatPrice(product.compareAt)}</p>
            ) : null}
          </div>
          <p className="mt-5 text-sm leading-7 text-[#7a6558]">{product.description}</p>

<ul className="mt-6 space-y-2">
            {product.details.map((d) => (
              <li key={d} className="flex items-center gap-2 text-sm text-[#7a6558]">
                <span className="size-1.5 rounded-full bg-[#e07a3d]" />
                {d}
              </li>
            ))}
          </ul>

<div className="mt-8 flex flex-wrap items-center gap-3">
            <div className="inline-flex items-center rounded-full border border-[#e2d4c6] bg-white p-1">
              <button
                type="button"
                className="size-10 rounded-full text-[#1c1410] hover:bg-[#f6ede4]"
                onClick={() => setQty((q) => Math.max(1, q - 1))}
              >
                −
              </button>
              <span className="w-10 text-center text-sm font-medium">{qty}</span>
              <button
                type="button"
                className="size-10 rounded-full text-[#1c1410] hover:bg-[#f6ede4]"
                onClick={() => setQty((q) => q + 1)}
              >
                +
              </button>
            </div>
            <Button
              onClick={() => {
                addItem(product.id, qty);
                setView("cart");
              }}
            >
              Add to bag
            </Button>
            <Button
              variant="secondary"
              onClick={() => {
                addItem(product.id, qty);
                setView("checkout");
              }}
            >
              Buy now
            </Button>
          </div>

<Panel className="mt-8 grid gap-3 p-4 sm:grid-cols-3">
            {[
              { t: "Saturday pickup", d: "Cais do Sodré tent" },
              { t: "Ship from Tuesday", d: "Recycled paper" },
              { t: "14-day returns", d: "Easy exchanges" },
            ].map((item) => (
              <div key={item.t}>
                <p className="text-xs font-medium text-[#1c1410]">{item.t}</p>
                <p className="text-[11px] text-[#7a6558]">{item.d}</p>
              </div>
            ))}
          </Panel>
        </div>
      </div>

<section>
        <SectionTitle eyebrow="Reviews" title="What shoppers say." />
        <div className="mt-6 grid gap-4 md:grid-cols-2">
          {(productReviews.length
            ? productReviews
            : [
                {
                  id: "fallback",
                  productId: product.id,
                  author: "Market regular",
                  rating: product.rating,
                  date: "Recently",
                  body: "Careful packing and a maker who answers questions at the tent—exactly as hoped.",
                },
              ]
          ).map((review) => (
            <Panel key={review.id} className="p-5">
              <div className="flex items-center justify-between gap-3">
                <p className="text-sm font-medium text-[#1c1410]">{review.author}</p>
                <div className="flex items-center gap-1">
                  {Array.from({ length: 5 }, (_, i) => (
                    <StarGlyph key={i} className="size-3.5" filled={i < Math.round(review.rating)} />
                  ))}
                </div>
              </div>
              <p className="mt-1 text-xs text-[#7a6558]">{review.date}</p>
              <p className="mt-3 text-sm leading-6 text-[#7a6558]">{review.body}</p>
            </Panel>
          ))}
        </div>
      </section>

{related.length ? (
        <section>
          <SectionTitle eyebrow="Related" title="More from this corner." />
          <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {related.map((p) => (
              <StallCard key={p.id} product={p} />
            ))}
          </div>
        </section>
      ) : null}
    </div>
  );
}
35:Ta08,"use client";

import { Button, Field, Panel } from "../components/ui";
import { BazaarMark } from "../components/marks";
import { useBazaarNav } from "../lib/nav-context";

const display = { fontFamily: "Montserrat, ui-sans-serif, sans-serif" };

const perks = [
  "Early stall list every Thursday",
  "Free shipping over €80",
  "Order history & Saturday holds",
];

export function SignupView() {
  const { setView } = useBazaarNav();

return (
    <div className="bazaar-fade mx-auto grid max-w-4xl gap-6 px-4 py-12 sm:px-6 lg:grid-cols-[1.05fr_0.95fr]">
      <Panel className="p-8">
        <div className="flex flex-col items-center text-center">
          <BazaarMark className="size-10" />
          <h1 className="mt-4 text-2xl text-[#1c1410]" style={display}>
            Join Bazaar
          </h1>
          <p className="mt-2 text-sm text-[#7a6558]">Stall lists, holds, and free shipping over €80.</p>
        </div>
        <div className="mt-8 space-y-4">
          <Field label="Full name" placeholder="Sofia Almeida" />
          <Field label="Email" type="email" placeholder="you@atelier.lisboa" />
          <Field label="Password" type="password" placeholder="Create a password" />
          <label className="flex items-start gap-2 text-xs leading-5 text-[#7a6558]">
            <input type="checkbox" defaultChecked className="mt-0.5 accent-[#e07a3d]" />
            Email me the weekly stall list. Unsubscribe anytime.
          </label>
          <Button className="w-full" variant="ink" onClick={() => setView("account")}>
            Create account
          </Button>
        </div>
        <p className="mt-6 text-center text-sm text-[#7a6558]">
          Already a member?{" "}
          <button type="button" className="font-medium text-[#e07a3d]" onClick={() => setView("login")}>
            Sign in
          </button>
        </p>
      </Panel>
      <Panel className="flex flex-col justify-center p-8">
        <p className="text-[11px] font-semibold tracking-[0.2em] text-[#e07a3d] uppercase">Member perks</p>
        <ul className="mt-5 space-y-3">
          {perks.map((perk) => (
            <li key={perk} className="flex items-start gap-2 text-sm text-[#7a6558]">
              <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-[#e07a3d]" />
              {perk}
            </li>
          ))}
        </ul>
        <p className="mt-8 text-sm leading-6 text-[#7a6558]">
          No spam. Just the stall list, maker notes, and pickup reminders when you need them.
        </p>
      </Panel>
    </div>
  );
}
18:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"Bazaar Stalls\",\"description\":\"Editorial Saturday market: Montserrat, awning stripes, full-bleed poster hero, square stall grid, Lisbon river tone.\",\"applicationCategory\":\"DeveloperApplication\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"url\":\"https://templiq.vercel.app/templates/bazaar-stalls\"}"}}],["$","$L20",null,{"template":{"slug":"bazaar-stalls","title":"Bazaar Stalls","description":"Editorial Saturday market: Montserrat, awning stripes, full-bleed poster hero, square stall grid, Lisbon river tone.","kind":"project","tags":["ecommerce","marketplace","navbar"],"stack":["Next.js","React","Tailwind CSS"],"difficulty":"advanced","createdAt":"2026-09-13","entry":"app/page.tsx","version":"4.1.0","access":"pro","changelog":[{"version":"4.1.0","date":"2026-09-14","notes":"Unique editorial look: Montserrat, awning stripe, poster hero, hard borders—distinct from Lumina glass."},{"version":"4.0.0","date":"2026-09-14","notes":"Multipage marketplace, awning B logo, cart/checkout/auth/account, hero stall slider."},{"version":"3.0.0","date":"2026-09-13","notes":"Marketplace completeness: promo, mark, featured hero, maker spotlight, newsletter, footer."},{"version":"2.0.0","date":"2026-09-13","notes":"Premium marketplace rebuild: photographed products, filters, stall cards."},{"version":"1.0.0","date":"2026-09-13","notes":"Initial marketplace project."}],"files":[{"path":"app/layout.tsx","content":"$21","language":"tsx","isEntry":false},{"path":"app/page.tsx","content":"$22","language":"tsx","isEntry":true},{"path":"components/hero-spotlight.tsx","content":"$23","language":"tsx","isEntry":false},{"path":"components/marks.tsx","content":"$24","language":"tsx","isEntry":false},{"path":"components/site-footer.tsx","content":"$25","language":"tsx","isEntry":false},{"path":"components/site-header.tsx","content":"$26","language":"tsx","isEntry":false},{"path":"components/stall-card.tsx","content":"$27","language":"tsx","isEntry":false},{"path":"components/ui.tsx","content":"$28","language":"tsx","isEntry":false},{"path":"lib/cart-context.tsx","content":"$29","language":"tsx","isEntry":false},{"path":"lib/data.ts","content":"$2a","language":"typescript","isEntry":false},{"path":"lib/nav-context.tsx","content":"$2b","language":"tsx","isEntry":false},{"path":"views/about.tsx","content":"$2c","language":"tsx","isEntry":false},{"path":"views/account.tsx","content":"$2d","language":"tsx","isEntry":false},{"path":"views/cart.tsx","content":"$2e","language":"tsx","isEntry":false},{"path":"views/catalog.tsx","content":"$2f","language":"tsx","isEntry":false},{"path":"views/checkout.tsx","content":"$30","language":"tsx","isEntry":false},{"path":"views/contact.tsx","content":"$31","language":"tsx","isEntry":false},{"path":"views/home.tsx","content":"$32","language":"tsx","isEntry":false},{"path":"views/login.tsx","content":"$33","language":"tsx","isEntry":false},{"path":"views/product.tsx","content":"$34","language":"tsx","isEntry":false},{"path":"views/signup.tsx","content":"$35","language":"tsx","isEntry":false}]}}]]
1b:null
1f:[["$","title","0",{"children":"Bazaar Stalls · Templiq"}],["$","meta","1",{"name":"description","content":"Editorial Saturday market: Montserrat, awning stripes, full-bleed poster hero, square stall grid, Lisbon river tone."}],["$","meta","2",{"name":"keywords","content":"Ecommerce,Marketplace,Navbar"}],["$","link","3",{"rel":"canonical","href":"https://templiq.vercel.app/templates/bazaar-stalls"}],["$","meta","4",{"property":"og:title","content":"Bazaar Stalls · Templiq"}],["$","meta","5",{"property":"og:description","content":"Editorial Saturday market: Montserrat, awning stripes, full-bleed poster hero, square stall grid, Lisbon river tone."}],["$","meta","6",{"property":"og:url","content":"https://templiq.vercel.app/templates/bazaar-stalls"}],["$","meta","7",{"property":"og:site_name","content":"Templiq"}],["$","meta","8",{"property":"og:image","content":"https://templiq.vercel.app/templates/bazaar-stalls/opengraph-image?d1fb2f166f869abe"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Template"}],["$","meta","13",{"property":"og:type","content":"article"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"Bazaar Stalls · Templiq"}],["$","meta","16",{"name":"twitter:description","content":"Editorial Saturday market: Montserrat, awning stripes, full-bleed poster hero, square stall grid, Lisbon river tone."}],["$","meta","17",{"name":"twitter:image","content":"https://templiq.vercel.app/templates/bazaar-stalls/opengraph-image?d1fb2f166f869abe"}],["$","meta","18",{"name":"twitter:image:alt","content":"Template"}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/templiq-favicon.svg","type":"image/svg+xml"}],["$","$L36","23",{}]]
</article></body></html>