// store-pages.jsx — extra storefront pages for MagicalKitten: // Footer, Lifestyle band, About/The Artist, Bespoke, Checkout, Confirmation. // Reads shared helpers from window (defined in store.jsx). Exports views to window. const { money, TButton, SealDivider, StoreEnso, useIsNarrow, ImageSlot, MK_PRODUCTS } = window; // ---- form field ---------------------------------------------------------- function Field({ t, label, placeholder, type = 'text', value, onChange, wide, half }) { return ( ); } function SectionHead({ t, kicker, title, sub, center }) { return (
{kicker &&
{kicker}
}

{title}

{sub &&

{sub}

}
); } // ---- lifestyle band (home) ---------------------------------------------- function LifestyleBand({ t }) { const narrow = useIsNarrow(760); const shots = [ { id: 'life-table', tall: true, cap: 'On the table — a set mid-game' }, { id: 'life-hand', tall: false, cap: 'The hand-painted detail' }, { id: 'life-case', tall: false, cap: 'The brass travelling case' }, ]; return (
{shots.slice(1).map((s) => (
))}
Photography placeholders — drag in the artist’s real photos
); } function Caption({ t, text }) { return
{text}
; } // ---- About / The Artist -------------------------------------------------- function AboutView({ t, onNav }) { const narrow = useIsNarrow(820); const steps = [ { n: '01', k: 'Paint', d: 'Every suit is brushed by hand — dots, bamboo, characters — in small batches of colour mixed to the house recipe.', tile: { suit: 'char', value: 3 } }, { n: '02', k: 'Pour', d: 'Tiles are cast in resin around each painted face, then left to cure for a week before they leave the mould.', tile: { suit: 'dot', value: 5 } }, { n: '03', k: 'Polish', d: 'Each tile is sanded and hand-polished to the soft, warm edge that only finishing by hand can give.', tile: { suit: 'bamboo', value: 1 } }, { n: '04', k: 'Seal', d: 'The finished set is stamped with our seal and numbered — then yours, if it’s made to order.', tile: { suit: 'cat', value: 1, rainbow: true } }, ]; return (
{/* hero */}
The hand behind the tiles

One artist,
one brush,
every tile.

MagicalKitten began at a single kitchen table, with a jar of brushes and a love of the game. Every set we sell is still painted by the same hand — no transfers, no printing, no two exactly alike.

The rainbow kitten that gives the house its name started as a private joke on a one-bamboo tile. It stayed, and became our signature.

{/* process */}
{steps.map((s) => (
{s.n}
{s.k}

{s.d}

))}
{/* studio shots */}
onNav('bespoke')}>Commission your own set
); } // ---- Bespoke ------------------------------------------------------------- function BespokeView({ t }) { const narrow = useIsNarrow(820); const [form, setForm] = React.useState({}); const [sent, setSent] = React.useState(false); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v })); const submit = async () => { if (busy) return; setErr(''); setBusy(true); try { const r = await fetch('/api/enquiry', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: form.name, email: form.email, base: form.base, note: form.note }), }); const data = await r.json().catch(() => ({})); if (!r.ok) throw new Error(data.error || 'Something went wrong — please try again.'); setSent(true); } catch (e) { setErr(e.message === 'Failed to fetch' ? 'Network error — please try again.' : e.message); } finally { setBusy(false); } }; const steps = [ { n: '01', k: 'Consult', d: 'Tell us how you play and who it’s for. We’ll talk colours, characters and case.' }, { n: '02', k: 'Design', d: 'We paint a sample tile and send it to you, then refine until it’s exactly right.' }, { n: '03', k: 'Craft', d: 'Your set is painted, poured and finished over roughly eight weeks, then sealed and numbered.' }, ]; return (
Made to order

A set made only
for you.

Choose your suits, your colours, your case and your seal. We paint a one-of-a-kind set by hand and number it to you.

{/* steps */}
{steps.map((s) => (
{s.n}
{s.k}

{s.d}

))}
{/* inquiry */}
{sent ? (

Thank you

Your enquiry is with the studio. We’ll be in touch within two days to begin your commission.

) : (

Begin a commission

No obligation — we’ll reply with ideas and a quote.