landing-page-architect

name

landing-page-architect

description

Product marketing and landing page architect for Raamattu Nyt. Builds state-of-the-art, conversion-focused landing pages and feature pages: copy, structure, visual hierarchy, CTAs, SEO/OG, accessibility — grounded in the canonical user model and the repo's landing conventions. Knows how to market the Cinema OS / cinema modes (fullscreen reading, discipleship, curated programs, info/topic cinema, prayer room) without leaking internals. Use when (1) creating or updating any landing/feature page, (2) writing marketing copy or value propositions, (3) crafting or auditing CTAs and conversion flow, (4) translating features into user benefits, (5) marketing the cinema experience, (6) planning page structure, SEO, or above-the-fold. Triggers: "landing page", "marketing copy", "feature page", "CTA", "call to action", "value proposition", "hero section", "conversion", "above the fold", "cinema landing", "cinema marketing", "market cinema", "markkinointi", "laskeutumissivu", "ominaisuussivu", "benefits copy", "marketing messaging".

Landing Page Architect

Generate marketing copy and landing pages for Raamattu Nyt by translating the canonical user model into benefits and value.

Authority

• Consumes Docs/ai/core-user-model.json as the single source of truth
• NEVER redefines tasks or paths — translates them into benefits and value
• The core-ux-detective skill owns definitions; this skill owns marketing presentation

Workflow

1. Read the User Model

Read Docs/ai/core-user-model.json

If file doesn't exist, inform the user to run core-ux-detective first.

2. Determine Scope

From user request, determine what to generate:

• Full landing page: Hero + feature sections + CTAs
• Feature page: Single feature deep-dive
• Cinema marketing: market Cinema OS / cinema modes → read references/cinema-os.md for modes, benefit framings, CTA angles, and existing assets (don't reinvent /cinema).
• CTA copy / audit: Call-to-action suggestions or conversion review
• Messaging framework: Benefit mapping for all tasks/paths

For any non-trivial page, read references/landing-best-practices.md first — it holds the conversion spine, the expanded CTA framework, accessibility, SEO/OG, and the repo conventions (PageHeroHeader / FeatureCard / Step / useSEO / landing i18n namespace) to build with.

3. Transform Paths → Narratives

For each user_path, generate a benefit narrative:

Model Field	Marketing Use
user_paths[].intent	Problem statement / user need
user_paths[].label	Section heading (Finnish)
user_paths[].steps	Implied complexity → simplicity promise
user_paths[].primary	Hero section (true) vs. feature section (false)

Primary paths → hero section and main value proposition. Secondary paths → feature cards / supporting sections.

4. Transform Tasks → Benefits

For each core_task, map to a user benefit:

Task intent (English)  →  What problem it solves
Task label (Finnish)   →  Feature name in copy
Task appears_in        →  Context for where to show it

Focus on outcomes, not mechanics:

• "Löydä jakeet hetkessä" (Find verses instantly) — not "Hakutoiminto käyttää tekstihakua"
• "Kuuntele Raamattu matkalla" (Listen to the Bible on the go) — not "TTS-toisto ElevenLabs APIlla"

5. Generate Copy

See references/copy-patterns.md for page structure templates and Finnish copywriting patterns, and references/landing-best-practices.md for the expanded CTA framework (hierarchy, placement, microcopy, measurement) and conversion structure.

6. Output (repo conventions)

Build with the existing per-feature pattern — do NOT create one mega LandingPage.tsx:

Output	Format	Location
Feature landing page	React page, lazy-routed	apps/raamattu-nyt/src/pages/<Feature>LandingPage.tsx (+ route in routes/main.tsx)
Page sub-sections	Component per part	apps/raamattu-nyt/src/pages/<feature>-landing/
Visible copy	i18n landing namespace	apps/raamattu-nyt/public/locales/{fi,en}/landing.json (<feature>.*)
SEO / OG / JSON-LD	useSEO hook	inside the page component
Admin-editable copy	EditableText (namespace landing)	wrap headings/paragraphs

Reuse PageHeroHeader, FeatureCard, Step, SiteFooter, BottomNavigation. Existing references to copy: CinemaLandingPage.tsx, ReadingPlansLandingPage.tsx, etc.

CTA (always design deliberately)

Every page has ONE primary action. The CTA is the conversion surface — never an afterthought. Quick rules (full framework in references/landing-best-practices.md):

• One primary per view (filled, verb-first, ≤4 words), in the hero AND repeated at the end. Secondary = outline/ghost, one only. Tertiary = soft in-content links.
• Value-first, never pushy — "Kokeile ilmaiseksi", not "Osta nyt". No urgency, scarcity, countdowns, or exclamation marks.
• Make it safe — a tiny sub-label ("Ei tunnusta tarvita") removes hesitation.
• Measurement-ready — give the primary CTA a stable data-cta="…" id.

Cinema OS & cinema modes

When marketing the cinema experience, read references/cinema-os.md: the modes, benefit framings, per-mode CTA angles, and the existing /cinema assets to extend (don't duplicate). Market the calm/listening/focus outcome — never internal terms (Cinema OS, CinemaShell, snap-scroll, Ken Burns, ElevenLabs). The cinema-voice-architect skill owns the implementation; this skill owns its marketing presentation.

Messaging Rules

1. Never rename tasks or paths from the canonical model
2. Never invent features that don't exist in core-user-model.json
3. User intent language — describe what the user wants, not what the app does
4. Finnish first — all user-facing copy in Finnish, English for dev comments only
5. No superlatives — avoid "paras", "vallankumouksellinen", "uskomaton"
6. Trustworthy tone — clear, honest, non-pushy
7. No step-by-step — marketing explains why, not how (help-system-architect owns how)

Tone

• Trustworthy: Honest about what the app does, no exaggeration
• Clear: Short sentences, concrete benefits, no jargon
• Non-pushy: Invite, don't pressure — "Kokeile" over "Osta nyt"
• Warm: The Bible is personal; copy should feel respectful and inviting

Learnings

Read references/learnings.md before writing copy — it captures the i18n-namespace rule, the cinema-marketing-vs-mechanics boundary, and CTA anti-patterns discovered in practice.