// project-page.jsx — Individual project case study page (Block · Light mode). // Cream ivory ground, carbon ink, magenta primary, indigo secondary. // Editorial layout: massive Fraunces headlines, Homemade Apple // script accents, JetBrains Mono caps for rails and chips. // ── Demo content (mockup, fallback) ─────────────────────────── const PROJECT_DEMO = { slug: 'lune-hotels', title: 'Lune Hotels', subtitle: 'Where the sea forgets the time.', client: 'Lune Hotels', role: 'Identity · Wayfinding · Web', year: '2024', location: 'Goa, India', brief: `Lune Hotels asked us to reimagine a coastal stay as a sequence of pauses — moments where the day slows enough to notice itself. Our task: build an identity system, signage, and digital presence that hold space for that quiet, without the resort cliché.`, approach: `We anchored the brand on a single image — moonlight on water — and let the system spread outward from there. A custom mark, a typographic palette built around contrast not noise, and a wayfinding language that feels like printed matter rather than commercial signage. Every touchpoint was designed to be felt before it was read.`, textBoxes: [ { label: 'Brief', body: 'Reimagine a coastal stay as a sequence of pauses — moments where the day slows enough to notice itself.' }, { label: 'Direction', body: 'Anchor the brand on a single image — moonlight on water — and let the system spread outward from there.' }, { label: 'Type', body: 'A typographic palette built around contrast, not noise. Display set in a high-axis sans against a quiet sans for body and signage.' }, { label: 'Outcome', body: 'A wayfinding system that feels like printed matter, a mark people screenshot, and a launch that booked out the first season.' }, ], credits: [ ['Creative Direction', 'Chapter 1'], ['Design', 'Studio Team'], ['Photography', 'Field Studio'], ['Web Build', 'Chapter 1 / Field'], ], }; // Build a full project record from a WORK entry, merging demo defaults // for fields the work archive doesn't yet carry (brief, approach, etc). function buildProjectFromWork(w) { if (!w) return PROJECT_DEMO; return { ...PROJECT_DEMO, slug: window.slugify ? window.slugify(w.client) : w.client.toLowerCase().replace(/\s+/g, '-'), n: w.n, title: w.client, tagline: w.tagline || '', subtitle: w.tagline || PROJECT_DEMO.subtitle, kind: w.kind || '', hero: w.hero || null, client: w.client, role: (w.tags || []).join(' · ') || PROJECT_DEMO.role, year: w.year || PROJECT_DEMO.year, location: (w.kind || '').split(' · ')[1] || PROJECT_DEMO.location, palette: w.palette || PROJECT_DEMO.palette, }; } // Merge a stored project onto the demo defaults so missing rich fields // (brief, approach, textBoxes, credits) still render. function mergeProject(p) { const merged = { ...PROJECT_DEMO, ...p, title: p.client || p.title || PROJECT_DEMO.title, role: p.role || (p.tags || []).join(' · ') || PROJECT_DEMO.role, location: p.location || (p.kind || '').split(' · ')[1] || PROJECT_DEMO.location, subtitle: p.tagline || p.subtitle || PROJECT_DEMO.subtitle, brief: p.brief || '', approach: p.approach || '', textBoxes: Array.isArray(p.textBoxes) ? p.textBoxes : PROJECT_DEMO.textBoxes, credits: Array.isArray(p.credits) ? p.credits : PROJECT_DEMO.credits, }; return merged; } // Resolve a project: Store (richest) → window.WORK (fallback) → demo. function resolveProject() { const id = window.getQueryParam ? window.getQueryParam('id') : null; if (!id) return PROJECT_DEMO; if (window.Store) { const stored = window.Store.getProject(id); if (stored) return mergeProject(stored); } if (window.WORK) { const hit = window.WORK.find((w) => w.n === id); if (hit) return buildProjectFromWork(hit); } return PROJECT_DEMO; } function findNextProject(currentId) { const list = window.WORK || []; if (!list.length) return null; const i = list.findIndex((w) => w.n === currentId); const next = list[(i + 1 + list.length) % list.length] || list[0]; return next || null; } // Magazine grid — varied 1/2/3-col rows. Each entry: {span, ratio, label} const GRID_ROWS = [ { cols: [{ span: 12, ratio: 16/9, label: 'Hero secondary' }] }, { cols: [{ span: 7, ratio: 4/5, label: 'Editorial portrait' }, { span: 5, ratio: 4/5, label: 'Detail crop' }] }, { cols: [{ span: 4, ratio: 1, label: 'Mark' }, { span: 4, ratio: 1, label: 'Stationery' }, { span: 4, ratio: 1, label: 'Signage' }] }, { cols: [{ span: 12, ratio: 21/9, label: 'Full-bleed environment' }] }, { cols: [{ span: 5, ratio: 3/4, label: 'Type specimen' }, { span: 7, ratio: 3/4, label: 'Web mock' }] }, { cols: [{ span: 6, ratio: 1, label: 'Pattern detail' }, { span: 6, ratio: 1, label: 'Material study' }] }, { cols: [{ span: 12, ratio: 16/9, label: 'Closing wide' }] }, ]; const NEXT_PROJECT = { slug: 'bombay-canteen', client: 'Bombay Canteen', tagline: 'The city on a plate.', year: '2025', }; // Local palette handle — falls back to literals if shared.jsx hasn't loaded. const P = (typeof window !== 'undefined' && window.PALETTE) || { ivory: '#efeae0', ivory2: '#efeae0', carbon: '#221a1d', merlot: '#6b1a35', magenta: '#bc2a4e', lilac: '#c5a4be', indigo: '#27557e', sage: '#6fa57c', muted: 'rgba(34,26,29,0.55)', }; const FONT_DISPLAY = "'Fraunces', Georgia, serif"; const FONT_BODY = "'Montserrat', system-ui, sans-serif"; const FONT_SCRIPT = "'Homemade Apple', cursive"; const FONT_MONO = "'JetBrains Mono', ui-monospace, monospace"; // ── Reveal hook ────────────────────────────────────────────────── function useReveal() { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (!ref.current) return; const stage = document.querySelector('.c1-stage') || null; const io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setShown(true); io.disconnect(); } }, { root: stage, threshold: 0.12, rootMargin: '0px 0px -8% 0px' } ); io.observe(ref.current); return () => io.disconnect(); }, []); return [ref, shown]; } // Parallax helper — translates child by a fraction of how much it has moved through viewport. function useParallax(strength = 0.15) { const ref = React.useRef(null); const [y, setY] = React.useState(0); React.useEffect(() => { const stage = document.querySelector('.c1-stage'); if (!stage || !ref.current) return; let raf = 0; const compute = () => { const r = ref.current.getBoundingClientRect(); const stageH = stage.clientHeight; const center = r.top + r.height / 2 - stageH / 2; setY(-center * strength); }; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(compute); }; compute(); stage.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { cancelAnimationFrame(raf); stage.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [strength]); return [ref, y]; } // ── Image placeholder (ivory ground, lilac wash) ──────────────── function ImagePlaceholder({ ratio = 1, label = 'Image' }) { const [pRef, py] = useParallax(0.06); const seed = label.split('').reduce((a, c) => a + c.charCodeAt(0), 0); return (
); } // ── Reveal wrapper ────────────────────────────────────────────── function PReveal({ children, delay = 0, y = 28 }) { const [r, shown] = useReveal(); return (
{children}
); } // ── Hero block ────────────────────────────────────────────────── function ProjectHero({ project }) { const Crosshair = window.CrosshairMarkers || (() => null); const Split = window.SplitText; const StampEl = window.Stamp; const heroSrc = project.hero?.src; const heroRatio = project.hero?.ratio || (16 / 9); const yearStr = project.year || ''; const sectorStr = project.kind || ''; const kindStr = project.role || ''; const chapterNum = project.n ? `Chapter · ${project.n}` : 'Chapter · One'; const title = (project.title || '').trim(); return (
{/* Top mono meta row */}
[ {[yearStr, sectorStr, kindStr].filter(Boolean).join(' · ')} ] {project.location}
{/* Grid: huge title left, stamp right */}

