creating layout

docs/frame44-site-update-prompt.md

@@ -0,0 +1,95 @@
+# Frame 44 site update — realign pricing model, gate prices, add data catalogue
+
+Three tasks in one pass, on the existing Eleventy (11ty v3) site. Keep the current architecture exactly: all pricing content in `src/_data/*.json`, Nunjucks templates, plain CSS, the i18n split, no hardcoded prices in templates, no new build tooling.
+
+**Read `CLAUDE.md` and `README.md` first** — follow the data-driven pattern, filter/shortcode conventions, logo/passthrough rules, and i18n scaffolding described there.
+
+---
+
+## HARD RULE — no prices anywhere on the public site
+
+**No dollar figures, no "starting at," no ranges, anywhere in the built site.** Pricing lives only in a PDF guide sent on request. Price fields still exist in the JSON data files (for internal use and future PDF generation) but **must never be rendered in a public template**. Add a build-time check: grep the rendered `_site/` output for `$` in page content and confirm none appears in pricing context. If a price would surface on a page, that's a bug.
+
+The public site's job: explain *how* pricing works and *what* exists, then capture the lead via two CTAs — **"Request the pricing guide"** and **"Inquire"**. Every interested museum should identify itself before it sees a number.
+
+---
+
+## TASK A — Replace the outdated pricing model
+
+The current `packages.json` (Exhibit One / Gallery / Flagship / Multi-Site, build+annual prices) is from an older model. Replace the data model with the current one. Update the JSON so the data is correct and internally consistent; the public templates render names and descriptions only (never prices — see hard rule).
+
+1. **`packages.json` → Studio tiers, one-time.** Three objects:
+   - Studio 1 — `oneTimePrice` 2500, features: "1 published exhibit", "1 theme"
+   - Studio 3 — `oneTimePrice` 7000, `badge` "Most chosen", features: "3 published exhibits", "All themes"
+   - Studio 5 — `oneTimePrice` 10000, features: "5 published exhibits", "All themes + custom branding"
+   - Add a shared-features string rendered once beneath the three cards: "Every Studio includes the map builder, timeline, English/French translation, web + touchscreen output, and hosting."
+
+2. **New `maintenance.json`** — M&S annual tiers: Studio 1 (or a ready-to-go exhibit) 2500, Studio 3 3500, Studio 5 4500. Plus a coverage string ("Covers hosting & uptime (or on-premise server care), software updates & new features, screen monitoring & content sync, staff support by email & phone, security patching & backups.") and the footnote "Screens and on-premise add-ons include their own yearly maintenance, shown under Deployment."
+
+3. **New `deployment.json`** — Cloud (included), On-Premise Server (+30% one-time, then +30%/yr), Gallery Screen (2500 one-time, then +500/yr), Custom Web Address (250 one-time; subdomain free).
+
+4. **`aitools.json` → "AI & community tools."** Four items with the fuller descriptions:
+   - Visitor Chatbot — "A conversational guide on your gallery screens and website, answering visitor questions using only your approved exhibit content — so answers always stay accurate and on-brand."
+   - Research Chatbot — "A staff-only research assistant that searches across your full licensed archive in plain English, surfacing sources fast for exhibit development and visitor inquiries."
+   - Document Transcription — "Turns scanned letters, logs and documents into searchable, quotable text — so your archive becomes something visitors and staff can actually find things in."
+   - Community Contributions — "Community photo & story uploads with built-in moderation — nothing publishes without approval. Includes AI pre-screening & audit log."
+
+5. **New `readymade.json`** — ready-to-go exhibit packages ("a finished, researched guided exhibit with its animated map — Studio included, ready to publish in weeks; growing library"). Entries: Dieppe, 419 Bomber Squadron.
+
+6. **`historicalCollections.json` → keep per-collection objects** (the catalogue uses them) but they carry names/descriptions/coverage, not public prices. Reframe any pricing-page reference as "we'll recommend the right fit — request the pricing guide," never a printed grid.
+
+7. **`extras.json`** — keep worked-example *inputs* in JSON for future PDF use, but the worked examples **do not render on the public site**. Remove the hardware-range and installation-timeline references from public pricing templates (they no longer appear under the new model).
+
+8. **Rework `/pricing/`, `/platform/`, and the home pricing teaser** to the new model with **zero prices**:
+   - Intro line: "Interactive map exhibits for museums and heritage sites — any story that unfolds across a place. You buy the software once, then pay a yearly plan to keep it running."
+   - **Three ways to start** cards: *License a ready-made exhibit* (Fastest) — "A finished exhibit — Dieppe, 419 Bomber Squadron — live in weeks." · *We build it for you* (Most popular) — "Our team researches, writes and builds a guided map-story that carries visitors through your history, chapter by chapter." · *Build it yourself* (Most control) — "Your staff create exhibits in Studio, our builder."
+   - **What a Studio is** (no prices): the builder, running on the Frame 44 Atlas platform; exhibits run on your website and on gallery touchscreens; every Studio includes the map builder, timeline, EN/FR translation, web + touchscreen output, and hosting.
+   - **Custom builds:** "We create guided map-stories for any history rooted in place — a regiment's war, a ship's voyages, a town's growth, an expedition's route. Full archival research, writing, map animation and Studio build, shaped to your collection." (No price.)
+   - **Deployment options** (Cloud / On-Premise / gallery screens / custom web address) described by name only.
+   - **AI & community tools** described by name + description only.
+   - **Historical data:** described, with a link to `/catalogue/`.
+   - **Trust strip:** "Bilingual by design (English/French) · Runs offline on secure networks · Your content stays yours · Grant-ready paperwork included · Built for museums of every kind."
+   - **Dominant CTA, top and bottom of `/pricing/`: "Request the pricing guide"** — a short form (name, institution, email, optional message) that emails info@frame44.com; the reply sends the current pricing guide PDF and books a call. Use the site's existing contact/mailto pattern if no form backend exists (a structured `mailto:` with subject "Pricing guide request" is acceptable until a form backend is added — flag as TODO).
+   - Retire old package names (Exhibit One / Gallery / Flagship / Multi-Site) everywhere they appear.
+
+9. **Confirmed values:** set `contactEmail` to **info@frame44.com** and `contactEmailConfirmed: true` in `site.json`. Update the `mailto:` on the contact page accordingly.
+
+---
+
+## TASK B — New `/catalogue/` page
+
+A browsable catalogue of licensable data and exhibits at `src/catalogue/index.njk`. **No prices** — every tile ends in an **"Inquire"** CTA (structured `mailto:` to info@frame44.com with a subject naming the item, or a link to the contact page). Data-driven from JSON like the rest of the site.
+
+Make both `/catalogue/` and `/data/` resolve here (alias or redirect), because the pricing guide PDF links to `frame44.com/data`. Add `/catalogue/` to the main nav.
+
+Three groups:
+
+1. **Ready-to-go exhibits** (from `readymade.json`) — image tile each (Dieppe, 419 Bomber Squadron): thumbnail, title, one-line description, "guided map-story" framing, "Inquire" button, plus a "new exhibits added regularly" note.
+
+2. **Data collections** (from `historicalCollections.json`) — tiles for: Project '44 WWII mapped data (with a coverage tag, e.g. "First Canadian Army · NW Europe & Italy · 1943–45"), War diaries (digitized, searchable primary sources), Story maps (guided narratives), Project Athena (Afghanistan photo archive), Project Friction (Gulf War). Each tile: thumbnail, description, a **coverage/scope tag**, "Inquire" CTA. The coverage tag answers a regimental museum's first question — "do you have my unit?" — at a glance.
+
+3. **Maps & imagery** (new `cartography.json`) — the differentiator: Historical basemaps (GSGS series, army-group situation maps, period projections), 1944–46 aerial imagery, Historical site layers ("a site mapped through time"). Each tile: thumbnail, description, "Inquire."
+
+Plus a closing **"Don't see your subject?"** tile → custom research build → contact CTA, so non-military museums (maritime, civic, settlement) see themselves in the catalogue.
+
+**Images:** screenshots will be supplied at `src/assets/images/catalogue/{dieppe,419sqn,aerial,wardiary,basemap}.jpg`. For any tile whose image isn't present yet, use the existing SVG-placeholder approach and flag it as a TODO. Follow the README's logo/passthrough conventions.
+
+---
+
+## Guardrails
+
+- **No prices in any rendered public page** (the hard rule above). Price fields live in JSON for internal/PDF use only.
+- **Never describe Frame 44 as owning Project '44's research.** Correct framing: Frame 44 licenses data from Project '44 (CRMA). Footer/data lines read "Data licensed from Project '44 (CRMA)."
+- **Two product names only: Atlas** (the platform) and **Studio** (the builder). Never "Enhanced Content Builder" or "ECB"; never coin new product names. The kiosk output is "gallery screens"; the web output is "web exhibits."
+- **Don't invent** prices, coverage claims, collection names, testimonials, or team bios beyond what's in the data files. Anything unknown → `<!-- TODO -->` and list it at the end.
+- Follow the existing i18n pattern (strings in `src/_data/i18n/en.json`), keep the `/fr/`-ready structure intact.
+
+## Definition of done
+
+- `npm run build` succeeds; `npm run serve` renders cleanly, responsive 360–1440px.
+- **Zero dollar figures anywhere in `_site/` page content** (grep to verify).
+- `/pricing/` sells the model and drives "Request the pricing guide"; `/catalogue/` (and `/data/`) browse-only with "Inquire" CTAs.
+- Old package names (Exhibit One / Gallery / Flagship / Multi-Site) appear nowhere in the built site.
+- `contactEmail` is info@frame44.com and confirmed.
+- A README/CLAUDE.md note added documenting the new data files (`maintenance.json`, `deployment.json`, `readymade.json`, `cartography.json`) and the no-public-prices rule.
+- Final message: list every `<!-- TODO -->` placeholder still needing input (screenshots, form backend, fonts, museum copy, team bios, OG image).

