# 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.