{Split ? : title}

{project.subtitle && (

{project.subtitle}

)}
{/* Stamp + chapter number */}
{StampEl && ( )}
{chapterNum}
Est. {project.year || ''}
{/* Hero media — full-bleed at the bottom of the hero block */}
{heroSrc ? ( {project.hero?.alt ) : ( )}
Fig. 01 — {project.hero?.area || project.title} {project.year}
{/* Client / Scope / Location row */}
{[ ['Client', project.client], ['Scope', project.role], ['Location', project.location], ].map(([k, v]) => (
{k}
{v}
))}
); } // ── Project CTA buttons ──────────────────────────────────── // Up to three custom links (e.g. "Visit site", "Press kit", "Behind the // scenes"). Stored on the project record as `ctas: [{label, href}, …]`. function ProjectCTAs({ project }) { const ctas = (project.ctas || []).filter((c) => c && (c.label || '').trim() && (c.href || '').trim() ); if (!ctas.length) return null; return (
{ctas.slice(0, 3).map((c, i) => ( { e.currentTarget.style.background = P.magenta; e.currentTarget.style.color = P.ivory; e.currentTarget.style.borderColor = P.magenta; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = P.carbon; e.currentTarget.style.borderColor = P.carbon; }}> {c.label} ↗ ))}
); } // Split a section body into lead + rest. function _splitLead(body) { const text = (body || '').replace(/\r\n/g, '\n').trim(); if (!text) return { lead: '', rest: '' }; const dbl = text.indexOf('\n\n'); if (dbl > 0) { return { lead: text.slice(0, dbl).trim(), rest: text.slice(dbl + 2).trim() }; } const re = /[^.!?…]+[.!?…]+/g; const sentences = []; let m; while ((m = re.exec(text)) !== null) sentences.push(m[0].trim()); if (sentences.length < 2) return { lead: text, rest: '' }; const oneSentence = sentences[0]; const twoSentence = sentences.slice(0, 2).join(' '); const useTwo = oneSentence.length < 120 && twoSentence.length <= 220; const lead = useTwo ? twoSentence : oneSentence; const remainder = text.slice(lead.length).trim(); if (remainder.length < 40) return { lead: text, rest: '' }; return { lead, rest: remainder }; } // ── Section block (interleaved or single-template) ────────── function InlineTextBox({ box, index, scale }) { const { lead, rest } = _splitLead(box.body || ''); const num = String((index || 0) + 1).padStart(2, '0'); return (
{/* Left rail: number + label */}
{num} · {box.label || 'Section'}
{/* Right: heading + body */}
{box.label && (

{box.label} ·

)} {lead && (

{lead}

)} {rest && (

{rest}

)}
); } // ── Magazine grid section ────────────────────────────────── function ImageGrid({ rows, density }) { const gap = density === 'tight' ? 8 : density === 'generous' ? 28 : 16; const padX = density === 'tight' ? 8 : density === 'generous' ? 60 : 32; return (
{rows.map((row, ri) => (
{row.cols.map((c, ci) => (
{c.src ? ( {c.alt ) : ( )} {c.label && (
Fig. {String(ri + 1).padStart(2, '0')}.{ci + 1} — {c.label}
)}
))}
))}
); } // ── Tag chips row (services applied) ─────────────────────── function TagChips({ project }) { // Pull whichever set of tags the project has on it. Sources differ between // admin-edited records and seeded WORK rows — accept any of them. const tags = (project.services && project.services.length ? project.services : project.tags && project.tags.length ? project.tags : (project.role || '').split('·').map((s) => s.trim()).filter(Boolean)); if (!tags.length) return null; return (
[ Services Applied ]
{tags.map((t, i) => ( { e.currentTarget.style.background = P.magenta; e.currentTarget.style.color = P.ivory; e.currentTarget.style.borderColor = P.magenta; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = P.carbon; e.currentTarget.style.borderColor = P.carbon; }}> {t} ))}
); } // ── Pull quote ───────────────────────────────────────────── function PullQuote({ scale, project }) { const text = (project && project.quote) || ''; if (!text.trim()) return null; const by = (project && project.quoteBy) || ''; // Pull one short word and make it script-italic for accent. const words = text.trim().split(/\s+/); const accentIdx = words.findIndex((w, i) => i > 0 && w.length >= 4 && w.length <= 10); const idx = accentIdx > 0 ? accentIdx : Math.floor(words.length / 2); return (
[ Quote · Verbatim ]
“ {words.map((w, i) => ( i === idx ? ( {w} ) : {w} ))} ”
{by && (
— {by}
)}
); } // ── Credits ──────────────────────────────────────────────── function Credits({ project }) { const rows = (project.credits || []).filter(([role, name]) => (role || '').trim() || (name || '').trim() ); if (!rows.length) return null; return (
[ Credits ]
{rows.map(([role, name], i) => (
{role} {name}
))}
); } // ── Next project teaser ──────────────────────────────────── function NextProject({ next }) { const [hover, setHover] = React.useState(false); if (!next) return null; const label = next.client || NEXT_PROJECT.client; const tagline = next.tagline || NEXT_PROJECT.tagline; const href = next.n ? `project.html?id=${next.n}` : 'project.html'; return (
setHover(true)} onMouseLeave={() => setHover(false)} data-cursor="Next →" style={{ position: 'relative', padding: '160px 32px', background: P.ivory, color: P.carbon, borderTop: `1px solid rgba(34,26,29,.10)`, textAlign: 'center', overflow: 'hidden', cursor: 'pointer', }}>
Next chapter →

