21: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"] 22:T55f,"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 LuminaShell({ children }: { children: React.ReactNode }) { return (

{children}

); } 23:T47b,"use client"; import { useLuminaNav } 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 LuminaShopPage() { const { view } = useLuminaNav(); 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}

); } 24:Tcec,"use client"; import { useEffect, useState } from "react"; import { formatPrice, getProduct, heroSlides } from "../lib/data"; import { useLuminaNav } from "../lib/nav-context"; import { Button, Glass } from "./ui"; export function HeroSpotlight() { const { openProduct } = useLuminaNav(); 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 (

{product.name}

{slide.tagline}

{formatPrice(product.price)}

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

); } 25:T1269,export function LuminaMark({ 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 ReturnGlyph({ className }: { className?: string }) { return ( ); } export function ShieldGlyph({ className }: { className?: string }) { return ( ); } export function ChatGlyph({ className }: { className?: string }) { return ( ); } export function SearchGlyph({ className }: { className?: string }) { return ( ); } 26:T1604,"use client"; import { useState } from "react"; import { formatPrice, type Product } from "../lib/data"; import { useCart } from "../lib/cart-context"; import { useLuminaNav } from "../lib/nav-context"; import { StarGlyph, CloseGlyph } from "./marks"; import { Badge, Button, Glass } from "./ui"; export function ProductCard({ product }: { product: Product }) { const { openProduct } = useLuminaNav(); const [quickOpen, setQuickOpen] = useState(false); return ( <>

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

{quickOpen ? setQuickOpen(false)} /> : null} ); } function QuickViewModal({ product, onClose }: { product: Product; onClose: () => void }) { const { addItem } = useCart(); const { openProduct, setView } = useLuminaNav(); return ( ); } 27:Tb05,"use client"; import { LuminaMark } from "./marks"; import { useLuminaNav } from "../lib/nav-context"; export function SiteFooter() { const { setView, goHome, openCatalog } = useLuminaNav(); return ( ); } 28:T12f0,"use client"; import { useState } from "react"; import { BagGlyph, CloseGlyph, LuminaMark, MenuGlyph, UserGlyph } from "./marks"; import { useCart } from "../lib/cart-context"; import { useLuminaNav, type LuminaView } from "../lib/nav-context"; import { glass } from "./ui"; const links: { label: string; view: LuminaView }[] = [ { label: "Home", view: "home" }, { label: "Shop", view: "catalog" }, { label: "About", view: "about" }, { label: "Contact", view: "contact" }, ]; export function SiteHeader() { const { view, setView, goHome, openCatalog } = useLuminaNav(); const { count } = useCart(); const [open, setOpen] = useState(false); const go = (next: LuminaView) => { if (next === "catalog") openCatalog("all"); else if (next === "home") goHome(); else setView(next); setOpen(false); }; return (

{open ? (

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

) : null}

); } 29:Tc20,import type { ButtonHTMLAttributes, ReactNode } from "react"; const glass = "bg-white/55 backdrop-blur-xl border border-white/60 shadow-[0_8px_32px_rgba(15,23,42,0.06)]"; export function Glass({ children, className = "", as: Tag = "div", }: { children: ReactNode; className?: string; as?: "div" | "section" | "article" | "aside" | "li"; }) { return {children}; } type ButtonVariant = "primary" | "secondary" | "ghost" | "indigo"; const buttonStyles: Record = { primary: "bg-[#0D9488] text-white hover:bg-[#0F766E] shadow-[0_8px_20px_rgba(13,148,136,0.25)]", secondary: "bg-white/70 text-[#0F172A] border border-white/70 hover:bg-white shadow-[0_4px_16px_rgba(15,23,42,0.06)]", ghost: "bg-transparent text-[#0F172A] hover:bg-white/50", indigo: "bg-[#4F46E5] text-white hover:bg-[#4338CA] shadow-[0_8px_20px_rgba(79,70,229,0.22)]", }; export function Button({ variant = "primary", className = "", children, ...props }: ButtonHTMLAttributes & { variant?: ButtonVariant }) { return ( ); } export function Badge({ children, tone = "teal" }: { children: ReactNode; tone?: "teal" | "indigo" | "slate" }) { const tones = { teal: "bg-[#CCFBF1] text-[#0F766E]", indigo: "bg-[#E0E7FF] text-[#4338CA]", slate: "bg-[#F1F5F9] text-[#475569]", }; 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}

); } export { glass }; 2a: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; } 2b:T3e23,export type CategoryId = "ceramics" | "lamps" | "textiles" | "furniture"; export type Product = { id: string; name: string; category: CategoryId; price: number; compareAt?: number; image: string; gallery: string[]; rating: number; reviewCount: number; badge?: "Sale" | "New"; description: string; details: 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" | "Processing"; total: number; items: { productId: string; qty: number }[]; }; export const categories: { id: CategoryId; label: string; blurb: string; image: string }[] = [ { id: "ceramics", label: "Ceramics", blurb: "Hand-thrown vessels for everyday ritual.", image: "https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "lamps", label: "Lamps", blurb: "Soft glow for quiet evenings.", image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "textiles", label: "Textiles", blurb: "Layered linen, wool, and weave.", image: "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?auto=format&fit=crop&w=900&h=700&q=80", }, { id: "furniture", label: "Furniture", blurb: "Low profiles, warm timber, calm lines.", image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=900&h=700&q=80", }, ]; export const products: Product[] = [ { id: "luna-bowl", name: "Luna Speckle Bowl", category: "ceramics", price: 48, compareAt: 62, image: "https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1610701596007-11502861dcfa?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", "https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.8, reviewCount: 42, badge: "Sale", description: "A wide ceramic bowl with a soft speckled glaze—made for fruit, salad, or simply sitting on a quiet shelf.", details: ["Stoneware, matte glaze", "Ø 24 cm", "Dishwasher safe", "Made in Portugal"], }, { id: "arc-vase", name: "Arc Narrow Vase", category: "ceramics", price: 72, 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-1603199506016-b9a694b4555d?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.6, reviewCount: 28, badge: "New", description: "Tall and tapered with a cool celadon finish—holds a single stem or a sparse branch arrangement.", details: ["Porcelain", "H 32 cm", "Hand finished", "Water-tight"], }, { id: "mist-mug", name: "Mist Stack Mug", category: "ceramics", price: 28, image: "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1577937927133-66ef06acdf18?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.9, reviewCount: 91, description: "Everyday mug with a soft mist glaze and a comfortable lip. Stacks neatly for open shelving.", details: ["Stoneware", "350 ml", "Microwave safe", "Set of one"], }, { id: "halo-lamp", name: "Halo Paper Lamp", category: "lamps", price: 128, compareAt: 148, image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1543198126-a8ad8e47fb22?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.7, reviewCount: 56, badge: "Sale", description: "A diffused paper shade on a brushed brass stem—casts a warm halo without glare.", details: ["Paper & brass", "H 48 cm", "E27 bulb included", "Dimmer compatible"], }, { id: "orb-sconce", name: "Orb Glass Sconce", category: "lamps", price: 96, image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1543198126-a8ad8e47fb22?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1524484486411-62810c267c50?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.5, reviewCount: 19, badge: "New", description: "Wall-mounted frosted orb with a discreet mount—ideal for hallways and bedside corners.", details: ["Frosted glass", "Ø 18 cm", "Hardwired", "Warm white LED"], }, { id: "line-desk", name: "Line Desk Lamp", category: "lamps", price: 84, image: "https://images.unsplash.com/photo-1534073828943-f801091bb18c?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1534073828943-f801091bb18c?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1524484486411-62810c267c50?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.4, reviewCount: 33, description: "Minimal arm lamp with a matte black finish—precise task light without visual noise.", details: ["Powder-coated steel", "Adjustable arm", "USB-C power", "Flicker-free LED"], }, { id: "drift-throw", name: "Drift Linen Throw", category: "textiles", price: 118, 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-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1631679706909-1844bbd07221?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.8, reviewCount: 67, badge: "New", description: "Stone-washed linen throw with a soft drape—layer over a sofa or foot of the bed.", details: ["100% linen", "140 × 200 cm", "Stone washed", "Machine wash cold"], }, { id: "tide-cushion", name: "Tide Weave Cushion", category: "textiles", price: 54, compareAt: 68, image: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1631679706909-1844bbd07221?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: 41, badge: "Sale", description: "Textured weave cushion in cool mist tones—pairs with linen and timber.", details: ["Cotton blend cover", "50 × 50 cm", "Feather insert", "Hidden zip"], }, { id: "cloud-rug", name: "Cloud Wool Rug", category: "textiles", price: 320, image: "https://images.unsplash.com/photo-1600166898405-da9535204843?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1600166898405-da9535204843?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1618219908412-a29a1bb7b88e?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1631679706909-1844bbd07221?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.9, reviewCount: 24, description: "Low-pile wool rug with a cloud-soft hand feel—anchors a seating area without heavy pattern.", details: ["New Zealand wool", "160 × 230 cm", "Hand tufted", "Anti-slip backing"], }, { id: "nara-sofa", name: "Nara Lounge Sofa", category: "furniture", price: 1480, image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.7, reviewCount: 18, badge: "New", description: "Low-profile lounge sofa in oatmeal bouclé—deep seat, quiet silhouette, room-defining calm.", details: ["Kiln-dried oak frame", "Bouclé upholstery", "W 210 cm", "White-glove delivery"], }, { id: "folio-table", name: "Folio Side Table", category: "furniture", price: 240, compareAt: 280, image: "https://images.unsplash.com/photo-1532372320572-cda25690e241?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1532372320572-cda25690e241?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.5, reviewCount: 37, badge: "Sale", description: "Compact oak side table with a floating top—fits beside a lounge chair or bed.", details: ["Solid oak", "H 50 cm", "Oil finish", "Assembled"], }, { id: "ridge-shelf", name: "Ridge Wall Shelf", category: "furniture", price: 168, image: "https://images.unsplash.com/photo-1595428774223-ef52624120d2?auto=format&fit=crop&w=900&h=900&q=80", gallery: [ "https://images.unsplash.com/photo-1595428774223-ef52624120d2?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1532372320572-cda25690e241?auto=format&fit=crop&w=1100&h=1100&q=80", "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1100&h=1100&q=80", ], rating: 4.6, reviewCount: 29, description: "Floating shelf with a subtle ridge edge—display ceramics and small lamps with ease.", details: ["Ash wood", "L 90 cm", "Hidden brackets", "Holds 12 kg"], }, ]; export const reviews: Review[] = [ { id: "r1", productId: "luna-bowl", author: "Mira K.", rating: 5, date: "Aug 12, 2026", body: "Beautiful weight and glaze. Ours lives on the dining table every day.", }, { id: "r2", productId: "luna-bowl", author: "Jonah P.", rating: 4, date: "Jul 28, 2026", body: "Slightly larger than expected—in a good way. Packaging was careful.", }, { id: "r3", productId: "halo-lamp", author: "Elena R.", rating: 5, date: "Sep 2, 2026", body: "The light is soft and flattering. Exactly the evening mood we wanted.", }, { id: "r4", productId: "drift-throw", author: "Chris T.", rating: 5, date: "Aug 20, 2026", body: "Linen softens quickly. Lovely drape over our sofa.", }, { id: "r5", productId: "nara-sofa", author: "Ava S.", rating: 5, date: "Jun 9, 2026", body: "Delivery team was thoughtful. The bouclé feels premium without looking precious.", }, { id: "r6", productId: "arc-vase", author: "Noah L.", rating: 4, date: "Sep 5, 2026", body: "Elegant silhouette. Holds stems well without tipping.", }, ]; export const orders: Order[] = [ { id: "LS-20481", date: "Aug 18, 2026", status: "Delivered", total: 176, items: [ { productId: "luna-bowl", qty: 1 }, { productId: "halo-lamp", qty: 1 }, ], }, { id: "LS-20512", date: "Sep 1, 2026", status: "Shipped", total: 172, items: [ { productId: "drift-throw", qty: 1 }, { productId: "tide-cushion", qty: 1 }, ], }, { id: "LS-20544", date: "Sep 10, 2026", status: "Processing", total: 240, items: [{ productId: "folio-table", qty: 1 }], }, ]; export const profile = { name: "Alex Morgan", email: "alex@studio.lumina", phone: "+1 (415) 555-0142", address: "128 Harbor Lane, Apt 4B", city: "San Francisco, CA 94107", }; /** Hero product spotlight slides (image + copy rotate together). */ export const heroSlides: { productId: string; tagline: string }[] = [ { productId: "halo-lamp", tagline: "Evening light · brass stem" }, { productId: "luna-bowl", tagline: "Everyday ceramic · soft glaze" }, { productId: "drift-throw", tagline: "Linen layers · quiet evenings" }, { productId: "nara-sofa", tagline: "Low profile · warm timber" }, ]; export const trustItems = [ { id: "ship", title: "Free shipping", body: "On orders over $120" }, { id: "return", title: "30-day returns", body: "Easy exchanges, no fuss" }, { id: "pay", title: "Secure checkout", body: "Encrypted card payments" }, { id: "care", title: "Studio support", body: "Reply within one business day" }, ] as const; export const homeTestimonials = [ { id: "t1", name: "Elena R.", role: "San Francisco", rating: 5, body: "The Halo lamp changed our evenings. Soft light, careful packing, and packaging that didn’t feel wasteful.", }, { id: "t2", name: "Mira K.", role: "Portland", rating: 5, body: "Ceramics arrived without a scratch. The Luna bowl is on our table every day—exactly as photographed.", }, { id: "t3", name: "Chris T.", role: "Austin", rating: 5, body: "Checkout felt calm, delivery tracked, and the Drift throw is the softest linen we’ve owned.", }, ] as const; export const howItWorks = [ { step: "01", title: "Choose", body: "Browse rooms and filters. Save pieces that fit your light and layout.", }, { step: "02", title: "Order", body: "Add to bag, checkout securely, and pick a delivery window that works.", }, { step: "03", title: "Receive", body: "Tracked shipping in recycled packing. Unbox, place, live with it.", }, { step: "04", title: "Settle in", body: "Need a swap? 30-day returns and studio support stay with you.", }, ] 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("en-US", { style: "currency", currency: "USD", 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); } 2c:Taa9,"use client"; import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react"; import type { CategoryId } from "./data"; export type LuminaView = | "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: LuminaView; productId: string | null; filters: CatalogFilters; setView: (view: LuminaView) => void; goHome: () => void; openCatalog: (category?: CategoryId | "all") => void; openProduct: (id: string) => void; setFilters: (patch: Partial) => void; resetFilters: () => void; }; const defaultFilters: CatalogFilters = { category: "all", maxPrice: 1500, 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: LuminaView) => { 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 useLuminaNav() { const ctx = useContext(NavContext); if (!ctx) throw new Error("useLuminaNav must be used within NavProvider"); return ctx; } 2d:Tf6b,"use client"; import { Button, Glass, SectionTitle } from "../components/ui"; import { useLuminaNav } from "../lib/nav-context"; const stats = [ { value: "12 yrs", label: "editing quiet rooms" }, { value: "48", label: "makers in the roster" }, { value: "30d", label: "easy returns" }, ]; const timeline = [ { year: "2014", body: "Started as a ceramics stall in a weekend market." }, { year: "2019", body: "Opened the Harbor Lane studio and online edit." }, { year: "2024", body: "Expanded into lamps, textiles, and low furniture." }, { year: "2026", body: "Lumina Shop—glass-soft commerce for calmer homes." }, ]; export function AboutView() { const { openCatalog, setView } = useLuminaNav(); return (

{stats.map((s) => (

{s.value}

{s.label}

))}

Studio note

Designed like glass—clear, calm, light-catching.

We work with small makers and careful factories. Every piece is photographed in natural light and edited for rooms that feel soft rather than staged.

{item.year}

{item.body}

{[ { title: "Materials first", body: "Stoneware, linen, wool, oak—finishes that age with grace." }, { title: "Soft logistics", body: "Recycled packaging, careful packing, tracked delivery." }, { title: "Member care", body: "Easy exchanges, order history, and early access to drops." }, ].map((item) => (

{item.title}

{item.body}

))}

); } 2e:T10ac,"use client"; import { formatPrice, getProduct, orders, profile } from "../lib/data"; import { Badge, Button, Field, Glass, SectionTitle } from "../components/ui"; import { useLuminaNav } from "../lib/nav-context"; export function AccountView() { const { openProduct, setView, openCatalog } = useLuminaNav(); 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 New drop alerts

Saved for later

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

); } 2f:T1747,"use client"; import { formatPrice, getProduct } from "../lib/data"; import { Button, Glass, SectionTitle } from "../components/ui"; import { useCart } from "../lib/cart-context"; import { useLuminaNav } from "../lib/nav-context"; export function CartView() { const { lines, subtotal, setQty, removeItem } = useCart(); const { setView, openCatalog, openProduct } = useLuminaNav(); const shipping = subtotal >= 120 || subtotal === 0 ? 0 : 12; const total = subtotal + shipping; return (

{!lines.length ? (

Your cart is empty

Browse the edit and add a few quiet pieces.

) : (

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

{product.category}

{formatPrice(product.price)}

{line.qty}

); })}

