// =========================================================================== // Full pages: Gallery (animated filter), About, Contact. -> window.Pages.* // =========================================================================== (function () { const { useState, useMemo, useEffect, useRef } = React; const DS = window.DinaSFineArtsDesignSystem_85612a; const { Button, Badge, FeatureCard, Input, Textarea, Select, Avatar } = DS; const { Icons, Reveal, useParallax } = window; const { ArtCard, SectionHead } = window; const D = window.DINA; const matches = (art, f) => { if (f === "All work") return true; if (f === "Paintings") return art.category === "Paintings"; if (f === "Pottery") return art.category === "Pottery"; return art.tags.includes(f); }; // ----------------------------------------------------------- GALLERY ------ function Gallery({ initialFilter, mode, onOpen, onInquire }) { const [filter, setFilter] = useState(initialFilter || "All work"); const [grid, setGrid] = useState(mode || "uniform"); useEffect(() => { if (initialFilter) setFilter(initialFilter); }, [initialFilter]); const list = useMemo(() => D.artworks.filter((a) => matches(a, filter)), [filter]); return React.createElement("div", null, [ // header band React.createElement("section", { key: "head", className: "wrap", style: { paddingTop: "64px", paddingBottom: "8px" } }, [ React.createElement("p", { key: "e", className: "eyebrow hero-rise" }, "The gallery"), React.createElement("h1", { key: "h", className: "display hero-rise", style: { fontSize: "clamp(40px,5vw,var(--fs-display-lg))" } }, "Every piece, one of one"), React.createElement("p", { key: "s", className: "lead hero-rise", style: { color: "var(--muted)", marginTop: "14px", maxWidth: "52ch" } }, "Paintings and pottery from the studio. Filter by thread, or open any piece to see it close up and inquire."), ]), // controls React.createElement("section", { key: "ctrl", className: "wrap", style: { position: "sticky", top: "74px", zIndex: 20, background: "color-mix(in srgb, var(--canvas) 92%, transparent)", backdropFilter: "blur(8px)", paddingTop: "20px", paddingBottom: "20px", marginTop: "28px" } }, React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "20px", flexWrap: "wrap" } }, [ React.createElement("div", { key: "f", className: "pill-row" }, D.filters.map((f) => React.createElement("button", { key: f, className: "chip" + (filter === f ? " active" : ""), onClick: () => setFilter(f), }, f))), React.createElement("div", { key: "v", style: { display: "flex", alignItems: "center", gap: "10px" } }, [ React.createElement("span", { key: "c", style: { fontSize: "13px", color: "var(--muted-soft)" } }, list.length + " piece" + (list.length === 1 ? "" : "s")), React.createElement("div", { key: "t", style: { display: "flex", gap: "4px", border: "1px solid var(--hairline)", borderRadius: "999px", padding: "3px" } }, [["uniform", "Grid"], ["masonry", "Salon"]].map(([m, lbl]) => React.createElement("button", { key: m, onClick: () => setGrid(m), style: { border: "none", cursor: "pointer", borderRadius: "999px", padding: "6px 14px", fontSize: "13px", fontWeight: 600, background: grid === m ? "var(--ink)" : "transparent", color: grid === m ? "var(--canvas)" : "var(--muted)", }, }, lbl))), ]), ])), // grid React.createElement("section", { key: "grid", className: "wrap", style: { paddingTop: "16px", paddingBottom: "96px" } }, React.createElement("div", { key: filter + grid, className: grid === "masonry" ? "masonry filter-pop" : "grid grid-3 filter-pop" }, list.map((a, i) => React.createElement(ArtCard, { key: a.id, art: a, mode: grid, onOpen, onInquire, delay: Math.min(i, 8) * 60, })))), ]); } // ------------------------------------------------------------- ABOUT ------ function About({ go, onCommission }) { const p = useParallax(0.07, 50); const h = (D.home) || {}; const amap = {}; D.artworks.forEach((a) => { amap[a.id] = a; }); const studioImg = h.aboutImage || (amap[h.aboutId] || {}).image || "assets/art/portrait-bloom.jpg"; // A custom uploaded photo shows in full (contain) and is scaled by aboutZoom; // a curated piece fills (cover). const studioFit = h.aboutImage ? "contain" : "cover"; const studioZoom = h.aboutImage ? (h.aboutZoom || 1) : 1; const studioPos = h.aboutImage ? (h.aboutPos || { x: 0, y: 0 }) : { x: 0, y: 0 }; const studioXform = (studioZoom === 1 && !studioPos.x && !studioPos.y) ? "none" : "translate(" + (studioPos.x || 0) + "%, " + (studioPos.y || 0) + "%) scale(" + studioZoom + ")"; return React.createElement("div", null, [ React.createElement("section", { key: "intro", className: "wrap", style: { paddingTop: "64px" } }, React.createElement("div", { className: "rgrid", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "center" } }, [ React.createElement("div", { key: "t", className: "hero-rise" }, [ React.createElement("p", { key: "e", className: "eyebrow" }, "The studio"), React.createElement("h1", { key: "h", className: "display", style: { fontSize: "clamp(38px,4.5vw,var(--fs-display-lg))" } }, D.about.lead), ...D.about.body.map((para, i) => React.createElement("p", { key: "p" + i, className: "lead", style: { color: i === 0 ? "var(--body)" : "var(--muted)", marginTop: i === 0 ? "22px" : "14px", fontSize: i === 0 ? "var(--fs-title-md)" : "var(--fs-body-md)" } }, para)), React.createElement("div", { key: "c", style: { display: "flex", gap: "12px", marginTop: "28px", flexWrap: "wrap" } }, [ React.createElement(Button, { key: "g", size: "lg", onClick: () => go("gallery") }, "See the work"), React.createElement(Button, { key: "m", size: "lg", variant: "secondary", onClick: onCommission }, "Commission a piece"), ]), ]), React.createElement(Reveal, { key: "img", variant: "scale" }, React.createElement("div", { style: { borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4/5", background: "var(--surface-strong)" } }, React.createElement("div", { ref: p, style: { width: "100%", height: "114%", marginTop: "-7%" } }, React.createElement("img", { src: studioImg, alt: "A painting in progress", style: { width: "100%", height: "100%", objectFit: studioFit, transform: studioXform, transformOrigin: "center" } })))), ])), // process React.createElement("section", { key: "proc", className: "band", style: { marginTop: "32px", paddingBottom: "96px" } }, React.createElement("div", { className: "wrap" }, [ React.createElement(Reveal, { key: "h" }, React.createElement(SectionHead, { eyebrow: "How a piece is made", title: "Ground, symbol, fire", align: "center" })), React.createElement("div", { key: "g", className: "grid grid-3" }, D.about.process.map((s, i) => React.createElement(Reveal, { key: s.step, delay: i * 100 }, React.createElement("div", { style: { borderTop: "2px solid var(--accent)", paddingTop: "22px" } }, [ React.createElement("div", { key: "n", style: { fontFamily: "var(--font-display)", fontSize: "var(--fs-display-sm)", color: "var(--accent)", letterSpacing: "-1px" } }, s.step), React.createElement("h3", { key: "t", style: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--fs-title-lg)", color: "var(--ink)", margin: "10px 0 8px" } }, s.title), React.createElement("p", { key: "b", style: { color: "var(--muted)", lineHeight: 1.55, margin: 0, fontSize: "var(--fs-body-md)" } }, s.body), ])))), ])), // signature strip React.createElement("section", { key: "sig", className: "wrap", style: { paddingBottom: "96px" } }, React.createElement(Reveal, { variant: "scale" }, React.createElement(FeatureCard, { tone: "clay", eyebrow: "One of one", title: "Every piece, painted or thrown, leaves my hands one of one.", body: "If you\u2019d like something made for your own space, I\u2019d love to hear about it.", action: React.createElement(Button, { variant: "onColor", size: "lg", onClick: onCommission }, "Start a commission"), }))), ]); } // ----------------------------------------------------------- CONTACT ------ function Contact() { const [sent, setSent] = useState(false); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); return React.createElement("section", { className: "wrap", style: { paddingTop: "64px", paddingBottom: "96px" } }, React.createElement("div", { className: "rgrid", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "start" } }, [ React.createElement("div", { key: "l", className: "hero-rise" }, [ React.createElement("p", { key: "e", className: "eyebrow" }, "Say hello"), React.createElement("h1", { key: "h", className: "display", style: { fontSize: "clamp(38px,4.5vw,var(--fs-display-lg))" } }, "Let\u2019s talk about the work"), React.createElement("p", { key: "p", className: "lead", style: { color: "var(--muted)", marginTop: "16px", maxWidth: "44ch" } }, "A question about a piece, a commission, or anything else \u2014 " + D.contact.note), React.createElement("div", { key: "ch", style: { marginTop: "36px", display: "flex", flexDirection: "column", gap: "18px" } }, [[Icons.mail, "Email", D.contact.email, "mailto:" + D.contact.email], [Icons.instagram, "Instagram", D.contact.instagram, window.igUrl(D.contact.instagram)], [Icons.heart, "Shipping", D.contact.location, null]].map(([Ic, label, val, href], i) => React.createElement("div", { key: i, style: { display: "flex", alignItems: "center", gap: "14px" } }, [ React.createElement("span", { key: "i", style: { width: 42, height: 42, borderRadius: "50%", border: "1px solid var(--hairline)", display: "grid", placeItems: "center", color: "var(--accent)", flexShrink: 0 } }, React.createElement(Ic, { size: 18 })), React.createElement("div", { key: "t" }, [ React.createElement("div", { key: "l", style: { fontSize: "12px", letterSpacing: "1.2px", textTransform: "uppercase", color: "var(--muted-soft)", fontWeight: 600 } }, label), href ? React.createElement("a", { key: "v", href, target: href.indexOf("http") === 0 ? "_blank" : undefined, rel: href.indexOf("http") === 0 ? "noopener noreferrer" : undefined, style: { fontSize: "var(--fs-title-md)", color: "var(--ink)", fontWeight: 500 } }, val) : React.createElement("div", { key: "v", style: { fontSize: "var(--fs-title-md)", color: "var(--ink)", fontWeight: 500 } }, val), ]), ]))), ]), React.createElement(Reveal, { key: "r", variant: "scale" }, React.createElement("div", { style: { background: "var(--surface-card)", borderRadius: "var(--radius-xl)", padding: "36px" } }, sent ? React.createElement("div", { style: { textAlign: "center", padding: "30px 8px" } }, [ React.createElement("div", { key: "i", style: { width: 56, height: 56, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center", margin: "0 auto 18px" } }, React.createElement(Icons.check, { size: 26 })), React.createElement("h3", { key: "t", className: "display", style: { fontSize: "var(--fs-display-sm)" } }, "Thank you \u2014 message received"), React.createElement("p", { key: "p", className: "lead", style: { color: "var(--muted)", marginTop: "10px" } }, D.contact.note + " I\u2019ll be in touch within a day or two."), ]) : React.createElement("form", { onSubmit: async (e) => { e.preventDefault(); if (busy) return; const fd = new FormData(e.target); const about = fd.get("about"); setBusy(true); setErr(""); try { await window.sendStudioForm({ subject: "Studio note: " + (about || "Hello") + " — Dina's Fine Art", from_name: fd.get("name") || "Studio website", name: fd.get("name"), email: fd.get("email"), about: about, message: fd.get("message"), }); setSent(true); } catch (ex) { setErr("Something went wrong sending that. Please email " + D.contact.email + " directly."); } finally { setBusy(false); } } }, [ React.createElement("h3", { key: "t", className: "display", style: { fontSize: "var(--fs-title-lg)", marginBottom: "20px" } }, "Send a note to the studio"), React.createElement("div", { key: "f", style: { display: "flex", flexDirection: "column", gap: "16px" } }, [ React.createElement(Input, { key: "n", name: "name", label: "Your name", placeholder: "First and last", required: true }), React.createElement(Input, { key: "e", name: "email", label: "Email", type: "email", placeholder: "you@example.com", required: true }), React.createElement(Select, { key: "s", name: "about", label: "What\u2019s this about?", options: ["A specific piece", "A commission", "Something else"] }), React.createElement(Textarea, { key: "m", name: "message", label: "Message", rows: 5, placeholder: "Tell me a little about what you have in mind\u2026" }), React.createElement(Button, { key: "b", type: "submit", size: "lg", style: { marginTop: "4px" } }, busy ? "Sending…" : "Send to the studio"), err ? React.createElement("p", { key: "err", style: { color: "var(--error)", fontSize: "var(--fs-body-sm)", margin: "4px 0 0" } }, err) : null, ]), ]))), ])); } window.Pages = { Gallery, About, Contact }; })();