{label}

{tagline}

); } // ── Other Case Studies (up to 3 OTHER projects, excluding current) ─ function OtherCaseStudies({ currentId }) { const picks = React.useMemo(() => { const arr = (window.WORK || []).filter((w) => w.n !== currentId); for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr.slice(0, 3); }, [currentId]); if (!picks.length) return null; return (

Other{' '} chapters.

View all →
{picks.map((w, i) => { const heroSrc = w.hero && w.hero.src ? w.hero.src : null; const PlaceholderImage = window.PlaceholderImage || (() => null); return (
{heroSrc ? {(w.hero : }
{w.n} {w.year}
{w.kind && (
{w.kind}
)}

{w.client}

{w.tagline && (

{w.tagline}

)}
); })}
); } // ── Footer ─────────────────────────────────────────────────────── // ── Main project page component ──────────────────────────── function ProjectPage({ tweaks, onBack }) { const t = tweaks || {}; const accent = t.accent || P.magenta; const density = t.gridDensity || t.density || 'normal'; // 'tight'|'normal'|'generous' const typeScale = t.typeScale || 1; // .9 .. 1.2 const visible = t.sections || { quote: true, credits: true }; // Subscribe to live Store updates so admin edits flow through without reload. const [, force] = React.useReducer((x) => x + 1, 0); React.useEffect(() => { if (!window.Store || typeof window.Store.subscribe !== 'function') return; return window.Store.subscribe(() => force()); }, []); const project = React.useMemo(() => resolveProject(), []); const next = React.useMemo(() => { const n = findNextProject(project.n); return n ? buildProjectFromWork(n) : null; }, [project.n]); const template = project.template || t.template || 'single'; // 'single' | 'interleaved' const rawRows = (Array.isArray(project.imageRows) && project.imageRows.length) ? project.imageRows : GRID_ROWS; // Some CMS projects have the hero photo uploaded a SECOND time as the first // gallery image (same picture, different upload URL) — so the "first photo" // shows twice: once as the hero, then again right below it. Drop any gallery // image that is a re-upload of the hero, matched on the original filename // (uploads are stored as "-", so stripping the random // prefix recovers the source name). Placeholder rows (no src) are untouched. const stemOf = (u) => { if (!u || typeof u !== 'string') return ''; const file = u.split('/').pop().split('?')[0]; return file.replace(/^[a-z0-9]{6,14}-/i, '').toLowerCase(); }; const heroStem = stemOf(project.hero && project.hero.src); const rows = heroStem ? rawRows .map((row) => ({ ...row, cols: (row.cols || []).filter((c) => !(c && c.src && stemOf(c.src) === heroStem)) })) .filter((row) => (row.cols || []).length > 0) : rawRows; // CSS vars for downstream consumers (cursor, mobile.css, etc). React.useEffect(() => { const root = document.documentElement; root.style.setProperty('--accent', accent); root.style.setProperty('--ink', P.carbon); root.style.setProperty('--bg', P.ivory); root.style.setProperty('--muted', P.muted); root.style.setProperty('--rule', 'rgba(34,26,29,.12)'); }, [accent]); // Quartered slices for interleaved layout. const q = Math.ceil(rows.length / 4); const slice1 = rows.slice(0, q); const slice2 = rows.slice(q, q * 2); const slice3 = rows.slice(q * 2, q * 3); const slice4 = rows.slice(q * 3); return (
{template === 'single' ? ( <> {(project.textBoxes || []).map((b, i) => ( ))} ) : ( <> {project.textBoxes?.[0] && } {project.textBoxes?.[1] && } {project.textBoxes?.[2] && } {(project.textBoxes || []).slice(3).map((b, i) => ( ))} )} {visible.quote !== false && } {visible.credits !== false && }
); } Object.assign(window, { ProjectPage });