Order summary

{subtotal < 120 ? (

Add {formatPrice(120 - subtotal)} more for free shipping.

) : (

Free shipping unlocked.

)}

Subtotal {formatPrice(subtotal)}

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

Total {formatPrice(total)}

Secure checkout · 30-day returns · Recycled packing

)}

); } 30:T1f18,"use client"; import { categories, formatPrice, products, type CategoryId } from "../lib/data"; import { ProductCard } from "../components/product-card"; import { SearchGlyph } from "../components/marks"; import { Button, Glass, SectionTitle } from "../components/ui"; import { useLuminaNav, type SortOption } from "../lib/nav-context"; const PAGE_SIZE = 8; export function CatalogView() { const { filters, setFilters, resetFilters, openCatalog, goHome } = useLuminaNav(); 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.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 ceramics, lamps, linen…" className="h-10 w-full bg-transparent text-sm text-[#0F172A] outline-none placeholder:text-[#94A3B8]" aria-label="Search products" />

Order placed

This is a demo checkout—no payment was charged. A confirmation would land in your inbox.

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

Nothing to checkout

); } return (

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

Shipping address

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)}

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

Tax {formatPrice(tax)}

Total {formatPrice(total)}

); } 32:T1136,"use client"; import { useState } from "react"; import { Button, Field, Glass, SectionTitle } from "../components/ui"; const faqs = [ { q: "How long does shipping take?", a: "Most US orders leave within 2 business days and arrive in 2–5 days. Furniture may take longer—we’ll confirm on the order page.", }, { q: "Can I visit the studio?", a: "Yes—Harbor Lane is open Mon–Fri, 9–18. Write ahead if you’d like a guided look at new ceramics.", }, { q: "Do you offer wholesale?", a: "We work with a small set of retailers. Email wholesale@lumina.shop with your shop name and city.", }, ]; 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>
            </>
          )}
        </Glass>

