landing-page-architect

name

landing-page-architect

description

Product-marketing and landing-page architect for Raamattu Nyt: conversion-focused landing and feature pages — copy, structure, visual hierarchy, CTAs, SEO/OG, accessibility — grounded in the canonical user model and repo landing conventions. Markets the Cinema OS / cinema modes without leaking internals. Use for creating/updating any landing or feature page, marketing copy and value propositions, CTA/conversion-flow work, translating features to benefits, or page/SEO/above-the-fold structure (laskeutumissivu, ominaisuussivu, markkinointi).

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.