docs/initial-prompt.md

@@ -0,0 +1,115 @@
+# GOAL
+
+Build a complete, production-ready marketing website for **Frame 44 Technology Inc.** using **Eleventy (11ty v3)**, to replace the current frame44.com. The current site is too small for what the company now sells; this build needs room for the full product line, pricing, and historical data collections.
+
+Work iteratively: scaffold the project first, then build page by page, showing me progress as you go. Ask before making assumptions about content I haven't provided.
+
+---
+
+# CONTEXT — WHO FRAME 44 IS
+
+Frame 44 Technology is a Canadian software company. We build **map-native interactive exhibit software for museums, historical societies, and heritage sites** — touchscreen kiosks and web exhibits where visitors explore historical events on live maps with timelines, story panels, and imagery.
+
+Critical positioning rule (never violate this):
+- **Project '44 is NOT Frame 44.** Project '44 (run by the nonprofit CRMA) is Frame 44's first and biggest customer, and Frame 44 **licenses historical data from** Project '44 and its sister archives. Never write copy implying Frame 44 owns Project '44's research or that the product "ships with" it. Correct framing: "The platform behind Project '44, available for your story."
+- Reference installations that ARE fair game to showcase: permanent kiosk installations at the **Victory Museum in Grootegast (Netherlands)** and the **Holten Canadian War Cemetery visitor centre (Netherlands)**.
+
+Audience: museum directors and curators — often non-technical, often at small institutions, often writing grant applications. Plain language everywhere. Explain jargon or don't use it.
+
+---
+
+# TECH REQUIREMENTS
+
+- **Eleventy v3**, Nunjucks templates, no client-side framework. Minimal vanilla JS only where needed (mobile nav, pricing toggle if any).
+- All pricing/product content lives in **`_data/` JSON files** (e.g. `_data/packages.json`, `_data/collections.json`, `_data/aitools.json`, `_data/extras.json`) so prices update in one place and templates render from data. No prices hardcoded in templates.
+- Plain modern CSS (custom properties, grid/flex). No Tailwind, no CSS framework.
+- Fully responsive, mobile-first.
+- Accessibility: WCAG 2.1 AA. Semantic HTML, skip link, focus states, alt text, color contrast ≥ 4.5:1 for body text.
+- Performance: no web-font bloat (2 families max, self-hosted woff2), lazy-loaded images, target Lighthouse 95+ across the board.
+- SEO: per-page titles/descriptions, Open Graph tags, sitemap.xml, robots.txt, JSON-LD Organization schema.
+- Build output to `_site/`, deployable as pure static files (will likely be hosted on Netlify/Cloudflare Pages — include config for both, ask me which).
+- Structure the site so an **/fr/ French locale can be added later** without restructuring (i18n-ready folder + data layout, but build English-only for now).
+
+---
+
+# DESIGN SYSTEM
+
+- Brand red: **#DF272F**. Dark ink: **#1B1D21**. Body text: #24262B. Muted: #6A6E76. Lines: #E3E5E8. Light bg: #F6F7F8.
+- Logo: white + red mark (I will drop the file into `assets/` — use a placeholder reference `assets/logo.png` for now). Logo needs a dark background to be visible → dark header band with red underline accent, matching our print materials.
+- Overall aesthetic: clean, modern, cartographic-adjacent — subtle map/topographic texture is welcome as a background accent, but do NOT theme the whole site like a vintage map. Professional first.
+- Typography: one strong grotesque for headings (e.g. Schibsted Grotesk), one clean sans for body (e.g. Inter). Self-host both.
+- Red is reserved for: prices, primary CTAs, and one highlight element per view. Don't spray it everywhere.
+
+---
+
+# SITE ARCHITECTURE (pages to build)
+
+1. **Home (`/`)**
+    - Hero: "Map-native interactive exhibits for museums & heritage sites" + subline + primary CTA ("Book a conversation").
+    - Three-step plain-language explainer (reuse this copy):
+        - *An exhibit* is one interactive story — a map your visitors can touch and explore, with timelines, photos and text panels.
+        - *A gallery screen* is the physical touchscreen on your museum floor. The same exhibits also run on your website.
+        - *The builder* is the tool your own staff use to edit text, photos and maps — no technical skills needed.
+    - Reference installations section (Grootegast, Holten) with image placeholders.
+    - Pricing teaser (two-number model) linking to /pricing.
+    - Closing CTA band.
+
+2. **Platform (`/platform/`)**
+    - The Enhanced Content Builder: block-based builder (headings, fact panels, timeline cards, galleries, map buttons, overlay toggles, scenario buttons), live MapLibre map integration, themes, publish/sync workflow.
+    - Gallery screens / kiosk software: runs offline on secure networks, syncs when connected, monitored and supported.
+    - Web exhibits: same content, on the museum's website.
+    - "Your team can edit everything, forever" as a section, plus "Your content stays yours — exports in standard formats if you ever leave."
+
+3. **Pricing (`/pricing/`)** — render everything from `_data/`. Reproduce the two-number model prominently:
+    - Explainer: "Every package has two numbers: what it costs to build, and what it costs to keep running. That's it." Build year = one-time, fits project & development funding. Every year after = annual, sized for operating budgets.
+    - **Packages** (build year / every year after):
+        - Exhibit One — $7,500 / $2,900 — 1 interactive map exhibit built with our team; web-based & touchscreen-ready; full builder access; hosting, support & updates.
+        - Gallery — $19,500 / $6,500 — up to 5 published exhibits; first exhibit built by our team; touchscreen software for 1 gallery screen; all themes, 5 staff accounts.
+        - Flagship (badge: "Most installed") — $45,000 / $9,500 — bespoke build by our historian team; unlimited published exhibits; touchscreen software for 2 gallery screens; one new or refreshed exhibit every year; custom branding & priority support.
+        - Multi-Site — from $75,000 / custom — multiple locations, synced content; shared collections across sites; dedicated account historian; scoped & quoted per institution.
+    - Worked example: Flagship $45,000 + Campaign data licence $3,900 + Visitor chatbot $4,800 = **$53,700 build year · $18,200 every year after**, vs. comparable one-off custom installs typically starting near $67,000 with no updates, no builder, nothing new next year. Most installations live **8–16 weeks after signing** (TODO: confirm timeline).
+    - **Historical Collections** (licensed from Project '44 and its sister archives, CRMA — scoped to the story your museum tells):
+        - Story Packs (Dieppe, 419 Squadron & growing) — $1,900/yr each — pre-built, ready-to-publish exhibits from completed research projects.
+        - Gulf War Collection (Project Friction) — $2,500/yr — complete and museum-ready.
+        - Afghanistan Collection (Project Athena) — $2,900/yr — veteran-contributed, geotagged photos of your regiment's tours; pairs with Crowdsourcing.
+        - Second World War — Campaign/Regional (Project '44) — $3,900/yr — mapped unit positions, frontlines and war diary events for one campaign, operation or regiment.
+        - Second World War — Full Collection (Project '44) — $8,500/yr — includes the staff Research Assistant: plain-English questions, sourced answers from the full archive.
+        - Complete Archive — $12,500/yr — every collection, Research Assistant across all of it. Highlighted; "best value for Flagship & Multi-Site."
+        - Custom Research Build — from $12,000 **one-time · per project**.
+    - **AI Tools** ("Optional. Add to any package — you control what they can say."):
+        - Visitor Chatbot — $4,800/yr — answers visitor questions using only approved exhibit content and licensed data.
+        - Document Transcription — $3,000/yr — scanned archival documents into searchable text; 5,000 pages/yr included.
+        - Crowdsourcing — $2,400/yr — moderated community photo & story contributions.
+        - Complete AI Package — $8,000/yr (save $2,200/yr).
+    - **Extras**: Additional gallery screen $2,400/yr · Additional published exhibit $1,000/yr · Curator Care $6,000/yr (we maintain, refresh and update all content) · Done-For-You Exhibit $5,000–15,000 **one-time · per exhibit**.
+    - **Terms**: 3 years prepaid = 2.5× annual, 5 years prepaid = 4× annual, applied to "every year after" fees (worked example: Flagship 3-yr prepaid = $23,750 vs $28,500 annually). Hardware: touchscreens typically $3,500–$9,000 per screen installed (TODO: confirm range), supplied at cost + 15% or bring your own. Grant support: we provide statements of work, budgets and letters of support formatted for museum development and heritage funding applications.
+    - Reassurance band: ✓ Bilingual by design (full EN/FR visitor experience on every package) · ✓ Runs on secure networks (screens run offline, sync when connected) · ✓ Your content stays yours (exports in standard formats).
+    - All prices CAD, exclusive of taxes, hardware quoted separately.
+
+4. **Collections (`/collections/`)** — expanded page for the historical collections above: one section per collection with a short description, what's inside, and which museums it suits. Link back to pricing.
+
+5. **Museums (`/museums/`)** — case-study page: Grootegast and Holten installations with image placeholders and short write-ups (I'll supply final text and photos; scaffold with clearly marked placeholder copy).
+
+6. **About (`/about/`)** — company story: Canadian company, veteran-founded, the relationship with Project '44/CRMA stated correctly, the team (placeholder bios).
+
+7. **Contact (`/contact/`)** — "Every installation starts with a conversation. We'll scope your exhibit, prepare a grant-ready proposal, and price it to your funding — no obligation." Simple contact form (Netlify Forms or static mailto — ask me) + email. **Email is TODO — use `contact@frame44.example` placeholder and flag it.**
+
+Global: header (logo, nav, CTA button), footer (Project '44 licensing attribution line: "Historical data licensed from Project '44 (CRMA)", copyright, prices-CAD note).
+
+---
+
+# HARD RULES
+
+1. Never invent prices, statistics, testimonials, client names, or team bios. Anything you don't have: insert `<!-- TODO -->` placeholder and list it in a final TODO summary.
+2. Never describe Frame 44 as owning Project '44's research (see positioning rule above).
+3. All money renders from `_data/` files. Changing one JSON value must update every page that shows it.
+4. Mark the three unconfirmed values wherever they appear: contact email, hardware price range, 8–16 week timeline.
+5. Keep every page's copy in plain language a non-technical museum director understands on first read.
+
+# DEFINITION OF DONE
+
+- `npx @11ty/eleventy --serve` runs clean; all 7 pages render, responsive from 360px to 1440px.
+- Pricing page numbers match this document exactly.
+- Lighthouse: Performance/Accessibility/Best Practices/SEO ≥ 95 on Home and Pricing.
+- A README covering: build/deploy, where to edit prices (`_data/`), how to add a collection or package, and the planned /fr/ locale approach.
+- Final message: list of every TODO placeholder needing my input.