<div className="space-y-6">
          <Glass className="space-y-6 p-6">
            <div>
              <p className="text-[11px] font-semibold tracking-[0.2em] text-[#0D9488] uppercase">Studio</p>
              <p className="mt-2 text-sm leading-7 text-[#64748B]">
                128 Harbor Lane
                <br />
                San Francisco, CA 94107
                <br />
                Mon–Fri · 9:00–18:00
              </p>
            </div>
            <div>
              <p className="text-[11px] font-semibold tracking-[0.2em] text-[#0D9488] uppercase">Email</p>
              <p className="mt-2 text-sm text-[#0F172A]">hello@lumina.shop</p>
            </div>
            <img
              src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1000&h=700&q=80"
              alt="Studio seating area"
              className="aspect-[4/3] w-full rounded-2xl object-cover"
            />
          </Glass>

<Glass className="divide-y divide-white/70 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-[#0F172A]"
                  >
                    {item.q}
                    <span className="text-[#64748B]">{open ? "−" : "+"}</span>
                  </button>
                  {open ? <p className="px-5 pb-4 text-sm leading-6 text-[#64748B]">{item.a}</p> : null}
                </div>
              );
            })}
          </Glass>
        </div>
      </div>
    </div>
  );
}
33:T1fd2,"use client";

import { categories, howItWorks, homeTestimonials, products, trustItems } from "../lib/data";
import { HeroSpotlight } from "../components/hero-spotlight";
import { ProductCard } from "../components/product-card";
import { ChatGlyph, ReturnGlyph, ShieldGlyph, StarGlyph, TruckGlyph } from "../components/marks";
import { Button, Glass, SectionTitle } from "../components/ui";
import { useLuminaNav } from "../lib/nav-context";

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

const trustIcons = {
  ship: TruckGlyph,
  return: ReturnGlyph,
  pay: ShieldGlyph,
  care: ChatGlyph,
} as const;

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

return (
    <div className="lumina-fade mx-auto max-w-6xl space-y-16 px-4 py-8 sm:px-6 sm:py-10">
      <section className="relative overflow-hidden rounded-[1.75rem] border border-white/60 bg-white/40 shadow-[0_8px_32px_rgba(15,23,42,0.06)] backdrop-blur-xl">
        <div
          className="absolute inset-0 opacity-90"
          style={{
            background:
              "linear-gradient(120deg, rgba(238,242,255,0.95) 0%, rgba(248,250,252,0.55) 45%, rgba(236,254,255,0.9) 100%)",
          }}
        />
        <img
          src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1800&h=1100&q=80"
          alt="Calm living room with soft textiles and ceramics"
          className="absolute inset-0 h-full w-full object-cover opacity-35"
        />
        <div className="relative grid min-h-[70vh] items-end gap-8 px-6 py-10 sm:px-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:py-16">
          <div>
            <p
              className="text-4xl tracking-tight text-[#0F172A] sm:text-5xl lg:text-6xl"
              style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}
            >
              Lumina
            </p>
            <h1 className="mt-4 max-w-lg text-2xl leading-snug text-[#0F172A] sm:text-3xl">
              Soft light, quiet rooms, objects that earn their place.
            </h1>
            <p className="mt-4 max-w-md text-sm leading-7 text-[#64748B]">
              A glass-soft edit of ceramics, lamps, textiles, and furniture—curated for everyday calm.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button onClick={() => openCatalog("all")}>Shop the edit</Button>
              <Button variant="secondary" onClick={() => setView("about")}>
                Our story
              </Button>
            </div>
            <div className="mt-8 flex justify-start lg:hidden">
              <HeroSpotlight />
            </div>
          </div>
          <div className="hidden justify-end lg:flex">
            <HeroSpotlight />
          </div>
        </div>
      </section>

<section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {trustItems.map((item) => {
          const Icon = trustIcons[item.id];
          return (
            <Glass key={item.id} className="flex items-start gap-3 p-4">
              <span className="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-[#CCFBF1] text-[#0F766E]">
                <Icon className="size-5" />
              </span>
              <div>
                <p className="text-sm font-medium text-[#0F172A]">{item.title}</p>
                <p className="mt-0.5 text-xs leading-5 text-[#64748B]">{item.body}</p>
              </div>
            </Glass>
          );
        })}
      </section>

<section>
        <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
          <SectionTitle
            eyebrow="Featured"
            title="Pieces worth living with."
            body="New arrivals and soft sales from this season’s edit."
          />
          <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) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

<section>
        <SectionTitle eyebrow="Categories" title="Four quiet rooms." />
        <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {categories.map((cat) => (
            <button
              key={cat.id}
              type="button"
              onClick={() => openCatalog(cat.id)}
              className="group overflow-hidden rounded-2xl border border-white/60 bg-white/55 text-left shadow-[0_8px_32px_rgba(15,23,42,0.06)] backdrop-blur-xl transition duration-300 hover:-translate-y-1"
            >
              <img
                src={cat.image}
                alt={cat.label}
                className="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-[1.04]"
              />
              <div className="p-4">
                <p className="font-medium text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
                  {cat.label}
                </p>
                <p className="mt-1 text-xs leading-5 text-[#64748B]">{cat.blurb}</p>
              </div>
            </button>
          ))}
        </div>
      </section>

<section>
        <SectionTitle
          eyebrow="How it works"
          title="From browse to doorstep."
          body="Four quiet steps—no noise, no pressure."
        />
        <ol className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {howItWorks.map((item) => (
            <Glass key={item.step} as="li" className="p-5">
              <p className="text-xs font-semibold tracking-[0.2em] text-[#0D9488]">{item.step}</p>
              <h3 className="mt-3 text-lg text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
                {item.title}
              </h3>
              <p className="mt-2 text-sm leading-6 text-[#64748B]">{item.body}</p>
            </Glass>
          ))}
        </ol>
      </section>

<section>
        <SectionTitle eyebrow="Reviews" title="Loved in quiet rooms." body="Members on materials, light, and delivery." />
        <div className="mt-8 grid gap-5 md:grid-cols-3">
          {homeTestimonials.map((t) => (
            <Glass key={t.id} className="flex flex-col 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-[#475569]">“{t.body}”</p>
              <div className="mt-5">
                <p className="text-sm font-medium text-[#0F172A]">{t.name}</p>
                <p className="text-xs text-[#94A3B8]">{t.role}</p>
              </div>
            </Glass>
          ))}
        </div>
      </section>

<section>
        <Glass className="grid overflow-hidden md:grid-cols-[1.1fr_0.9fr]">
          <div className="flex flex-col justify-center px-6 py-10 sm:px-10">
            <p className="text-[11px] font-semibold tracking-[0.22em] text-[#4F46E5] uppercase">Member offer</p>
            <h2 className="mt-3 text-3xl text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
              Free shipping on your first order over $120.
            </h2>
            <p className="mt-3 max-w-md text-sm leading-7 text-[#64748B]">
              Join Lumina for early access to new ceramics drops and seasonal textile edits.
            </p>
            <div className="mt-6">
              <Button variant="indigo" onClick={() => setView("signup")}>
                Create account
              </Button>
            </div>
          </div>
          <img
            src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=1100&h=900&q=80"
            alt="Ceramic bowl detail"
            className="min-h-[240px] w-full object-cover"
          />
        </Glass>
      </section>
    </div>
  );
}
34:T804,"use client";

import { Button, Field, Glass } from "../components/ui";
import { LuminaMark } from "../components/marks";
import { useLuminaNav } from "../lib/nav-context";

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

return (
    <div className="lumina-fade mx-auto grid max-w-4xl gap-6 px-4 py-12 sm:px-6 lg:grid-cols-[0.95fr_1.05fr]">
      <Glass className="hidden flex-col justify-between overflow-hidden p-0 lg:flex">
        <img
          src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1000&h=1200&q=80"
          alt=""
          className="h-full min-h-[420px] w-full object-cover"
        />
      </Glass>
      <Glass className="p-8">
        <div className="flex flex-col items-center text-center">
          <LuminaMark className="size-10" />
          <h1 className="mt-4 text-2xl text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
            Welcome back
          </h1>
          <p className="mt-2 text-sm text-[#64748B]">Sign in to track orders and save your edit.</p>
        </div>
        <div className="mt-8 space-y-4">
          <Field label="Email" type="email" placeholder="you@studio.com" />
          <Field label="Password" type="password" placeholder="••••••••" />
          <div className="flex justify-end">
            <button type="button" className="text-xs font-medium text-[#0D9488]">
              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-[#64748B]">
          New here?{" "}
          <button type="button" className="font-medium text-[#0D9488]" onClick={() => setView("signup")}>
            Create an account
          </button>
        </p>
      </Glass>
    </div>
  );
}
35:T1fca,"use client";

import { useState } from "react";
import { getProduct, getReviews, relatedProducts, formatPrice } from "../lib/data";
import { ProductCard } from "../components/product-card";
import { StarGlyph } from "../components/marks";
import { Badge, Button, Glass, SectionTitle } from "../components/ui";
import { useCart } from "../lib/cart-context";
import { useLuminaNav } from "../lib/nav-context";

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

if (!product) {
    return (
      <div className="lumina-fade mx-auto max-w-6xl px-4 py-16 text-center sm:px-6">
        <Glass className="mx-auto max-w-md p-10">
          <p className="text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
            Product not found
          </p>
          <p className="mt-2 text-sm text-[#64748B]">Choose another piece from the catalog.</p>
          <Button className="mt-6" onClick={() => openCatalog("all")}>
            Back to shop
          </Button>
        </Glass>
      </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="lumina-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-[#64748B]" aria-label="Breadcrumb">
        <button type="button" onClick={goHome} className="transition hover:text-[#0F172A]">
          Home
        </button>
        <span aria-hidden>/</span>
        <button type="button" onClick={() => openCatalog("all")} className="transition hover:text-[#0F172A]">
          Shop
        </button>
        <span aria-hidden>/</span>
        <button type="button" onClick={() => openCatalog(product.category)} className="transition hover:text-[#0F172A]">
          {categoryLabel}
        </button>
        <span aria-hidden>/</span>
        <span className="font-medium text-[#0F172A]">{product.name}</span>
      </nav>

<div className="grid gap-8 lg:grid-cols-[1.05fr_0.95fr]">
        <div>
          <Glass className="overflow-hidden p-3">
            <img
              src={gallery[activeImage] ?? product.image}
              alt={product.name}
              className="aspect-square w-full rounded-xl object-cover"
            />
          </Glass>
          <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-[#0D9488] ring-2 ring-[#0D9488]/20" : "border-white/60 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={product.badge === "Sale" ? "teal" : "indigo"}>{product.badge}</Badge> : null}
            <Badge tone="slate">{product.category}</Badge>
          </div>
          <h1 className="mt-3 text-3xl text-[#0F172A] sm:text-4xl" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
            {product.name}
          </h1>
          <div className="mt-3 flex items-center gap-2 text-sm text-[#64748B]">
            <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-[#0F172A]">{formatPrice(product.price)}</p>
            {product.compareAt ? (
              <p className="text-sm text-[#94A3B8] line-through">{formatPrice(product.compareAt)}</p>
            ) : null}
          </div>
          <p className="mt-5 text-sm leading-7 text-[#64748B]">{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-[#475569]">
                <span className="size-1.5 rounded-full bg-[#0D9488]" />
                {d}
              </li>
            ))}
          </ul>

<div className="mt-8 flex flex-wrap items-center gap-3">
            <div className="inline-flex items-center rounded-2xl border border-white/70 bg-white/70 p-1">
              <button
                type="button"
                className="size-10 rounded-xl text-[#0F172A] hover:bg-white"
                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-xl text-[#0F172A] hover:bg-white"
                onClick={() => setQty((q) => q + 1)}
              >
                +
              </button>
            </div>
            <Button
              onClick={() => {
                addItem(product.id, qty);
                setView("cart");
              }}
            >
              Add to cart
            </Button>
            <Button
              variant="secondary"
              onClick={() => {
                addItem(product.id, qty);
                setView("checkout");
              }}
            >
              Buy now
            </Button>
          </div>

<Glass className="mt-8 grid gap-3 p-4 sm:grid-cols-3">
            {[
              { t: "Ships in 2–4 days", d: "Tracked delivery" },
              { t: "30-day returns", d: "Free exchanges" },
              { t: "Care guide", d: "Included in box" },
            ].map((item) => (
              <div key={item.t}>
                <p className="text-xs font-medium text-[#0F172A]">{item.t}</p>
                <p className="text-[11px] text-[#64748B]">{item.d}</p>
              </div>
            ))}
          </Glass>
        </div>
      </div>

<section>
        <SectionTitle eyebrow="Reviews" title="What owners say." />
        <div className="mt-6 grid gap-4 md:grid-cols-2">
          {(productReviews.length ? productReviews : [
            {
              id: "fallback",
              productId: product.id,
              author: "Lumina member",
              rating: product.rating,
              date: "Recently",
              body: "Thoughtful materials and calm proportions—exactly as pictured.",
            },
          ]).map((review) => (
            <Glass key={review.id} className="p-5">
              <div className="flex items-center justify-between gap-3">
                <p className="text-sm font-medium text-[#0F172A]">{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-[#94A3B8]">{review.date}</p>
              <p className="mt-3 text-sm leading-6 text-[#64748B]">{review.body}</p>
            </Glass>
          ))}
        </div>
      </section>

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

import { Button, Field, Glass } from "../components/ui";
import { LuminaMark } from "../components/marks";
import { useLuminaNav } from "../lib/nav-context";

const perks = [
  "Early access to ceramics drops",
  "Free shipping over $120",
  "Order history & easy returns",
];

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

return (
    <div className="lumina-fade mx-auto grid max-w-4xl gap-6 px-4 py-12 sm:px-6 lg:grid-cols-[1.05fr_0.95fr]">
      <Glass className="p-8">
        <div className="flex flex-col items-center text-center">
          <LuminaMark className="size-10" />
          <h1 className="mt-4 text-2xl text-[#0F172A]" style={{ fontFamily: "Sora, ui-sans-serif, sans-serif" }}>
            Join Lumina
          </h1>
          <p className="mt-2 text-sm text-[#64748B]">Early access to drops and free shipping over $120.</p>
        </div>
        <div className="mt-8 space-y-4">
          <Field label="Full name" placeholder="Alex Morgan" />
          <Field label="Email" type="email" placeholder="you@studio.com" />
          <Field label="Password" type="password" placeholder="Create a password" />
          <label className="flex items-start gap-2 text-xs leading-5 text-[#64748B]">
            <input type="checkbox" defaultChecked className="mt-0.5 accent-[#0D9488]" />
            Email me new arrivals and member offers. Unsubscribe anytime.
          </label>
          <Button className="w-full" variant="indigo" onClick={() => setView("account")}>
            Create account
          </Button>
        </div>
        <p className="mt-6 text-center text-sm text-[#64748B]">
          Already a member?{" "}
          <button type="button" className="font-medium text-[#0D9488]" onClick={() => setView("login")}>
            Sign in
          </button>
        </p>
      </Glass>
      <Glass className="flex flex-col justify-center p-8">
        <p className="text-[11px] font-semibold tracking-[0.2em] text-[#0D9488] 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-[#475569]">
              <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-[#0D9488]" />
              {perk}
            </li>
          ))}
        </ul>
        <p className="mt-8 text-sm leading-6 text-[#64748B]">
          No spam. Just quiet drops, seasonal textiles, and shipping notes when you need them.
        </p>
      </Glass>
    </div>
  );
}
18:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"Lumina Shop\",\"description\":\"Glassmorphic multipage e-commerce: catalog, product, cart, checkout, auth, and account.\",\"applicationCategory\":\"DeveloperApplication\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"url\":\"https://templiq.vercel.app/templates/lumina-shop\"}"}}],["$","$L21",null,{"template":{"slug":"lumina-shop","title":"Lumina Shop","description":"Glassmorphic multipage e-commerce: catalog, product, cart, checkout, auth, and account.","kind":"project","tags":["ecommerce","marketplace","navbar"],"stack":["Next.js","React","Tailwind CSS"],"difficulty":"advanced","createdAt":"2026-09-14","entry":"app/page.tsx","version":"1.1.0","access":"pro","changelog":[{"version":"1.1.0","date":"2026-09-14","notes":"Hero product slider, trust/reviews/how-it-works, shop search + quick view, page polish."},{"version":"1.0.0","date":"2026-09-14","notes":"Full multipage glass e-commerce storefront."}],"files":[{"path":"app/layout.tsx","content":"$22","language":"tsx","isEntry":false},{"path":"app/page.tsx","content":"$23","language":"tsx","isEntry":true},{"path":"components/hero-spotlight.tsx","content":"$24","language":"tsx","isEntry":false},{"path":"components/marks.tsx","content":"$25","language":"tsx","isEntry":false},{"path":"components/product-card.tsx","content":"$26","language":"tsx","isEntry":false},{"path":"components/site-footer.tsx","content":"$27","language":"tsx","isEntry":false},{"path":"components/site-header.tsx","content":"$28","language":"tsx","isEntry":false},{"path":"components/ui.tsx","content":"$29","language":"tsx","isEntry":false},{"path":"lib/cart-context.tsx","content":"$2a","language":"tsx","isEntry":false},{"path":"lib/data.ts","content":"$2b","language":"typescript","isEntry":false},{"path":"lib/nav-context.tsx","content":"$2c","language":"tsx","isEntry":false},{"path":"views/about.tsx","content":"$2d","language":"tsx","isEntry":false},{"path":"views/account.tsx","content":"$2e","language":"tsx","isEntry":false},{"path":"views/cart.tsx","content":"$2f","language":"tsx","isEntry":false},{"path":"views/catalog.tsx","content":"$30","language":"tsx","isEntry":false},{"path":"views/checkout.tsx","content":"$31","language":"tsx","isEntry":false},{"path":"views/contact.tsx","content":"$32","language":"tsx","isEntry":false},{"path":"views/home.tsx","content":"$33","language":"tsx","isEntry":false},{"path":"views/login.tsx","content":"$34","language":"tsx","isEntry":false},{"path":"views/product.tsx","content":"$35","language":"tsx","isEntry":false},{"path":"views/signup.tsx","content":"$36","language":"tsx","isEntry":false}]}}]]
</article></body></html>